（翻译）移动UX中的动画设计

经过精心设计的动画会为用户体验大大加分。设计师秉承以人为本的设计理念，将用户摆在第一位。一旦用户发现了app中的动画，他们会感到非常愉悦。

作为设计师，设计动画效果固然重要，但同时需要了解动画的“润物细无声”这一特点，因为你需要创建的动画能完成一项任务，充满人性化。

动画的好处

移动app中的动画有明确的逻辑意义。它可以减少认知负担，避免应用状态发生改变时产生一片空白，在空间关系上建立更好的回忆机制。还有一点：动画让用户界面栩栩如生。

理想状态下，内置动画应该：

对用户操作提供明确反馈

为用户显示系统状态

引导教育用户如何与界面进行互动

视觉反馈

视觉反馈在用户设计中非常重要。在现实生活中，按钮和控件会对我们的动作给出反馈，这也符合我们对于事物的预期。有反馈的交互设计通过对用户的输入给出逻辑式的回应，从而鼓励用户对app进行深层次的探索。当用户输入时，系统应给出即时的视觉确认。

按钮和控件

尽管按钮和控件等用户界面元素被覆盖在屏幕玻璃下方，它们依然是可被感知。为了弥补现实与虚拟之间的鸿沟，动画被用来确认交互效果，看上去就像和现实操作中一样。

采用水波动画确认输入效果

贴士：

视觉反馈效果很好，这是因为它们符合用户对于认知的自然预期。随便点点应用中的这儿哪儿，你都明白现在发生了什么，这种感觉棒极了。

系统状态

用户希望掌握应用状态，希望应用的反馈符合心理预期。甚至可以说，用户是不喜欢惊喜的。动画提供了应用进程状态的实时提醒，使用户可以快速了解目前正进行的项目。

来源：dribbble

这种动画中非常著名的一类是“下拉刷新”，一般紧跟着的是一次内容更新的过程。

来源：dribbble

动画对于启动页设计也非常有帮助。在启动页流程中加入流畅的转场效果和精美的动画会给用户留下一个好印象。

小贴士：

为系统状态提供实时反馈，让用户快速了解当前情况，明白自身所处位置。

有意义的转场效果

你应该使用动画来实现平滑的转场效果，让用户从不同的导航之间切换，向用户解释元素编排的变化规律，加强元素层级之间的联系。动效设计可以有效地吸引用户的注意力，既将有用的信息告诉给了用户，又让他们感到愉悦。

用户选择列表中的一块卡片，放大查看详情

视觉效果连接转场

你应该使用颜色和恒定不变的元素来为不同的转场状态之间创造视觉关联。在两个不同的视觉状态之间切换需要做到简洁、平滑、轻快。

移动一个特定的元素使得转场效果变得清晰

层级计时

动画有助于区分信息层级，通过创建视觉引导曲线来向用户传达哪块内容是最重要的。

避免让人沮丧的转场效果，例如下图所示。

所有的元素有着同样的效果，完全不能提示重点

转场元素的时间顺序应该像下图一样顺滑。

来源：materail design

持续作用的动画效果

转场中的对象应该做有规律的运动。

避免像下图一样做杂乱无章的运动，因为它会分散用户注意力。

毫无规律可循的动画。来源：material design

令人愉悦的细节

动画最基础的应用在于转场，但如果一个app可以在基础功能之外使用一些动画效果，那就会让用户感到愉悦。动画可以存在于所有的组件内，以各种方式表现，如细节处的图标，或关键帧转场等等。

从一张图片转换为另一张图片的图标，在不同状态下提供不同的功能。来源：material design

有趣

动画效果有着鼓励用户与应用进行交互的功能。它们可以调动用户的同理心，提升用户体验。

行走的菜花

为了动画而动画

为了动画而动画，产出的一般都是不好的设计。当一个动画和功能目标相违背时，它会让人感到厌恶。同时要有时间性的概念——动画播了第100次的时候会不会让人烦，它是否对所有用户都一样清晰明了？

小贴士：带着目标去设计动画效果。不要仅仅为了取悦用户而设计，我们应该更注重动画对用户产生的实际效果。

结论

谨慎对待设计。对每个细节的重视是成功的关键，让我们设计的人机界面更易于使用。精心打磨的动效让设计师可以更高效地传情达意。你设计的产品易用性越好，用户就越有可能去使用。