 動效讓 UI 更有表現力和易于使用。即使動效有很多的潛能，但它可能是設計原則中最少被理解的。這可能是因為它是設計家族中最新的成員。視覺和交互設計可以追溯到早期的 GUI，但動效設計需要等待現代化的硬件來流暢的渲染動畫才可以。UI 動效和傳統動畫的重疊也會讓人模糊不清。在 Disney 的 12 個基本原則 上，需要花費一生的時間來掌握它們，這意味著 UI 動效設計也同樣這么復雜嗎？人們經常告訴我，設計動效是很復雜的，亦或是選擇正確的值是很玄學的。我認為，作為 UI 中的重要領域，動效設計可以也應該是簡單的。 從哪里開始動效的主要工作就是通過具象化 UI 元素之間的關系來幫助用戶瀏覽一個 app。動效也有給 app 添加特性的功能，通過帶有動畫的圖標，logo 和插圖；然而，構建良好的可用性應該比增加表現度更重要。在展示你特性動畫的技巧前，通過專注于導航過渡，讓我們先從設計一個堅實的動效基礎開始。 過渡模式當設計一個導航過渡時，簡易性和連續(xù)性是最關鍵的。為了實現這個目標，我們有兩種類型的動效模式可以選擇：
基于容器的過渡。 一些元素比如文本，圖標和圖片被組合到容器中 如果一個組合包含一個容器，比如按鈕，卡片或列表，那么它的過渡設計應該是基于其容器進行動畫的。容器通常很容易被發(fā)現，因為其可見的邊界，但要記住，他們也可能在過渡開始前都不可見，就像一個沒有分割線的列表。這個模式可以被分解為三個步驟： 1. 使用 Material’s standard easing 讓容器進行動畫（即它會先迅速加速然后慢慢減速至停止）。在這個例子中，容器的大小和圓角半徑會從一個圓形按鈕變化到一個充滿屏幕的長方形。  2. 改變容器內元素的大小來適應寬度。元素被固定在頂端并且被容器遮蓋。這為容器和其內的元素創(chuàng)造了一個清晰地聯系。  3. 元素在容器加速時通過淡出過渡離開。元素在容器減速時通過淡入過渡進入。流暢地處理效果的技巧是通過在元素迅速移動時讓他們淡入/淡出來實現的。  【將這個模式運用到所有涉及容器的過渡中可以建立一致的風格。它也會讓開始和結束的組合之間的關系清晰明了，因為它們被帶有動效的容器連接了起來。為了展示這種模式的靈活性，下面是將它運用到 5 種不同組合上的例子：  一些容器簡單地使用 Material’s standard easing 從屏幕外側劃入。它劃入的方向受它關聯的組件的位置影響。比如，點擊一個屏幕左上角的導航抽屜圖標會讓容器從左側劃入。  如果一個容器是從屏幕內出現，它會漸入并且放大。相比于從 0% 開始，它其實是從 95% 開始放大，為了避免過渡動畫吸引了過多的注意力。大小改變動畫使用了 Material’s deceleration easing，意味著它從最高速度開始，然后慢慢的減速到停止。對于退出來說，容器只是簡單地淡出，不進行任何大小的改變。相對于進入動畫，退出動畫被設計得更微妙，為了將注意力集中到新的內容上。  不基于容器的過渡一些組合是沒有一個容器讓過渡在其上設計的，比如點擊一個底部導航圖標，帶用戶到一個新的目的地。在這些案例中，一個兩步式的模式會被使用：
 如果開始和結束的組合有一個清晰的空間和順序上的關系，它們可以共享一個動效來加強這個關系。比如導航一個分步組件時，開始和結束的組合在淡入/淡出時共享一個垂直方向的滑動動效。這加強了它們垂直方向的排列布局。當點擊一個引導頁流程上的下一步按鈕，這些組合共享一個橫向的滑動動效。從左向右移動加強了流程上的概念。共享的動效使用了 Material’s standard easing。  最佳的練習保持簡單化考慮到它們高使用頻率和可用性之間的強聯系，導航過渡大多數情況下應該偏向于功能性而不是設計感。這并不是說它們永遠不具有設計感，只是確定設計風格的選擇應該根據品牌調整。抓人眼球的動效一般會被用到類似小圖標，logo，加載符或是空狀態(tài)這些元素上。下面一個簡單的例子或許不會在 Dribbble 上獲得很多關注，但它會讓 app 更有可用性。  選擇正確的持續(xù)時間和 easing導航過渡應該使用合適的持續(xù)時間，將功能快速排出優(yōu)先級但不要太快，這樣會變得讓人迷惑。持續(xù)時間是根據動畫需要占據多少屏幕來選擇的。因為導航過渡通常占據了屏幕中的大部分空間，300ms 的長的持續(xù)時間是一個不錯的經驗結果。相反，想切換這種小的組件會使用一個 100ms 的短的持續(xù)時間。如果一個過渡感覺太快或太慢，以 25ms 為單位增量調整它的持續(xù)時間知道達到合適的平衡。 Easing 描繪了動畫加速和減速的比率。大多數導航過渡都使用 Material’s standard easing，這是一種不均勻的 easing 類型。這意味著元素會迅速加速然后緩慢減速來將注意力集中到最終的過渡上。這種 easing 類型給了動畫一種自然地感覺，因為真實世界的物體并不是立即開始或停止運動的。如果一個過渡看起來很呆板或者很機械，可能是錯誤地選擇了均勻的或是線性的 easing。 文章簡要介紹的模式和最佳的練習旨在建立一個實用和精細的動效風格。這適用于大多數的 app，然而一些品牌可能有風格表現更強烈的需求。想學習更多的關于動效設計風格的，點擊這里閱讀我們關于自定義動效的指南。 一旦開始考慮導航過渡，給你的 app 添加特性的挑戰(zhàn)就開始了。在這里，簡單的模式并不適合，而動畫的工藝會真正閃耀起來。 如果你有興趣了解更多的關于動效的內容，一定要閱讀我們的 Material motion guidelines。
|
|
|
