[譯] 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。