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

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

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

1.響應(yīng)式的

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

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

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

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

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

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

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

3.自然的

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

下面這個例子中，用戶點擊了列表中的一個項目來放大查看它的詳細(xì)信息。在展開的過程中，小卡片通過一個弧線運動到它的目的地，在上升的過程中，慢慢減速直到停下來，這個交互過程是自然的。

4.有目的的

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

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

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

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

5.快速的

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

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

動畫速度要快讓用戶感覺不到等待。

讓切換時間縮短，因為用戶會經(jīng)常看到這些切換。保證切換動畫時間在300ms以下。

6.清晰的

切換動畫不宜在同一個APP中做太多，因為當(dāng)很多元素都在界面上移動的時候用戶會暈。

切換動畫應(yīng)該要清晰，簡單，連續(xù)。切換動畫的原則就是“少即是多”。我們應(yīng)該聚焦于切換動畫對用戶來說的實際意義來設(shè)計。

總結(jié)

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

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