讓 UI 動畫更加出色的幾個小 tip

本文翻譯自 pablo stanley 的 good to great ui animation tips，請參考原文閱讀。

如何讓 ui 動畫從單純的良好變得更加出色呢？在這裡我將舉一些例項。只需要將動畫進行一些微調，就可以讓其效果更佳。

下面列出的互動效果顯示了狀態之間的連續性，共享元素之間的關係，以及如何讓使用者關注你想讓他們關注的地方。

為了建立這些動畫，我遵循了 material motion、ibm』s animation principles 和 the ux in motion manifesto 中的指導原則。

所有互動都是使用 invision studio 的早期可訪問版本處理的。

• 良好的動畫可以讓內容從一種狀態淡入淡出到另一種狀態。

• 出色的動畫通過讓內容在狀態之間移動來顯示過渡的連續性。

在設計諸如選項卡或彈出選單之類的互動時，請嘗試將內容的位置放置在相對於開啟它的操作的位置。這樣，您不僅可以為內容設定可見性動畫，還可以為設定位置動畫。另外還可以新增滑動手勢，以從一種內容轉移到另一種內容。

• 良好的動畫使用諸如向左推或向上滑動之類的過渡來在詳情頁面上顯示內容。

• 出色的動畫通過為共享內容設定動畫來在兩個狀態之間建立聯絡。

在不同狀態之間設定動畫時，看看它們之間是否存在任何共享元素，如果有的話可以考慮通過某種動畫將它們連線想來。使用 invision studio，在建立 motion 過渡時，將自動連線在兩個螢幕之間重複的元件。這使原型動畫製作變得輕而易舉。

可以檢視 motion manifesto 以了解可以使用的動畫型別。上面的示例結合了 masking、transformation、parenting 和 easing 幾種動畫效果。

• 良好的動畫會在內容進入螢幕時改變其位置和不透明度。

• 出色的動畫會讓每個分組或元素的外觀錯開。

• 良好的動畫會在上下文中移動並顯示元素。

• 出色的動畫會顯示元素在更改時對周圍元素的影響。

讓內容中的元素了解其周圍環境。這意味著可以讓內容吸引或排斥周圍的元素。有關更多示例，請檢視 material design 中的 aware 運動原理。

• 良好的動畫選單讓內容從開啟選單的按鈕方向顯示出來。

• 出色的動畫選單從創造它們的動作**現，從觸控的角度出發不斷擴充套件。

• 良好的互動會在按鈕旁邊顯示事件。

• 出色的互動使用按鈕本身來顯示不同的狀態。

嘗試使用按鈕容器來提供狀態的視覺反饋。例如，您可以將cta替換為微調器或載入動畫。或者可以將動畫新增到背景中以顯示進度。解決方案取決於您，其想法是利用使用者已經與之互動的空間。如果您使用按鈕顏色的改變以確認成功狀態，則可獲得不錯的加分。

• 良好的設計使用顏色、大小和位置來突出顯示使用者需要注意或採取的重要操作。

• 出色的設計使用動畫來吸引人們注意這一重要動作，而不會造成破壞。

當使用者需要對重要的事情採取行動時，請嘗試設定動畫以吸引他們的注意力。從微妙的動畫開始，並根據動作的重要性增加強度（大小，顏色和速度的變化）。僅將其用於關鍵操作 -- 使用此效果的次數越多，其影響就越小，而且還會打擾到使用者?。

希望這些示例可以幫助您在向互動中新增動畫時做出更好的決策。借助 invision studio 等新的動畫和原型製作工具，預計我們很快就會開始看到創意互動的復興。

讓我們應用動畫來解釋狀態的變化，吸引人們注意必要的動作，確定元素之間的關係，並為我們的產品增添些許樂趣和特色。遵循這些原則，我們將把動畫從良好轉變為出色。

-- end --