超實用！7 個優秀的 UI 互動動畫技巧
以下是提高 UI 動效的實用建議，讓我們一起看看 UI 互動動畫從良好走向優秀的例項。他們是如何通過細節的調整，使用互動動畫來提升使用者的介面體驗。
本文所列出的介面主要顯示狀態之間的連續性，表示共享元素之間的關係並將使用者的注意力引向他們應該注意和採取行動的事物上。
為了建立這些動畫，我遵循了來自 Material Motion、IBM 的動畫原理和 UX in Motion Manifesto 中的指導原則。
所有的互動都是使用早期的 InVision Studio 版本訪問的。您可以在這裡下載原始檔。
1.使標籤內容可滑動
左邊的內容是淡入淡出的，右邊的內容是隨著標籤一起滑動。
- 一個好的動畫會將內容從一種狀態轉換為另一個狀態。
- 一個優秀的動畫則是使內容在不同的狀態轉換之間保持連續性。
- 當你設計像標籤或彈出選單類似的互動時，可以嘗試將內容的位置與開啟它的操作相關聯。這樣你不僅可以提升內容的可見性，還可以為內容的位置設定動畫。當你在設計這個動畫的時候，還可以新增一個滑動手勢，將你從一個內容帶到另一個內容。
2.連線卡片的共享元素
左邊的內容是開啟一個向上滑動的新介面，右邊的內容是將卡片展開並填充滿整個螢幕。
- 一個好的動畫使用向左或向上滑動等過渡細節來展示內容。
- 一個優秀的動畫通過共享元素的動畫來建立兩個狀態之間的聯絡。
在不同狀態之間製作動畫時，檢視它們之間是否有存在共享元素並將它們聯絡起來。在使用 InVision Studio 時，建立 Motion 轉換時會自動連線兩個螢幕之間重複的元件。 這使得原型動畫的製作變得輕而易舉。
檢視動畫宣言，瞭解您可以應用的動畫型別。 上面的示例使用了 Masking，Transformation，Parenting 和 Easing 原則的組合。
3.在內容中使用級聯效果
左邊的內容是在動畫中有滑動和淡入的顯示，右邊是相同的動畫，但每張卡片都有短暫的延遲。
- 一個好的動畫會在元素進入介面時改變元素的位置和不透明度。
- 一個優秀的動畫會很快的將介面元素錯落有序的出現。
要完成瀑布效果，請嘗試延遲應用到每個內容或每組內容上。 保持相同的緩和和持續時間，會帶給使用者一致的感覺。 儘管如此，不要對每個小元素進行級聯 而是使內容組動畫化，保持動畫的快速和流暢。 谷歌建議每個元素開始運動不要超過 20 毫秒的間隔。可以檢視 Material Motion 中的編排原理來檢視更多時示例。
4.讓內容把介面的其他元素撐開到介面以外
左邊的內容是蓋在其他內容的上面，右邊的內容是隨著介面的展開將內容推出來。
- 一個好的動畫是在上下文中移動並顯示元素。
- 一個優秀的動畫是在當元素改變時會影響周圍環境的元素。
讓內容中的元素瞭解周圍環境。這意味著內容改變時會吸引或排斥其周圍的元素。有關更多示例，請檢視 Material Design 中的 Aware 運動原理。
5.讓選單出現在上下文中
左邊的內容是選單從下面飛進來，右邊的內容是選單從建立它的動作中擴充套件而來。
- 一個好的動畫是選單從開啟它們的按鈕方向顯示出現的內容。
- 一個優秀的動畫是從建立它們的動作中浮現出來，從觸控點開始展開。
6.使用按鈕來顯示不同的狀態
左邊的內容是按鈕顯示指示狀態的文字，右邊的內容是按鈕使用變化的容器來顯示不同的事件。
- 一個好的動畫是在按鈕附近顯示事件。
- 一個優秀的動畫是使用按鈕本身來顯示不同的狀態。
嘗試使用按鈕的容器來提供狀態的可視反饋。例如，您可以使用微調器或載入動畫替換 CTA; 或者您可以在顯示進度的背景中新增動畫。解決方案取決於您，我們的想法是使用使用者已經與之互動的空間。如果您使用按鈕顏色和樣式來確認成功狀態，則獎勵積分。
7.把注意力放在重要的事情上
左邊的內容是用顏色和位置使元素脫穎而出，右邊的內容是使用微妙的動畫來引起使用者的注意。
- 一個好的動畫會使用顏色，大小和位置來突出使用者需要注意或採取的重要操作。
- 一個優秀的動畫會使用動畫來引起使用者對重要操作的關注，並且不會對使用者造成干擾。
當用戶需要對重要事項採取行動時，請嘗試設定動畫來吸引他們的注意力。從一個微妙的動畫開始，增加與動作重要程度相關的強度（大小，顏色和速度的變化）。同時僅將其用於關鍵操作，您使用此效果的次數越多，其影響就越小，並且使用者獲得的煩惱也會越多。
總結
Line"/>
我希望這些示例可以幫助您在為互動新增動畫時做出更好的決策。藉助 InVision 工作室等新動畫和原型製作工具，我預測我們很快就會看到創意互動的復興。 我們只需要負責任地在這個新的超級大國裡任意發揮。
讓我們應用動畫來解釋狀態的變化，引起對必要動作的注意，確定元素之間的關係，併為我們的產品新增一些樂趣和特徵。 通過遵循這些原則，我們將把動畫從好轉變為優秀。
英文地址： ofollow,noindex">uxdesign.cc/good-to-gre…
作 / Pabloy Stanley
譯 / 大學不輕鬆 @ 創宇前端
好看的皮囊千篇一律，有趣的靈魂一百四十斤
編 / 熒聲 @ 創宇前端
本文已由譯者授權釋出，版權屬於創宇前端。歡迎註明出處轉載本文。本文連結： knownsec-fed.com/2018-09-27-…
想要看到更多來自知道創宇開發一線的分享，請搜尋關注我們的微信公眾號：創宇前端（KnownsecFED）。歡迎留言討論，我們會盡可能回覆。
感謝您的閱讀。