改進 UI 微互動的實用建議

下面是一些優秀和更高明的 ui 微互動對比示例。隨著一點點地調整，你可以用動畫來改進你的 ui 布局。

所列出的互動展示了狀態之間的連續性，表示共享元素之間的關係，並且將使用者的注意力引向他們應該注意和採取動作的點上。

為了構建這些動畫，我遵循了 material motion、ibm 的動畫原則以及 motion manifesto 中的 ux 準則。

左邊的內容漸入漸出，右邊隨 tab 滑動。

當設計 tab 頁或是彈出式選單的互動時，嘗試在觸發事件的地方定位內容的位置，除了控制顯示，還可以在位置方面加入動畫。當這樣設計時，可以加乙個滑動手勢，將你從內容的一方帶到另一方。

左邊的內容在向上滑動的時候開啟了乙個新的螢幕。右邊的卡片則是放大並填充螢幕來顯示內容。

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

檢視 motion manifesto 以了解你可以應用的動畫型別。上面的例子使用了 masking、transformation、parenting 和 easing 原則的組合。

左邊的卡片通過滑動和淡入而出現，右邊的卡片使用了相同的動畫，但每個卡片有乙個短暫的延遲。

左側的動畫位於其他內容的頂部。右側的動畫隨著其增長將內容推出。

讓內容中的元素知道他們的周圍元素。這意味著使內容吸引或排斥周圍的元素。更多示例，請檢視 material design 中的 aware 運動原則。

左邊的選單從下面飛入。右側的選單是從建立它的動作擴充套件而來的。

左邊的按鈕用文本來標示狀態。右邊的按鈕用容器來顯示不同的事件。

試著用按鈕的容器來提供狀態的視覺反饋。比如，你可以 spinner 旋轉器或者載入動畫來代替 cta 按鈕；或者你可以在背景中加入一段動畫來展示載入過程。具體解決方案是取決於你自己的，但核心思想是利用已經和使用者產生互動的空間。如果你使用按鈕顏色和複製來確認乙個成功狀態，這會是乙個加分項。

左邊的例子用顏色和位置來突出乙個元素。右邊的例子使用乙個輕微的動畫效果來吸引使用者的注意力。

當使用者要執行重要操作時，嘗試讓這一環節變的動態起來以吸引使用者的注意力。以輕微的動畫效果為起始然後根據這個環節的重要程度增加力度（改變大小、顏色和速率）。注意只在關鍵的環節上使用動畫效果 —— 使用效果越頻繁，它將變得越不引人注意...並且你的使用者會越覺得厭煩。

希望這些例子可以幫助你在為互動新增動畫時做出更好的決策。有了像 invision studio 這樣的新動畫和原型製作工具，我估計很快就會開始看到富有創意的互動的復興。我們只需要記住負責任地使用這個新的超級利器。

用微互動來解釋狀態的變化，注意必要的操作，確定元素之間的關係，並在產品中新增一些趣味和特徵。遵循這些原則，我們將把微互動從優秀轉變為高明。

為微互動歡呼吧！