提升用户体验的7大微交互

众所周知,我们总是依据封面来判断书的好坏,聪明的设计师会创造实用有吸引力的界面。潜在用户可能会被吸引,但如何一直黏住他们呢?

要试着回答这个问题,所有一切都指向人本设计,其中用户是最主要的考量。以人为本:你的应用应该使用日常用语,包括情绪、口语,外观还要有一丝“诱惑力”。界面应当成为你的好朋友,时刻准备给出建议提升你的体验,让你会心一笑。

现在揭幕:是微交互在起作用。精确的说,这主要是界面附带的交互动画,使它更具表现力。优秀的动画能够:

  • 表达状态并提供反馈
  • 提升直接的操纵感
  • 将操作结果可视化

在用户体验中,关键是你如何对待用户,还有他们使用产品时的感受。极小的细节都值得加倍留心。微交互提供了用户所需的反馈,表达了当前运行状况。无论背后逻辑有多么复杂,都能使界面更亲切。

1. 显示系统状态

Jakob Nielsen在可用性原则启示第一条中描述:让用户始终知晓当前在发生什么。用户希望立马得到回应,但总有些情况下,网站需要一点时间等待操作完成。

那么,界面就应当在背景处显示图形,反映完成百分比。或是播放声音,让用户了解当前发生的事情。这个原则也关系到文件传输:不要让用户觉得无聊,给他们看进度条。即使是不太令人愉快的通知,比如传输失败,也应该以令人喜爱的方式展现。让你的用户微笑!

2. 突出显示变化

通常为了节省空间,应用会在需要时把某个按钮替换掉。有时我们需要展现通知,确保用户注意到了。动画可以吸引他们注意,不至于忽略你认为重要的信息。

3. 保持前后关联

在这个智能手机和小屏幕智能手表的时代,难以在屏幕上展现大量信息。有一种处理方式,是在不同页面之间保持清晰的导航。让用户理解什么东西来自何处,便能轻易回溯。有多种方式可以实现:

4. 非标准布局

继续之前的例子,微交互应当帮助用户理解如何操作非标准的布局,去除不必要的疑惑。照片前后滑动、滚动式图表和旋转角色都是很棒的选择:

5. 行动号召

除了帮助用户有效地操作应用,微交互也有鼓励用户操作的能力:持续浏览、点赞或分享内容,只因为这很有吸引力,用户不舍离去:

6. 输入的视觉化

所有应用中,数据录入都是最重要的元素之一。数据录入决定了用户所得结果的质量。通常,这部分很无趣,但微交互可以使它与众不同:

7. 使教程生动形象

当然,在应用发布后,动画可以教育用户。它突出一些基本功能和控件,排除用户在未来的使用中的障碍。


结论

所以,如果你重视用户体验,就应该从头到尾精细打磨界面,通过微交互与动画为它增色添彩。它会为你的项目赋予生命。

注意每个细节,是使人机交互易用的成功要诀。

原文链接

作者信息:DMYTRO SVARYTSEVYCH

Dmytro Svarytsevych is a Design Office Director at SoftServe, and a regular contributor to the SoftServe United blog. Dmytro has been in the industry for more than 13 years, specializing in User Interface design, Interaction design, Mobile design, Information Architecture and User Experience. At SoftServe, he is responsible for all User Experience touch points, defining and integrating a company-wide User Experience Strategy to facilitate consistent and flexible expertise growth, as well as applying UX best practices and methodologies to various SoftServe projects. More articles by Dmytro Svarytsevych

时间: 2024-12-09 10:11:41

提升用户体验的7大微交互的相关文章

用户体验7大微交互-棒极了

原http://blog.jobbole.com/89270/ 主要是运用交互的微动画来提升用户体验,十分受教,棒极了的几个交互动画 1. 显示系统状态 让用户始终知晓当前在发生什么.用户希望立马得到回应,但总有些情况下,网站需要一点时间等待操作完成. 那么,界面就应当在背景处显示图形,反映完成百分比.或是播放声音,让用户了解当前发生的事情.这个原则也关系到文件传输:不要让用户觉得无聊,给他们看进度条.即使是不太令人愉快的通知,比如传输失败,也应该以令人喜爱的方式展现.让你的用户微笑! 这个上传

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid App为什么会兴起编辑 1 1.2. 如何实现网页语言与程序语言的混合编辑 2 1.2.1. 多View混合型 2 1.2.2. 单View混合型 2 1.2.3. Web主体型 2 1.3. Hybrid App的瓶颈与未来编辑 3 2. Web App.Hybrid App.Native APP对比

网站建设从多方面做起提升用户体验【转】

网站的用户体验有哪些呢?在网站建设中又怎样提升用户体验呢?用户体验是一个非常广泛的定义.总的概括有七个方面.具体的我们一起来分析一下. 第一.网站的性能方面.这一个方面主要是从网站的加载速度角度分析得出的.网站选择的服务器是否稳定,在域名解析的时候是不是正常.曾经有做过相关的调查,一般定义为三秒以内为优加载速度,超过三秒,每提升0.1秒,那么网站就会流失1%的用户.所以说,网站的加载速度不仅影响了用户的体验,对网站的SEO优化也有一定程度的影响. 第二.网站的视觉效果的设计.网站在色彩的搭配上有

Hitpoint 财务本土化软件再推升级版 完美提升用户体验

基于用户体验的反馈,结合市场上同类产品最佳实践及Hitpoint潜心研发,HPFS财务本土化解决方案5.0 SP4应运而生,于2011年9月16日隆重发布.始终秉承客户第一,坚持提高客户财税体验的理念,HPFS财务本土化解决方案 5.0 SP4 更加注重用户的亲身体验,密切关注用户的切身需求. 相较以往版本,HPFS 财务本土化解决方案5.0 SP4新增了诸多提升用户体验的亮点,为用户获取更大收益.     系统数据处理能力大幅提升 对于数据量庞大的企业,在进行财务数据处理时,所需时间将会更短.

使用渐进式 JPEG 来提升用户体验

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同. Baseline JPEG 这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示.如果文件较大或者网络下载速度较

脸萌PM谈如何使用统计工具来提升用户体验

近日,“萌萌哒”头像火爆朋友圈,身边几个90后更是把头像换成身穿德国队服的运动宝贝.脸萌 APP 去年底上线,真火起来却则是上线三个月之后的事.其间,脸萌运营团队究竟做了什么?友盟对脸萌产品经理访谈,从数据统计层面解读这款 APP 火爆背后的运营故事. 脸萌自2013年11月开始使用友盟统计平台,在挖掘用户需求.提升用户体验及产品改版等方面,利用友盟数据有效的进行产品运营和推广决策.他们是如何部署统计平台的各个功能并以此来指导运营的? 一.善用自定义事件,深入了解用户的使用细节 除了日常数据(日

天搜科技:提升用户体验就是提升企业竞争力

导语:曾经风光无限的小鸣单车,如今成为了国内首家正式进入破产清算的企业,单车只能12元一辆贱卖,更是负债5000多万.作为长期关注互联网环境的天搜科技,其相关负责人指出:唯有重视用户体验,才能维持企业的可持续发展. "上帝欲使之灭亡,必先使之疯狂."这话用来形容如今的共享单车市场再合适不过,曾经风光无限.热火朝天的共享单车风口,如今却被挤压得成了危险的独木桥.最典型的例子,就是近日宣布破产的小鸣单车,这是全国首个共享单车破产案.不仅小鸣单车,卡拉单车.悟空单车.3Vbike.町町单车.

数据驱动设计:如何用A/B测试提升用户体验

文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 作者 | [美]罗谢尔·肯,伊丽莎白F.邱吉尔 内容出自<数据驱动设计:A/B测试提升用户体验>一书 来源 | 大数据(ID:hzdashuju) 导读:设计师最关注的可能就是提供良好的用户体验.良好的业务指标应时时把用户考虑在内.当希望借助数据更好地了解用户时,面临的第一个问题是选择哪些用户进行数据收集. 通过高效的实验方法收集用户数据,将在用户行为多样性.相似性.差异性及设计对用户影响等方面获

paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制

源地址:http://blog.csdn.net/attilax/article/details/12343625 paip.提升用户体验---c++ qt自定义窗体(1)---标题栏的绘制 效果图: 作者Attilax ,  EMAIL:[email protected] 来源:attilax的专栏地址:http://blog.csdn.net/attilax 第一步:去掉系统默认标题栏 1 第2步:添加自定义标题栏以及最小化,最大化.关闭按钮...还有左边的窗体小图标.. 2 第3步:添加标