［译文］如何合理使用 UI 动效？

2017-03-11 11:46:00

最近几年涌现出大量的原型设计工具，设计师们借助这些工具可以做出更为细致的动效设计。掌握这些工具少则需要几小时，多则几天。然而，在如此多的选择面前，很多设计师会感到迷茫。我们必须停下来回归一个问题：到底做动画（动效）的目的是什么？从意图上来说，动画是作为一种交流工具而存在的。设计师应该避免过度使用动画而对用户造成干扰。

我们应该有效利用动画来帮助解决一些设计上的问题，例如通过进入和退出动画来暗示多个对象之间的关系。通过减少用户的认知负荷来改善用户决策。有意义的动画能够在愉悦用户的同时引导用户。

减少认知负荷

认知负荷是指用户完成一项任务时所需要花费的脑力。维基百科说过：“过重的认知负荷会对完成一项任务产生负面的影响。”当用户浏览一个网页，眼前充斥着各种信息。结果导致用户的注意力全部集中于自己关注的信息上，从而忽视掉页面其他内容。

作为一个设计师，设计出易于使用的，能够减轻用户认知负荷的页面是至关重要的。那么我们如何通过动画来实现这一目标呢？良好的动效能够通过与用户间的反馈来减少用户的困惑。用户操作更轻松的同时，能够将注意力投放到更重要的内容上。

Dribbble — Marcus Forsberg

● 吸引用户注意

NNgroup（Nielsen Norman Group）提到：“合理运用动画的目的之一，就是吸引用户的注意力”。吸引用户的注意力，意味着能够引导用户关注页面之间及页面各元素之间的层级和关系。

动画并不一定要发生在用户的视线中， NNgroup的文章解释道，视线周边的运动能够更快地吸引用户注意，这源于生物学上人类能够快速对视线周边的潜在危险做出反应。但对于顶部菜单栏，侧边栏等这些有固定大小及区域的内容，用户已经比较熟悉，易于被忽视。为了避免这一点，当这些地方有动画时，应该尽可能的减少其他内容的动画，并且将动画设计在用户预期的地方。

● 视觉层级

页面元素以动画形式在屏幕上有序显现的过程，形成页面的视觉层级。一个微妙的动画就能够显示出页面布局并告诉用户此刻该关注哪里，以此来减轻用户的认知负荷。

此外，对页面中不同内容采用同一种动画形式时，用户能够很容易将这些内容归为一类，并且对其进行相似的操作（人脑趋向于为事物创建模式）。

做出更好的决策

单个对象的运动转变，以及对象间的运动过渡，可以让用户明白逻辑上的关系，并且让整个系统具有连续性。运动还能够教会用户新的交互方式及手势，优秀的动画能够让用户明白信息是以何种形式被整合在一起的，因此能够在这基础上做出更好的决策。

动画具有可发现性，我们通过一个对象的变形就可以实现两个状态的转换。例如：“菜单icon”和“关闭icon”之间的变形转换，可以告诉用户同一个按钮能够完成两个操作。

动画能够帮助用户完善大脑内的空间信息，这对于小屏幕来说是至关重要的。若没有良好的设计，用户很容易迷失在这一小方似迷宫的屏幕中。值得庆幸的是，通过动画，用户能够追溯屏幕与屏幕间的运动，更好的学习使用app。例如：通过右滑的动画进入到下一个层级的页面，一些用户通过尝试会发现若想回到之前的页面，可以采取左滑的形式。为了确保操作的可发现性，视觉功能可见性应与动画相结合。

● 新手引导

运用动画，我们可以创造交互式的新手引导。设计师们通过内容的渐进式呈现，在合适的时间给用户展现合适的内容。渐进式呈现的方式能够增加系统的易用性。页面上新内容的动画呈现可以让用户更清楚app是怎么运作的。最终，用户能够记住其中的重要内容。

创造愉悦感

动画可以让用户感到愉悦并且增强用户体验。需要注意的是，在运用动画之前，要确保软件流畅性并且满足用户的基本期望，否则再多的动画也只是无用功。动画的频率、持续时间以及速度等因素都会影响用户的感受，所以设计师在设计动画时需要充分考虑这些因素。

Dribble — Zee Young

当我们希望给用户惊喜时，我们可以采用动画的形式，例如：“免邮费”。（但要注意避免动画妨碍到用户）

●频率

动画出现的频率是设计师需要注意的。用户第一次看到动画时，会感觉到新颖和愉悦，但多次出现的动画会让用户变愉悦为苦恼。NNgroup（Nielsen Norman Group）在测试用户时，就有用户反馈：“这个动画第一次看感觉不错，看多了越来越烦人。”

●持续时间

设计师必须意识到用户愿意花费多少时间来等待一个动画完成，而不至于因为动画过长放弃当前任务。NNgroup的研究显示，在100ms以内的时间，对于用户来说称得上一瞬间。若需要用户理解，则动画时间要稍长一些，大概在150ms—350ms。根据一般动画的时间准则，这个时间在200ms至500ms，可使动画看起来更自然。用户能够识别那些看起来熟悉的动画，这就取决于设计师的判断。动画快慢只一线之差，太快会让用户错过，太慢则会让用户感觉系统运行缓慢。

●速度

动画的速度会影响用户感知，速度慢的动画会让用户觉得整个系统缓慢。另一方面来说，动画可以隐藏延迟，让用户感觉自己一直在使用中。

加载动画通过视觉形式分散用户的注意力，从而让用户感知到较短的等待时间。动画循环的周期数同样能够影响用户感知。facebook有一个框架内容加载动画，用一个优雅的品牌形象动画替代了传统的加载转轮，Viget的一项研究发现，相较于传统的加载动画，人们愿意花费更多的时间来等待品牌加载动画加载完成。

Dribbble — Ramotion

●无障碍性

设计师应该记住考虑动画的无障碍性。对于一些前庭障碍人群，运动会引起头晕、眩晕和恶心。这也是在苹果iOS7设计中，用户可选择关闭动画和运动背景的原因之一。举个例子，动画中不正确的使用视差滚动（背景移动慢于前景），会引起用户恶心症状。为了解决这个问题，设计人员不会让一个“大”动画自动播放。应该让用户在动画播放前有更多的准备而非措手不及。