2020-11-6 濤濤
如今，很難用界面動畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互，解釋了如何使用該應用程序，或者只是引起用戶的注意力。在瀏覽有關動畫的文章時，我發現幾乎所有的文章都只是描述了關于動畫的特定的用例或一般事實，并沒有遇到任何關于界面動畫通用規則的文章。在本文中我收集了界面動畫的主要原則和規則，以便給想要設計動畫界面的設計人員提供一些幫助。
當元素改變它們的狀態或位置時，動畫的持續時間應足夠慢，以使用戶可以注意到變化，但同時也要足夠快，以免引起等待。
在動畫中使用適當的持續時間，不要太快，更不要讓用戶過長等待
大量研究發現，界面動畫的最佳速度在200-500毫秒之間。這些數據是基于人類大腦的特殊性得出的。任何小于100毫秒的動畫都是瞬時的，根本不會被識別。而超過1秒的動畫時長會傳達延遲感，因此對用戶來說很無聊。
最好在界面中保留動畫的持續時間
在移動設備上，《材料設計指南》還建議將動畫的持續時間限制在200-300毫秒之間。至于Web端，持續時間應延長30％，大約為400-450毫秒。原因在于：屏幕尺寸越大，物體在改變位置時可以克服的路徑更長。因此，在可穿戴設備上，持續時間應縮短30％，大約為150-200ms，因為在較小的屏幕上，移動距離更短。
移動設備的大小會影響動畫的持續時間
Web動畫的處理方式有所不同，由于我們已經習慣了在瀏覽器中即時打開網頁，所以我們希望也能在不同狀態之間快速轉換。因此，Web轉換的持續時間應比移動設備短約2倍，150-200毫秒之間。在其他情況下，用戶將不可避免地認為計算機死機或網絡連接出現問題。
但是，如果你要在網站上創建裝飾性動畫或試圖吸引用戶對某些元素的關注，則無需考慮這些規則。在這些情況下，動畫可以更長一些。
大屏幕電腦=慢動畫？決不是！
需要記住的是，無論平臺如何，動畫的持續時間不僅取決于移動距離，還取決于對象的大小。更小的元素或帶有小變化的的動畫應該移動得更快。因此，大而復雜元素的動畫在持續時間稍長的時候看起來更好。
在相同大小的移動物體中，停下來的是經過最短距離的物體。與大物體相比，小物體移動得更慢，因為它們的偏移量更大。
動畫的持續時間取決于對象的大小和移動距離
當物體碰撞時，根據物理定律，碰撞的能量必須均勻分布在物體之間。因此，最好排除反彈效應，只在特殊情況下使用它才有意義。
避免使用彈跳效果，因為它會分散注意力
物體的運動應該是清晰和銳利的，所以不要使用運動模糊。即使在現代移動設備上也很難再現這種效果，并且根本不用于界面動畫中。
不要在動畫中使用模糊效果
列表項(新聞卡片、電子郵件列表等)在其出現之間應該有一個很短的延遲時間，每次出現的新元素應該持續20-25毫秒。元素出現較慢的話可能會惹惱用戶。
列表項的動畫應持續在20–25毫秒
緩和有助于使物體的運動更加自然，這是動畫的基本原則之一。這一點在《迪士尼動畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述，這本書是由兩位重要的迪士尼動畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。
為了使動畫看起來不顯得機械和人造，物體應以一定的加速或減速的方式移動，就像物理世界中的所有活動對象一樣。
與線性動畫相比，具有緩動效果的動畫看起來更自然（這里提示下：注意看每段豎格的間距）
不受任何物理力影響的物體直線運動，換句話說就是勻速運動。正因為如此，它們看起來非常不自然，對人眼來說是人為的。
所有動畫應用程序都使用動畫曲線，我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時間間隔內物體的位置如何變化(x axis=time)。在當前情況下，運動是線性的，因此物體在同一時間行進相同的距離。
直線運動曲線
例如，直線運動只能在物體改變顏色或透明度時使用。一般來說，我們可以用它來表示物體不改變其位置的狀態。
我們可以在曲線上看到，在開始時物體的位置變化緩慢，而速度則逐漸增加，這意味著物體正在以一定的加速度移動。
加速度曲線
當物體以全速飛出屏幕消失時，應使用此曲線，比如說系統通知或者是界面卡片。但請記住，只有當對象永遠離開屏幕且我們無法調用或返回它們時，才應使用這種類型的曲線。
將卡片滑出屏幕的加速曲線
動畫曲線有助于表達正確的情緒。在下面的示例中，我們可以看到所有物體的移動持續時間和距離是相同的，但是即使曲線上的微小變化也可以影響動畫的氣氛。當然，通過改變曲線，你可以使物體盡可能地接近于真實世界。
持續時間和距離相同，但卻是不同的氛圍
它與緩入曲線相反，因此物體會快速覆蓋很長一段距離，然后緩慢的降低速度，直到最終停止。
減速曲線
當元素出現在屏幕上時應使用這種類型的曲線——它以全速向上飛入屏幕中，然后逐漸減速直到完全停止，這也可以應用于從屏幕外部出現的其他卡片或對象。
減速曲線，使動畫更好地呈現
該曲線使物體在開始時獲得速度，然后慢慢地將速度降回零。這種類型的移動是界面動畫中最常用的。當你猶豫在動畫中使用哪種類型的運動時，可以使用標準曲線。
標準曲線
根據《材料設計指南》，最好使用非對稱曲線，使移動看起來更加自然和真實。曲線的末端必須比它的開始更加突出，以使加速的持續時間短于減速的持續時間。在這種情況下，用戶將更加關注元素的最終移動，從而關注元素的新狀態。
查看對稱和非對稱標準曲線之間的區別
當對象從屏幕的一部分移至另一部分時，使用緩入緩出功能。在這種情況下，動畫避免了引人注目的戲劇效果。
卡片在屏幕上的移動以及相應的不對稱曲線
當元素從屏幕上消失時，應該使用相同的移動類型，但用戶可以在任何時候將其返回到先前的位置。它涉及抽屜式導航等。
抽屜式導航從屏幕上隱藏了標準曲線
從這些例子中可以看出，許多初學者忽略了一個基本的規律——開始動畫并不等于結束動畫。與抽屜式導航一樣，它以減速度曲線出現，而以標準曲線消失。另外，根據谷歌的材料設計語言，物體出現的時間應該更長，以吸引更多的關注。
側面菜單的出現和消失，分別通過減速度和標準曲線實現
使用函數cubic-bezier()來描述曲線。之所以稱為立方，是因為它基于四個點。在圖上已經定義了具有坐標的第一個點0;0（左下）和具有坐標的最后一個點1;1（右上）。
基于此，我們僅需描述圖形上的兩個點，這些點由函數的四個參數給出cubic-bezier()：前兩個是坐標x和y第一個點，后兩個是坐標x和y第二個點。
為了簡化曲線的工作，建議使用easings.net和cubic-bezier.com網站。第一個包含最常用曲線的列表，你可以將其參數復制到原型工具中。第二個來源使你可以使用曲線的不同參數，并立即查看到物體將是如何移動的。
函數三次貝塞爾曲線的不同類型的曲線及其參數
就像在芭蕾舞蹈設計中一樣，主要思想是在從一種狀態轉換為另一種狀態的過程中，引導用戶注意一個流動的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。
平等交互意味著所有對象的外觀都遵循一個特定的規則。在這種情況下，所有卡片的外觀都被視為一種流程，可以引導用戶的注意力集中在一個方向上，即從上到下。如果我們不按照順序，那么用戶的注意力將會分散。所有元素同時出現看起來也會很糟糕。
用戶的注意力應引導在一個流動的方向上
對于表格視圖，它有點復雜。在這里，用戶的焦點應指向對角線，所以逐個地顯示元素是一個很糟糕的主意。單個展示元素會使動畫過長，并且用戶的注意力會呈鋸齒狀，這是錯誤的。
卡片形式的對角線外觀
從屬交互意味著我們要有一個吸引用戶注意力的中心對象，而所有其他元素都從屬于它。這種類型的動畫給人一種有序的感覺，從而引起用戶對主要內容的更多關注。
在其他情況下，用戶將很難知道該關注哪個對象，因此他的注意力將被分散。所以，如果有多個要設置動畫的元素，則需要明確它們的運動順序，并盡可能將動畫設置為最小的對象。
只有一個中心對象的動畫很有必要，其余元素應是被引導的。否則，用戶將不知道關注什么對象
根據材料設計語言，當移動的物體尺寸發生不均衡變化時，它們應沿著弧線而不是直線移動。這有助于使動作更自然。“不成比例”是指物體的高度和寬度的增加/減少是不對稱的，即以不同的速度進行(例如，一個正方形的卡片變成了一個長方形)。
當移動的物體不按原有比例變化時，應沿著弧線運動
當物體按比例改變其大小時，使用沿直線的移動。由于這種移動的實現比較容易，因此通常會忽略不成比例的圓弧移動的規則。看看實際應用的例子，你會看到線性運動的主導地位。
尺寸的比例變化是沿著直線上運動的
曲線上的運動可以通過兩種方式實現：第一種稱為垂直向外——物體開始水平移動并以垂直移動結束；第二種是水平向外——物體開始垂直移動并以水平運動結束。
物體沿曲線的移動路徑必須與滾動界面的主軸線重合。例如，在下一張圖片上，我們可以上下滾動界面，相應的卡片以“垂直輸出”的方式展開-首先從右到下，然后向下。反向移動以相反的方式進行-即卡片首先垂直上升，最后水平移動。
卡片的展開/折疊方向應與界面的軸線一致
如果移動物體的路徑彼此相交，則它們將無法彼此移動。這些物體應通過減慢或加快自身的速度，為另一個物體的移動留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么？因為我們假設界面中的所有物體都位于一個平面中。
在移動過程中，物體之間不應相互穿過，而應為另一個物體的移動留下空間
另一種情況，移動物體可以高于其他物體。但也不能通過其他物體消失或移動。為什么？因為我們相信界面元素的行為符合物理定律，現實世界中沒有任何固體物體能夠做到這一點。
物體可以超越其他物體，然后移動
從以上總結的規則和原則能明白，UX界面動畫是反映物理世界中存在的運動，如摩擦、加速等，模仿現實世界存在的行為。我們可以創建一個序列，讓用戶能夠理解期望從界面得到什么。如果動畫是正確構建的，那么它不會太引人注目，并且不會分散用戶的目標，動畫不應該影響用戶使用或完成任務。
但是不要忘記動畫更多的是一種藝術而不是科學，所以最好的方法是在用戶身上試驗和測試你的決定。
文章來源：站酷 作者：UX辭典
藍藍設計( m.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務