2017 Material Design中文完整版：第二章节第五节《动效：编排》

五、编排（Choreography）  

Material的动效能够吸引用户注意力，引导用户关注。

形状变化

合理的编排设计整个动效中形状变化过程。

径向变化的反馈方式

当用户触发某个material对象之时，反馈以径向变化的方式表现（就像水波一样）。

  

 

- 连续性  

仔细挑选变化中所涉及到的元素来进行变化，目的是变化期间用户仍然能保持聚焦，不会因散乱而分散用户的注意力。

内容中的所有元素在变化后可见

在变化过程中，那些需要用户关注的元素需要一直保持可见。

复杂的变化过程中需要保持仅有一个元素是可见的。（见下文）

如图，卡片（card）在扩大变化后仍保留了原本已有的元素可见，以及出现了其他的元素。

内容中很少或者没有元素在变化后可见

如果一个内容在扩大变化之后，原本含有的元素中只有一个元素可见，那么该元素将作为整个变化过程的焦点，并控制其他所有的元素进行变化。

非可见内容跟随可见内容进行运动。

如果一个内容在扩大变化之后，原本含有的元素中没有一个元素可见，那么那些所有淡入淡出的元素（变化后出现的元素）将跟随着整个内容（面）作垂直运动。

非可见内容跟随整个内容（面）做垂直运动。

整个内容在变化后不可见  

如果在开始变化后整个内容（面）就已经不可见了，那么就需要从屏幕的另一端出现一个新的内容（面）并创建新的焦点。

内容中多个元素在变化后可见

如果内容在变化的过程中有很多个元素保持可见，那么其中只需要保持一个重要的元素可见即可。一些元素在变化的过程中需要消失，但一旦变化完成就会立马出现，这样做的原因是：如果有太多的元素在变化过程中都保持可见的话，那么就会分散用户的注意力。

可行

只对最重要的元素可见，使之来引导用户注意力。

不可行

避免整个变化过程中失去视觉焦点，比如太多元素在变化过程可见或者各元素在变化过程中的运动路径相互交叉。

布局意识

如果在变化完成后有一些元素没有加载完成，那么你需要预留足够的空间让这些元素加载完成后出现。这可以有效防止因元素突然出现导致布局中不和谐的声音，以及避免用户触发后因某些元素的突然消失令用户感到失望。

可行

留出足够的空间给正在加载的元素，当元素一旦加载完成就能显示。

不可行

当元素加载完成再改变布局令其出现，这种做法只会令用户分心和失去视觉焦点。

- 创建  

新的material对象以及其内容都可以凭空出现（凭空被创建出来）。

创建一个新的material对象

用户触发某个页面中的元素可能会创建出新的material对象。这个新的material对象一般以触发点为基点，径向或矩形缩放的方式出现。

可行

如图，当用户触发页面中的元素，菜单（menu）就会随之出现。该菜单跟页面中的这个元素是相互关联的关系。

不可行

如图，该菜单出现的方式就好像跟用户触发的这个元素没任何关系一样。

编排material对象

当我们同时创建多个material对象的时候，这些material对象应该陆续快速的出现。并且这些material对象的出现过程应该保持一条清晰、平滑的运动路径以便于用户聚焦。

可行

如图，列表中的元素有秩序地陆续出现。

不可行

如图，列表中的元素不应该全部一起出现。这样会给人带来压迫感和失去视觉聚焦点。

不可行

如图，因为列表中的元素已经是错开的出现，所以如果还要加以某种运动路径在引导用户视线的话，只会适得其反，令原本清晰的运动变得非常混乱。

不可行

不要等一个元素出现完毕再出现下一个。每个元素出现的间隔最多不超过20ms。

自动创建新的material对象

新的material对象可以不通过用户触发或者凭空就能出现，其出现的方式：使用简练的淡入/出、位置以及尺寸的变化。

可行

如图，一个新的material对象以平滑、快速的运动方式凭空出现。

不可行

在出现过程中使用了过多的动画效果，这样很容易分散用户注意力。

 

- 径向变化的反馈方式  

使用径向变化的反馈方式来提醒用户是否触发（输入）。

用户输入

无论是鼠标点击还是手指触发，都是通过波纹（径向变化）动效和触发点的指示来告诉用户输入（触发）事件被系统接收。

以触发点为中点向外做波纹（径向变化）动效。

以触发点为中心向外做波纹（径向变化）动效。

如图中案例，当用户触发“返回”键，整个导航栏的颜色以触发点为中心向外扩散（波纹动效）改变颜色。

如图中案例，当用户点击某张图片，其余图片会以点击图片为中心向外扩散淡出。