如何通過動畫優化交互體驗

一般產品經理不會在動畫效果這種細節上跟UI較勁。不過了解一下動畫，可以幫助你更好地與UI設計師溝通，一起思考如何通過優化細節來提升用戶體驗。

動畫是會說話的，它不會跟你講復雜的道理，而是很簡單的一兩句話，比如“嗨，你得看一下這里。”或者“哇，你剛剛成功完成了一個任務！”但是， 動畫可不僅僅是為了娛樂用戶，而是幫助用戶明白到底發生了什么，以及如何更有效地使用你的app。

動畫使用非常廣泛，有時為了美觀，有時為了是實現某個功能：它能夠影響用戶的行為，告知當前的狀態，引導用戶的注意力，以及讓用戶看到他們操作的結果。接下來我就給大家展示幾個案例，從中可以看出如何用動效來提升用戶體驗。

加載也可以妙趣橫生

如果加載需要一段時間，你可以讓等待過程變得更加有趣一些。不要只想到轉圈圈，用戶一看到就很心煩。實際上幾乎所有的app或者網站在加載內容時都可以用其框架來做些小動畫。

在內容加載完畢前，可以用框架來做過渡動畫。

Tab切換也可以自然流暢

動畫會讓頁面的過渡更加明顯，用戶就可以清楚看到操作的開始頁和結束頁。精心設計的過渡能使用戶更清晰自己的注意力應該集中在哪里。

上面的切換非常突兀，用戶不一定能跟得上。

加上動畫后，整個頁面都鮮活起來了。

正如你看到的，過渡動畫讓用戶掌握了頁面的節奏和flow，也引導用戶到達下一步的操作。

不同元素之間也可以很順滑

請看下圖，一個播放鍵很順暢地轉變成暫停鍵，然后又自然地切換回來。這個動效讓用戶知道這個按鈕的功能是什么，同時也增加了交互的趣味性。并且也告訴用戶這兩個按鈕是互相聯系，又無法共存的。

這個動畫讓用戶的目光聚焦于屏幕中心，正好是控制音樂播放的位置。

再看另一個案例，當點擊懸浮按鈕時，這個“+”變成一支筆，這暗示書寫是主要的功能。這樣一個小小的細節讓用戶知道一個按鈕的不同狀態，而不用猜測下一步是什么。

錯誤反饋也可以印象深刻

動畫能強化用戶的操作。

比如表單輸入加入動畫后，效果就好很多。如果輸入正確，表格會 “點頭”。如果輸入錯誤，會“搖頭”。當看到這兩種動畫時，用戶立刻就能知道自己是否操作正確。

表格在“搖頭”

正確反饋也可以賞心悅目

動畫可以視覺化操作結果。如下圖，當用戶點擊“Pay”，先看到一個短暫的加載動畫，然后“√”讓用戶感覺他們很容易就完成了支付。

總結

如果用得巧妙，動畫是非常有效的。建議大家多花時間來思考什么時候動效是必要的，什么時候是不合適的。我們應該從一開始就要把動畫考慮進來，它是產品與生俱來的一部分，而不僅僅是好看，正如喬幫主所說：

設計不是看起來和感覺起來怎么樣，而是用起來怎么樣。

 

來自：http://www.jianshu.com/p/dec6f2c07bb9