動(dòng)效是界面設(shè)計(jì)中重要的組成部分，本文內(nèi)容精選自設(shè)計(jì)師 Taras Skytskyi 的經(jīng)驗(yàn)沉淀（文末附英文原文鏈接），總結(jié)了一些如何做出優(yōu)質(zhì)動(dòng)效的技巧，相信會(huì)對(duì)你有所幫助。

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

當(dāng)元素更改其狀態(tài)或位置時(shí)，動(dòng)效的持續(xù)時(shí)間要適當(dāng)，既不能過快，使用戶注意不到更改；又不能過慢，使用戶產(chǎn)生無聊感。

大量研究表明，任何短于 100 毫秒的動(dòng)畫都是瞬時(shí)的，基本不會(huì)被識(shí)別；而當(dāng)動(dòng)畫的持續(xù)時(shí)間超過 1 秒，就會(huì)傳達(dá)出一種延遲感，對(duì)于用戶來說會(huì)感到很無聊：

接下來介紹一些動(dòng)效設(shè)計(jì)的規(guī)則和技巧：

    1. 設(shè)備大小影響動(dòng)效的持續(xù)時(shí)間    

   移動(dòng)端

對(duì)于移動(dòng)端，Material Design 將手機(jī)的交互動(dòng)效的持續(xù)時(shí)間限制為 200 - 300 毫秒；在平板電腦上，則要將持續(xù)時(shí)間延長 30%，大約在 400 - 450 毫秒，因?yàn)槠聊坏某叽绺?，元素在更改位置時(shí)需要移動(dòng)更長的距離；在可穿戴的小型智能設(shè)備上，持續(xù)時(shí)間應(yīng)該縮短 30%，大約在 150 - 200 毫秒，因?yàn)樵谳^小的屏幕上，元素運(yùn)動(dòng)的距離更短：

   PC 端

對(duì)于 PC 端，動(dòng)效的處理方式又有所不同：由于我們習(xí)慣在瀏覽器中立即打開網(wǎng)頁，所以我們對(duì)于頁面中的其他動(dòng)畫效果也會(huì)有相同的預(yù)期，潛意識(shí)里會(huì)認(rèn)為動(dòng)效應(yīng)該立即顯現(xiàn)，不然就會(huì)有電腦卡機(jī)或者網(wǎng)速太慢的感受。因此除了一些裝飾性內(nèi)容的動(dòng)畫可以不在乎時(shí)間限制， Web的動(dòng)效持續(xù)時(shí)間通常在 150 - 200 毫秒為宜：

    2. 元素面積和變化大小影響動(dòng)效    

通常來說，面積較小或變化較小的元素，動(dòng)效的持續(xù)時(shí)間更短；面積較大或變化較大的元素，動(dòng)效的持續(xù)時(shí)間更長。如下圖，相同大小的兩個(gè)元素，移動(dòng)距離長的物體用時(shí)更長；而移動(dòng)距離相同時(shí)，變化大的元素用時(shí)更長：

    3. 適當(dāng)加入緩動(dòng)效果    

恰當(dāng)?shù)木弰?dòng)效果會(huì)使元素的動(dòng)效更為自然，加入緩動(dòng)就如同考慮了慣性、阻力等因素，讓元素的運(yùn)動(dòng)方式更接近現(xiàn)實(shí)生活中的運(yùn)動(dòng)。緩動(dòng)效果又分很多種，需要配合不同的場景進(jìn)行應(yīng)用：

   緩入效果（加速曲線運(yùn)動(dòng)）

這種動(dòng)效在剛開始時(shí)變化緩慢，速度隨時(shí)間逐漸增加，這意味著元素在做加速度運(yùn)動(dòng)：

應(yīng)用在界面設(shè)計(jì)中的場景可能是將卡片刪除，用戶不再需要閱讀卡片：

   緩出效果（減速曲線運(yùn)動(dòng)）

這種動(dòng)效在剛開始時(shí)變化較快，速度隨時(shí)間逐漸降低，直到元素最終停止：

應(yīng)用在界面設(shè)計(jì)中的場景可能是新的卡片出現(xiàn)，很想吸引用戶的注意力：

   緩進(jìn)緩出效果（S 型標(biāo)準(zhǔn)曲線運(yùn)動(dòng)）

這是最常用的動(dòng)效，同時(shí)具備緩入和緩出，當(dāng)你的不知該如何選用動(dòng)效時(shí)，可以用這個(gè)效果：

應(yīng)用在界面設(shè)計(jì)中，可以避免用戶分散過多的注意力，體驗(yàn)會(huì)更為舒適。比如下圖中的導(dǎo)航抽屜效果，在打開時(shí)采用的減速曲線運(yùn)動(dòng)效果，以便得到用戶的更多關(guān)注；在關(guān)閉時(shí)采用 S 型標(biāo)準(zhǔn)曲線運(yùn)動(dòng)效果，減少分散用戶的注意力：

   無緩動(dòng)效果（勻速直線運(yùn)動(dòng)）

相比之下，無緩動(dòng)效果的勻速直線運(yùn)動(dòng)就顯得呆板和不自然：

即使是運(yùn)動(dòng)距離相同，不同的運(yùn)動(dòng)曲線也可以使元素傳達(dá)出不同的情感和意義：

動(dòng)效的編排和組織

通常一個(gè)界面中會(huì)出現(xiàn)多種運(yùn)動(dòng)的元素，這就需要將動(dòng)效按照規(guī)律和順序編排起來，形成視線流，引導(dǎo)用戶瀏覽界面。編排和組織動(dòng)效的方式有兩種：平級(jí)交互和從屬交互：

    1. 平級(jí)交互    

當(dāng)運(yùn)動(dòng)的元素都處于同一個(gè)層級(jí)時(shí)，可以從單一的方向，引導(dǎo)用戶的視線。如下圖的卡片列表，按照一定順序依次出現(xiàn)的體驗(yàn)會(huì)更順暢：

再比如下圖中的卡片表格，采用對(duì)角線的動(dòng)效方式會(huì)更為舒適：

    2. 從屬交互    

當(dāng)一個(gè)元素從一個(gè)層級(jí)向另一個(gè)層級(jí)轉(zhuǎn)變時(shí)，界面中的其他元素都從屬于它，動(dòng)效需要表現(xiàn)出這種秩序感，將用戶的注意力集中在最主要的內(nèi)容上去：

此外，當(dāng)一個(gè)元素改變其大小時(shí)，元素放大后的形狀和比例會(huì)影響動(dòng)效的選擇。比如當(dāng)元素在變化的過程中的寬度增加，則選用緩入曲線運(yùn)動(dòng)的方式；而當(dāng)元素比例保持一致時(shí)，則采用勻速直線運(yùn)動(dòng)的方式：

避免使用的動(dòng)畫效果

在動(dòng)效的應(yīng)用過程中，除非必要或有特殊意義，否則盡量避免使用以下動(dòng)效：

   反彈效果

當(dāng)元素間發(fā)生碰撞時(shí)，最好排除反彈效果，過多的反彈效果會(huì)干擾用戶的注意力：

   模糊效果

元素在運(yùn)動(dòng)的過程中要盡量保持清晰，不要采用運(yùn)動(dòng)模糊效果：

   階段延遲效果

列表項(xiàng)元素之間的延遲應(yīng)盡量保持在 20 - 25 毫秒之間，如果太慢，會(huì)顯得卡頓并影響用戶的注意力： 

   路徑交叉

元素在移動(dòng)的過程中需要避免與其他元素的路徑進(jìn)行交叉，可以選擇高于其他元素，進(jìn)行移動(dòng)： 

英文原文來源：

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Taras Skytskyi <The ultimate guide to proper use of animation in UX>