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

原文傳送門：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！