（四）动效的细节怎么处理？
简要说明了在制作动效的时候，需要留意的细节。
（四）动效的细节怎么处理？
一般来说，简单的、符合直觉的日常事物通常会被大脑忽略，因为它很难再其中发现什么有意思的或值得惊讶的东西。当一个元素，不符合直觉，大脑需要去思考这个元素的特异性的时候，便会释放大量注意力对它进行关注。
因此，UI动效也会分成一种类型：
①润物细无声——以符合直觉的方式对用户的行为进行反馈；
②天翻地亦覆——用夸张的运行方式来吸引用户的注意力；
另外说一下市面上最常用的12条可以提高细节的设计原理：
缓动（Easing）、偏移量和延迟（Offset & Delay）主要与时间相关。
父子关系（Parenting）用于阐述元素之间的关系。
变形（Transformation）、数值变化（Value Change）、遮罩（Masking）、覆盖（Overlay）、生成（Cloning）多作用于加强元素自身的延续性。
视差（Parallax）多作用于表明元素的层级关系。
蒙层（Obscuration）、多维化（Dimensionality）、镜头平移与缩放（Dolly & Zoom）作用于表明元素与空间的关系。
1. 缓动（Easing）
当运动发生的时候，元素运动速率的变化符合用户的预期。自然界之中是很少存在完全线性的运动的，没有任何东西能够完美的保持匀速运动，缓动效果能够让运动看起来更加接近自然，符合用户的认知，达到用户的预期。
例子：你手机里面几乎所有动态效果都是缓动的，看起来是不是非常舒服和谐呢？
2. 偏移量和延迟（Offset & Delay）
利用偏移和延迟来错开元素的运动时间，表明元素之间的层级与关系。设计师利用错开运动时间的方法，让信息或界面元素按照有所区别的秩序进退场，利用明显的错序运动暗示用户信息与界面元素之间或许存在某些区别，或利用错序的方法吸引用户的注意。但一般情况设计师不应该使用太多的延时效果，因为譬如说网络的加载本身就已经需要时间，所以延迟效果的使用最好只用于技术。
例子：苹果官网各商品详情页均有大量运用。
3. 父子关系（Parenting）
在用户进行操作时，有父子关系的元素帮助用户更好地理解它们之间的层级关系以及带来更加有理可循的操作反馈。正如上面给出的这张动图，位于下方的方块的左右运动，而位于上方的方块跟随下方方块进行左右运动并同时进行自己的缩放运动，他们之间构成了父子关系。说得简单一点，父子关系就是子元素的某个属性的值随父元素的某个属性参数的值按照一定的比例进行变化。
例子：Google Allo 按住发送按钮向上滑动，发送内容字体变大。
4. 变形（Transformation）
利用变形来告知用户元素的状态或作用发生了改变。人们对于实物的变形是敏感的，合理的变形能够清晰高效地将正确的信息以最高效、最令人愉悦的方式传递给用户。注意，这里所说的变形并不一定要像上面那种动图一样动作那么大才算变形。或许是颜色的变化，也有可能是角度的改变，这些都能达成我们想要的效果。
例子：知乎 Live 选择赞助金额的动画效果。
5. 数值变化（Value Change）
连续性的数值变化动态效果能让用户清晰地看见数值到底是在变多还是变少。关于这一点，我想多用两张动图呈现，大家可以看到，数值变化有连续性动态效果的一张是不是更能让你知道数字是在变多还是变少？想象一下，假如在某款理财 App 里面，这个数值是你的钱的话，那么数量的增加与减少这个信息对于用户来说就非常重要了。
例子：京东金融手机 App，“总资产”，及“白条”页面的数值变化效果。
6. 遮罩（Masking）
遮罩型的动画是在界面元素进场或者退场的时候创造连续性效果的一种选择。这种类型的动效似乎在 Material Design 里面比较常见，所以没有使用过原生安卓系统的伙伴们可能比较陌生。
例子：原生安卓系统（5.0 以上 7.0以下版本可见，7.0取消了菜单按钮，以上划操作代替。）点击菜单按钮呼出菜单的动画效果。美图秀秀手机 App 处于首页的各个功能按钮点击后的转场效果。
7. 覆盖（Overlay）
覆盖用于在扁平化（没有厚度）设计的界面上阐明两个相互独立的元素的位置关系。在实际上没有厚度、没有纵深概念扁平化设计中，覆盖动画的使用能让本来就非常有限的屏幕空间被更好的利用起来。
例子：微信横划删除聊天记录。
8. 蒙层（Obscuration）
蒙层与覆盖非常相似，在没有纵深概念的扁平化设计中表现纵深，它并不完全将处于下方的元素遮盖住，而通常是通过高斯模糊或变暗的手段让下方的元素保留一定的可视性。
例子：在 iOS 里面随处可见的毛玻璃效果。
9. 生成（Cloning）
当元素被生产出来时，表达元素与元素之间的连续性的关系。这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。
例子：苹果的 Messages 发送信息的效果。
10. 视差（Parallax）
界面元素同时开始运动，但运动的效率不同，构成一种视差的效果。用户在进行滚动操作的时候通过视差效果可以在扁平化的界面里面表现空间中各元素的位置及层级关系。这种效果还非常的美观高端，能让整个页面看起来更加活泼一些。通过视差的特性，我能引导用户去关注应该应该关注的地方，运动效率高的元素通常表达的是距离用户更近，适合承载更加有使用性意义的重要信息，而运动效率较低的元素通常表达的是距离用户较远，而且或许没有承载什么重要的信息。
例子：苹果官网各商品详情页。
11. 多维化（Dimensionality）
将扁平化的界面元素多维化从而表达空间中各元素的位置及层级关系。其实扁平并不符人类认知逻辑的（而符合人类认知逻辑几乎可以说是可用性的第一原则），所以人们在扁平化的界面里面下足了功夫来在没有纵深和厚度的界面里表达纵深和厚度，这句话读起来非常拗口，但实际上就是这样的。多维化的使用比较少，因为添加纵深感有很多种手法（覆盖、蒙层、阴影，etc.），而多维化的开发成本是比较高的。
例子：iBooks 的翻页效果和 Flipboard 的翻页效果，滴滴打车退出呼叫状态的 Appbar 动画。
12. 镜头平移与缩放（Dolly & Zoom）
镜头平移与缩放听起来好像是一样的东西，事实上却完全是两码事。镜头平移是拍摄的术语，被拍摄物保持静止而镜头移动或镜头保持静止而被摄物体进行远离或接近镜头的前后移动，缩放是镜头与被摄物体在位置上保持静止而被摄物自身进行缩放。镜头平移与缩放效果表明元素与空间之间的关系，也能表现出一种纵深感。
例子：iOS 的解锁动画是典型的镜头平移效果，而双击放大图片操作的那个动画是典型的缩放效果。
>>>>>>动效的时间
大量的研究表明，动效的最佳持续时长是200毫秒到500毫秒之间。这个研究数字是基于人脑的认知方式和信息消化速度得出来的。任何低于100毫秒的动效对于人的眼睛而言，几乎都是瞬间，很难被识别出来。而超过1秒的动效会让人有迟滞感。
△ 界面中动效持续时长
在手机这样的移动端设备上，按照 Material Design 的建议，动效时长应该控制在200~300毫秒之间，在平板电脑上，这个时长应该延长大概30%，也就是说，时长应该在400~450毫秒之间。原因很简单，屏幕尺寸越大，元素在发生位移的时候，跨越的距离越长，速度一定的情况下，时长自然越长。相应的，在可穿戴设备的小屏幕上，这个时长应该缩短30%，在150~200毫秒之间。
△ 移动端设备的屏幕尺寸影响动画的持续时长
网页动效的处理方式也不一样。由于我们习惯在浏览器中直接打开网页，考虑到浏览器性能和大家的使用习惯，用户对于浏览器中动效变化速率的预期还是比较快的。相比于移动端中的动效速度，网页中的速度会快上一倍，换句话说，就是动效的持续时长应该在150~200毫秒之间。如果持续时间太长，用户会忍不住觉得网页卡住了。
不过，如果你的网页中所用的动效并非功能性的，而是装饰用的，或者用来吸引用户的注意力，那么请忘记这个规则，在这种情况下，动效可以更长。
更大的屏幕=更慢的动效？绝不是如此！
请务必记住，无论是在什么平台上，动效的持续时长绝不是单纯取决于屏幕尺寸和运动距离，还取决于平台特征、元素大小、功能设定等等。较小的元素或者较小的变化，相应的动效应该更快一点。因此，大而复杂的元素动效持续时间更长，看起来也更舒服一点。
大小相同的元素，在移动的时候，移动距离最短的元素，是最先停止下来的。
与较大的元素相比，较小的元素运动速度应该更慢，因为相同的移动距离，对于小元素而言，位移距离和自身大小比例倍数更大，相对偏移更远。
△ 动效的持续时长还和元素大小、运动距离有关
另外，我们在制作不同场景的动效时，也是需要考虑元素面积大小和运动时间的关系，可以参考下图进行安排。
最后列出常见的添加动效的场景，其中包括移动端和web端，大家在实际使用中可以自行选择：
（1）滚动banner
（2）表单和字段
（3）视觉中心
（4）导航栏和菜单
（5）转场动效
（6）背景动效
（7）加载动效
（8）滚动事件
（9）鼠标Hover、Click事件
（10）图片本身动效
（11）空状态
（12）标签栏切换动效
（13）按钮动效
tips：一个页面中最好只有一个动点（吸引点），这样发挥的效果最好。如果必须有很多个，一定得分清主次，有先有后。
未完待续·······
