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

如下是提升 UI 動效的實用建議，讓咱們一塊兒看看 UI 交互動畫從良好走向優秀的實例。他們是如何經過細節的調整，使用交互動畫來提高用戶的界面體驗。

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

爲了建立這些動畫，我遵循了來自 Material Motion、IBM 的動畫原理和 UX in Motion Manifesto 中的指導原則。

全部的交互都是使用早期的 InVision Studio 版本訪問的。您能夠在這裏下載源文件。

1.使標籤內容可滑動

左邊的內容是淡入淡出的，右邊的內容是隨着標籤一塊兒滑動。

1. 一個好的動畫會將內容從一種狀態轉換爲另外一個狀態。
2. 一個優秀的動畫則是使內容在不一樣的狀態轉換之間保持連續性。
3. 當你設計像標籤或彈出菜單相似的交互時，能夠嘗試將內容的位置與打開它的操做相關聯。這樣你不只能夠提高內容的可見性，還能夠爲內容的位置設置動畫。當你在設計這個動畫的時候，還能夠添加一個滑動手勢，將你從一個內容帶到另外一個內容。

2.鏈接卡片的共享元素

左邊的內容是打開一個向上滑動的新界面，右邊的內容是將卡片展開並填充滿整個屏幕。

1. 一個好的動畫使用向左或向上滑動等過渡細節來展現內容。
2. 一個優秀的動畫經過共享元素的動畫來創建兩個狀態之間的聯繫。

在不一樣狀態之間製做動畫時，查看它們之間是否有存在共享元素並將它們聯繫起來。在使用 InVision Studio 時，建立 Motion 轉換時會自動鏈接兩個屏幕之間重複的組件。 這使得原型動畫的製做變得垂手可得。

查看動畫宣言，瞭解您能夠應用的動畫類型。 上面的示例使用了 Masking，Transformation，Parenting 和 Easing 原則的組合。

3.在內容中使用級聯效果

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

1. 一個好的動畫會在元素進入界面時改變元素的位置和不透明度。
2. 一個優秀的動畫會很快的將界面元素錯落有序的出現。

要完成瀑布效果，請嘗試延遲應用到每一個內容或每組內容上。 保持相同的緩和和持續時間，會帶給用戶一致的感受。 儘管如此，不要對每一個小元素進行級聯 而是使內容組動畫化，保持動畫的快速和流暢。 谷歌建議每一個元素開始運動不要超過 20 毫秒的間隔。能夠查看 Material Motion 中的編排原理來查看更多時示例。

4.讓內容把界面的其餘元素撐開到界面之外

左邊的內容是蓋在其餘內容的上面，右邊的內容是隨着界面的展開將內容推出來。

1. 一個好的動畫是在上下文中移動並顯示元素。
2. 一個優秀的動畫是在當元素改變時會影響周圍環境的元素。

讓內容中的元素瞭解周圍環境。這意味着內容改變時會吸引或排斥其周圍的元素。有關更多示例，請查看 Material Design 中的 Aware 運動原理。

5.讓菜單出如今上下文中

左邊的內容是菜單從下面飛進來，右邊的內容是菜單從建立它的動做中擴展而來。

1. 一個好的動畫是菜單從打開它們的按鈕方向顯示出現的內容。
2. 一個優秀的動畫是從建立它們的動做中浮現出來，從觸摸點開始展開。

6.使用按鈕來顯示不一樣的狀態

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

1. 一個好的動畫是在按鈕附近顯示事件。
2. 一個優秀的動畫是使用按鈕自己來顯示不一樣的狀態。

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

7.把注意力放在重要的事情上

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

1. 一個好的動畫會使用顏色，大小和位置來突出用戶須要注意或採起的重要操做。
2. 一個優秀的動畫會使用動畫來引發用戶對重要操做的關注，而且不會對用戶形成干擾。

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

總結

我但願這些示例能夠幫助您在爲交互添加動畫時作出更好的決策。藉助 InVision 工做室等新動畫和原型製做工具，我預測咱們很快就會看到創意互動的復興。 咱們只須要負責任地在這個新的超級大國裏任意發揮。

讓咱們應用動畫來解釋狀態的變化，引發對必要動做的注意，肯定元素之間的關係，併爲咱們的產品添加一些樂趣和特徵。 經過遵循這些原則，咱們將把動畫從好轉變爲優秀。

---

英文地址：uxdesign.cc/good-to-gre…

做 / Pabloy Stanley

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

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

編 / 熒聲 @ 創宇前端

本文已由譯者受權發佈，版權屬於創宇前端。歡迎註明出處轉載本文。本文連接：knownsec-fed.com/2018-09-27-…

想要看到更多來自知道創宇開發一線的分享，請搜索關注咱們的微信公衆號：創宇前端（KnownsecFED）。歡迎留言討論，咱們會盡量回復。

感謝您的閱讀。