三、动效设计的原则
这是一位在五年时间内为四十多个国家和上百个顶尖机构提供咨询服务的动效设计师，总结出来的实用性动效设计原则，为提升产品体验与可用性提供帮助。
3.1 缓入缓出
时效事件发生时，元素的动作应显得自然，与用户预期相符。
3.2 偏移与延迟
加入新的界面元素或场景时，可用于表达元素之间的关系。
3.3 父子关系
当界面元素较多时，可以利用时空差异创造出可以感知到的父子继承关系。
3.4 形变
用连贯的状态描绘表达元素功能的改变。
3.5 值变
当元素的值发生变化时，用连续动态的方式表达前后之间的关联。
3.6 遮罩
如果一个界面元素的不同的展示方式对应不同的功能，那么让展示方式的变化过程具有连续性。
3.7 覆盖
用堆叠元素的相对位置来描述它们的扁平空间关系。
3.8 复制
当新的元素从已有元素复制出来时，用连贯的方式描述其关联关系。
3.9 景深
允许用户瞥得到非主要元素或场景。
3.10 视差
当用户滚动界面时，在平面创造出空间层次。
3.11 翻转
通过具有空间架构的描述方式来表现新元素的产生与离场。
3.12 滑动变焦
用连续的空间描述来引导界面元素和空间。
3.13 动效的持续时长和速度
当元素的位置和状态发生改变的时候，动效的速度应该足够慢，维持足够长的时间，让用户能够注意到变化，但是同时，又不能慢到需要用户去等待。
大量的研究表明，动效的*佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。
在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。
3.14 缓动
缓动指的是物体在物理规则下，渐进加速或减速的现象。在动效中加入缓动的效果能够让运动显得更加自然，这是运动的基本原则之一。对于缓动，迪士尼的两位关键性的动画大师 Ollie Johnston 和 Frank Thomas 在他们的著作《The Illusion of Life: Disney Animation》中有过非常详尽的描述。
为了不让动效看起来机械或者人工痕迹太明显，元素的运动应该有渐进加速和渐进减速的特征，就像物理世界当中其他的物体这样。
匀速直线运动
不受任何物理力量的影响，匀速直线运动看起来是非常不自然的，尤其是对于人眼而言。
所有用来设计动画的应用都会使用坐标轴和曲线来阐述动效的运动特征，我将尝试阐述它们的含义，以及如何使用。坐标轴的 X轴是实现，而 Y轴则表示的唯一，换句话来说，如同我们在初中物理中所学到的，坐标轴上的线条描述的是速度和加速度的特征。下面所示的直线，表示速度是均匀的，也就是匀速直线运动，物体在相同时间内运动的距离是不变的。
均匀的变化通常只会用在色彩的改变或者透明的改变上，一般来说，我们也可以让背景元素均匀运动，而前景元素保持不变，来呈现它的状态，就像上图一样。
缓动加速曲线
通过曲线我们可以看到，物体开始时候的初速度比较低，运动缓慢，随后速度逐渐增加，这意味着物体在加速运动。
当物体加速飞出屏幕的时候，可以使用这种加速曲线，比如界面中被用户使用滑动手势甩出去的卡片。但是请记住，只有当运动对象需要完全离开界面的时候才会这么使用，如果它还需要再回来的话，则不行。
动画曲线有助于正确传达讯息，甚至表达情绪和感觉。在下面的案例当中，我们可以看每个元素的运动位移是完全一样的，所消耗的总时长也是一样的，但是运动的速率变化是不同的，这一点也体现在曲线上，所表现出来的情绪也不同。当然，通过调整曲线，你能够让物体的运动轨迹尽可能接近现实世界。
缓动减速曲线
当元素从屏幕外运动到屏幕内的时候，动效应该遵循这类曲线的运动特征。从全速进入屏幕开始，速度降低，直到完全停止。
减速曲线可以适用于多种不同的 UI控件和元素，包括从屏幕外进入屏幕内的的卡片、条目等。
缓动标准曲线
在这种曲线之下，物体从静止开始加速，到达速度*高点之后开始减速直到静止。这种类型的元素在 UI界面中*为常见，每当你不知道要在动效中使用哪种运动方式的时候，可以试试标准曲线。
根据 Material Design 的规范，*好使用不那么对称的增速和减速的过程，让动效看起来更加真实。同时大家会更加在意运动的结果，曲线的末端，也就是运动结束的过程*好进行适当的强调，换句话说就是减速过程持续的时长*好超过开始加速的时长，用户将会更加清楚地观察到运动的*终结果，从而更好地明白运动的终止状态。
3.15 界面动效的编排
就像芭蕾舞的舞蹈编排一样，动画效果也是需要编排的，它的主要目的是让元素从一个状态切换到下一个状态，自然过渡，让用户的注意力自然地被引导过去。
编排有两种不同的方式，一种是均等交互，另一种是从属交互。
均等交互
均等交互意味着所有的元素和对象都遵循一个特定的编排的规则。
在这个实例当中，所有的卡片都遵循着一个方向来引导用户的注意力，自上到下地次第加载。相反，没有按照这样清晰的规则来加载，用户的注意力会被分散，元素的外观排布也会显得比较糟糕。
至于表格式的布局，它相对就复杂一点。在这里，用户的视线流向应该是清晰的对角线方向，因此，逐个区块次第出现是一个糟糕的设计。这样的逐个显示，一方面耗时太长，另一方面会让用户觉得元素的加载方式是锯齿状的，这种方式并不合理。
从属交互
从属交互指的是使用一个中心对象作为主体，来吸引用户的注意力，而其他的元素从属于它来逐步呈现。这样的动画设计能够创造更强的秩序感，让主要的内容更容易引起用户的注意。
在其他的设计当中，用户很难搞清楚哪个才是主要的，因为注意力被分散了。因此，如果要设置多个动画元素，应该定义清楚谁为主，谁是中心，并且尽量按照从属关系来次第呈现不同的子元素。
如果只有一个中心对象，那么其他的对象的运动方式都要受它制约，否则用户分不清楚主次。
五、动效软件的选择
动效设计软件纷繁众多，不同软件的侧重点也各不相同，设计师可以根据项目的时间、精细度、面向对象等条件来选择合适的软件。下面我列举出市面上常见的动效软件以及各自的优缺点，供选择参考。
5.1 ?After Effects
AE 这款软件知名度很高，学过设计的应该都知道，它的优点就是强大，可以实现超高精度的动效，一般 UI 动效制作只用到了 AE 很小的一部分功能。缺点是门槛高，上手较困难，不能做实时交互动效。