如何用動畫來提升 UX

動畫不是娛樂用戶的目標，而是幫助用戶瞭解什麼以及如何最有效地使用你的應用程序。咱們再也不只是設計靜態屏幕。咱們是從這些用戶如何獲取屏幕看內容而設計。
動畫能夠應用在各類各樣的尺度和情境中，以統一美觀和功能：它能夠影響行爲，溝通狀態，引導用戶的注意力，並幫助用戶看到他們的行動的結果。這裏只舉幾個例子來講明你能夠在你的UI中添加一些動畫來改善體驗的地方。

1.加載(loading)可讓用戶不那麼無聊

若是你不能縮短線和動畫來來取代惱人的紡紗加載指標（基本上只是提醒用戶，他們正在等待），你應該老是試圖讓等待更愉快。幾乎任何網站或應用程序能夠利用一個骨架屏幕與微妙的動畫加載內容時，以保持用戶從事。

Skeleton screens complete the UI incrementally before the content is fully loaded（骨架屏幕在內容徹底加載以前逐步完成UI。）

2.設計狀態變化不難削減

動畫能夠用來使轉換更加明顯，由於能夠明瞭的知道用戶開始和結束之間發生了什麼。一個精心設計的過渡使用戶可以清楚地瞭解他們的注意力集中的地方。

沒有什麼比忽然的變化更不天然的了，用戶也沒法理解。
正如你所看到的，動畫轉換幫助用戶理解接口的速度和流程。它也有助於引導用戶到下一步的互動。

三、能夠解釋元素之間的關係

動畫能夠加強直接操控感。 例如，菜單圖標能夠順利過渡到一個播放控制，而後再回來。這種效果既通知用戶按鈕的功能，同時添加一個元素的奇妙的互動。將遊戲圖標轉換爲暫停也意味着這兩個動做是鏈接的，而另外一個則不能使用。

另外一個例子 - 當按下動做鍵，加號變成一支鉛筆。這代表鉛筆是主要的創做方法。這樣一個小細節意味着必須猜想下一步會發生什麼，知道圖標在兩種狀態中意味着什麼.

。

四、利用反饋來突顯出了錯（動畫能夠增強行動用戶預）

例如，表單條目能夠大大提升一些動畫。若是輸入正確的數據，一個簡單的「點頭」動畫能夠在完成後被引入。而橫向震動可使用時，拒絕輸入。當用戶注意到這樣的動畫他們便會當即瞭解動做。

五、使用反饋來顯示已經完成的（動畫能夠用來幫助人們可視化的操做結果和行動）

在條紋的下面的例子，當用戶點擊「支付」，微調簡要地出如今應用程序的成功顯示狀態。複選標記動畫讓用戶以爲他們容易並支付用戶欣賞這樣的重要細節。

六、總結

動畫是強大的使用時，在一個複雜的方式。當動畫不恰當時，花時間考慮動畫是很是重要的。咱們須要從一開始就接受這個運動，並認爲它是咱們設計的天然組成部分，由於設計不只僅是視覺表現。正如史蒂夫·喬布斯所說的設計：
「這不只僅是它的樣子和感受。Design is how it works。」
參考英文文檔