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

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

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

1.響應(yīng)式的

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

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

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

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

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

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

另一個(gè)例子是，按鈕在點(diǎn)擊之后發(fā)生了功能變化匠题≌兀“播放”按鈕點(diǎn)擊之后變成“暫停”就是一個(gè)很常見的例子韭山，這種變化讓用戶很容易理解兩個(gè)功能之間的關(guān)聯(lián)性：點(diǎn)擊“播放”功能之后“暫陀艏荆”功能啟用。但這種切換必須是連續(xù)的才有意義钱磅。

3.自然的

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

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

4.有目的的

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

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

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

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

5.快速的

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

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

動(dòng)畫速度要快讓用戶感覺不到等待里覆。

讓切換時(shí)間縮短丧荐，因?yàn)橛脩魰?huì)經(jīng)常看到這些切換喧枷。保證切換動(dòng)畫時(shí)間在300ms以下虹统。

6.清晰的

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

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

總結(jié)

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

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