如今，动效设计越来越受到重视，合理界面动效不仅能展示屏幕之间的交互逻辑，而且能帮助用户更好理解和使用产品。当我在搜索关于界面动效的文章时，发现几乎所的文章都只描述了某一特定的案例或是阐述关于动效设计的一般事实，几乎很少有文章把UI动效设计的规则阐述得很清楚，因此，我把自己搜集的所有关于UI动效设计的规范都整合到这篇文章中，让大家不用再去花时间到处搜寻相关的资料。

NO 1:动效的持续时间和速度

当元素改变其状态或位置时，如果运动时间过快，用户将会会很难察觉到，如果太慢又会造成用户等待产生消极情绪，降低使用效率等。可见一个合理的运动时间至关重要！

大量研究发现界面动效的最佳时间在200到500毫秒之间。这个数字基于对人类大脑的研究。短于100毫秒的动效很难被大脑捕捉。而超过1秒的动画会给大脑传递出延迟卡顿的感觉。

在移动设备上，“ Material Design Guidelines”甚至建议将动画的持续时间限制在200-300毫秒之间。在平板电脑上，动效的持续时间则应该延长30％ ，大约400-450毫秒。原因很简单，屏幕尺寸变大，元素的运动路径相应变长，运动时间也相应增加。而在可穿戴设备上，运动时间应相应缩短30％ ，大约150-200毫秒，因为在较小的屏幕上，运动路径较短，所需时间也较短。

Web端的动效设计跟上述分析有所区别。我们习惯于在浏览器中立刻打开网页，以保证我们在浏览网页时的效率流畅度。所以，Web动效持续时间要比移动设备上的持续时间缩短2倍左右，也就是介于150-200毫秒之间。如果持续时间过长，用户会怀疑是不是自己网络出现了问题。

需要特被注意的是：无论是在什么平台上，动效的持续时间不仅仅取决于运动路径的长短，还跟元素本身的大小有关系。较小的元素或运动路径较短的元素应该移动得更快，反之，较大或运动路径较长的元素运动时间应该更长一点。

当元素发生碰撞时，碰撞能量必定要影响到元素内部的子元素。因此，不要大量使用反弹效果，在有特殊需要时有用它，否则会分散用户注意力

物体移动时应该保持清晰可见，所以不要使用运动模糊效果（用After Effects做动效的童鞋，敲黑板！）

列表页中各个元素的出现应该有非常短的先后延迟。延迟时间大约在20到25毫秒之间，如下图：

NO 2:缓动（运动曲线）

缓动能让元素的运动更加自然。这是动画的基本原则之一，在“《生命的幻觉-迪士尼动画》一书中有非常详尽叙述，推荐大家去读一读。

1.匀速运动（线性运动）

不受任何外力影响的线性移动，换句话说，速度恒定不变，加速度为零。这样的运动看起来非常机械。

所有的UI动效中都会用到运动曲线，在“位置—时间曲线”中。曲线显示元素的位置（y轴）随着时间（x轴）的变化而变化，曲线斜率表示元素速度。在下图中，曲线斜率保持不变，即速度保持不变，所以元素做匀速运动。

线性运动一般会用于元素颜色或是透明度的变化，换而言之，线性运动多用于元素状态改变时的动效，而在位置上的动效并不常用。

2.缓入（加速运动）

如下图曲线所示，一开的时候，物体的位置变化比较缓慢，后面速度逐渐增加（速度越来越快的运动）。

当元素以全速移出屏幕时，可以使用这样的曲线。可以是系统通知或界面的卡片。需要注意的是，只有当对象永远离开屏幕并且我们无法撤回时，才会应使用此类曲线。

不同的运动曲线能传递给用户不同的情绪。如下图中，时间和距离相同的对象由于运动曲线的不同所传递的情感也有细微差别：

3.缓出（减速运动）

缓慢出曲线正好与缓入曲线相反，元素速度越来越慢，直到最终停止。

这种类型的曲线可以应用在元素出现的动效中，元素以全速飞向屏幕，逐渐减速直至完全停止：

4.缓入缓出（标准曲线）

元素先加速后减速的运动，这种运动曲线是UI动效中最为常用的。当您界面的动效有所疑惑时，可以优先考虑标准曲线。

Material Design Guidelines指出：最好使用首尾不对称的曲线，这样会让运动看起来更贴近自然。强化曲线的末端（也就是强调运动的结果），通常加速运动的持续时间要比减速的持续时间短。这样，用户就会更加注意元素运动的最终状态，引导用户到新的页面状态中（如下图）。

这类曲线可以用于元素在屏幕内的运动：

也可以用于元素从屏幕上消失，但这种“消失”是可撤回的，用户可以随时将其返回到之前的位置，例如抽屉导航：

5.贝塞尔参数（cubic-bezier）

Cubic-bezier专门用来描述元素的运动规律，它基于四个点来描述运动曲线，第一个点的坐标为（0，0）最后一个点的坐标为（1，1）。为了简化工作，可以使用这两个网站：easings.net；cubic-bezier.com 得到你的贝塞尔插值。

NO 3:界面元素运动秩序

就像排练舞蹈一样，合理动效顺序能很好的引导用户的注意力。这里有两大类型的动效：1.同级交互（Equal interaction）2.从属交互（Subordinate interaction）.

1.同级交互（Equal interaction）

同级交互意思是所有元素交互层级相同，它们都服从于同一个特定动效规则。在这种情况下，所有卡片的动效起到引导用户视线的作用。如果动效不遵守规则，用户的注意力很容易被分散。界面的动效也看起来非常杂乱。

表格类界面中，用户的视觉路线应该是对角线的，因此元素逐个出现的话会极大扰乱用户视线，对用户来说是非常糟糕的体验，此外，逐个显示每个元素也会使动效持续时间过长，增加用户等待的负面情绪。

2.从属交互（Subordinate interaction）

从属交互意思是以某一个元素为中心，其他元素都从属于这个主要元素的运动。这种类型的运动让页面动效更加有序，并且让用户的注意力更多集中到主要元素上来。

“Material Design”指出：当移动元素不是等比进行缩放时，它应该沿着弧线移动，这样的运动更加贴近自然。这里的“不是等比”意思是元素的宽高变化不是对称均匀的，即长和宽具有不同的速度（例如，方形卡变成矩形）如下图：

而对象按比例改变其大小时，应该沿直线运动。由于这种运动方式实现成本更低，因此上述中不成比例的弧形运动规则经常被忽略掉。

物体沿曲线运动可分为两种：1.Vertical out :元素先开始水平运动，最后以垂直运动结束；2.Horizontal out：元素开始垂直移动最后以水平运动结束。需要注意的是：对象沿曲线移动的路径必须与界面滑动的主轴方向一致。例如，在下图案例中，界面是纵向滑动的，因此卡片以第一种方式Vertical out展开 。

同级元素运动路径应避免相互重叠交错，元素可以通过减慢或加速自身速度为其他物体的运动留出足够的空间。

另一种情况下，可以通过抬高元素Z轴层级进行移动，移动的元素可以高于其他元素。这同样是为了避免重叠与穿插。

NO 4:总结

界面动效的本质是为了服务产品和用户，让产品逻辑更加清晰，让用户的使用更加流畅，最后引用一段原作者的话：“ Do not forget that animation is more of an art than science, so it’s better to experiment and test your decisions on users”。

好啦，文章到这里就结束了，如果觉得对您有所帮助，记得按个赞喔～，最后感谢原作者Taras Skytskyi，感谢大家～