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

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

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

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

接下來介紹一些動效設計的規(guī)則和技巧：

    1. 設備大小影響動效的持續(xù)時間    

   移動端

對于移動端，Material Design 將手機的交互動效的持續(xù)時間限制為 200 - 300 毫秒；在平板電腦上，則要將持續(xù)時間延長 30%，大約在 400 - 450 毫秒，因為屏幕的尺寸更大，元素在更改位置時需要移動更長的距離；在可穿戴的小型智能設備上，持續(xù)時間應該縮短 30%，大約在 150 - 200 毫秒，因為在較小的屏幕上，元素運動的距離更短：

   PC 端

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

    2. 元素面積和變化大小影響動效    

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

    3. 適當加入緩動效果    

恰當?shù)木弰有Ч麜乖氐膭有Ц鼮樽匀唬尤刖弰泳腿缤紤]了慣性、阻力等因素，讓元素的運動方式更接近現(xiàn)實生活中的運動。緩動效果又分很多種，需要配合不同的場景進行應用：

   緩入效果（加速曲線運動）

這種動效在剛開始時變化緩慢，速度隨時間逐漸增加，這意味著元素在做加速度運動：

應用在界面設計中的場景可能是將卡片刪除，用戶不再需要閱讀卡片：

   緩出效果（減速曲線運動）

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

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

   緩進緩出效果（S 型標準曲線運動）

這是最常用的動效，同時具備緩入和緩出，當你的不知該如何選用動效時，可以用這個效果：

應用在界面設計中，可以避免用戶分散過多的注意力，體驗會更為舒適。比如下圖中的導航抽屜效果，在打開時采用的減速曲線運動效果，以便得到用戶的更多關注；在關閉時采用 S 型標準曲線運動效果，減少分散用戶的注意力：

   無緩動效果（勻速直線運動）

相比之下，無緩動效果的勻速直線運動就顯得呆板和不自然：

即使是運動距離相同，不同的運動曲線也可以使元素傳達出不同的情感和意義：

動效的編排和組織

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

    1. 平級交互    

當運動的元素都處于同一個層級時，可以從單一的方向，引導用戶的視線。如下圖的卡片列表，按照一定順序依次出現(xiàn)的體驗會更順暢：

再比如下圖中的卡片表格，采用對角線的動效方式會更為舒適：

    2. 從屬交互    

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

此外，當一個元素改變其大小時，元素放大后的形狀和比例會影響動效的選擇。比如當元素在變化的過程中的寬度增加，則選用緩入曲線運動的方式；而當元素比例保持一致時，則采用勻速直線運動的方式：

避免使用的動畫效果

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

   反彈效果

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

   模糊效果

元素在運動的過程中要盡量保持清晰，不要采用運動模糊效果：

   階段延遲效果

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

   路徑交叉

元素在移動的過程中需要避免與其他元素的路徑進行交叉，可以選擇高于其他元素，進行移動： 

英文原文來源：

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>