如何在UI设计中正确地使用UI动效呢？又该怎样通过动效来传递意图信息呢？这篇文章将给你答案。

在而今UI设计师满地都是的情况下，UI设计师除了日常的UI设计能力之外，要保持比较高的竞争力，还需要具备一定的动效能力。但是很多设计师在掌握了动效能力后，并没有能够很恰当地去使用动效。

那么怎样在UI设计中正确地使用UI动效呢？

在过去几年的时间里，高保真原型工具的爆炸式发展，给了设计师们一个创造详细交互动效的机会，设计师们花了很多时间去学习这些工具，然而很多设计师在原型工具的技术细节上迷失了方向。

设计师们必须后退一步，问一下动效的目的是什么？通过动效来传递意图信息，动效用来作为更好的向用户传递信息的工具，设计者应该避免使用那些妨碍用户操作体验的浮夸动效。

设计师可以利用动效来解决设计问题，比如：通过进入和退出动效来显示对象之间的连续性和关系，从减少认知成本到改进用户决策操作方面入手，有意义的动效可以让用户愉悦和高效。

一、减少认知成本

认知成本是完成一项任务所需的脑力劳动。

维基百科说：“沉重的认知负荷会对任务完成产生负面影响。”

当用户在网站上时，他们会收到大量的信息。因此，他们有选择性的注意力。“隧道视野”意思是他们直接专注于他们正在进行的屏幕区域，因此，用户不会看到屏幕上的所有内容。

作为设计人员，创建易于使用的界面非常重要，这释放了用户完成任务的精神努力。

设计师如何用动画来达到这个目的？

动效，当使用好时，通过有效的用户沟通反馈能减少用户的困惑。另外，通过释放用户的思想，注意力可以被吸引到更重要的事情上，比如：页面的“响应动作”。

二、吸引用户的注意力

NNgroup说：“使用动效的一个有效方法是吸引用户的注意力，吸引用户注意力的好处是——引导用户关注屏幕上的界面和元素之间的层次和关系。”

动效不需要直接在用户的视野中进行。NNgroup的文章解释说：

由于我们的生物学认识到外围的潜在危险，外围视图中的移动可以更快地吸引用户的注意力。然而，用户已经学会不去注意那些传统意义上的侧边栏和标题栏的横幅或弹出框，因此设计师必须确保UI和动画不遵循这些模式。设计师可以通过最大限度地减少单次发生的运动量，以及位于用户认为相关信息所在位置的动画元素，来避免视觉盲点。

三、可视化层次结构

设置页面元素加载到屏幕上的顺序可以传递页面的视觉层次结构，使用微妙的动画将向用户显示页面布局以及关注哪些内容，从而减少认知负担。

另外，通过对不同元素使用相同的动画，用户很容易理解元素被分组并且可以执行类似的动作，因为人类的头脑总是在寻找创造性的模式。

四、做出更好的决定

微交互（单个对象的转换）和宏观交互（对象之间的转换）中的动效可以通过系统为用户提供上下文之间的联系，动效还可以教会用户新的交互手势。动效完成后，用户可以快速了解信息如何组合在一起，从而做出更好的决策。

动效还有可以发现性，状态之间的转换可以传达单个对象的功能。例如：菜单图标可以转换为关闭图标以向用户显示同一按钮可以完成两个操作。

动效可帮助用户构建更好的空间信息心智地图，在小屏幕的时代，这是至关重要的，用户可以很容易地迷失在移动端小屏幕的迷宫中。但是，动效可以让用户通过返回屏幕间的步骤，来学习如何使用应用程序。

例如：用户通过右滑动进入到一个页面中，他们会发现如果想要回到主页面，他们可以向左滑动。为了确保视觉的可发现性，应结合动效。

五、新手入门

动画可以帮助创建新用户的上手入门，通过在正确的时间向用户展示正确的东西，设计师能够有一个高效的信息传递，渐进地信息传递使系统更容易被用户学习和使用。在向用户介绍应用程序的工作方式的同时，可以在新内容中加入轻松的动画，这有利于用户记住重要的事情。

六、制造惊喜

动画是给用户带来惊喜和增强用户体验的绝佳方式。但是，在尝试用动画取悦用户之前，设计师应该先满足用户的基本期望，并首先尝试消除体验不好的基本因素。否则，不会有令人愉快的动画效果。

动画的频率、持续时间和速度也会影响用户对系统的感知，这是设计师在创建动画时应考虑的。

理想的添加动效令用户愉悦的地方是用户真正需要动效的地方，而且你的动效也不应妨碍用户的行为。

频率

设计师应该考虑用户多久会看到一次动效。动效第一次看起来很新颖，可以让用户感到惊喜。但是，此后多次出现可能会变得烦人。在用户测试和反馈中，可以经常收集到类似的反馈。

八、持续时间

设计师应该意识到用户在放弃任务之前愿意等待动画或其他操作的时间。

NN组的研究发现：任何100毫秒（1秒=1000毫秒）的内容对用户来说是瞬间的。 理解动效需要一些时间，时间范围从150ms到350ms。

根据Val Head的说法：一般的动效持续时间指标应该在200ms-500ms之间运行。 因为这是一个指导方针，所以我们的目标是让动效看起来很自然。 用户认同看起来很熟悉的东西，所以最终取决于设计师的最佳判断。 当涉及动效运行多长时间时，速度太快，用户可能会错过它，速度太慢，用户可能会认为系统太慢。

九、速度

整体动效的速度会影响到用户的感知； 较慢的动效会导致用户感觉整个系统也很慢。 然而，动效可以用来隐藏加载延迟，并提高用户的参与感。

加载动效可以让用户占用视觉反馈，因此用户可以感受到更短的等待时间，动效中的周期数量也可以提高感知速度。 Facebook有一个骨架内容加载动画，这是传统加载的优雅解决方案。

Viget的一项研究发现：相比较一般的动效而言，人们会等待更长的品牌加载动效。

十、可用性

设计师应该考虑动画可用性。 对于患有前庭障碍（一种面对运动过快的物体会发生眩晕的病症）的人，运动会引起头晕，眩晕或恶心。 这是Apple iOS7可以关闭动画过渡和移动背景的原因之一。

视差滚动，一种背景移动速度比前景慢的方法，是运动的一个例子，如果使用不当，会导致恶心。 为了解决这个问题，设计师要考虑不让动效自动播放。 如果是由用户启动动效，他们将会更加准备，而且不会引起不适。

设计师应牢记以下几点，保证最佳的实际输出效果：

• 目标：与用户沟通的动画是什么？
• 焦点：用户目前的焦点在哪里 – 用户在哪里看？

运动力学：

• 频率：这部动画多久播放一次？
• 持续时间：此动画应播放多长时间？
• 速度：这部动画应该播放多快？
• 触发器：动画如何触发？通过用户操作？还是自动？
• 辅助功能：如果用户关闭动画，用户体验将如何受到影响？

原文作者：Naema Baskanderi

原文地址：https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5

本文由 @小贱剑 翻译发布于人人都是产品经理，未经作者许可，禁止转载

题图来自 Pexels，基于 CC0 协议