如今，我們很難通過界面動(dòng)效給人留下深刻的印象或者帶來驚喜。它展示了屏幕之間的交互，解釋了如何使用該應(yīng)用程序，或者只是簡單地吸引用戶的注意。在瀏覽相關(guān)動(dòng)效的文章時(shí)，我發(fā)現(xiàn)幾乎所有的文章都只描述了某些特定的例子或一般通用型的動(dòng)效知識(shí)，但是我沒有見過一篇文章都可以清晰，確切全面地描述所有動(dòng)效規(guī)則。正如此，在本文中，我不會(huì)加入任何新的東西，我只想在一個(gè)地方列出所有主要的動(dòng)效原理和規(guī)則，這樣其他想要開始制作界面動(dòng)效的設(shè)計(jì)師就不必查找額外的動(dòng)效知識(shí)。

01動(dòng)效的持續(xù)時(shí)間和速度

當(dāng)元素更改其狀態(tài)或位置時(shí)，動(dòng)效的持續(xù)時(shí)間應(yīng)該適當(dāng)慢到用戶可以注意到，但同時(shí)應(yīng)足夠快，以免引起用戶等待。

控制好動(dòng)效的持續(xù)時(shí)間。既不要太快，也不要慢地讓用戶打哈欠

眾多研究結(jié)果表明：界面動(dòng)效的最佳速度在200到500毫秒之間。這個(gè)時(shí)間是基于人腦的特有機(jī)制而得出的結(jié)論。任何短于100毫秒的動(dòng)效都是瞬時(shí)的，根本不會(huì)被人腦識(shí)別。而動(dòng)效時(shí)間超過1秒將傳遞一種遲鈍感，因此對(duì)用戶來說會(huì)產(chǎn)生無聊厭煩感。

動(dòng)效持續(xù)時(shí)間建議

在移動(dòng)設(shè)備上，Material Design Guidelines還建議將動(dòng)效的持續(xù)時(shí)間限制為200-300毫秒。至于平板電腦，持續(xù)時(shí)間應(yīng)延長30％，大約為400-450毫秒。原因很簡單：屏幕尺寸更大，物體在改變位置時(shí)需要經(jīng)過更長的路徑。因此，在可穿戴設(shè)備上，持續(xù)時(shí)間應(yīng)縮短30％，大約為150-200 ms，因?yàn)樵谳^小的屏幕上，運(yùn)動(dòng)路徑更短。

針對(duì)不同屏幕尺寸，動(dòng)效時(shí)間也需要做出調(diào)整

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

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

電腦大屏幕并不等于緩慢的動(dòng)效！

您需要記住，無論在哪個(gè)顯示設(shè)備，動(dòng)效的持續(xù)時(shí)間不僅僅取決于動(dòng)效元素行進(jìn)距離，還取決于動(dòng)效元素的大小。較小的動(dòng)效元素或具簡單小幅度動(dòng)效應(yīng)適當(dāng)縮短持續(xù)時(shí)間（加快運(yùn)動(dòng)速度）。反之，具有較大且復(fù)雜元素的動(dòng)效則需要加長持續(xù)時(shí)間。

在相同大小的移動(dòng)物體中，第一個(gè)停下的是運(yùn)動(dòng)距離最短的物體。（注：作者此處指例1、例2）

小物體與大物體相比移動(dòng)速度較慢，因?yàn)樗鼈儯ㄗⅲ捍颂幾髡咧复笪矬w）會(huì)產(chǎn)生較大的形變量/偏移量。

動(dòng)效的持續(xù)時(shí)間取決于物體的大小和運(yùn)動(dòng)距離

當(dāng)物體碰撞時(shí)，碰撞的能量必須根據(jù)物理定律在它們之間平均分配。因此，最好避免使用彈跳效果。僅在有意義的特殊情況下使用它。

避免使用彈跳效果，因?yàn)樗鼤?huì)分散注意力

物體的運(yùn)動(dòng)應(yīng)該清晰且銳利的，因此不要使用運(yùn)動(dòng)模糊（是的，說的就是AE用戶，這次不可以）。即使在現(xiàn)代移動(dòng)設(shè)備上也很難實(shí)現(xiàn)該效果，并且運(yùn)動(dòng)模糊不適用于界面 。

不要在動(dòng)效中使用運(yùn)動(dòng)模糊效果

清單列表（新聞卡片，電子郵件列表等）之間應(yīng)該有很短的延遲時(shí)間。每次出現(xiàn)新元素應(yīng)持續(xù)20到25 ms。界面元素出現(xiàn)的速度較慢可能會(huì)惹惱用戶。

表單列表的動(dòng)效應(yīng)持續(xù)20–25毫秒

緩動(dòng)

緩動(dòng)使得物體的運(yùn)動(dòng)更加自然。這是在《生活的幻覺：迪斯尼動(dòng)畫》書中詳盡描述一個(gè)重要的動(dòng)效原則，這本書由兩個(gè)迪斯尼主動(dòng)畫師-奧利·約翰斯頓和弗蘭克·托馬斯編寫。

為了使動(dòng)效看起來不顯得那么生硬和機(jī)械感，動(dòng)效物體應(yīng)以一定的加速度或減速度移動(dòng)，就像物理現(xiàn)實(shí)世界中的所有物體一樣。

與純線性動(dòng)效相比，具有緩動(dòng)效果的動(dòng)效看起來更自然

線性動(dòng)效

不受任何物理力影響的物體將線性移動(dòng)，即以恒定速度移動(dòng)。正因?yàn)槿绱?，人眼看起來?huì)覺得非常不自然和生硬。

所有動(dòng)效應(yīng)用程序都使用動(dòng)效曲線。我將解釋如何閱讀它們以及它們的含義。下圖曲線顯示物體位置(y軸)一段時(shí)間（x軸）間隔內(nèi)如何變化。在下圖中，運(yùn)動(dòng)都是線性的，因此物體在同一時(shí)間行進(jìn)相同的距離。

直線運(yùn)動(dòng)曲線

舉個(gè)例子，線性動(dòng)效曲線可以用在物體改變顏色或者透明度的時(shí)候。大致來講，物體不改變位置時(shí)，我們可以使用線性動(dòng)效曲線。

緩入或加速曲線

我們可以在曲線上看到，在開始時(shí)物體的位置變化緩慢，而速度則逐漸增加。這意味著物體正在以一定的加速度運(yùn)動(dòng)。

加速度曲線

當(dāng)物體以全速飛出屏幕時(shí)，應(yīng)使用此曲線。這些可以是系統(tǒng)通知，也可以只是界面卡片。但是請(qǐng)記住，僅當(dāng)物體永遠(yuǎn)離開屏幕且我們無法調(diào)用或喚起它們時(shí)，才應(yīng)使用此類曲線。

將卡扔出屏幕的加速度曲線

動(dòng)效曲線有助于恰當(dāng)?shù)乇磉_(dá)情緒。在下面的示例中，我們可以看到所有物體的移動(dòng)持續(xù)時(shí)間和距離是相同的，但是即使曲線上的微小變化也可以影響動(dòng)效情緒。

當(dāng)然，通過更改動(dòng)效曲線，可以使物體更好的模擬真實(shí)物理世界。

持續(xù)時(shí)間和距離相同，但動(dòng)效情緒不同

緩出或減速曲線

它與緩入曲線相反，因此物體會(huì)快速移動(dòng)很長的距離，然后緩慢降低速度，直到最終停止。

減速曲線 

當(dāng)元素移入屏幕時(shí)應(yīng)使用這種類型的動(dòng)效曲線-它以全速在屏幕上運(yùn)動(dòng)，然后逐漸變慢直到完全停止。這也可以應(yīng)用于從屏幕外部卡片或者物體飛入屏幕的動(dòng)效。

移入動(dòng)效的減速曲線

緩進(jìn)緩出或標(biāo)準(zhǔn)曲線

該曲線使物體在開始時(shí)獲得速度，然后將其緩慢降低回零。此類曲線是界面動(dòng)效中最常使用的東小區(qū)現(xiàn)。當(dāng)您不知道使用哪種類型的運(yùn)動(dòng)時(shí)，請(qǐng)使用標(biāo)準(zhǔn)曲線。

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

根據(jù)Material Design Guidenlines，最好使用非對(duì)稱曲線使機(jī)芯看起來更自然和逼真。我們應(yīng)當(dāng)強(qiáng)調(diào)曲線的末端即后半段動(dòng)效，所以減速的時(shí)間要比加速時(shí)間要長。在這種情況下，用戶將更加關(guān)注元素的后半段，從而更容易關(guān)注元素的新狀態(tài)。

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

當(dāng)物體從屏幕的一側(cè)移動(dòng)到另一側(cè)時(shí)，應(yīng)當(dāng)使用緩入緩出功能。在這種情況下，可以避免用戶過于關(guān)注物體的運(yùn)動(dòng)。

卡片橫跨屏幕運(yùn)動(dòng)的非對(duì)稱動(dòng)效曲線

當(dāng)物體從屏幕消失，用戶也可以隨時(shí)喚起消失的物體回到原先的位置時(shí)，這類運(yùn)動(dòng)的動(dòng)效曲線（注：抽屜導(dǎo)航的收起動(dòng)效）應(yīng)當(dāng)使用非對(duì)稱動(dòng)效曲線。這類的動(dòng)效包括抽屜導(dǎo)航動(dòng)效等。

抽屜導(dǎo)航收起時(shí)的非對(duì)稱動(dòng)效曲線

這些案例還可以得出一個(gè)很多初學(xué)者都容易忽略的基本原則，即起始（出現(xiàn)）動(dòng)效不等于結(jié)束（消失）動(dòng)效曲線。就以抽屜導(dǎo)航為例，抽屜導(dǎo)航是以減速曲線出現(xiàn)以標(biāo)準(zhǔn)曲線消失的。

此外，根據(jù)Google Material Design的說法，物體出現(xiàn)的動(dòng)效時(shí)間應(yīng)更長一些，以引起更多關(guān)注。

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

Cubic-bezier函數(shù)（注：貝塞爾函數(shù)）是用來描述運(yùn)動(dòng)曲線的。之所以名稱叫做Cubic，是因?yàn)樗腔谒膫€(gè)點(diǎn)。

貝塞爾圖形圖形上定義了兩個(gè)坐標(biāo)點(diǎn)，第一個(gè)點(diǎn)坐標(biāo)是（0,0），第二個(gè)點(diǎn)坐標(biāo)是（1，1）

基于這些我們只需要描述圖形上另外兩個(gè)點(diǎn)，通過函數(shù)（x1,y1,x2,y2）的四個(gè)參數(shù)描述這另外兩個(gè)點(diǎn)，前兩個(gè)參數(shù)是第一個(gè)點(diǎn)的x軸y軸，后兩個(gè)是第二個(gè)點(diǎn)的x軸y軸。

為了便于您定義貝塞爾曲線，建議您使用easings.net和cubic-bezier.com網(wǎng)站。第一個(gè)包含最常用曲線參數(shù)，您可以將其參數(shù)復(fù)制到交互原型工具中使用。第二個(gè)網(wǎng)站可以實(shí)時(shí)預(yù)覽不同參數(shù)的運(yùn)動(dòng)效果。

各種貝塞爾線以及對(duì)應(yīng)的參數(shù)

動(dòng)效編排

就像芭蕾中的舞蹈編排一樣，動(dòng)效編排大致意思就是在動(dòng)效中以流式的方向來引導(dǎo)用戶的注意力。

動(dòng)效編排有兩種——平等互動(dòng)和從屬互動(dòng)。

平等互動(dòng)

平等互動(dòng)意味著物體都要按照同一特定規(guī)則出現(xiàn)。

在這種情況下，所有卡片會(huì)像是流水一樣，一個(gè)方向從上到下引導(dǎo)用戶的注意。如果我們不遵循同一特定規(guī)則，那么用戶的注意力將會(huì)分散。同時(shí)所有元素立馬就會(huì)看起來變得糟糕。

應(yīng)該用一個(gè)流式方向引導(dǎo)用戶注意力

對(duì)于表格視圖，情況會(huì)更復(fù)雜。在表格里，應(yīng)該按照對(duì)角線的方式來引導(dǎo)用戶的關(guān)注點(diǎn)，所以一個(gè)接一個(gè)地展示元素是一個(gè)糟糕的選擇。逐個(gè)顯示每個(gè)元素會(huì)使動(dòng)效時(shí)間過長，并且用戶的關(guān)注路線會(huì)過于曲折，這是錯(cuò)誤的。

卡片表格視圖動(dòng)效的對(duì)角線呈現(xiàn)

從屬互動(dòng)

從屬交互意味著我們有一個(gè)吸引所有用戶注意力的主體，而所有其他元素都從屬于它。這種動(dòng)效使得畫面有了秩序感，并讓人們更為關(guān)注核心內(nèi)容。

如果不這么做，用戶會(huì)不知道關(guān)注哪一塊內(nèi)容，用戶的注意力會(huì)被分散。因此，如果有多個(gè)要設(shè)置動(dòng)效的元素，則需要明確它們的運(yùn)動(dòng)順序并確定主體，并且盡量減少同一時(shí)間運(yùn)動(dòng)的元素。

明確動(dòng)效中的主體，其他對(duì)象保持跟隨。不然用戶會(huì)不知道關(guān)注哪一塊，從而分散注意力。

根據(jù)Materal Design，當(dāng)物體不按照自身比例改變大小時(shí)，它們應(yīng)沿著弧線而不是直線移動(dòng)。它有助于使運(yùn)動(dòng)更自然。

物體非同比形變時(shí)，應(yīng)沿弧線運(yùn)動(dòng)

當(dāng)物體按自身比例形變時(shí)，物體應(yīng)當(dāng)按照直線路徑運(yùn)動(dòng)。因?yàn)橹本€運(yùn)動(dòng)的實(shí)現(xiàn)比較簡單，因此通常會(huì)忽略物體非自身比例形變時(shí)應(yīng)該采用弧線運(yùn)動(dòng)的規(guī)則。反觀現(xiàn)有的實(shí)際應(yīng)用案例，直線運(yùn)動(dòng)確實(shí)占大多數(shù)。

同比形變時(shí)的直線路徑

曲線運(yùn)動(dòng)可以通過兩種方式實(shí)現(xiàn)：第一種稱為“ 垂直出”——水平開始，垂直結(jié)束；第二個(gè)（水平出）——垂直開始，水平結(jié)束。

物體曲線運(yùn)動(dòng)路徑必須與界面滾動(dòng)的主軸線重合（注：這里可以理解為曲線運(yùn)動(dòng)結(jié)束時(shí)的切線，與界面滾動(dòng)的方向重合）。例如，在下一張圖像上，我們可以上下垂直地滾動(dòng)界面，因此卡片應(yīng)當(dāng)以“ 垂直出”的方式展開——首先移動(dòng)到右側(cè)，然后向下運(yùn)動(dòng)。收起的運(yùn)動(dòng)方式則相反——即卡首先垂直上升，然后水平移動(dòng)回到初始位置。

如果物體的運(yùn)動(dòng)路徑彼此相交，則它們將無法穿過彼此。物體應(yīng)當(dāng)加速或者減速給其他物體留下運(yùn)動(dòng)空間?；蛘咭部梢允褂梦矬w推動(dòng)其他物體。為什么會(huì)這樣？因?yàn)槲覀兇竽X總是把這些物體看做是在同一水平面。

在運(yùn)動(dòng)過程中，物體不應(yīng)相互穿過，而應(yīng)給其他物體預(yù)留運(yùn)動(dòng)空間

在另一種情況下，運(yùn)動(dòng)物體可以飛越其他物體。但是再不能直接穿過物體或交匯穿過。為什么？由于我們認(rèn)為界面中的元素都是遵循顯示物理規(guī)律的，因此現(xiàn)實(shí)世界中沒有任何固體物體能夠做到這些。

物體可以飛越其他物體

結(jié)論

因此，我們總結(jié)所有上述動(dòng)效規(guī)則和原則，界面中的動(dòng)效應(yīng)映射的是我們熟知的顯示物理世界中道的運(yùn)動(dòng)——摩擦，加速度等。模仿物體在現(xiàn)實(shí)中的運(yùn)動(dòng)行為，我們可以構(gòu)建一個(gè)用戶容易理解熟悉的界面動(dòng)效。

如果動(dòng)效使用得當(dāng)，則它既不會(huì)太引人注目，也不會(huì)不會(huì)分散用戶的注意。反之，您要么需要弱化動(dòng)效，要么甚至將其刪除。動(dòng)效不應(yīng)降低用戶操作速度或阻止用戶完成任務(wù)。

但是請(qǐng)不要忘記，動(dòng)效不僅僅是一門科學(xué)更是一門藝術(shù)，因此最好提前對(duì)用戶進(jìn)行試驗(yàn)和測試。