昨天我們了解到 Motion 動作可以強化結構層次、表現品牌、增加回饋和狀態及幫助用戶執行。更了解到各種畫面及元件在轉場動畫上的設定，各種主題在軸線上的轉場含義，使用順暢的動畫效果強調轉入元素，在各種細節上增強畫面元件的關聯性、提供使用者互動回饋。
今天我們將繼續完成 Material Design 中 Motion 動作的速度、編舞、客制化的章節，就讓我們繼續看下去吧。
Understanding motion 了解動作
The motion system 動作系統
Speed 速度
SChoreography 編舞
Customization 客制化
速度調整使轉場順暢且迅速。
轉場的速度調整可以使畫面具有迅速且順暢的動畫效果，速度調整包括轉場持續時間和緩和（ 隨著時間加、減速 ），通過調整速度來控製轉場有助於用戶理解 UI 更改，而不會使任務複雜化。無論轉場動畫的型式如何，轉場速度都不應該太快或太慢，過快會畫面看起來就像閃爍而過，過慢會使用戶感覺好像在等待。持續時間和緩和的正確組合會產生平穩清晰的轉場。
關閉或折疊元件的轉場時間較短，退出離開的轉場效果可能更快，與用戶的下一個任務相比，他們所需的注意力較少。例如: 側拉式選單的開啟時間超過 250 毫秒，但關閉時間只需 200 毫秒、擴展畫面範圍到全螢幕超過 300 毫秒，但關閉時間只需 250 毫秒。
小零件的轉場時間比大型區域的轉場時間短，圖示和控制元件的轉場區域較小持續時間較短 ( 例如: 開關切換動畫為 100 毫秒 )。中型元件具有較大的轉場區域，持續時間會稍微長一點 ( 例如: 底部應用列和標籤拓展 )。全螢幕元件大部分持續時間最長 ( 例如: 搜尋框過大為全螢幕和顯式購物車頁面 )。
緩和藉由調整動畫的變化率，使轉場元件動畫時間可以加速和減速，而不是以恆定的速度執行。在物理世界中，物體不會立即啟動或停止，就像摩擦、重力和質量之類的自然力在起作用一樣，需要花時間加速和減速。沒有緩和的轉場看起來剛硬而具有機械感，而具有緩和的轉場與自然界的動態相似。緩和類型在各個平台上的命名可能不同。
Material 緩和分為：標準，強調，加速和減速。Material 提供這四種緩和方式的 轉場動態時間軌跡圖。
標準緩和通過花更多的時間來減速而不是加速，巧妙得在動畫結束時引起注意。標準緩和是最常見的緩和形式。從靜止狀態開始和結束的元素使用標準緩和。它們會快速加速並逐漸放慢速度來強調轉換動態的結束。具有標準緩和的元件在接近軌跡終點時會減慢速度。
強調緩和與標準緩和相比，強調緩和會在動畫結束時引起更多注目。強調緩和使用較長的持續時間，傳達具有風格的速度感。在開始和結束於靜止的元件都使用強調緩和。它們會快速加速，然後逐漸緩慢地減速，並特別強調結束的轉換。強調緩和的元件在接近軌跡終點時會非常緩慢地減速。
滑入元件使用減速緩和動畫，轉場以尖峰速度（元素動作最快速時）開始在靜止的時候結束。具有減速緩和的動畫元件會快速進入並在靜止時結束。
滑出元件使用加速緩和動畫，這是元件從靜止開始以尖峰速度結束的轉場。具有加速緩和的元件開始時緩慢，通過快速滑出元件完成加速緩和的動畫效果。
轉場編排主要協調動畫的排序，在介面設計中適時引起用戶的焦點。排序動畫發生的順序，一個好的序列可以幫助用戶了解螢幕上發生了什麼變化（例如: 增加或刪除元件），並且引導使用者將注意力集中在目前互動的重要內容上。
序列中的 UI 元件分為傳出、傳入或永久性。
傳出元件退出屏幕
傳入元件進入屏幕
永久元件在屏幕上開始和結束
在下圖展示互動工具中，永久性元件（容器）為藍色；傳出元件（列表項內容）為紅色；並且傳入元件（詳細頁面內容）為綠色。
可以使用以下三種淡入淡出類型來
漸變轉場使用在完全重疊的元素（例如: 容器內兩張不同的照片）之間建立平滑的序列。元素以淡入顯示或淡出消失以顯示或隱藏其後面的元素。
交叉漸變同時轉換兩個元素：一個淡入而另一個淡出。在序列中兩個元素以及它們後方的所有元件會一起顯示。當畫面進行轉場變成半透明元件時會顯現後方元件，可能導致框架混亂和分散注意力。
直接漸變在傳入元件淡入之前，傳出元素會完全淡出。此種淡入方始可以減少重疊時的透明元素。
尖峰速度是指轉場中最快的時刻。所有衰退傳出的動畫類型都與轉場的尖峰速度協調。以尖峰速度轉場時應用漸變和交叉漸變。加入這些轉場效果可以避免畫面轉為半透明時顯現下方物件的狀況。
使用直接漸變效果時，輸出元件將在尖峰速度過後逐漸消失，而後傳入元件淡入。在轉換畫面時傳出內容和傳入的頁面內容都是透明的時，序列將在轉換期間隱藏空白框架實現更無縫的轉場。
轉型描述了轉場元素的特定動畫。例如: 改變大小、位置和不透明度是一個元件或一組元件可以進行的轉換類型。
當一個畫面同時具有多個元件需要製作轉場時，元件被組合做為單個物件來進行畫面排版的轉場，群組化的轉場方式提供了連續性將各元件逐漸淡入或淡出，這樣可以避免多個元件動畫轉場同時發生搶奪用戶注意力。群組化的元件依照以下三種漸變類型排序：漸變，交叉漸變或直接漸變。
如果一個元件有明確定義的邊界 ( 例如: 區塊或一組分隔線 )，則會進行容器轉場，元件依照原始長寬比按照寬度縮放到畫面並固定在畫面頂部。當元件不具有明確定義的邊界時，則使用共享的畫面區域進行順暢得轉場 ( 例如: 動作按鈕內的圖示使用旋轉進行轉場創造動作的連續性 )。
轉場中的焦點元件是在轉場效果中的重要元件，像動畫容器一樣，焦點元件通過無縫轉換外觀來增強連續性。某些轉場會將焦點元素放置於其他元件的群組中。在這些情況下請避免使用焦點元素，而應使用淡入淡出的轉場效果。
可以自訂動畫轉場效果符合品牌風格。
例如: 一個產能相關的應用程式會採用標準緩和及較短的持續時間，使用戶能夠專注於手上的任務。而具有趣味性的應用可能會通過振盪、弧線動作路徑、強調高度和錯位...等各種效果，更明顯、更自由的表達品牌。
可以通過更改轉場的持續時間（經過的時間）和緩和效果（加速和減速）來調整速度。強調功能性可以使用標準緩和並將持續時間縮短，想要具有風格化可以使用強調緩和並拉長持續時間，標準緩和持續時間為 300ms，強調緩和持續時間為 650ms。
如果轉場中的元件沿對角線移動，移動路徑可以是線性的或弧形的。線性動畫路徑具有簡單而實用的風格，而弧形動畫路徑則具有強調和生動的風格。
在預設狀態下轉場效果在抵達目標終點時完全停止，增加畫面振盪效果後，振盪轉場效果路徑會在抵達目標終點時超出目標範圍大小後再回歸原始範圍，振盪可以用來表達趣味及充滿活力的轉場風格。
具有固定長寬的元件使用容器轉場方式，運用共享軸方式來對這些轉場進行，可以使轉場狀況更美好。
在預設狀態下背景內容會在轉場期間保持不變。通過設定背景大小來強調高度。通過強調前方元件與背景內容之間的距離來設定轉場效果會使畫面更加生動。
交錯的轉場效果創造層次感，可以短暫的吸引目光在群組中每個元件上。在預設狀態下傳入畫面的元件會轉換為單一組件，通過對組件內的每個元件增加持續時間，可以將交錯轉場效果添加到傳入的每個元件，創造簡單又具有層次感的動畫效果。
今天我們了解到 Motion 動作中，轉場動畫可以藉由控制速度及緩和速度帶給用戶順暢的畫面轉場，搭配持續時間的運用可以讓轉場效果如同自然物體的動態。藉由編排動畫的順序安排畫面中的物件，元件改變形狀之後依照層次結構顯示，最後搭配符合品牌風格的轉場效果動畫。除了可以提高注目性也可以幫助用戶順暢的完成任務。
明天讓我們繼續完成 Interaction 相互作用 的章節，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！
如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~
iThome鐵人賽
看影片追技術