编排

Choreography

运动的材料通过在过度中利用共享元素的交互来引导用户注意力。

Material in motion guides the user’s focus through interactions by sharing elements across transitions.

创建表面

Surface creation

新表面的创建过程中使用交错的编排效果。

Stagger the choreography of new surfaces being created.

径向反馈

Radial reaction

用户输入和表面反应通过波纹进行连接。

Connect user input to surface reactions with touch ripples.

连续性

Continuity

在变化中通过仔细的选择共享元素的数量和类型来保持清晰的焦点。

Maintain a clear focal point during transitions by carefully selecting the number and type of elements shared across the transitions.

所有的内容元素都是可以被分享的

All content elements are shared

当表面扩张时，大量的元素在过度期间应该保持可见。

While a surface is expanding, a significant number of elements should remain visible during the transition.

复杂的变化应该保持一个元素可见（如下）

Complex transitions should keep a single element visible (see below).

此卡片折叠出的所有的元素都是从卡片头部扩展来的。

All elements from this collapsed card form the header of the expanded card.

少数或没有共享内容元素

Few or no content elements are shared

当表面在扩展时，如果在转换后存在 单个元素，那么这个元素就应该是这个转换的焦点，控制者其他元素。

While expanding a surface, if only a single element will be present after the transition, that element should be the focal point of the transition, controlling all other elements.

将非共享元素锚定到单个共享元素的运动中。

Anchoring non-shared content to a single shared element’s movement.

如果两个人视图之间 没有共享元素，则将所有交叉渐变元素锚定到表面垂直运动中。表面进行修饰内容。

If there are no shared elements between views, anchor all crossfading elements to the surface’s vertical movement. The surface crops the content within.

在表面扩展的过程中，将所有非共享元素锚定到垂直方向运动、

Anchoring all non-shared content to the vertical movement of the surface expansion.

无共享表面（不推荐）

No shared surfaces (Not recommended)

如果在交叉变化中 没有共同表面 进行分享，则需要一个新的表面从其它的位置进入屏幕，创建新的焦点。

If there are no common surfaces shared across the transition, a new surface enters the screen from another location, creating a new focal point.

多个共享元素

Multiple shared elements

只有最重要的 多个共享元素 在变化过程中是保持可见的。如果有些元素在变化过程中会过多的分散注意力，那么需要将它们在变化过程中保持隐藏直到他们接近变化完成时出现。

When multiple elements remain visible during a transition, only the most important ones should be included. Some elements may disappear during the transition but reappear once the transition completes, if they are too distracting during the transition itself.

正确，使用最重要的共享元素将用户的注意力转移到下一个视觉上。

Do.Guide the user’s focus to the next view using the most important shared element.

错误，避免创建没有焦点的场景，例如使用许多共享元素使用交叉路径进行过度变形。

Don't.Avoid creating scenes without focus, such as by using many shared elements or by letting elements cross paths during the transition.

布局意识

Layout awareness

当元素在转换未完全加载时，请在元素出现的位置预留出足够的空间。这会防止当该元素出现时，会破坏已经存在的布局，和避免当用户与界面进行交互时突然的布局变化而打断用户原有的意图。

When any element doesn't completely load by the time a transition completes, allow sufficient space in the location where the element will appear. This prevents jarring layout shifts when the elements finally appear, and avoids user frustration when a touch target suddenly jumps away.

正确，在元素转化未完成时，留有足够的空间，并在完成加载时正确优雅的显示它们。

Do.Make room for the unloaded elements during the transition and gracefully display them in place once they fully load.

错误，不要将布局作为元素加载到视图中，因为这会分散注意力和转移用户的焦点

Don't.Don’t shift the layout as elements load into view, as this distracts and causes a shift in focus.

创建

Creation

新的材料表面和他们的内容时可以无中生有的。

New material surfaces, and their content, may be created from nothing.

创建新的表面

Creating new surfaces

将新创建的表面与创建它们的元素或操作相关联。新表面通常从触摸点径向方向或以矩形膨胀开来。

Associate newly created surfaces to the element or action that creates them. New surfaces usually emerge from radial or rectangular expansions from the point of touch.

正确，这个菜单从触摸点出现，将元素绑定到触摸点上。

Do.This menu appears from the touch point, tying the element to the point of touch.

错误，这个菜单的是从远离触摸点的位置出现，所以它打破了他们之间的关联性。

Don't.This menu appears far away from the touch point that triggered it, which breaks its relationship with the input method.

编辑表面

Choreographing surfaces

当同时创建多个新表面时，以快速渐进的方式创建它们。在单个方向创建清晰，流畅的焦点路径。

When multiple new surfaces are created at the same time, quickly stagger the appearance of each. Create a clear, smooth focal path in a single direction.

正确，列表项目使用线性渐进出现进入。表格项目使用从左到右，从上到下的填充方式。

Do.List items have a slightly staggered entrance. Grid items populate left to right, and top to bottom.

错误，出现的项目不要再一次全部出现，这样将会非常的突兀，并且没有焦点。

Don't.Items shouldn’t appear within the list all at once. It’s overwhelming and eliminates a clear focus.

错误，列表项目进入时出现的路径不要是用混乱复杂的路径。

Don't.Items that have a slightly staggered entrance shouldn’t appear in an order that’s confusing to follow.

错误，不要等待每个项目的动画完全在入完之后在进行下一个。从开始每个项目的交错时差不要超过20ms。

Don't.Do not wait for each item to fully animate before introducing the next item. Begin each item’s staggered entrance no more than 20ms apart.

自动表面创建

Autonomous surface creation

在用户没有输入或没有原点的情况下创建表面应该使用渐变，位置，缩放等优雅的效果组合。

Surfaces created without user input, or without a point of origin, should do so using an elegant combination of fading, position, and scaling transformations.

正确，一个自动创建的表面以顺滑和快速的方式出现

Do.An automatically triggered surface appears smoothly and quickly.

错误，在自动创建表面的过程中，使用了过多的动画分散了用户注意力

Don't.Too much animation during surface creation is distracting.

径向反馈

Radial reaction

使用径向反馈来连接用户输入和表面反应之间的联系。

Clarify the connection between user input and surface reactions using radial action.

用户输入

User input

使用触摸波纹将用户输入和屏幕反应联系起来，用触摸点来表示输入指令已被设备接收。对于触摸和鼠标，效果发生在接触点。

Connect user input to screen reactions by using touch ripples to both indicate the point of touch, and to confirm that touch input was received. For touch or mouse, this occurs at the point of contact.

在触摸点附近发生的屏幕反应应该比距离稍远位置的反应更早。

Screen reactions occurring near the point of touch should occur sooner than reactions further away.

使用触摸波纹将用户输入和屏幕反应联系起来。

Use touch ripples to connect screen reactions to the point of touch.

这个应用栏颜色的改变是以触摸点为起始点，向四周扩散的。

Starting from the point of touch, the app bar changes color with the new color rippling outwards.

此网格中的图像基于点击点周围的径向反馈渐变出现。

Images in this grid fade out based on the radial reaction around the tap point.