超實用！7 個優秀的 UI 互動動畫技巧

以下是提高 ui 動效的實用建議，讓我們一起看看 ui 互動動畫從良好走向優秀的例項。他們是如何通過細節的調整，使用互動動畫來提公升使用者的介面體驗。

本文所列出的介面主要顯示狀態之間的連續性，表示共享元素之間的關係並將使用者的注意力引向他們應該注意和採取行動的事物上。

為了建立這些動畫，我遵循了來自 material motion、ibm 的動畫原理和 ux in motion manifesto 中的指導原則。

左邊的內容是淡入淡出的，右邊的內容是隨著標籤一起滑動。

乙個好的動畫會將內容從一種狀態轉換為另乙個狀態。

乙個優秀的動畫則是使內容在不同的狀態轉換之間保持連續性。

當你設計像標籤或彈出選單類似的互動時，可以嘗試將內容的位置與開啟它的操作相關聯。這樣你不僅可以提公升內容的可見性，還可以為內容的位置設定動畫。當你在設計這個動畫的時候，還可以新增乙個滑動手勢，將你從乙個內容帶到另乙個內容。

左邊的內容是開啟乙個向上滑動的新介面，右邊的內容是將卡片展開並填充滿整個螢幕。

乙個好的動畫使用向左或向上滑動等過渡細節來展示內容。

乙個優秀的動畫通過共享元素的動畫來建立兩個狀態之間的聯絡。

在不同狀態之間製作動畫時，檢視它們之間是否有存在共享元素並將它們聯絡起來。在使用 invision studio 時，建立 motion 轉換時會自動連線兩個螢幕之間重複的元件。這使得原型動畫的製作變得輕而易舉。

檢視動畫宣言，了解您可以應用的動畫型別。上面的示例使用了 masking，transformation，parenting 和 easing 原則的組合。

左邊的內容是在動畫中有滑動和淡入的顯示，右邊是相同的動畫，但每張卡片都有短暫的延遲。

乙個好的動畫會在元素進入介面時改變元素的位置和不透明度。

乙個優秀的動畫會很快的將介面元素錯落有序的出現。

左邊的內容是蓋在其他內容的上面，右邊的內容是隨著介面的展開將內容推出來。

乙個好的動畫是在上下文中移動並顯示元素。

乙個優秀的動畫是在當元素改變時會影響周圍環境的元素。

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

左邊的內容是選單從下面飛進來，右邊的內容是選單從建立它的動作中擴充套件而來。

乙個好的動畫是選單從開啟它們的按鈕方向顯示出現的內容。

乙個優秀的動畫是從建立它們的動作中浮現出來，從觸控點開始展開。

左邊的內容是按鈕顯示指示狀態的文字，右邊的內容是按鈕使用變化的容器來顯示不同的事件。

乙個好的動畫是在按鈕附近顯示事件。

乙個優秀的動畫是使用按鈕本身來顯示不同的狀態。

嘗試使用按鈕的容器來提供狀態的可視反饋。例如，您可以使用微調器或載入動畫替換 cta; 或者您可以在顯示進度的背景中新增動畫。解決方案取決於您，我們的想法是使用使用者已經與之互動的空間。如果您使用按鈕顏色和樣式來確認成功狀態，則獎勵積分。

左邊的內容是用顏色和位置使元素脫穎而出，右邊的內容是使用微妙的動畫來引起使用者的注意。

乙個好的動畫會使用顏色，大小和位置來突出使用者需要注意或採取的重要操作。

乙個優秀的動畫會使用動畫來引起使用者對重要操作的關注，並且不會對使用者造成干擾。

當使用者需要對重要事項採取行動時，請嘗試設定動畫來吸引他們的注意力。從乙個微妙的動畫開始，增加與動作重要程度相關的強度（大小，顏色和速度的變化）。同時僅將其用於關鍵操作，您使用此效果的次數越多，其影響就越小，並且使用者獲得的煩惱也會越多。

我希望這些示例可以幫助您在為互動新增動畫時做出更好的決策。借助 invision 工作室等新動畫和原型製作工具，我**我們很快就會看到創意互動的復興。我們只需要負責任地在這個新的超級大國裡任意發揮。

讓我們應用動畫來解釋狀態的變化，引起對必要動作的注意，確定元素之間的關係，並為我們的產品新增一些樂趣和特徵。通過遵循這些原則，我們將把動畫從好轉變為優秀。

作 / pabloy stanley

譯 / 大學不輕鬆 @ 創宇前端

好看的皮囊千篇一律，有趣的靈魂一百四十斤

編 / 熒聲 @ 創宇前端