7個小技巧大幅度提升UI動效品質

將選項卡種的內容做成可滑動的

• 好的動效將內容從一個標簽頁淡出，再淡入到另一個標簽頁；

• 優秀的動效讓頁面內容在不同標簽之間移動，能夠展現過度時的連續性。

當你設計選項卡或者彈出菜單這種交互時，試著將內容的位置與打開它的動作相關聯。通過這種方式，你可以將你的內容和內容的位置都做成可視動畫。做這種頁面時，也加上一個可以在不同內容之間切換的滑動手勢。

關聯卡片上的相關元素

左邊的卡片打開一個新頁面是滑上來的； 右邊則是擴展了卡片并使其占滿屏幕。

• 好的動畫展示信息詳情頁時使用左滑或者上劃的方式；

• 優秀的動畫會在有共同信息的兩種狀態之間建立聯系。

當給兩種不同的狀態的過渡做動畫時，看看這兩種狀態之間有沒有共有的元素，如果有則可以在動畫中體現兩者的聯系。在InVision Studio中，兩個相關聯的頁面有重復的元素時，當你創建一個Motion的時候，系統會自動在兩個元素之間創建關聯動畫。這讓創建動畫原型變得輕而易舉。

在內容中使用瀑布流效果

左邊的卡片通過滑動和淡入的效果顯示; 右邊的卡片在同樣動畫的基礎上，讓每個卡片都有短時間的延遲。

• 當卡片進入屏幕時，好的動畫改變它的位置和透明度；

• 優秀的動畫則會快速蔓延每組元素。

要達到瀑布流的效果，可以將每個動畫元素都保持相同的動畫速度以及持續時長，并對其按序設置一定的延時。要將瀑布流的形式應用在組里，不能應用在單獨的元素上。保持動畫的快速簡介，谷歌的提醒功能里，每個元素出現的間隔不超過20毫秒。點擊動畫里的瀑布流形式查看更多案例。

讓內容推開其他元素

左邊的動畫中，動畫效果直接出線在其他內容上面。右邊的動畫中，隨著動畫的擴大，其他內容被推開了。

• 好的動畫直接在畫面中移動和展示元素；

• 優秀的動畫則會展示出動畫對其周圍元素的影響。

讓內容與周圍的環境相互動。這意味著讓內容吸引或者趕走它周圍的元素。

讓菜單從按鈕中出現

左圖中菜單直接從下面滑入；右圖的菜單則從打開它的按鈕中擴展出來。

• 好的動畫菜單出現的方向與打開它的按鈕的方向保持一致；

• 優秀的動畫菜單從打開它的按鈕中展開。

用按鈕展示不同的狀態

左邊的動畫使用文字表明狀態；右邊的動畫則直接使用按鈕展示不同狀態。

• 好的交互將活動狀態用文字方式展示在按鈕旁邊；

• 優秀的交互則直接用按鈕展示不同狀態。

試著用按鈕本身展示不同狀態。例如：用旋轉菊花或者加載動畫代替CTA；或者在按鈕背景中加一個動畫表明進程。具體方式取決于你，核心就是利用好已有的用戶已經與之交互的空間。如果你使用按鈕顏色去確認成功狀態，對于用戶來說就是一個大彩蛋。

將用戶的注意力引導到重要的東西上

左圖中的案例使用顏色和位置讓元素突出顯示；右圖中則使用了一個簡單的小動畫吸引用戶的注意力。

• 好的設計使用顏色、尺寸和位置，來突出需要格外引起用戶注意并觸發用戶行為的重點內容；

• 優秀的設計使用動畫引導用戶將注意力放在重要的地方，并且不會打擾到用戶。

當用戶需要做出一些重要的操作時，試著將這些操作的按鈕以動畫的方式展現，以吸引用戶的注意力?？梢宰鲆恍┖唵渭毼⒌膭赢嫴⒅饾u增加強度，并根據行動的重要性改變按鈕的大小、顏色和動畫的速度。記住只在最重要的操作上使用動畫，因為你用的動畫越多，它就變得越不重要并且會打擾到用戶。