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