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

原做者：Pablo Stanley 原文連接

---

優秀的動畫，對於提高UI的逼格很是重要，在大多數狀況下，針對動畫進行合理的調整，就可讓你的UI變得更加出色，好的交互設計，可以展現狀態之間的連續性，以及不一樣UI元素的的關係，同時，可以使得用戶的注意力聚焦在重要的地方。 全部的交互都是用體驗版本的InVision Studio作出來的，這些均可以在官網獲取到。

---

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

左圖的內容淡入淡出；右圖的內容隨着標籤一塊兒滑動。

• 好的動效將內容從一個標籤頁淡出，再淡入到另外一個標籤頁；
• 優秀的動效讓頁面內容在不一樣標籤之間移動，可以展示過分時的連續性。

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

---

關聯卡片上的相關元素

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

• 好的動畫展現信息詳情頁時使用左滑或者上劃的方式；
• 優秀的動畫會在有共同信息的兩種狀態之間創建聯繫。

當給兩種不一樣的狀態的過渡作動畫時，看看這兩種狀態之間有沒有共有的元素，若是有則能夠在動畫中體現二者的聯繫。在InVision Studio中，兩個相關聯的頁面有重複的元素時，當你建立一個Motion的時候，系統會自動在兩個元素之間建立關聯動畫。這讓建立動畫原型變得垂手可得。

---

在內容中使用瀑布流效果

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

• 當卡片進入屏幕時，好的動畫改變它的位置和透明度；
• 優秀的動畫則會快速蔓延每組元素。

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

---

讓內容推開其餘元素

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

• 好的動畫直接在畫面中移動和展現元素；
• 優秀的動畫則會展現出動畫對其周圍元素的影響。

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

---

讓菜單從按鈕中出現

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

• 好的動畫菜單出現的方向與打開它的按鈕的方向保持一致；
• 優秀的動畫菜單從打開它的按鈕中展開。

---

用按鈕展現不一樣的狀態

左邊的動畫使用文字代表狀態；右邊的動畫則直接使用按鈕展現不一樣狀態。

• 好的交互將活動狀態用文字方式展現在按鈕旁邊；
• 優秀的交互則直接用按鈕展現不一樣狀態。

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

---

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

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

• 好的設計使用顏色、尺寸和位置，來突出須要格外引發用戶注意並觸發用戶行爲的重點內容；
• 優秀的設計使用動畫引導用戶將注意力放在重要的地方，而且不會打擾到用戶。

當用戶須要作出一些重要的操做時，試着將這些操做的按鈕以動畫的方式展示，以吸引用戶的注意力。能夠作一些簡單細微的動畫並逐漸增長強度，並根據行動的重要性改變按鈕的大小、顏色和動畫的速度。記住只在最重要的操做上使用動畫，由於你用的動畫越多，它就變得越不重要而且會打擾到用戶。