原文：https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
原作者：Taras Skytskyi
译者：Lucinda Lu
校对：Xuelun Fu
image
如今想把界面动画做到令人印象深刻甚至惊艳已经是很困难的事情。现在的动画主要用于表现在屏幕间的交互，说明如何使用这个应用程序或简单为了指引用户的注意力。 在各种探索关于动画的文章的过程中，我发现几乎所有的文章都局限在讲述某个使用案例，或者介绍动画的基本概念。 我还没有看到任何一篇文章着重关注如何让界面交互变得更加清晰，描述地更具有实践性。总之，在这篇文章中我不会提到任何新的东西，我只想把所有的主旨和准则综合到一处。这样其他想要开始设计界面交互动画的设计师们就不用四处搜寻多余的信息了。
1.动画的时长和速度 Duration and speed of the animation
当各个元素改变他们的状态以及位置时，动画的时长应当足够慢以确保用户们能注意到这些变化的可能性，但同时也要足够快以避免等待。
image
在动画中使用适当的时长。既不要让它太快，也不要慢得让人打哈欠
许多研究发现最佳的界面动画速度应当介于200至500毫秒(ms)。这些指数是基于特定的人类大脑属性的。任何少于100毫秒的动画都属于猝发性的，并且丝毫都不会被注意到。而任何长于一秒的动画都会产生延迟的感觉，因此会让用户感到无聊。
image
应该在交互中使用的动画时长
在移动设备设计中，Material Design准则建议把动画时长限制在200-300毫秒。在平板设计中时长应该增加30% - 大约介于400-450毫秒之间。原因很简单：屏幕尺寸越大，物体移动改变位置所需时间越长。在可穿戴设备界面设计中，时长应该相应缩短30% - 大约介于150-200毫秒之间，因为屏幕越小移动距离越短。
image
移动设备尺寸影响动画时长
网页动画则需要被区别对待。由于我们已经对在浏览器中打开即时加载的网页习以为常，同时我们希望迅速切换网页的状态。所以，网页切换的时长应该比移动设备少两倍 - 介于150-200毫秒。否则，用户会不可避免地认为电脑卡顿或者网络连接出现故障。
但是，以下情况有所例外。如果你是要给你的网站创建一个装饰性的动画，或为了把用户注意力吸引到特定的元素上的时候，动画应该有所延长。
image
大尺寸屏幕电脑 = 慢速动画！没门！
你需要记住无论什么设备，动画时长不仅应该由移动距离决定，也应该由物体尺寸决定。元素越小且变动越小的动画，应该移动地更快。相应地，含有大且复杂元素的动画持续得略长些看起来会更舒适。
在具有相同尺寸的移动物体中，最先停下的物体所经过的距离最短。
相比于大尺寸的物体，小物体移动反而较慢，因为它们会产生较大的位移。
image
动画时长根据物体尺寸和移动距离不同而变化
根据物理学定律，当物体发生形变时，形变的能量会被均匀分散到物体中。所以，最好还是尽量排除使用反弹的效果，只在特定案例中使用为好。
image
避免使用反弹效果以避免注意力分散
物体运动应该是清晰敏锐的，所以不要使用动态模糊（是的，After Effects的用户们，现在不是时候）。即使是在现代移动设备上也很难显现出效果，而且这种特效也根本不是用于界面动画的。
image
不要在动画中使用模糊效果
列表项（新闻卡，电子邮件列表等）逐个元素出现时，之间应该有个短暂的延迟。每个新元素的显现都应该持续20-25毫秒之间。元素出现速度比这更慢的话可能会惹恼用户。
image
列表项动画应该持续20-25毫秒
2.淡入淡出 Easing
淡入淡出效果让物体的移动更自然。这是动画设计基本准则中的一条，在迪士尼动画师 Ollie Johnston and Frank Thomas所著的Illusion of Life: Disney Animation中也有所描述。为了让动画看上去不机械生硬，应该给物体移动适当增速或减速 - 像实际生活中一切有生命的物体一样。
image
相对于线性移动，淡入淡出效果让动画更自然
2.1 线性移动 Linear motion
不受任何物理力影响的物体会做线性移动，也就是说，移动速度恒定。也正因为如此，人眼看上去会十分不自然。
所有制作动画的应用程序都使用动画曲线，我会尝试说明应该如何阅读并理解这些曲线。曲线显示物体的位置（y轴）在相同的时间间隔（x轴）内如何变化。在现在这种情况下，运动是线性的，所以物体在相同时间内移动相同距离。
image
线性移动曲线
例如，线性移可以在改变物体颜色和透明度的时候被应用。一般来说，当物体位置没有发生变化的时候，我们可以使用线性移动。
2.2 淡入或增速曲线 Ease-in or acceleration curve
我们可以从曲线上看到，物体在开始时移动缓慢，并且速度逐渐增加。这意味着物体正以特定的加速度进行移动。
image
增速曲线
这条曲线应该被用于当物体全速飞离屏幕的情况，比如系统通知或者就是界面中的卡片一类。但是需要注意这种类型的曲线仅仅适用于当物体永远离开屏幕，即我们再也不需要把它们召回或退回的情况。
image
卡片抛出屏幕的增速曲线
动画曲线可以用来表达恰当的情感语义。在以下例子中，我们可以看到所有物体的移动距离和时长全都相同，但即便曲线中的细微变化也可能会影响动画产生的情感语义。
当然，通过调整曲线，你也可以尽可能逼真地模拟出现实世界中的物体移动。
image
相同时长和距离，但是不同情绪
2.3 淡出或减速曲线 Ease-out or deceleration curve
和淡入曲线相反，物体快速移动了很长的距离然后慢慢减速，直至完全停止。
image
减速曲线
这种类型的曲线应该被用于元素开始出现在屏幕上的情况 - 全速飞入屏幕，逐渐减速直至完全停止。这种曲线也适用于来自屏幕外的不同的卡片或物体出现在屏幕上的情况。
image
正确出现的减速曲线
2.4 淡入淡出或标准曲线 Ease-in-out or standard curve
这种曲线使得物体在开始获得速度，然后慢慢速度归零。这种类型的运动被广泛应用到界面动画中。任何时候你犹豫在动画中使用何种动效，使用这种标准曲线就对了。
image
标准曲线
根据Material Design准则，使用对称的曲线可以让运动更加自然和真实。曲线的末端必须被着重强调而不是开端，也就是说增速的时长要短于减速的时长。这样，用户将会更加关注元素最终的移动，从而关注其最新的状态。
image
试比较对称和非对称的标准曲线
淡入淡出常被用于物体从屏幕一端移向另一端的情况。这时，动画应避免引起用户的注视或过强的影响效果。
image
卡片在屏幕上的移动和相应的对称曲线
这种类型的移动应该被用于当元素从屏幕消失，但用户可以随时把它退回到前一状态的情况，诸如导航边栏等。
image
导航边栏从屏幕隐去以及标准曲线
从这些例子中可以总结出许多初学者忽视的基本规则 - 开始动画不等于结束动画。还是以导航边栏为例 - 它随着减速曲线出现，但随着标准曲线消失。另外，根据Google Material Design, 物体出现的时间应该较长以便吸引更多注意力。
image
边栏的出现和隐藏通过相应的减速和标准曲线来实现
三次方贝塞尔函数(function cubic-bezier)通常被用来描述这种曲线。之所以被称为三次方是应为它是基于四个端点。第一个端点在坐标0;0（左下方），最后一个端点在坐标1;1（右上方）都已经在表中被界定。
基于我们仅仅需要描述表中的两点，它们由贝塞尔函数的四个参数决定：前两个是x和y轴的第一个值，后两个是x和y轴的第二个值。
为了简化你的工作，我建议设定曲线的时候使用easings.net和cubic-bezier.com网站。第一个网站包含了一系列常用的曲线和参数，可以直接拷贝到你的建模工具中。第二个资源可以让你尝试不同的曲线参数，并且可以直观地看到物体是怎样移动的。
image
不同类型的曲线，和相应的贝塞尔函数的参数
3.界面动画的编排
就像芭蕾舞编排一样，主旨就是将用户注意力流畅地从一个状态引导过渡到另一个状态。
主要有两种类型的编排 - 均等和从属交互
3.1 均等交互
均等交互的意思是所有物体的出现遵循一个特定的准则。
在此情况下，所有卡片的出现可以被看作是将用户注意力自上至下单项引导的过程。如果我们不遵循这个规律，用户的注意力就会被分散；而如果所有元素全都一起出现，也会看起来很糟。
image
用户注意力应该被流畅地引导至同一方向
至于表格视图，会有一些复杂。在这里应当将用户的注视点按对角线的方向引导，因此一个接一个地展示元素就不太好了。逐个显示元素会使动画过长，并且用户的注视点将呈锯齿状，这是错误的。
image
按对角线方向出现的表格视图卡片
3.2 从属交互
从属交互的意思是我们以一中心物体吸引用户注意，并且其它所有物体都从属于它。这种类型的动画可以带来秩序感，并引起对主要内容的关注。
在其他情况下，用户很难了解到要跟从哪个物体，才会让他的注意力不至于分散。因此，如果你有若干元素想要添加动画，你需要清晰地安排出它们动作的顺序，并且尽可能减少同一时间出现对象的数量。
image
只做中心物体的动画并让其他物体从属于他这种做法很可取。否则，用户将不知道去跟随哪个物体
根据 Material Design，当移动的物体不成比例地改变大小时，它们应该沿弧线而不是直线移动。这会让移动更加自然。“不成比例”是指物体长和高的增减变化是不对称进行的，即遵照不同的速度（例如，方形卡片变成长方形）。
image
一个物体不成比例地改变了尺寸，它的运动轨迹应该沿一条弧线
沿着直线运动的情况应该被用作当物体成比例地改变尺寸时。由于这种运动的应用更容易，不成比例的弧形运动准则常常被忽视。看这些应用程序的实际案例，你就会发现线性移动占绝大多数。
image
按比例变换尺寸的情况通过沿着一条直线实现
沿着曲线运动可以通过两种方式实现：第一个叫垂直移出(Vertical out) - 物体一开始水平地运动，然后以垂直运动结束；第二种叫水平移出(Horizontal out) - 物体一开始垂直地运动，然后以水平运动结束。
物体沿曲线移动的轨迹必须与界面滑动的主轴重合。例如，在下面一幅图片中我们可以上下滑动屏幕，相应地，卡片沿垂直移出(Vertical out)的方式展开 - 先向右后向下。反向运动按相反的方式完成- 卡片先垂直向上，然后按水平运动结束。
image
卡片展开或折叠的方向应当与界面轴重合
如果移动物体的轨迹相交，则它们不能相互交叠移动。物体应该通过增加或减少它们自己的速度去给另一个物体的运动让出足够空间。另一个选择是 - 它们可以把另一个物体推走。为什么会这样？因为我们假设界面中所有物体处在同一平面中。
image
在移动中，物体不应该互相穿透移动，而应为其它物体的移动让出空间
另一种情况，移动的物体可以向上越过其它物体。但要再次强调，不能有穿过其它物体的叠加或移动。为什么？因为我们相信界面中的元素遵循物理学定律，而在真实世界中没有固体能穿过其它物体。
image
物体可以向上越过其它物体进行移动
4.总结
因此，如果我们总结上述所有规律和准则，界面中的动画应该对应我们在真实世界中所知的移动规律 -比如摩擦，加速等等。通过模仿现实世界中物体的移动，我们可以创造出一系列动效来辅助用户理解应当在界面中期待看到的是什么。
如果动画被恰当地构建，它通常是十分不显眼的，也不会太过分散用户在主要意图裳的注意力。如果不是这样，那么动画应该被削减，甚至全部剔除掉。也就是说，动画不应该减缓或者影响用户完成任务。
但也不要忘了，动画更像是一门艺术，而不是科学。所以最好对用户进行试验和测试来验证你的观点。
网友评论