深度丨UX 动效设计的 “终极指南” ！
我们都是为梦想一起努力的人
动效的持续时间和速度
当元素更改其状态或位置时，动效的持续时间要适当，既不能过快，使用户注意不到更改；又不能过慢，使用户产生无聊感。
接下来介绍一些动效设计的规则和技巧：
1. 设备大小影响动效的持续时间
移动端
对于移动端，Material Design （Google 的设计语言，可阅读文章：干货丨Material Design 全面解析(一) 进行了解）将手机的交互动效的持续时间限制为 200 - 300 毫秒；在平板电脑上，则要将持续时间延长 30%，大约在 400 - 450 毫秒，因为屏幕的尺寸更大，元素在更改位置时需要移动更长的距离；在可穿戴的小型智能设备上，持续时间应该缩短 30%，大约在 150 - 200 毫秒，因为在较小的屏幕上，元素运动的距离更短：
PC 端
对于 PC 端，动效的处理方式又有所不同：由于我们习惯在浏览器中立即打开网页，所以我们对于页面中的其他动画效果也会有相同的预期，潜意识里会认为动效应该立即显现，不然就会有电脑卡机或者网速太慢的感受。因此除了一些装饰性内容的动画可以不在乎时间限制， Web的动效持续时间通常在 150 - 200 毫秒为宜：
2. 元素面积和变化大小影响动效
通常来说，面积较小或变化较小的元素，动效的持续时间更短；面积较大或变化较大的元素，动效的持续时间更长。如下图，相同大小的两个元素，移动距离长的物体用时更长；而移动距离相同时，变化大的元素用时更长：
3. 适当加入缓动效果
恰当的缓动效果会使元素的动效更为自然，加入缓动就如同考虑了惯性、阻力等因素，让元素的运动方式更接近现实生活中的运动。缓动效果又分很多种，需要配合不同的场景进行应用：
缓入效果（加速曲线运动）
这种动效在刚开始时变化缓慢，速度随时间逐渐增加，这意味着元素在做加速度运动：
应用在界面设计中的场景可能是将卡片删除，用户不再需要阅读卡片：
缓出效果（减速曲线运动）
这种动效在刚开始时变化较快，速度随时间逐渐降低，直到元素最终停止：
缓进缓出效果（S 型标准曲线运动）
这是最常用的动效，同时具备缓入和缓出，当你的不知该如何选用动效时，可以用这个效果：
无缓动效果（匀速直线运动）
相比之下，无缓动效果的匀速直线运动就显得呆板和不自然：
即使是运动距离相同，不同的运动曲线也可以使元素传达出不同的情感和意义：
动效的编排和组织
通常一个界面中会出现多种运动的元素，这就需要将动效按照规律和顺序编排起来，形成视线流，引导用户浏览界面。编排和组织动效的方式有两种：平级交互和从属交互：
1. 平级交互
当运动的元素都处于同一个层级时，可以从单一的方向，引导用户的视线。如下图的卡片列表，按照一定顺序依次出现的体验会更顺畅：
再比如下图中的卡片表格，采用对角线的动效方式会更为舒适：
2. 从属交互
当一个元素从一个层级向另一个层级转变时，界面中的其他元素都从属于它，动效需要表现出这种秩序感，将用户的注意力集中在最主要的内容上去：
此外，当一个元素改变其大小时，元素放大后的形状和比例会影响动效的选择。比如当元素在变化的过程中的宽度增加，则选用缓入曲线运动的方式；而当元素比例保持一致时，则采用匀速直线运动的方式：
避免使用的动画效果
在动效的应用过程中，除非必要或有特殊意义，否则尽量避免使用以下动效：
反弹效果
当元素间发生碰撞时，最好排除反弹效果，过多的反弹效果会干扰用户的注意力：
模糊效果
阶段延迟效果
路径交叉
英文原文来源：
https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
Taras Skytskyi <The ultimate guide to proper use of animation in UX>