1. Material Motion
動效（Motion），在材質設計中，順暢柔美地表現空間關系、功能和目的。
Why does motion matters？
動效展現了APP如何組織，以及它有什么作用。動效提供了：
- 在視圖轉換時引導用戶的視覺焦點
- 用戶手勢操作之后暗示操作結果
- 提供不同元素之間的層級和空間關系信息
- 分散用戶對后臺運行情況的注意力（如拉取內容或加載新數據）
- 個性的形象、優雅的交互和愉快的使用過程
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.
