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

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

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

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

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

  • 表达状态并提供反馈

  • 提升直接的操纵感

  • 将操作结果可视化

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

1. 显示系统状态

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

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

[[144186]]

[[144187]]

2. 突出显示变化

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

[[144188]]

04.gif

[[144189]]

3. 保持前后关联

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

[[144190]]

066.gif

4. 非标准布局

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

07.gif

08.gif

[[144191]]

5. 行动号召

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

[[144192]]

[[144193]]

10.gif

6. 输入的视觉化

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

[[144194]]

014.gif

[[144195]]

7. 使教程生动形象

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

071.gif

013.gif

[[144196]]

结论

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

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

责任编辑:chenqingxiang 来源: 可乐橙的博客
相关推荐

2015-07-22 17:24:18

交互设计提升体验

2015-05-05 17:28:50

云智慧APM

2010-10-11 14:42:49

Windows Pho

2021-04-20 15:48:40

应用策略F5AI

2010-03-18 20:19:16

2015-08-07 10:11:47

Web用户设计要点

2017-07-26 18:35:53

科胜讯

2022-03-25 10:23:40

用户体验APP优化

2016-04-18 09:18:28

用户体验设计产品

2014-01-03 14:15:59

手游用户体验设计交互方式

2012-09-19 13:18:37

复杂设计UI设计

2021-01-12 10:16:42

CSS 容器优化滚动

2011-03-23 09:53:54

良性循环产品交互用户体验

2012-07-04 10:28:36

jQuery

2019-07-10 11:46:39

网络安全DNS云计算

2021-04-19 13:41:12

Windows 10微软交互体验

2021-07-21 08:30:29

注册登陆交互设计

2020-12-24 06:57:13

用户体验虚拟现实人工智能

2013-02-26 11:00:26

华为SQIMBB
点赞
收藏

51CTO技术栈公众号