外國資深設計師萬贊好文：谷歌 Material Design UX 動效設計寶典
編者按：資深UX設計師Taras Skytskyi分享的基於谷歌Material Design設計規範的UX動效設計寶典。文章釋出於Medium，點贊超過三萬，原標題 ofollow,noindex" target="_blank">The ultimate guide to proper use of animation in UX
如今，軟體使用者介面的動畫效果很難給人留下深刻的印象，甚至是驚喜。然而，它展示了軟體各螢幕之間的互動，說明了如何使用應用程式，或者只是簡單地引導使用者的注意力。在瀏覽關於動畫效果的文章時，我發現幾乎所有的文章都只描述了特定的用例或者關於動畫效果的一般事實，但是我還沒有遇到過任何一篇文章能夠清晰的描述所有關於介面動畫的規則。既然如此，在這篇文章中我不會寫任何新的東西，我只是想把所有的主要原則和規則集中在一個地方，這樣其他想要涉足程式介面動效領域的設計師就不必搜尋額外的資訊了。
動畫的持續時間與速度
當介面上的各個元素改變它們的狀態或位置時，動畫的持續時間應該足夠慢，讓使用者有可能注意到變化，但同時又應該足夠快，不會引起等待。
大量研究發現，介面動畫的最佳速度在200到500毫秒之間。這一區間是根據人類大腦的特殊特性得出的。任何小於100毫秒的動畫都是即時的，根本不會被識別。而超過1秒的動畫會傳達一種延遲的感覺，因此對使用者來說很無聊。
在移動裝置上，谷歌Material Design的設計規範還建議將動畫的持續時間限制在200-300毫秒。至於平板電腦，使用時間應該更長30% ，即大約400-450毫秒。原因很簡單：由於裝置螢幕的尺寸更大，所以當物體改變位置時，會克服更長的路徑。在可穿戴裝置上，續航時間應該相應地縮短30%——大約150-200毫秒，因為在小螢幕上，元素需要行進的距離變短了。
網頁動畫的處理方式不同。由於我們習慣於在瀏覽器中快速開啟網頁，所以我們也希望能夠在不同的狀態之間快速切換。因此，網頁動畫的持續時間應該比移動裝置短2倍——在150-200毫秒之間。不然的話，使用者將不可避免地認為電腦宕機或有網際網路連線的問題。
但是。如果你想在你的網站上建立一個裝飾性的動畫或者試圖吸引使用者對某些元素的注意，忘記這些規則。在這些情況下，動畫效果的持續時間可以更長。
你需要記住的是，無論平臺如何，動畫的持續時間不僅取決於移動的距離，還取決於物件的大小。較小的元素或帶有小變化的動畫應該移動得更快。因此，具有大型和複雜元素的動畫在持續時間稍長時看起來會更好。
在移動大小相同的元素時，第一個停止的是經過最短距離的那個。
與較大的元素相比，較小的元素移動速度比較慢，這是因為它們的偏移量較大。
介面中各個元素碰撞時，碰撞造成元素間動量的變化必須按照物理規律均勻分佈。所以，最好排除反彈效應。只有在有意義的特殊情況下才使用它。
物體的運動應該是清晰和簡潔的，所以不要使用動態模糊。即使在現代移動裝置上也很難重現這種效果，而且它根本沒有被應用於介面動畫效果中。
列表項（諸如新聞卡片、電子郵件列表等）的出現間隔應該很短。新元素的每次出現都應該持續20到25毫秒。元素出現的較慢可能會惹惱使用者。
緩動
緩動效果有助於使物體的運動更自然。這是動畫的基本原理之一，在《生活的幻覺:迪斯尼動畫》一書中有詳細的描述，這本書是由兩位迪斯尼動畫大師奧利·約翰斯頓（Ollie Johnston）和弗蘭克·托馬斯（Frank Thomas）創作的。
為了使動畫看起來不像機械和人工，物體應該以某種加速或減速的方式運動——就像物理世界中的所有活物體一樣。
線性運動
不受任何物理力影響的物體線性運動，換句話說就是勻速運動。正因為這個事實，它們在人眼看來非常不自然，像是出自人工的痕跡。
所有的動畫應用程式都使用動畫曲線。我將試著解釋如何閱讀它們以及它們的含義。曲線顯示了在相同的時間間隔(x軸)內物體(y軸)的位置如何變化。在目前的情況下，運動是線性的，所以物體在同一時間移動相同的距離。
例如，直線運動只能在物體改變顏色或透明度時使用。一般來說，當一個物件不改變它的位置時，我們可以用它來表示狀態。
緩入或加速曲線
從曲線上可以看出，在開始時物體的位置變化緩慢，速度逐漸增加。這意味著物體以一定的加速度運動。
當物體以全速飛出螢幕時，應該使用這條曲線。這些物體可以是系統通知，也可以只是介面的卡片。但是要記住，這種型別的曲線只能在物件永遠離開螢幕時使用，我們不能撤銷或者回拽它們。
動畫曲線有助於表達正確的情緒。在下面的例子中，我們可以看到所有物體的運動持續時間和距離都是一樣的，但是即使是曲線上的微小變化也有可能影響動畫的情緒。
當然，通過改變曲線，你可以讓物體儘可能接近真實世界。
緩出或減速曲線
它與緩入曲線相反，因此物體先是迅速覆蓋較長距離，然後慢慢降低速度，直到最終停止。
當元素出現在螢幕上時，應該使用這種型別的曲線——它以全速出現在螢幕上，逐漸減速直到完全停止。這也可以應用於從螢幕外部出現的不同卡片或物件。
緩入緩出曲線（標準曲線）
這條曲線使物體在開始時獲得速度，然後慢慢地降回零。這種型別的運動是最常用的介面動畫。當你懷疑在你的動畫中使用什麼型別的運動時，那就請使用這種“標準”曲線。
根據Material Design設計規範，最好使用不對稱曲線，使運動看起來更自然和真實。曲線的末端必須比起點更強調，這樣加速的持續時間就比減速的持續時間短。在這種情況下，使用者將更加關注元素的最終移動，從而關注其新狀態。
當物件從螢幕的一個部分移動到另一個部分時，可以使用緩入緩出曲線。在這種情況下，動畫避免了引人注目的戲劇性效果。
當元素從螢幕上消失時，應該使用相同的移動型別，但是使用者可以在任何時候將其返回到之前的位置。其中包括導航抽屜。
從這些例子都遵循一個被許多初學者忽視了的基本的規則：開始動畫不等於結束動畫。就像導航抽屜一樣——它出現在減速曲線上，消失在標準曲線上。此外，根據谷歌Material Design，物體出現的時間應該更長，以吸引更多的關注。
函式cubic-bezier()用於描述曲線。它叫做立方貝塞爾,因為它是基於4個點。第一個點的座標為0;0(左下)，最後一個點的座標為1;1(右上)。
因此，我們只需要描述圖上的兩個點，這是由函式cubic-bezier()的四個引數給出的:前兩個是第一個點的座標x和y，後兩個是第二個點的座標x和y。
為了用曲線簡化你的工作，我建議使用easings.net和cubic-bezier.com網站。第一個包含最常用的曲線列表，您可以將其複製到原型工具中。第二個網站給你一個試玩不同的引數的曲線的機會，並且可以立即看到物件將如何移動。
介面動畫的時序編排
就像芭蕾舞的編舞一樣，這個問題的在主要思想是從一種狀態過渡到另一種狀態的過程中，引導使用者的注意力的流暢轉移。
時序編排有兩種型別——平等互動和從屬互動。
平等互動
平等互動意味著所有物件的外觀都服從一個特定的規則。
在這種情況下，所有卡片的出現被認為是一個流程，引導使用者的注意力在一個方向上，即從上到下。如果我們不按照這個順序，使用者的注意力就會分散。所有元素同時出現也會很糟糕。
至於表格檢視，它有點複雜。在這裡，使用者的焦點應該是對角的，因此一個一個地顯示元素是一個糟糕的想法。一個一個的顯示每個元素會使動畫過長，使用者的注意力會像鋸齒一樣，這是錯誤的。
從屬互動
從屬互動是指我們有一箇中心物件，它吸引了所有使用者的注意力，所有其他元素都服從於它。這種型別的動畫給人一種秩序感，更多的關注主要內容。
在其他情況下，使用者很難知道要跟蹤哪個物件，從而分散注意力。因此，如果你有幾個元素想要動畫化，你需要清楚地定義它們的運動順序，並且一次儘可能地使最小的物體動畫化。
根據Material Design設計規範，當運動物體的大小不成比例地改變時，它們應該沿著弧線而不是直線運動。這有助於使動作更自然。所謂“不成比例”，是指物體的高度和寬度的增加或減少是不對稱地進行的，即以不同的速度(例如，一張方卡變成一個矩形)。
當物件按比例改變其大小時，將使用沿直線的移動。由於這種運動的實施容易得多，“不成比例”的弧形運動的規律往往被忽視。看看實際應用的例子，你會看到線性運動在此類動效中的統治地位。
曲線上的運動可以通過兩種方式實現：第一種是垂直擴充套件，即物體先水平移動，以垂直運動結束；第二種是水平擴充套件，即物體先垂直移動，並以水平運動結束。
物體沿曲線移動的路徑必須與滾動介面的主軸重合。例如，在下一個影象上，我們可以上下滾動介面，相應地，卡片以垂直的方式展開——先向右，然後向下。反向移動的方式是相反的，即卡片首先垂直上升，最後水平移動。
如果運動物體的路徑彼此相交，它們就不能穿過對方。物體應該通過減慢或加速自身的速度為另一個物體的運動留下足夠的空間。另一種選擇——它們只是推開其他物體。為什麼呢?因為我們假設介面中的所有物件都位於一個平面中。
在另一種情況下，移動的物體可以“高於”其他物體。但同樣沒有溶解或穿過其他物體的移動。為什麼?因為我們相信介面的元素的行為符合物理定律，在現實世界中沒有任何實體能夠做到這一點。
總結
如果我們總結上述所有的規則和原則，介面的動效應該反映我們所熟悉的真實物質世界的運動：比如摩擦,加速等等。通過模仿物件在現實世界的行為我們可以建立一個秩序，使得使用者可以理解在互動介面的執行方式。
如果動畫構建正確，那麼它就不會引人注目，也不會分散使用者對目標的注意力。如果是的話，那麼你就需要修改它，或者乾脆把它去掉。這意味著動畫不應該減慢使用者的操作速度或阻礙他們執行操作。
最後，請不要忘記動畫效果更多的是一門藝術而不是科學，所以仍然需要在使用者身上不斷測試和驗證你的創意和想法。
編譯組出品。編輯：郝鵬程