[譯] APP 動效設計，看完就會！（Material Design 設計者撰寫）

• 原文地址：Motion Design Doesn’t Have to Be Hard
• 原文做者：Jonas Naimark
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Ryden Sun
• 校對者：Park-ma neuqzxy

動效讓 UI 更有表現力和易於使用。即便動效有不少的潛能，但它多是設計原則中最少被理解的。這多是由於它是設計家族中最新的成員。視覺和交互設計能夠追溯到早期的 GUI，但動效設計須要等待現代化的硬件來流暢的渲染動畫才能夠。UI 動效和傳統動畫的重疊也會讓人模糊不清。在 Disney 的 12 個基本原則 上，須要花費一輩子的時間來掌握它們，這意味着 UI 動效設計也一樣這麼複雜嗎？人們常常告訴我，設計動效是很複雜的，亦或是選擇正確的值是很玄學的。我認爲，做爲 UI 中的重要領域，動效設計能夠也應該是簡單的。

從哪裏開始

動效的主要工做就是經過具象化 UI 元素之間的關係來幫助用戶瀏覽一個 app。動效也有給 app 添加特性的功能，經過帶有動畫的圖標，logo 和插圖；然而，構建良好的可用性應該比增長表現度更重要。在展現你特性動畫的技巧前，經過專一於導航過渡，讓咱們先從設計一個堅實的動效基礎開始。

過渡模式

當設計一個導航過渡時，簡易性和連續性是最關鍵的。爲了實現這個目標，咱們有兩種類型的動效模式能夠選擇：

1. 基於容器的過渡。
2. 不基於容器的過渡。

基於容器的過渡。

一些元素好比文本，圖標和圖片被組合到容器中

若是一個組合包含一個容器，好比按鈕，卡片或列表，那麼它的過渡設計應該是基於其容器進行動畫的。容器一般很容易被發現，由於其可見的邊界，但要記住，他們也可能在過渡開始前都不可見，就像一個沒有分割線的列表。這個模式能夠被分解爲三個步驟：

1. 使用 Material’s standard easing 讓容器進行動畫（即它會先迅速加速而後慢慢減速至中止）。在這個例子中，容器的大小和圓角半徑會從一個圓形按鈕變化到一個充滿屏幕的長方形。

2. 改變容器內元素的大小來適應寬度。元素被固定在頂端而且被容器遮蓋。這爲容器和其內的元素創造了一個清晰地聯繫。

慢動畫來展現元素如何在容器內被縮放和遮罩

3. 元素在容器加速時經過淡出過渡離開。元素在容器減速時經過淡入過渡進入。流暢地處理效果的技巧是經過在元素迅速移動時讓他們淡入/淡出來實現的。

慢動畫來展現元素是怎麼使用淡入/淡出的

【將這個模式運用到全部涉及容器的過渡中能夠創建一致的風格。它也會讓開始和結束的組合之間的關係清晰明瞭，由於它們被帶有動效的容器鏈接了起來。爲了展現這種模式的靈活性，下面是將它運用到 5 種不一樣組合上的例子：

慢動畫來展現開始和結束的組合是怎樣被容器連接起來的

一些容器簡單地使用 Material’s standard easing 從屏幕外側劃入。它劃入的方向受它關聯的組件的位置影響。好比，點擊一個屏幕左上角的導航抽屜圖標會讓容器從左側劃入。

若是一個容器是從屏幕內出現，它會漸入而且放大。相比於從 0% 開始，它實際上是從 95% 開始放大，爲了不過渡動畫吸引了過多的注意力。大小改變更畫使用了 Material’s deceleration easing，意味着它從最高速度開始，而後慢慢的減速到中止。對於退出來講，容器只是簡單地淡出，不進行任何大小的改變。相對於進入動畫，退出動畫被設計得更微妙，爲了將注意力集中到新的內容上。

慢動畫來展現容器是如何經過淡入和大小改變更畫進入的

不基於容器的過渡

一些組合是沒有一個容器讓過渡在其上設計的，好比點擊一個底部導航圖標，帶用戶到一個新的目的地。在這些案例中，一個兩步式的模式會被使用：

1. 開始的組合經過淡出退出，接着結束的組合經過淡入進入。
2. 隨着結束組合淡入，它也微妙地使用 Material’s deceleration easing 動畫來放大。一樣，大小改變只被運用到進入組合上，爲了強調新的內容。

慢動畫來展現不基於容器的過渡是如何淡入/淡出和改變大小的。

若是開始和結束的組合有一個清晰的空間和順序上的關係，它們能夠共享一個動效來增強這個關係。好比導航一個分步組件時，開始和結束的組合在淡入/淡出時共享一個垂直方向的滑動動效。這增強了它們垂直方向的排列布局。當點擊一個引導頁流程上的下一步按鈕，這些組合共享一個橫向的滑動動效。從左向右移動增強了流程上的概念。共享的動效使用了 Material’s standard easing。

慢動畫來展現垂直向和橫向的共享動效

---

最佳的練習

保持簡單化

考慮到它們高使用頻率和可用性之間的強聯繫，導航過渡大多數狀況下應該偏向於功能性而不是設計感。這並非說它們永遠不具備設計感，只是肯定設計風格的選擇應該根據品牌調整。抓人眼球的動效通常會被用到相似小圖標，logo，加載符或是空狀態這些元素上。下面一個簡單的例子或許不會在 Dribbble 上得到不少關注，但它會讓 app 更有可用性。

慢動畫來展現不一樣的動效風格

選擇正確的持續時間和 easing

導航過渡應該使用合適的持續時間，將功能快速排出優先級但不要太快，這樣會變得讓人迷惑。持續時間是根據動畫須要佔據多少屏幕來選擇的。由於導航過渡一般佔據了屏幕中的大部分空間，300ms 的長的持續時間是一個不錯的經驗結果。相反，想切換這種小的組件會使用一個 100ms 的短的持續時間。若是一個過渡感受太快或太慢，以 25ms 爲單位增量調整它的持續時間知道達到合適的平衡。

Easing 描繪了動畫加速和減速的比率。大多數導航過渡都使用 Material’s standard easing，這是一種不均勻的 easing 類型。這意味着元素會迅速加速而後緩慢減速來將注意力集中到最終的過渡上。這種 easing 類型給了動畫一種天然地感受，由於真實世界的物體並非當即開始或中止運動的。若是一個過渡看起來很呆板或者很機械，多是錯誤地選擇了均勻的或是線性的 easing。

慢動畫來展現不一樣的 easing 類型

---

文章簡要介紹的模式和最佳的練習旨在創建一個實用和精細的動效風格。這適用於大多數的 app，然而一些品牌可能有風格表現更強烈的需求。想學習更多的關於動效設計風格的，點擊這裏閱讀咱們關於自定義動效的指南。

一旦開始考慮導航過渡，給你的 app 添加特性的挑戰就開始了。在這裏，簡單的模式並不適合，而動畫的工藝會真正閃耀起來。

特性動畫能夠給使人沮喪的錯誤增添一點趣味。

若是你有興趣瞭解更多的關於動效的內容，必定要閱讀咱們的 Material motion guidelines。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。