如今，很難用界面動畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互，解釋了如何使用該應(yīng)用程序，或者只是引起用戶的注意力。在瀏覽有關(guān)動畫的文章時，我發(fā)現(xiàn)幾乎所有的文章都只是描述了關(guān)于動畫的特定的用例或一般事實(shí)，并沒有遇到任何關(guān)于界面動畫通用規(guī)則的文章。在本文中我收集了界面動畫的主要原則和規(guī)則，以便給想要設(shè)計(jì)動畫界面的設(shè)計(jì)人員提供一些幫助。

01 動畫的持續(xù)時間和速度

當(dāng)元素改變它們的狀態(tài)或位置時，動畫的持續(xù)時間應(yīng)足夠慢，以使用戶可以注意到變化，但同時也要足夠快，以免引起等待。

在動畫中使用適當(dāng)?shù)某掷m(xù)時間，不要太快，更不要讓用戶過長等待

大量研究發(fā)現(xiàn)，界面動畫的最佳速度在200-500毫秒之間。這些數(shù)據(jù)是基于人類大腦的特殊性得出的。任何小于100毫秒的動畫都是瞬時的，根本不會被識別。而超過1秒的動畫時長會傳達(dá)延遲感，因此對用戶來說很無聊。

最好在界面中保留動畫的持續(xù)時間

在移動設(shè)備上，《材料設(shè)計(jì)指南》還建議將動畫的持續(xù)時間限制在200-300毫秒之間。至于Web端，持續(xù)時間應(yīng)延長30％，大約為400-450毫秒。原因在于：屏幕尺寸越大，物體在改變位置時可以克服的路徑更長。因此，在可穿戴設(shè)備上，持續(xù)時間應(yīng)縮短30％，大約為150-200ms，因?yàn)樵谳^小的屏幕上，移動距離更短。

移動設(shè)備的大小會影響動畫的持續(xù)時間

Web動畫的處理方式有所不同，由于我們已經(jīng)習(xí)慣了在瀏覽器中即時打開網(wǎng)頁，所以我們希望也能在不同狀態(tài)之間快速轉(zhuǎn)換。因此，Web轉(zhuǎn)換的持續(xù)時間應(yīng)比移動設(shè)備短約2倍，150-200毫秒之間。在其他情況下，用戶將不可避免地認(rèn)為計(jì)算機(jī)死機(jī)或網(wǎng)絡(luò)連接出現(xiàn)問題。

但是，如果你要在網(wǎng)站上創(chuàng)建裝飾性動畫或試圖吸引用戶對某些元素的關(guān)注，則無需考慮這些規(guī)則。在這些情況下，動畫可以更長一些。

大屏幕電腦=慢動畫？決不是！

需要記住的是，無論平臺如何，動畫的持續(xù)時間不僅取決于移動距離，還取決于對象的大小。更小的元素或帶有小變化的的動畫應(yīng)該移動得更快。因此，大而復(fù)雜元素的動畫在持續(xù)時間稍長的時候看起來更好。

在相同大小的移動物體中，停下來的是經(jīng)過最短距離的物體。與大物體相比，小物體移動得更慢，因?yàn)樗鼈兊钠屏扛蟆?

動畫的持續(xù)時間取決于對象的大小和移動距離

當(dāng)物體碰撞時，根據(jù)物理定律，碰撞的能量必須均勻分布在物體之間。因此，最好排除反彈效應(yīng)，只在特殊情況下使用它才有意義。

避免使用彈跳效果，因?yàn)樗鼤稚⒆⒁饬?

物體的運(yùn)動應(yīng)該是清晰和銳利的，所以不要使用運(yùn)動模糊。即使在現(xiàn)代移動設(shè)備上也很難再現(xiàn)這種效果，并且根本不用于界面動畫中。

不要在動畫中使用模糊效果

列表項(xiàng)(新聞卡片、電子郵件列表等)在其出現(xiàn)之間應(yīng)該有一個很短的延遲時間，每次出現(xiàn)的新元素應(yīng)該持續(xù)20-25毫秒。元素出現(xiàn)較慢的話可能會惹惱用戶。

列表項(xiàng)的動畫應(yīng)持續(xù)在20–25毫秒

02 緩和

緩和有助于使物體的運(yùn)動更加自然，這是動畫的基本原則之一。這一點(diǎn)在《迪士尼動畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述，這本書是由兩位重要的迪士尼動畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。

為了使動畫看起來不顯得機(jī)械和人造，物體應(yīng)以一定的加速或減速的方式移動，就像物理世界中的所有活動對象一樣。

與線性動畫相比，具有緩動效果的動畫看起來更自然（這里提示下：注意看每段豎格的間距）

2/1 直線運(yùn)動

不受任何物理力影響的物體直線運(yùn)動，換句話說就是勻速運(yùn)動。正因?yàn)槿绱耍鼈兛雌饋矸浅２蛔匀唬瑢θ搜蹃碚f是人為的。

所有動畫應(yīng)用程序都使用動畫曲線，我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時間間隔內(nèi)物體的位置如何變化(x axis=time)。在當(dāng)前情況下，運(yùn)動是線性的，因此物體在同一時間行進(jìn)相同的距離。 

直線運(yùn)動曲線

例如，直線運(yùn)動只能在物體改變顏色或透明度時使用。一般來說，我們可以用它來表示物體不改變其位置的狀態(tài)。

2/2 緩入或加速曲線

我們可以在曲線上看到，在開始時物體的位置變化緩慢，而速度則逐漸增加，這意味著物體正在以一定的加速度移動。

加速度曲線

當(dāng)物體以全速飛出屏幕消失時，應(yīng)使用此曲線，比如說系統(tǒng)通知或者是界面卡片。但請記住，只有當(dāng)對象永遠(yuǎn)離開屏幕且我們無法調(diào)用或返回它們時，才應(yīng)使用這種類型的曲線。

將卡片滑出屏幕的加速曲線

動畫曲線有助于表達(dá)正確的情緒。在下面的示例中，我們可以看到所有物體的移動持續(xù)時間和距離是相同的，但是即使曲線上的微小變化也可以影響動畫的氣氛。當(dāng)然，通過改變曲線，你可以使物體盡可能地接近于真實(shí)世界。

持續(xù)時間和距離相同，但卻是不同的氛圍

2/3 緩動或減速曲線

它與緩入曲線相反，因此物體會快速覆蓋很長一段距離，然后緩慢的降低速度，直到最終停止。

減速曲線

當(dāng)元素出現(xiàn)在屏幕上時應(yīng)使用這種類型的曲線——它以全速向上飛入屏幕中，然后逐漸減速直到完全停止，這也可以應(yīng)用于從屏幕外部出現(xiàn)的其他卡片或?qū)ο蟆?

減速曲線，使動畫更好地呈現(xiàn)

2/4 緩入緩出或標(biāo)準(zhǔn)曲線

該曲線使物體在開始時獲得速度，然后慢慢地將速度降回零。這種類型的移動是界面動畫中最常用的。當(dāng)你猶豫在動畫中使用哪種類型的運(yùn)動時，可以使用標(biāo)準(zhǔn)曲線。

標(biāo)準(zhǔn)曲線

根據(jù)《材料設(shè)計(jì)指南》，最好使用非對稱曲線，使移動看起來更加自然和真實(shí)。曲線的末端必須比它的開始更加突出，以使加速的持續(xù)時間短于減速的持續(xù)時間。在這種情況下，用戶將更加關(guān)注元素的最終移動，從而關(guān)注元素的新狀態(tài)。

查看對稱和非對稱標(biāo)準(zhǔn)曲線之間的區(qū)別

當(dāng)對象從屏幕的一部分移至另一部分時，使用緩入緩出功能。在這種情況下，動畫避免了引人注目的戲劇效果。

卡片在屏幕上的移動以及相應(yīng)的不對稱曲線

當(dāng)元素從屏幕上消失時，應(yīng)該使用相同的移動類型，但用戶可以在任何時候?qū)⑵浞祷氐较惹暗奈恢谩Ｋ婕俺閷鲜綄?dǎo)航等。

抽屜式導(dǎo)航從屏幕上隱藏了標(biāo)準(zhǔn)曲線

從這些例子中可以看出，許多初學(xué)者忽略了一個基本的規(guī)律——開始動畫并不等于結(jié)束動畫。與抽屜式導(dǎo)航一樣，它以減速度曲線出現(xiàn)，而以標(biāo)準(zhǔn)曲線消失。另外，根據(jù)谷歌的材料設(shè)計(jì)語言，物體出現(xiàn)的時間應(yīng)該更長，以吸引更多的關(guān)注。

側(cè)面菜單的出現(xiàn)和消失，分別通過減速度和標(biāo)準(zhǔn)曲線實(shí)現(xiàn)

使用函數(shù)cubic-bezier()來描述曲線。之所以稱為立方，是因?yàn)樗谒膫€點(diǎn)。在圖上已經(jīng)定義了具有坐標(biāo)的第一個點(diǎn)0;0（左下）和具有坐標(biāo)的最后一個點(diǎn)1;1（右上）。 

基于此，我們僅需描述圖形上的兩個點(diǎn)，這些點(diǎn)由函數(shù)的四個參數(shù)給出cubic-bezier()：前兩個是坐標(biāo)x和y第一個點(diǎn)，后兩個是坐標(biāo)x和y第二個點(diǎn)。 

為了簡化曲線的工作，建議使用easings.net和cubic-bezier.com網(wǎng)站。第一個包含最常用曲線的列表，你可以將其參數(shù)復(fù)制到原型工具中。第二個來源使你可以使用曲線的不同參數(shù)，并立即查看到物體將是如何移動的。

函數(shù)三次貝塞爾曲線的不同類型的曲線及其參數(shù)

03 界面動畫中的編排

就像在芭蕾舞蹈設(shè)計(jì)中一樣，主要思想是在從一種狀態(tài)轉(zhuǎn)換為另一種狀態(tài)的過程中，引導(dǎo)用戶注意一個流動的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。

3/1 平等交互

平等交互意味著所有對象的外觀都遵循一個特定的規(guī)則。在這種情況下，所有卡片的外觀都被視為一種流程，可以引導(dǎo)用戶的注意力集中在一個方向上，即從上到下。如果我們不按照順序，那么用戶的注意力將會分散。所有元素同時出現(xiàn)看起來也會很糟糕。

用戶的注意力應(yīng)引導(dǎo)在一個流動的方向上

對于表格視圖，它有點(diǎn)復(fù)雜。在這里，用戶的焦點(diǎn)應(yīng)指向?qū)蔷€，所以逐個地顯示元素是一個很糟糕的主意。單個展示元素會使動畫過長，并且用戶的注意力會呈鋸齒狀，這是錯誤的。

卡片形式的對角線外觀

3/2 從屬交互

從屬交互意味著我們要有一個吸引用戶注意力的中心對象，而所有其他元素都從屬于它。這種類型的動畫給人一種有序的感覺，從而引起用戶對主要內(nèi)容的更多關(guān)注。

在其他情況下，用戶將很難知道該關(guān)注哪個對象，因此他的注意力將被分散。所以，如果有多個要設(shè)置動畫的元素，則需要明確它們的運(yùn)動順序，并盡可能將動畫設(shè)置為最小的對象。

只有一個中心對象的動畫很有必要，其余元素應(yīng)是被引導(dǎo)的。否則，用戶將不知道關(guān)注什么對象

根據(jù)材料設(shè)計(jì)語言，當(dāng)移動的物體尺寸發(fā)生不均衡變化時，它們應(yīng)沿著弧線而不是直線移動。這有助于使動作更自然。“不成比例”是指物體的高度和寬度的增加/減少是不對稱的，即以不同的速度進(jìn)行(例如，一個正方形的卡片變成了一個長方形)。

當(dāng)移動的物體不按原有比例變化時，應(yīng)沿著弧線運(yùn)動

當(dāng)物體按比例改變其大小時，使用沿直線的移動。由于這種移動的實(shí)現(xiàn)比較容易，因此通常會忽略不成比例的圓弧移動的規(guī)則。看看實(shí)際應(yīng)用的例子，你會看到線性運(yùn)動的主導(dǎo)地位。

尺寸的比例變化是沿著直線上運(yùn)動的

曲線上的運(yùn)動可以通過兩種方式實(shí)現(xiàn)：第一種稱為垂直向外——物體開始水平移動并以垂直移動結(jié)束；第二種是水平向外——物體開始垂直移動并以水平運(yùn)動結(jié)束。

物體沿曲線的移動路徑必須與滾動界面的主軸線重合。例如，在下一張圖片上，我們可以上下滾動界面，相應(yīng)的卡片以“垂直輸出”的方式展開-首先從右到下，然后向下。反向移動以相反的方式進(jìn)行-即卡片首先垂直上升，最后水平移動。

卡片的展開/折疊方向應(yīng)與界面的軸線一致

如果移動物體的路徑彼此相交，則它們將無法彼此移動。這些物體應(yīng)通過減慢或加快自身的速度，為另一個物體的移動留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么？因?yàn)槲覀兗僭O(shè)界面中的所有物體都位于一個平面中。

在移動過程中，物體之間不應(yīng)相互穿過，而應(yīng)為另一個物體的移動留下空間

另一種情況，移動物體可以高于其他物體。但也不能通過其他物體消失或移動。為什么？因?yàn)槲覀兿嘈沤缑嬖氐男袨榉衔锢矶桑F(xiàn)實(shí)世界中沒有任何固體物體能夠做到這一點(diǎn)。

物體可以超越其他物體，然后移動

結(jié)論

從以上總結(jié)的規(guī)則和原則能明白，UX界面動畫是反映物理世界中存在的運(yùn)動，如摩擦、加速等，模仿現(xiàn)實(shí)世界存在的行為。我們可以創(chuàng)建一個序列，讓用戶能夠理解期望從界面得到什么。如果動畫是正確構(gòu)建的，那么它不會太引人注目，并且不會分散用戶的目標(biāo)，動畫不應(yīng)該影響用戶使用或完成任務(wù)。

但是不要忘記動畫更多的是一種藝術(shù)而不是科學(xué)，所以最好的方法是在用戶身上試驗(yàn)和測試你的決定。

文章來源：站酷    作者：UX辭典

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)