1. Material Motion
动效（Motion），在材质设计中，顺畅柔美地表现空间关系、功能和目的。
Why does motion matters？
动效展现了APP如何组织，以及它有什么作用。动效提供了：
- 在视图转换时引导用户的视觉焦点
- 用户手势操作之后暗示操作结果
- 提供不同元素之间的层级和空间关系信息
- 分散用户对后台运行情况的注意力（如拉取内容或加载新数据）
- 个性的形象、优雅的交互和愉快的使用过程
延伸阅读：Making Motion Meaningful
How does Material move?
材质环境从真实物理世界上的作用力，如重力和摩擦力上得到启示。这些力通过用户作用屏幕上元素的方式和元素相互影响的方式表现。
Responsive
材质充满能量。它会准确地在用户触发的地方，迅速地对用户输入作出反应。
移动设备上较大的动效会持续300-400 ms。较小的动效可以短到150 - 200 ms。更长或更短的动效会难以跟踪或太慢。查看更多：Common Durations
用户的点击时，墨水涟漪立即从触控点的中心扩散开。卡片升起，表示它处于活动状态。更多请参考：Radial Reaction
展示出新界面和元素以及打开新界面的操作之前的关联。更多请参考：Creation
Natural
材质设计传达自然的运动，真实世界中的作用力导致了这样的运动。
真实世界里，物体加速或减速由物体的质量和表面的摩擦力决定。类似地，材质设计中，移动和停止不会立即发生。更多请参考：Natural easing curve
真实世界的作用力，如重力，启示物体遵循弧线而非直线移动。更多请参考：Movement
材质形变同样遵循弧线式运动。更多请参考：Transforming Material
Aware
材质知晓周围环境的存在，包括用户和它周围的其它材质。它能被元素吸引，也能对用户的意图作出适当的反馈。更多请参考：Choreography
当元素演化为视图时，它和周围的环境应以一种可以表达它们之间关系的方式协调运动。
材质可以在其运动路径上把其它材质推开。
当元素移动路过其它元素时，可能会吸引其它元素加入它们。
Intentional
运动中的材质可以在正确的时间把用户的注意力集中在正确的区域。更多请参考：Continuity
过渡动效会指引用户去往交互的下一步。
运动会传递不同的信息，比如操作是否可用。
动画可以把用户焦点带到需要用户注意的元素上。
What makes a good transition?
成功的动效设计具备以下特点：
1. Motion is quick
好的交互不应该让用户浪费不必要的时间等待过久。
2. Motion is clear
过渡动效应该清晰、简单连贯。要避免同时做太多动作。
3. Motion is cohesive
材质元素由它们的速度、响应方式和意图所统一。APP中动效体验的设计也应该在APP中统一贯彻。
Implications of motion
这些动效模式的好处可以在下面两个例子中观测到，一个使用了动效，一个没有用。
使用了动效：动效过程中，用户被引导至新的文本视图。表面的变化传递了层级信息。数据加载过程被隐藏在动效之后，降低了用户感受到的延迟。
没使用动效：因为没有动效，故新视图和旧视图之间的关系不清晰，同样也没有注意力的焦点。层级信息没有传达，数据加载的过程更为明显。
2. Duration and easing
材质动效应该是自然的，响应式的。利用这些缓动曲线和延时模板可以创造出顺畅且连续的动效。
**Easing curve
- Standard curve：标准曲线
- Deceleration curve：减速曲线
- Acceleration curve：加速曲线
- Sharp curve：锐动曲线
Speed
当元素在不同位置或状态之间移动、转换时，移动要足够快而无需等待，同时要足够慢，然给用户理解。由于用户会经常看到，所以要保持转换过程简短。
Dynamic duration
不同的动效不能使用一样的延时模板，而应该根据元素移动的距离、速度和表面的变化来调整各自的延时长度。
移出屏幕的物体应有较短的延时长度，因为它们仅需更少的关注。
当物体移动较长距离或其表面发生戏剧性变化时要使用较长的延时。相反地，就使用较短的延时。
Common duration
Mobile
手机上典型的动效转换是时间超过300 ms，在一下范围内变动：
- 大型复杂全屏动效会有更长的延时，超过375 ms
- 元素进入屏幕的延时超过225 ms
- 元素离开屏幕的延时超过195 ms
延时长度超过400 ms时，会让用户觉得太久。
Large Screens
大屏幕上移动更远的元素，与小屏幕上的元素相比，在同样的延时下具有更高的峰值速度。大屏幕应该有更长的延时使移动不致于太快。
Tablets
平板上的动效延时比手机上高出30%。例如，手机上300 ms的动效延时，应用在平板上应该增加到390 ms。
Wearables
可穿戴设备上（智能手表）的动效延时应该比手机上的延时短30%。例如手机上300 ms的延时应用在可穿戴设备上应该为210 ms。
Desktop
与手机上类似的动效相比，电脑桌面上的动效应该更快更简洁。这些动效时间应该在150 ms - 200 ms之间。
因为桌面上的动效只需要更少的关注，与手机上类似的动效相比，它们应该更快地完成响应。
复杂的Web动效通常会导致掉帧（除非可以使用GPU加速）。较短的延时可以让这个现象不引人注目，因为动效可以快速完成。
Natural easing curves
这些自然缓动曲线会影响元素的速度、模糊度（opacity）和尺寸（scale）。
动效期间的加速和减速应该平滑，这样的运动不糊太机械。
当加速和减速不对称的时候，运动过程看起更自然明快。
Easing curve
缓动曲线的名称可能会不同，取决于平台和软件。 本文中将它们称为standard、acceleration、deceleration、和sharp curves。
Standard curve
标准曲线（也称为“ease in out”缓进缓出）是最常见的缓动曲线。元素在屏幕上迅速加速然后缓慢减速。它应用于膨胀和收缩材质，包括其它属性变化在内。更多请参考：movement within screen bounds
Deceleration curve
使用减速曲线（通常也称为“ease out”缓出），元素以全速进入屏幕，然后慢慢减速移动至目标位置。
减速期间，元素的尺寸或模糊度通常变大至100%。一些例子中，元素以0%的模糊的进入屏幕，进入期间会从较大尺寸略微收缩。更多请参考：Movement in and out of screen bounds
Acceleration curve
使用加速曲线（也成为“ease in”缓进），元素以全速退出屏幕。移出屏幕后不减速。
它们在动效开始时加速，其尺寸或模糊度会减小至0%。一些例子中，当元素以0%的模糊度移出屏幕时，尺寸会有微小的变化，可能增大也可能减小。更多请参考：Movement in and out of screen bounds
Sharp curve
使用锐动曲线（也成为“ease in out”缓进缓出），元素会迅速加速迅速减速。用于移出屏幕并可能随时会回来的元素动效中。
元素从屏幕上的起始位置迅速加速，然后以不对称的曲线迅速减速移动到屏幕外的终点。减速过程比标准曲线要快，因为它不用遵循特定的路径来移出屏幕。元素可能会从终点位置随时回来。更多请参考：Movement in and out of screen bounds
3. Movement
材质运动因受到那些与真实世界类似的作用力驱动。
On-screen movement
向上弧线运动（arc upward）
向下弧线运动（arc downward）
In-and-out screen movement
独立运动（Independent movement）
相对运动（Relative movement）
Movement within screen bounds
元素在屏幕边界内两点之间的移动是一条自然的下凹弧线。所有屏幕上的移动使用标准曲线。
Arc upward
逆着重力方向向上运动在真实世界中需要做功。元素在屏幕上向上缓慢弧形加速运动时应该表现出类似的做功过程。
Arc downward
真实世界中，下落的物体会被重力加速。元素在屏幕上向下运动时，通过使用更快速的向下运动来变现这个过程。
When not to arc
元素沿着单一坐标轴移动时不必遵循弧线。这些运动更简单，可以以更快的速度移动。
元素移入或移除屏幕时也要沿着单一坐标轴移动。
设定好进入点，线性的进入方式容易被用户理解与捕捉。
Movement in and out of screen bounds**
Independent movement
元素移入或移除屏幕被认为是独立运动，因其不影响屏幕上其它内容的位置。
Entering the screen
元素快速移入屏幕时使用减速曲线，显示它们过去以峰值速度移动。
Permanently leaving the screen
永久移出屏幕的元素使用加速曲线，在很短时间内移出屏幕，因为它们不会回来不需要用户关注。
Temporarily leaving the screen
暂时移出屏幕的元素应该使用锐动曲线，因为它们随时可能回来且出现在可触及的位置。
Relative movement
元素需要从屏幕上其它元素上面移入或移出时，要使用漫长平缓的缓动曲线，这样可以保证最小的破坏性，避免过于吸引眼球。
标准曲线用于移入或移出屏幕边界的元素。这样的曲线与独立元素相比有着更长的延时。
4. Transforming material
通过扩张或缩小、以及改变形状和尺寸，材质可以让其表面表现的鲜活。
Rectangular transformation
Asymmetric
Symmetric
Radial transformation
Symmetrical and circular
Rectangular transformation
材质改变形状或尺寸时，其宽度和高度不会同时改变。这类变化会和其周围的元素相协调。
屏幕上所有的表面形变，比如下面的例子，都服从标准曲线。
Transforming width and height
元素可能会以对称或非对称的方式扩张或收缩。
非对称形变中，高度和宽度以不同速率改变。这样在多个元素或位置发生变化时表现得最好。
Asymmetric transformation：元素扩张时，让宽度的改变略微提前与高度的变化。收缩时，让宽度的改变略微滞后于高度的变化。
对称形变中，高度和宽度以同样的速率发生变化。在单个元素沿着单一坐标轴变化时变现得最好。
Symmetric transformation：高度和宽度同时发生改变是一种细节更少的动效，最适合简单的形变。这类形变与非对称形变相比有更短的延时。
当元素异步地扩张时，其包含的项目以固定不变的速率变化，防止不自然的拉伸。有关如何在元素表面转换内容的信息，请参考：Choreography
Content (such as a full-width image) transforms at a constant aspect ratio, even as its container (such as a larger card) transforms asynchronously along a motion curve.
Containers with full-bleed content (such as a full-bleed image) may expand synchronously.
Radial transformation
辐射形变是对称的，从用户触摸点为圆心开始形象化。常用于圆形表面往其它形状改变的过程。
- 不要在两个矩形元素形变过程中使用辐射形变
- 不要异步地改变高度和宽度，形成椭圆形变
- 不要变为复杂形状
形变可以从物体当前的位置发生，也可以从最终形成的表面中心发生。
Joining and Dividing
Joining
材质可以加入其它材质，也可以分裂成多片新材质。当两片材质移动经过彼此时，它们的边角相遇，在移动完成前重叠在一起。
Dividing
当材质分裂成多片材质时，各片会在运动初期开始分离。
Shadows
分离开的材质的阴影不能出现在同侪材质的表面上。
5. Choreography
运动的材质通过在动效中共用元素来引导用户的注意力。
** Surface creation**
为新生成的表面安排（stagger）choreography。
** Radial reaction**
利用点击后的涟漪效果将用户输入和表面响应联系在一起。
Continuity
谨慎地选择在动效之间共用的元素的类型和数量，以维持清晰的注意力焦点。
All content elements are shared
当一个表面扩张时，在动效过程中大量的元素应保持可见状态。
复杂动效中，应该保持单个元素可见。
Few or no content elements are shared
扩张表面时，只要在动效后只呈现单个元素，那么该元素就应是动效过程中注意力的集中点，控制所有其它元素。
No shared surfaces(Not recommended)
如果在动效过程中没有共用的表面，新的表面从其它位置进入屏幕，形成新的注意力焦点。
Multiple shared elements
当动效过程中多个元素保持可见状态时，只应把最重要的那个呈现出来。如果它们在动效中过于引人注目，则应该在动效中被隐藏，而在动效完成时再出现。
Layout awareness
如果在动效完成时有元素没有加载出来，要在该元素出现的地方留下足够的空间。避免在元素最终加载出来后造成布局漂移，避免可点击的元素突然移动时给用户带来困扰。
Creation
新的表面和其中的内容，可以凭空创造。
Creating new surfaces
将新创建的表面和创造它的元素或操作联系起来。新的表面一般圆形或矩形从触控点扩展生成。
Choreographing surfaces
当多个表面同时生成时，要迅速地错开各自出现的时间。在单个方向上，创造一条清晰平滑的注意力焦点路径。
Autonomous surface creation
新的表面生成时没有用户输入或没有源点，应该优雅地综合使用可见性变换（fading）、位置变换（position）和尺寸变换（scaling）等转换动效。
Radial reaction**
使用辐射操作可以清晰呈现用户输入和表面响应之间的关系。
User input
通过使用点击之后的涟漪动效，既能象征触控点，也可以象征触控输入被系统接收确认，以此建立用户输入和屏幕响应之间的联系。
触控点附近的屏幕响应应该比较远一些位置的响应更迅速。
6. Creative customization
过渡动画可以被广泛地用于多种场景，来实现美学和功能的统一。
Icon types
系统图标要完成双重功能
应用图标应该展现优美
Icons
System icons
所有的图标应具备双重功能。例如，菜单图标可能会平滑地转换为返回按钮，还可以再变回去。这样的效果既可以向用户传达按钮的功能，还能为交互过程增添些许惊喜。
- Transforming the menu icon into the back arrow signifies that the two actions are connected, and that one cannot exist while the other is present. The back button must be pressed in order to return to the top-level view with the menu icon.
- Transforming the play button to a pause button signifies that the two actions are linked, and that pressing one makes the other one visible.
- When pressing this floating action button, the plus sign transforms into a pencil. This indicates that the pencil is the primary creation method.
Product icons
应用图标动效从应用加载的时候开始向用户展示优雅的产品形象。
- The Inbox product icon animation displays when the user opens the app for the first time and is asked to sign in.
- The Calendar product icon animation displays when the user’s calendar data is loaded for the first time.
- The Photos product icon animation displays when the user opens the app for the first time and enters the warm welcome.
- The Gmail product icon animation has a slightly more playful personality while still keeping a similar reveal, and is also displayed when the user opens the app for the first time and is asked to sign in.
illustrations
精妙的插图动画可以为用户体验中增加娱乐戏谑感。
- When displaying an unexpected error, use it as an opportunity to delight with animation
- Animating the bicycle while Calendar schedules a goal helps entertain the user while the task finishes.
- Rewarding the user with an animation when they accomplish personal goals, like reaching Inbox Zero, can create deeper engagement with app features.
- Animating an illustration for a new feature can educate the user about the feature in a memorable way.