譯者按：一般產(chǎn)品經(jīng)理不會(huì)在動(dòng)畫效果這種細(xì)節(jié)上跟UI較勁。不過了解一下動(dòng)畫，可以幫助你更好地與UI設(shè)計(jì)師溝通，一起思考如何通過優(yōu)化細(xì)節(jié)來提升用戶體驗(yàn)。原文作者[Nick Babich]是一位程序員祥楣，交互設(shè)計(jì)師和UI設(shè)計(jì)師。
動(dòng)畫是會(huì)說話的汉柒，它不會(huì)跟你講復(fù)雜的道理荣堰，而是很簡(jiǎn)單的一兩句話，比如“嗨竭翠，你得看一下這里振坚。”或者“哇斋扰，你剛剛成功完成了一個(gè)任務(wù)渡八！”但是，動(dòng)畫可不僅僅是為了娛樂用戶传货，而是幫助用戶明白到底發(fā)生了什么屎鳍，以及如何更有效地使用你的app。
動(dòng)畫使用非常廣泛问裕，有時(shí)為了美觀逮壁，有時(shí)為了是實(shí)現(xiàn)某個(gè)功能：它能夠影響用戶的行為，告知當(dāng)前的狀態(tài)粮宛，引導(dǎo)用戶的注意力窥淆，以及讓用戶看到他們操作的結(jié)果。接下來我就給大家展示幾個(gè)案例巍杈，從中可以看出如何用動(dòng)效來提升用戶體驗(yàn)忧饭。
加載也可以妙趣橫生
如果加載需要一段時(shí)間，你可以讓等待過程變得更加有趣一些筷畦。不要只想到轉(zhuǎn)圈圈词裤，用戶一看到就很心煩。實(shí)際上幾乎所有的app或者網(wǎng)站在加載內(nèi)容時(shí)都可以用其框架來做些小動(dòng)畫鳖宾。
Tab切換也可以自然流暢
動(dòng)畫會(huì)讓頁(yè)面的過渡更加明顯鼎文，用戶就可以清楚看到操作的開始頁(yè)和結(jié)束頁(yè)渔肩。精心設(shè)計(jì)的過渡能使用戶更清晰自己的注意力應(yīng)該集中在哪里。
正如你看到的栏饮，過渡動(dòng)畫讓用戶掌握了頁(yè)面的節(jié)奏和flow，也引導(dǎo)用戶到達(dá)下一步的操作磷仰。
不同元素之間也可以很順滑
請(qǐng)看下圖袍嬉，一個(gè)播放鍵很順暢地轉(zhuǎn)變成暫停鍵，然后又自然地切換回來灶平。這個(gè)動(dòng)效讓用戶知道這個(gè)按鈕的功能是什么伺通，同時(shí)也增加了交互的趣味性。并且也告訴用戶這兩個(gè)按鈕是互相聯(lián)系逢享，又無法共存的罐监。
再看另一個(gè)案例弓柱，當(dāng)點(diǎn)擊懸浮按鈕時(shí)，這個(gè)“+”變成一支筆侧但，這暗示書寫是主要的功能矢空。這樣一個(gè)小小的細(xì)節(jié)讓用戶知道一個(gè)按鈕的不同狀態(tài)，而不用猜測(cè)下一步是什么禀横。
錯(cuò)誤反饋也可以印象深刻
動(dòng)畫能強(qiáng)化用戶的操作屁药。
比如表單輸入加入動(dòng)畫后，效果就好很多柏锄。如果輸入正確酿箭，表格會(huì) “點(diǎn)頭”。如果輸入錯(cuò)誤趾娃，會(huì)“搖頭”七问。當(dāng)看到這兩種動(dòng)畫時(shí)，用戶立刻就能知道自己是否操作正確茫舶。
正確反饋也可以賞心悅目
動(dòng)畫可以視覺化操作結(jié)果械巡。如下圖，當(dāng)用戶點(diǎn)擊“Pay”饶氏，先看到一個(gè)短暫的加載動(dòng)畫讥耗，然后“√”讓用戶感覺他們很容易就完成了支付。
總結(jié)
如果用得巧妙疹启，動(dòng)畫是非常有效的古程。建議大家多花時(shí)間來思考什么時(shí)候動(dòng)效是必要的，什么時(shí)候是不合適的喊崖。我們應(yīng)該從一開始就要把動(dòng)畫考慮進(jìn)來挣磨，它是產(chǎn)品與生俱來的一部分雇逞，而不僅僅是好看，正如喬幫主所說：
設(shè)計(jì)不是看起來和感覺起來怎么樣茁裙，而是用起來怎么樣塘砸。
