原文链接：The ultimate guide to proper use of animation in UX
作者：Taras Skytskyi
翻译：线框BOY
界面动画用来显示屏幕之间的交互，解释如何使用应用，或者只是简单地吸引用户的注意力。但是现在的界面动画很难给人留下深刻的印象，甚至很难给人带来惊喜。
在浏览关于动画的文章时，我发现几乎所有的文章都只描述了关于动画的特定用例或一般事实，但是我还没有遇到任何一篇能够清晰而实际地描述关于界面动画所有规则的文章。
在这篇文章中，我不会写任何新的东西，我只想把所有的主要原则和规则集中在一个地方，这样其他想要了解界面动画的设计师就不必搜索其他的信息。
动画的持续时间和速度
当元素的状态或位置发生改变时，动画的持续时间应该足够慢，以便让用户有可能注意到这些变化，但同时也要足够快，以免引起用户等待。
大量研究发现，界面动画的最优速度在200500毫秒之间。大量研究发现，界面动画的最优速度在200500毫秒之间。这些数字是根据人脑的特殊性质得出的。任何小于100毫秒的动画都是即时的，根本无法识别。而超过1秒的动画则会给人一种延迟的感觉，因此对用户来说很无聊。
在移动设备上，Material Design设计指南还建议将动画的持续时间限制在200-300毫秒。至于平板电脑，持续时间应该增加30%——大约400450毫秒。原因很简单：屏幕的尺寸更大，所以当物体改变位置时，它们移动了更长的路径。在可穿戴设备上，持续时间应该相应地缩短30%——大约150200毫秒，因为在较小的屏幕上，移动的距离更短。
网页动画则是以不同的方式处理。由于我们已经习惯了在浏览器中几乎是瞬间打开网页，所以我们希望在不同状态之间也能快速切换。因此，网页动画的持续时间应该比移动设备短2倍——150~200毫秒。如果持续时间过长，用户会不可避免地认为电脑死机或互联网连接有问题。
但是如果你是在网页上创建一个装饰性的动画，或者试图去吸引用户对某些元素的注意，请忽略上面这些规则。在这些情况下，动画的持续时间可以更长。
您需要记住，无论平台是什么，动画的持续时间不仅取决于移动的距离，而且还取决于对象的大小。较小的元素或细微变化的动画应该移动得更快。因此当动画包含大而复杂的元素时，如果它持续更长一点的时间，看起来会更好。
当界面内元素发生碰撞时，碰撞的反馈必须按照现实的物理规律均匀分布。所以，最好避免使用弹跳效果，并且只有在有意义的特殊情况下才使用它。
物体的移动应该是清晰和锐利的，所以不要使用动态模糊效果。即使是在现代移动设备上也很难重现这种效果，而且它根本没有在界面动画中使用。
列表项（新闻、电子邮件列表等）的出现间隔应该非常短。新元素的每次出现时间应该持续20到25毫秒。元素的缓慢出现可能会惹恼用户。
缓动
缓动有助于使物体的运动更加自然。这是动画的基本原则之一，在《生命的幻觉：迪斯尼动画》一书中也有详细的描述。这本书由两位迪斯尼动画大师——奥利·约翰斯顿和弗兰克·托马斯撰写。
为了让动画看起来没有机械感和人工刻意为之，物体应该以某种加速度或减速度运动——就像物理世界中的所有活物体一样。
线性运动
不受任何物理力影响的物体是线性运动的，换句话说，就是匀速运动的。正因为这个事实，这种运动在我们看来是非常不自然和人为的。
所有应用中的动画都使用了动画曲线。我将试着解释如何阅读它们以及它们的含义。该曲线显示了对象的位置(y轴)在相同的时间间隔(x轴)内的变化。在当前情况下，运动是线性的，所以物体在相同的时间移动相同的距离。
线性运动只能在对象改变颜色或透明度时使用。一般来说，当一个对象不改变它的位置时，我们可以用它来表示状态。
缓入（Ease-in）或加速曲线
我们可以从曲线上看到，开始时物体的位置变化缓慢，之后速度逐渐增加。这意味着物体在以一定的加速度运动。
当对象全速飞出屏幕时，应该使用这个曲线。这些可以是系统通知，也可以是界面内的卡片。
但是请记住，只有当对象永远离开屏幕并且我们不能召回或返回它们时，才应该使用这种类型的曲线。
动画曲线有助于表达动画正确的情绪。在下面的例子中，我们可以看到所有物体的运动时间和距离都是一样的，但是即使是曲线上很小的变化也有可能影响动画的情绪。
当然，通过改变动画曲线，你可以使物体运动尽可能地接近真实世界的感觉。
缓出（Ease-out）或减速运动
这与渐快曲线相反，物体快速移动很长一段距离，然后慢慢减速，直到最后停止。
当元素从屏幕外部移入屏幕时，应该使用这种类型的曲线——元素先快速移入屏幕，并逐渐减速，直到完全停止。这也可以应用于从屏幕外部出现的不同卡片或对象。
缓入缓出（Ease-in-out）或标准曲线
这条曲线使物体在开始时获得加速度，然后慢慢地减速到零。这种类型的运动是最常用的界面动画。当你不确定你的动画中使用什么类型的动画曲线时，就使用标准曲线吧。
根据谷歌Material Design设计指南，最好使用不对称曲线，使运动看起来更加自然和真实。曲线的终点必须比起点更加突出，这样加速的持续时间才会比减速的持续时间短。在这种情况下，用户将更多地关注元素的最终移动，从而关注到元素的新状态。
当对象从屏幕的一个部分移动到另一个部分时，使用缓入缓出曲线。在这种情况下，可以避免动画过于引人注目或引起一些夸张的效果。
当元素可以从屏幕上消失，但是用户可以在任何时候将其返回到之前的位置时，应该使用相同的标准曲线。比如侧边栏导航等。
在这些例子中，遵循一个许多初学者忽略的基本规则-开始的动画并不等于结束的动画。就像侧边栏导航一样，它通过减速曲线出现，通过标准曲线消失。此外，根据谷歌Material Design，物体出现的时间应该更长，才能引起更多的注意。
贝塞尔立方（cubic-bezier ）函数是用来描述曲线的一种函数。它被叫做立方是因为它基于四个点。坐标为（0;0）的第一个点（左下）和坐标为（1;1）的最后一个点（右上）已经在图中定义出来。
在此基础上，我们只需要描述图上剩余的两点，这两点由贝塞尔立方函数的四个参数给出:前两个参数是第一点的x和y坐标，后两个参数是第二个点的x和y坐标。
为了用曲线简化你的工作，我建议使用easings.net和cub-bezier.com网站。第一个网站包含最常用曲线的列表，你可以将这些曲线的参数复制到原型工具中。第二个网站提供了一种处理曲线不同参数的可能性，可以立即看到对象将如何移动。
界面动效中的编排
就像在芭蕾舞编排中一样，主要思想就是从一种状态过渡到另一种状态时，将用户的注意力引导到一个流动的方向。
编排有两种类型——平等的和从属的交互。
对等交互
对等交互意味着所有对象的动画都遵循一个特定的规则。
在这种情况下，所有卡片的外观都被认为是一个流程，它将用户的注意力引向一个方向，即从上到下。如果我们不按照顺序去做，用户的注意力就会分散。所有元素同时出现也会很糟糕。
至于宫格视图，它有点复杂。在这里，用户的焦点应该是延对角线方向的，因此逐个显示元素不是一个好主意。一个一个的展示每个元素会让动画过长，用户的注意力会呈锯齿状，这是错误的。
从属交互
从属交互是指我们有一个中心对象，它吸引了所有用户的注意力，其他所有元素都服从于它。这种类型的动画给人以秩序感，更注重主要内容。
在其他情况下，用户很难知道要跟踪哪个对象，从而分散了注意力。因此，如果你有几个想要动画的元素，你需要清楚地定义它们的运动序列，并在同一时间内尽可能少的运用多个元素动画。
根据谷歌Material Design设计指南，当运动物体不按比例变换尺寸时，应沿圆弧运动，而不是沿直线运动。这样有助于使运动更自然。所谓“不成比例”，是指物体高度和宽度的变化通过增加/减少是不对称的，即以不同的速度进行（例如，卡片由正方形变成长方形）。
当对象按比例改变其大小时，将使用沿直线的移动。由于这种运动的实现更加容易，因此不对称圆弧运动的规律往往被忽略。看看实际应用的例子，你会看到线性运动的好处。
曲线上的运动可以通过两种方式来实现：一种是所谓的垂直向外运动——物体先做水平运动，再以垂直运动结束；第二个叫做水平向外运动，即物体先做垂直运动，再以水平运动结束。
物体在曲线上的运动轨迹必须与滚动界面的主轴重合。例如，在下一个示例上，我们可以上下滚动界面，因此，卡片以垂直向外的方式展开——首先向右，然后向下。反向移动的方式正好相反——卡片首先向上垂直升起，最后向左水平移动。
如果运动物体的路径彼此相交，它们就不能相互穿过。物体应该通过减慢或加速自身速度来为另一个物体的运动留出足够的空间。还有另一种选择——它们只是把其他物体推开。为什么呢？因为我们假设界面中的所有对象都位于同一个平面。
在另一种情况下，移动的物体可以高于其他物体。但同样不能溶解或通过其他物体移动。为什么？因为我们相信界面元素的行为符合物理定律，在现实世界中没有实体能够做到这一点。
总结
如果我们总结上述所有的规律和原则，界面的动画应该反映我们所知的现实世界的运动规律，如摩擦、加速等。通过模仿现实世界物体的运动，我们可以创建一个序列让用户了解从界面中期望获得什么。
如果动画构建正确，那么它就不会引人注目，不会分散用户对目标的注意力。如果是这样，你要么缓和它，要么根本不需要删除。这意味着动画不应该减慢用户的操作速度或阻止用户执行任务。
但是不要忘记动画是一门艺术而不是科学，所以最好在用户身上试验和测试你的设计。
参考资料
Discover the expanded Material Design motion guidelines
Школа мобильного дизайна — Анимация в интерфейсах
Designing Interface Animation: Meaningful Motion for User Experience
Creating Usability with Motion: The UX in Motion Manifesto
Jedi Principles of UI Animation
Getting started with UI motion design
