[譯] 小 Tips 讓你的交互動畫從 「還不錯」 變成 「超級棒」

一些優化你的應用（本文特指移動端） / 頁面交互效果的最佳實踐

原文傳送門：Good to great UI animation tips

讓咱們直接進入正題來看一些常見的交互場景，而且經過一丟丟的改進，完成從 『還不錯』 到 『超級棒』的進化。

經過這些改進，咱們讓本身的應用在不一樣狀態之間的切換變得具備連續性、使不一樣狀態間共有的元素更看得出是同一個元素，也所以能讓用戶的注意力儘可能不分散，更容易引導他們進行操做。

PS：接下來的這些動畫我都是遵循 Material Motion, IBM’s Animation Principles 和 The UX in Motion Manifesto. 產出的。

Tab 頁面切換時，讓內容跟着滑動

左側的內容只是簡單的淡入淡出。右邊的內容倒是跟着 tab 切換而滑動

• 一個『還不錯』的動畫是淡入淡出兩個頁面
• 一個『超級棒』的動畫讓頁面隨着狀態滑動給人以連續的體驗

當咱們實現一個 Tab 切換或者其餘相似的使窗口內容切換的交互時，儘量的讓內容與觸發其改變的動做「聯繫」起來。你不只僅能夠控制他們的可見性，更能夠控制他們的位置！。若是你這麼作了，別忘記添加一個滑動的手勢使之「天然」。

複用共享的元素

左側點擊卡片從下網上劃出具體內容，而右側測試展開這個卡片讓其充滿整個屏幕

• 一個『還不錯』的動畫經過上下左右滑出內容展現詳細信息
• 一個『超級棒』的動畫則是經過複用「簡要信息」和「詳細信息」之間的共享元素創建了視覺聯繫

當咱們要在兩個狀態之間切換內容試圖時，找出他們所共有的元素！讓它們成爲視覺導線，引導內容的鋪陳。咱們能夠在 The UX in Motion Manifesto. 找出咱們想要的動畫類型， 上面這個例子我就用了其中的 Masking，Transformation，Parenting和 Easing 原則

賦予列表內容錯落感受

左邊的一堆卡片經過漸顯進入咱們的視線，而右側則是爲每個卡片的進入添加了一個短小的延遲

• 一個『還不錯』的動畫經過改邊進入屏幕的一堆元素的位置或者透明度達到目的
• 一個『超級棒』的動畫則爲這些元素再加上一個錯落感受

爲了完成瀑布流的感受，能夠試着爲這組元素加上小小的延遲。固然了，首先他們得有同樣的緩動函數和動畫時長，這樣它們就能保持感官一致。注意不要去糾結那些微小的地方，這個效果追求的是「總體」。此外，要保持動畫乾淨利落。Google 推薦每相鄰的元素延遲不超過 20ms。查閱 Material Motion 能夠看到更多的例子。

讓元素們各自推攘

左邊的動畫讓展開的主體忽然站在最頂層去遮蓋兄弟元素，而右邊的則是把兄弟元素都推到屏幕外

• 一個『還不錯』的動畫在不忽略現有上下文的狀況下完成
• 一個『超級棒』的動畫則讓元素去影響周圍，影響上下文，就像你擠公交同樣

你的每一個元素必須對周圍任何事物保持警戒 ，指不定就得把他們推開或者勾引過來呢！這樣才顯得真實。更多例子請查看 谷歌感知動效

讓菜單出自上下文

左邊的菜單就是這麼忽然出現，反觀右邊的是從按鈕處舒展出來，有種睡醒了的感受呢！

• 一個『還不錯』的動畫讓菜單從按鈕的方向大體展現出來
• 一個『超級棒』的動畫則從觸發的地方「涌」現出來，就像是你敲敲一隻紙箱，裏面就鑽出一隻橘貓同樣

用一個按鈕顯示更多的狀態

左邊用一行文字顯示 Loading 狀態，右邊的則讓按鈕變成狀態條的方案來展現

• 一個『還不錯』的交互多加一些東西來展現狀態
• 一個『超級棒』的交互則是用按鈕自身的改變闡明不一樣狀態

試着用按鈕的容器去包容另外一個狀態指示器來提供一個狀態的視覺反饋。例如，你也能夠在按鈕上字旁邊多加個轉圈圈來標識 Loading 動畫。這裏的重點是 「使用那些已經和用戶產生交互的區域來豐富體驗，尤爲是當用戶集中注意力點某些按鈕的時候」。來吧，給按鈕多改變集中狀態來爲你的應用加分！

重要的事情要明顯

左邊，好吧，咱們又來講左邊了，左邊讓這個感嘆號的顏色和位置來突出其重要性，右邊就稍稍加了個微小的動畫來吸引用戶注意力

• 一個『還不錯』的設計運用色彩、尺寸、位置來展現用戶須要注意的地方
• 而一個『無與倫比』的設計運用動畫，在不打擾用戶的狀況下引導他操做

當咱們但願用戶注意到一個真的很重要的消息或者動做時，試着加點微笑的動畫吧！開始的時候幅度小點而後慢慢增長動畫強度（改變尺寸、色彩、速率等）來對比突出這是個多麼重要的操做啊——可是！！可是！！當你運用更多的動畫時，每一個動畫的衝擊力就變少了，更不用說這其實會煩死你的用戶了。

最後

原文做者強烈安利了一款應用 InVision’s Studio 上面的圖片都是他用這個軟件作的。

Happy animating！