改進 UI 微交互的實用建議

原文：https://www.oschina.net/translate/good-to-great-ui-animation-tips

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

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

為了構建這些動畫，我遵循了 Material Motion、IBM 的動畫原則以及 Motion Manifesto 中的 UX 準則。

所有的交互動畫都是使用嘗鮮版的 InVision Studio 製作的。 你可以在此下載(http://www.dropbox.com/sh/qfwficfun4vagv6/AAADpQyoZ5y_o8KnCnxOSqiUa?dl=0)源文件。

讓 tab 頁的內容可以滑動

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

優秀的動畫隨著內容從一個狀態進入另一個狀態而漸入漸出。

高明的動畫能在移動時表現出連續性，使內容在狀態間移動。

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

連接卡片的共享元素

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

優秀的動畫使用比如左滑或上滑這樣的過渡效果在屏幕上展示內容。

高明的動畫通過共有內容的過渡效果維持兩個狀態之間的聯繫。

在不同狀態之間進行動畫過渡時，請查看它們之間是否有共享元素並將它們連接起來。 使用 InVision Studio 時，在創建 Motion 過渡時，在兩個鏈接屏幕之間重複的組件會自動連接。 這使製作原型動畫變得輕而易舉。

查看 Motion Manifesto 以了解你可以應用的動畫類型。上面的例子使用了 Masking、Transformation、Parenting 和 Easing 原則的組合。

給內容使用級聯效果

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

當素材進入屏幕時，優秀的過渡動畫會改變位置和素材的不透明度。

高明的動畫效果會迅速錯開每個組或者每個元素的出現。

要完成瀑布效果，請嘗試對每個內容或一組內容應用延遲。保持相同的緩解和持續時間，這樣會感覺連貫。 儘管如此，不要串聯每個小元素，這些內容組成了一個動畫。保持動畫快速和敏捷。谷歌建議每個元素間隔不超過 20 毫秒。 查看 Material Motion 中的編排原理以了解更多示例。

使內容將其他元素推出

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

優秀的動畫在上下文中移動並顯示元素。

高明的動畫顯示被他們改變所影響周圍的元素。

讓內容中的元素知道他們的周圍元素。這意味著使內容吸引或排斥周圍的元素。 更多示例，請查看 Material Design 中的 Aware 運動原則。

使菜單在上下文中浮現

左邊的菜單從下面飛入。右側的菜單是從創建它的動作擴展而來的。

優秀的動畫菜單從打開它們的按鈕的方向來展示其內容。

高明的動畫菜單從創建它們的動作中浮現出來，從觸摸點擴展而來。

用按鈕來顯示不同狀態

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

優秀的交互應該在緊挨著按鈕來顯示事件。

高明的交互使用按鈕本身來表明不同的狀態。

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

把注意力聚焦到重要的事物上

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

優秀的設計者會使用顏色、大小和位置來突出一個值得用戶注意或者接受指示的環節。

高明的設計者會用動畫效果來將注意力帶到需要執行的環節上，並且不會分散干擾用戶注意力。

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

結語

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

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

END

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！