提升移动端交互体验，请尝试这些细微的UI动效

Sponsor

著名魔术师达里尔·菲茨基（Dariel Fitzkee）曾经说过，“魔术既要有细节也要有表演。”交互设计就是这样。设计师们想把页面布局作好，如果细节处理不好，解决方案便会失败。魔术就在于细节。这就是为什么精心设计的微交互会让体验大幅度提升。

显示系统状态

JakobNielsen的第一个启发式用户界面设计声明：“系统应该始终在合理的时间内做出适当的反馈让用户了解正在发生的事情。”这意味着用户界面应该通过提供反馈让用户及时了解正在发生的事情。应用程序不应该让用户猜测——它应该告诉用户发生了什么，微交互可以通过适当的视觉反馈帮助用户理解。

数据上传和下载过程是应用微交互动画的绝佳机会。

数据下载动画 (Image: Nick Buturishvili)

另一个动画是“下拉刷新”，它在移动设备上表示内容更新过程。一个令人愉快的刷新动画可以让用户咯咯地笑。

下拉刷新（图片：Toma Reznichenko）

重点：动画提供应用程序进程状态的实时通知，使用户能够快速了解正在发生的事情。

使按钮和操作可感知

用户界面元素，如按钮和控件，即使它们位于一层玻璃的后面，也应该是可感知的。按钮可以模仿常见物理对象的交互。简单的说，你可以通过对用户输入的视觉响应来增加清晰度。

（图片来源：谷歌）

重点：视觉反馈之所以起作用，是因为它能满足用户对确认的自然需求。点击一个应用程序感觉很好，因为你知道发生了什么。

创建有意义的过度

你可以在导航之间平滑的动画向用户传递信息，解释屏幕上元素排列的变化或强化元素的层次结构。

图标可以从一种形状变成列外一种形状，在不同的时间提供双重功能。

（图片来源：谷歌）

动效设计可以有效的引导用户的注意力，既可以提供信息，也可以给用户带来快乐。这对移动设备和智能手表帮助非常大，因为在这些屏幕上无法输入大量的信息。

Apple的ios UI 的转场就是一个很棒的例子。在下面的示例中，用户选择文件夹或应用程序并放大到其详细视图（或直接到应用程序的主屏幕），

（图片来源：Rian Van Der Merwe）

另一个很好的例子是通过颜色和持久元素在两个状态之间创建视觉连接的动画。这使得过渡平稳而轻松。

重点：微交互能够在页面之间建立可视连接，并增加UI的清晰度。

帮助用户开始使用

微交互在用户入门期间是非常有用的。入门流程中完美的用户体验和动画会对首次使用该应用程序的用户产生巨大影响。他们通过突出显示最重要的功能和控件，在应用程序启动后指导和教育用户。

图片：Ramotion

重点：微交互可以展示信息并帮助用户有效地实现目标。

突出显示UI界面中的变化

微交互能够引起用户的注意。在很多情况下，动画用于吸引他们注意重要的细节（例如消息通知）。但是，请确保动画具有功能性，适用你的用户。

通知（图片来源：Arjun Kani）

重点：微交互可以为用户提供良好的视觉提示。

添加令人愉快的细节

微交互动画的最基本用途是过渡。但是，当动画以超出标准操作范围的方式使用时，应用程序能够真正的取悦用户。下面的按钮能够完美地改变状态并提供双重功能：通知用户并创造一个奇迹。

社交媒体分享（图片：Kei Sato）

重点：时刻关注用户情感，这在交互中起着非常重要的作用。

设计微交互时应该考虑什么？

当你创建包含过多元素的视觉设计时，请记住以下几点：

1、使微交互几乎不可见且完全正常。

确保动画符合功能目的，不会感到尴尬或恼人。对于频繁和次要的操作，响应应该是适度的，而对于不常见和主要的操作，响应应该更加强烈。

2、保持持久

微交互必须能够长期使用。在第一百次使用后，第一次看起来有趣的东西也可能会变得烦人。

3、遵循Kiss原则

过渡设计的微交互可能是致命的。微交互不应该使屏幕过载，导致长时间的加载过程。相反，他们应该通过即时传递有价值的信息来节省时间。

4、不要从零开始

你要时刻了解目标受众及其背景。利用这些知识使你的微交互更加精确和有效。

5、与其他UI元素创建视觉和谐

微交互应该与应用程序的风格相匹配，帮助产品建立品质感。

作者：Nick Babich
原文：www.smashingmagazine.com/2016/08/experience-design-essentials-animated-microinteractions-in-mobile-apps/
译者：Coldrain1
个人主页：i.ui.cn/ucenter/310170.html

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。