功能性的動(dòng)畫(huà)微妙，清晰，邏輯清楚，能夠減輕用戶認(rèn)知負(fù)擔(dān)，建立更好的人機(jī)交互體驗(yàn)。而且，它還可以賦予界面生命力。

動(dòng)畫(huà)通過(guò)改變切分元素，改變它們的形狀和大小賦予頁(yè)面活力。你應(yīng)該利用功能性動(dòng)畫(huà)來(lái)讓切換變得更加流暢自然，把切換更加合理，幫助用戶理解內(nèi)容層次。

成功的動(dòng)畫(huà)設(shè)計(jì)應(yīng)該具備以下幾個(gè)特質(zhì)：

1.響應(yīng)式的

視覺(jué)反饋在界面設(shè)計(jì)中非常重要，因?yàn)閷?duì)于用戶來(lái)說(shuō)這符合他們的心理預(yù)期。在現(xiàn)實(shí)生活中，按鈕，開(kāi)關(guān)都是會(huì)給出相應(yīng)反饋的，這是他們所期待的事物運(yùn)行的模式。

用戶界面應(yīng)該快速準(zhǔn)確地響應(yīng)用戶輸入，并且展示新頁(yè)面或者新元素和觸發(fā)它們的元素之間的關(guān)系。

2.關(guān)聯(lián)的

將引起變化的按鈕或元件與變化之后的界面聯(lián)系起來(lái)。這種關(guān)聯(lián)背后的邏輯是為了讓用戶能夠更好地理解頁(yè)面布局上發(fā)生的變化以及變化的原因。

下面是兩種菜單呼出動(dòng)畫(huà)。在第一個(gè)例子中，菜單的出現(xiàn)離觸發(fā)按鈕很遠(yuǎn)，打破了這種關(guān)聯(lián)關(guān)系。

在第二個(gè)例子中，菜單從按鈕的右上角彈出，直接與觸發(fā)點(diǎn)聯(lián)系起來(lái)了。

另一個(gè)例子是，按鈕在點(diǎn)擊之后發(fā)生了功能變化?！安シ拧卑粹o點(diǎn)擊之后變成“暫?！本褪且粋€(gè)很常見(jiàn)的例子，這種變化讓用戶很容易理解兩個(gè)功能之間的關(guān)聯(lián)性：點(diǎn)擊“播放”功能之后“暫?！惫δ軉⒂?。但這種切換必須是連續(xù)的才有意義。

3.自然的

避免突然的切換。任何一個(gè)動(dòng)畫(huà)都應(yīng)該是自然的。在物理世界中，一個(gè)物體的加速和減速是受它的質(zhì)量和表面摩擦力影響。同樣，開(kāi)始或停止在界面上也不會(huì)自動(dòng)發(fā)生，而是需要某種力量去推動(dòng)。

下面這個(gè)例子中，用戶點(diǎn)擊了列表中的一個(gè)項(xiàng)目來(lái)放大查看它的詳細(xì)信息。在展開(kāi)的過(guò)程中，小卡片通過(guò)一個(gè)弧線運(yùn)動(dòng)到它的目的地，在上升的過(guò)程中，慢慢減速直到停下來(lái)，這個(gè)交互過(guò)程是自然的。

4.有目的的

動(dòng)畫(huà)的特殊性決定它通常都是交互過(guò)程中的焦點(diǎn)，沒(méi)有任何靜態(tài)的圖片或者文字可以跟它媲美。一個(gè)好的動(dòng)畫(huà)可以幫助用戶順暢地銜接到下一個(gè)頁(yè)面。

在用戶無(wú)法判斷下一步將發(fā)生什么的時(shí)候，動(dòng)畫(huà)可以很好地緩解這個(gè)盲區(qū)，至少可以指出即將發(fā)生事情的方向，讓用戶覺(jué)得新內(nèi)容的出現(xiàn)不至于那么突兀。

Mac系統(tǒng)在最小化窗口的時(shí)候用了“神奇效果”的動(dòng)畫(huà)，把窗口的兩種狀態(tài)很好地銜接在一起。

另一個(gè)很好的例子是父頁(yè)面和子頁(yè)面之間的切換。當(dāng)用戶選擇列表或者卡片中的一個(gè)項(xiàng)目放大查看它的詳細(xì)信息的時(shí)候，讓用戶可以保留父頁(yè)面的情況下查看子頁(yè)面信息。

5.快速的

當(dāng)頁(yè)面元素在不同位置之間移動(dòng)或者切換自身狀態(tài)的時(shí)候，變化的速度要足夠快，讓用戶感覺(jué)不到等待，但是也要足夠慢讓用戶完全理解。所以這個(gè)時(shí)間尺度要把握好。

不能讓動(dòng)畫(huà)速度過(guò)慢導(dǎo)致一些不必要的延遲。

動(dòng)畫(huà)速度要快讓用戶感覺(jué)不到等待。

讓切換時(shí)間縮短，因?yàn)橛脩魰?huì)經(jīng)?？吹竭@些切換。保證切換動(dòng)畫(huà)時(shí)間在300ms以下。

6.清晰的

切換動(dòng)畫(huà)不宜在同一個(gè)APP中做太多，因?yàn)楫?dāng)很多元素都在界面上移動(dòng)的時(shí)候用戶會(huì)暈。

切換動(dòng)畫(huà)應(yīng)該要清晰，簡(jiǎn)單，連續(xù)。切換動(dòng)畫(huà)的原則就是“少即是多”。我們應(yīng)該聚焦于切換動(dòng)畫(huà)對(duì)用戶來(lái)說(shuō)的實(shí)際意義來(lái)設(shè)計(jì)。

總結(jié)

綜上所述，動(dòng)畫(huà)不是隨機(jī)的，每一個(gè)動(dòng)畫(huà)背后都應(yīng)該有特定的目的。不管你的APP事趣味型的，游戲型的，還是嚴(yán)肅的，使用動(dòng)畫(huà)的時(shí)候都請(qǐng)注意以上幾個(gè)原則，它可以幫助你提供一個(gè)清晰快速流暢的用戶體驗(yàn)。

用心設(shè)計(jì)，對(duì)每一個(gè)細(xì)節(jié)都保持敏銳是你取得成功的關(guān)鍵。