2017 Material design 第二章第一节《Material动效》

第二章节《动效》

一、Material动效（Material motion）

在material design中，动效被用于描述空间关系，功能展现和体现流畅性和绚丽的效果。

动效为什么这么重要？

动效向我们展示了一个应用是如何运作的，以及它能做什么。

动效的作用：

• 引导用户关注
• 当用户完成输入后暗示用户将会发生什么
• 强调组件之间的层次和空间关系
• 缓解用户等待焦虑（如内容抓取或加载下一个视图）
• 为用户带来个性、精良、愉悦的视觉感受

相关： Making Motion Meaningful（Motion designers from around Google share some of their most moving product features.）

Material是如何运动的？

整个material环境的搭建灵感来源于现实世界，其中借鉴了现实中的重力和摩擦力。这些力在material环境中主要体现在用户输入的方式对组件的影响和多个组件之间如何交互。

Material的动效具备以下特点：

响应
Material是充满活力的物质。当用户触发、输入的时候它能够迅速作出响应。

在移动端上，篇幅长的动效时长在300-400ms之间。篇幅短的动效时长在150-200ms之间。动效时长如果少于或者超过以上建议时长的话，用户就会感到动效运动缓慢或者动效运动太快导致肉眼难以捕捉。

更多信息请看 常见的动效持续时间

墨水逐渐扩散的动效被用于确认用户输入。同时卡片（card）高度抬起暗示用户已经触发。

更多信息请看 径向反馈

向用户表明用户触发、输入和创造之间的联系，或者说是整个创造的过程。

更多信息请看 创造

自然
因为参考了现实世界中力对物体的影响，所以Material的动效自然并贴近现实。

在现实世界中，一个物体运动不管加速还是减速都会受到重力和摩擦力的影响。同理，在material design中，对象的运动不会突然的启动和停止。

更多信息请看 持续时间和缓动效果
译者注：什么是Easing，请点击了解

受重力影响，material对象沿弧线运动。

更多信息请看 运动

Material的变化同样沿弧线变化。

更多信息请看 material的变化

认知
Material具备认知周边环境（包括用户和其他material对象）的能力。它能够联合其他material对象一同回应用户需求。
更多信息请看 编排

当转场的时候，为了确定相互之间的关系，这些material的动效按编排好的方式运动。

在拥挤的环境中变化大小，Material能够从中挤开合适的空间。

Material对象间能够相互吸引并结合。

目的性
Material的动效能够引导用户在正确的时间上关注正确的点。
更多信息请看 连续性

过渡动效有助于指导用户下一步的交互。

不同的动效可以帮助用户理解当前的活动。比如当前手势对组件是否可用。

动效可以引导用户关注他们需要关注的地方。

好的过渡是怎样的？

成功的动效设计具备以下特点：

快速、流畅
一个快速、流畅的动效不会让用户觉得在等待时间。

一个快速、流畅的动效不会让用户觉得在等待时间。

可行

一个节奏缓慢的动效让用户觉得好像等了一个世纪。

不可行

清晰、连贯
过渡应清晰，简明和条理清楚，避免做得过多。

保持一条清晰的运动路径从一个视图过渡到另一个视图。

可行

当过渡的时候每个组件朝着不同的方向或交叉的路径变化，很容易使用户疑惑。

不可行

紧密、一致
在material design中，动效具备统一的速度、响应能力和目的。因此在你的应用中那些自定义的动效需要保持内在的连贯一致。

图中是三个不同功能的应用，但是因它们有着看起来相似的动效，令人觉得它们之间有着某种联系。

动效的暗示

关于动效的好处请看下面两个例子。

通过过渡动效引导用户进入下一个视图。以生动的动效淡化数据加载带来的等待时间，能有效的减轻用户因等待而产生的焦虑感。

可行

因为没有过渡动效发生和没有一个清晰焦点引导，所以用户不清楚上一个视图和下一个视图之间的联系。其中利用一个旋转的圆形icon代表数据加载的状态，这样做会使得等待在用户面前显得更加凸显，无疑增加了用户等待带来的焦虑感。

不可行