辭典精譯 | 在UX中正確使用動(dòng)畫的終極指南

2020-11-6    資深UI設(shè)計(jì)者

如今,很難用界面動(dòng)畫給人留下深刻的印象甚至驚喜。它顯示了屏幕之間的交互,解釋了如何使用該應(yīng)用程序,或者只是引起用戶的注意力。在瀏覽有關(guān)動(dòng)畫的文章時(shí),我發(fā)現(xiàn)幾乎所有的文章都只是描述了關(guān)于動(dòng)畫的特定的用例或一般事實(shí),并沒有遇到任何關(guān)于界面動(dòng)畫通用規(guī)則的文章。在本文中我收集了界面動(dòng)畫的主要原則和規(guī)則,以便給想要設(shè)計(jì)動(dòng)畫界面的設(shè)計(jì)人員提供一些幫助。


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

當(dāng)元素改變它們的狀態(tài)或位置時(shí),動(dòng)畫的持續(xù)時(shí)間應(yīng)足夠慢,以使用戶可以注意到變化,但同時(shí)也要足夠快,以免引起等待。

在動(dòng)畫中使用適當(dāng)?shù)某掷m(xù)時(shí)間,不要太快,更不要讓用戶過長(zhǎng)等待


大量研究發(fā)現(xiàn),界面動(dòng)畫的最佳速度在200-500毫秒之間。這些數(shù)據(jù)是基于人類大腦的特殊性得出的。任何小于100毫秒的動(dòng)畫都是瞬時(shí)的,根本不會(huì)被識(shí)別。而超過1秒的動(dòng)畫時(shí)長(zhǎng)會(huì)傳達(dá)延遲感,因此對(duì)用戶來說很無聊。

最好在界面中保留動(dòng)畫的持續(xù)時(shí)間


在移動(dòng)設(shè)備上,《材料設(shè)計(jì)指南》還建議將動(dòng)畫的持續(xù)時(shí)間限制在200-300毫秒之間。至于Web端,持續(xù)時(shí)間應(yīng)延長(zhǎng)30%,大約為400-450毫秒。原因在于:屏幕尺寸越大,物體在改變位置時(shí)可以克服的路徑更長(zhǎng)。因此,在可穿戴設(shè)備上,持續(xù)時(shí)間應(yīng)縮短30%,大約為150-200ms,因?yàn)樵谳^小的屏幕上,移動(dòng)距離更短。

移動(dòng)設(shè)備的大小會(huì)影響動(dòng)畫的持續(xù)時(shí)間


Web動(dòng)畫的處理方式有所不同,由于我們已經(jīng)習(xí)慣了在瀏覽器中即時(shí)打開網(wǎng)頁,所以我們希望也能在不同狀態(tài)之間快速轉(zhuǎn)換。因此,Web轉(zhuǎn)換的持續(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)畫可以更長(zhǎng)一些。

大屏幕電腦=慢動(dòng)畫?決不是!


需要記住的是,無論平臺(tái)如何,動(dòng)畫的持續(xù)時(shí)間不僅取決于移動(dòng)距離,還取決于對(duì)象的大小。更小的元素或帶有小變化的的動(dòng)畫應(yīng)該移動(dòng)得更快。因此,大而復(fù)雜元素的動(dòng)畫在持續(xù)時(shí)間稍長(zhǎng)的時(shí)候看起來更好。


在相同大小的移動(dòng)物體中,停下來的是經(jīng)過最短距離的物體。與大物體相比,小物體移動(dòng)得更慢,因?yàn)樗鼈兊钠屏扛蟆?

動(dòng)畫的持續(xù)時(shí)間取決于對(duì)象的大小和移動(dòng)距離


當(dāng)物體碰撞時(shí),根據(jù)物理定律,碰撞的能量必須均勻分布在物體之間。因此,最好排除反彈效應(yīng),只在特殊情況下使用它才有意義。

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


物體的運(yùn)動(dòng)應(yīng)該是清晰和銳利的,所以不要使用運(yùn)動(dòng)模糊。即使在現(xiàn)代移動(dòng)設(shè)備上也很難再現(xiàn)這種效果,并且根本不用于界面動(dòng)畫中。

不要在動(dòng)畫中使用模糊效果


列表項(xiàng)(新聞卡片、電子郵件列表等)在其出現(xiàn)之間應(yīng)該有一個(gè)很短的延遲時(shí)間,每次出現(xiàn)的新元素應(yīng)該持續(xù)20-25毫秒。元素出現(xiàn)較慢的話可能會(huì)惹惱用戶。

列表項(xiàng)的動(dòng)畫應(yīng)持續(xù)在20–25毫秒


02 緩和

緩和有助于使物體的運(yùn)動(dòng)更加自然,這是動(dòng)畫的基本原則之一。這一點(diǎn)在《迪士尼動(dòng)畫原則》(The Illusion of Life: Disney Animation)一書中得到了充分的描述,這本書是由兩位重要的迪士尼動(dòng)畫師——奧利·約翰斯頓和弗蘭克·托馬斯所寫。


為了使動(dòng)畫看起來不顯得機(jī)械和人造,物體應(yīng)以一定的加速或減速的方式移動(dòng),就像物理世界中的所有活動(dòng)對(duì)象一樣。

與線性動(dòng)畫相比,具有緩動(dòng)效果的動(dòng)畫看起來更自然(這里提示下:注意看每段豎格的間距)


2/1 直線運(yùn)動(dòng)

不受任何物理力影響的物體直線運(yùn)動(dòng),換句話說就是勻速運(yùn)動(dòng)。正因?yàn)槿绱耍鼈兛雌饋矸浅2蛔匀?,?duì)人眼來說是人為的。


所有動(dòng)畫應(yīng)用程序都使用動(dòng)畫曲線,我將嘗試解釋如何閱讀它們以及它們的含義。曲線顯示了物體的位置( y axis=position )在相同的時(shí)間間隔內(nèi)物體的位置如何變化(x axis=time)。在當(dāng)前情況下,運(yùn)動(dòng)是線性的,因此物體在同一時(shí)間行進(jìn)相同的距離。 

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


例如,直線運(yùn)動(dòng)只能在物體改變顏色或透明度時(shí)使用。一般來說,我們可以用它來表示物體不改變其位置的狀態(tài)。


2/2 緩入或加速曲線

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

加速度曲線


當(dāng)物體以全速飛出屏幕消失時(shí),應(yīng)使用此曲線,比如說系統(tǒng)通知或者是界面卡片。但請(qǐng)記住,只有當(dāng)對(duì)象永遠(yuǎn)離開屏幕且我們無法調(diào)用或返回它們時(shí),才應(yīng)使用這種類型的曲線。

將卡片滑出屏幕的加速曲線


動(dòng)畫曲線有助于表達(dá)正確的情緒。在下面的示例中,我們可以看到所有物體的移動(dòng)持續(xù)時(shí)間和距離是相同的,但是即使曲線上的微小變化也可以影響動(dòng)畫的氣氛。當(dāng)然,通過改變曲線,你可以使物體盡可能地接近于真實(shí)世界。

持續(xù)時(shí)間和距離相同,但卻是不同的氛圍


2/3 緩動(dòng)或減速曲線

它與緩入曲線相反,因此物體會(huì)快速覆蓋很長(zhǎng)一段距離,然后緩慢的降低速度,直到最終停止。

減速曲線


當(dāng)元素出現(xiàn)在屏幕上時(shí)應(yīng)使用這種類型的曲線——它以全速向上飛入屏幕中,然后逐漸減速直到完全停止,這也可以應(yīng)用于從屏幕外部出現(xiàn)的其他卡片或?qū)ο蟆?

減速曲線,使動(dòng)畫更好地呈現(xiàn)


2/4 緩入緩出或標(biāo)準(zhǔn)曲線

該曲線使物體在開始時(shí)獲得速度,然后慢慢地將速度降回零。這種類型的移動(dòng)是界面動(dòng)畫中最常用的。當(dāng)你猶豫在動(dòng)畫中使用哪種類型的運(yùn)動(dòng)時(shí),可以使用標(biāo)準(zhǔn)曲線。

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


根據(jù)《材料設(shè)計(jì)指南》,最好使用非對(duì)稱曲線,使移動(dòng)看起來更加自然和真實(shí)。曲線的末端必須比它的開始更加突出,以使加速的持續(xù)時(shí)間短于減速的持續(xù)時(shí)間。在這種情況下,用戶將更加關(guān)注元素的最終移動(dòng),從而關(guān)注元素的新狀態(tài)。

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


當(dāng)對(duì)象從屏幕的一部分移至另一部分時(shí),使用緩入緩出功能。在這種情況下,動(dòng)畫避免了引人注目的戲劇效果。

卡片在屏幕上的移動(dòng)以及相應(yīng)的不對(duì)稱曲線


當(dāng)元素從屏幕上消失時(shí),應(yīng)該使用相同的移動(dòng)類型,但用戶可以在任何時(shí)候?qū)⑵浞祷氐较惹暗奈恢?。它涉及抽屜式?dǎo)航等。

抽屜式導(dǎo)航從屏幕上隱藏了標(biāo)準(zhǔn)曲線


從這些例子中可以看出,許多初學(xué)者忽略了一個(gè)基本的規(guī)律——開始動(dòng)畫并不等于結(jié)束動(dòng)畫。與抽屜式導(dǎo)航一樣,它以減速度曲線出現(xiàn),而以標(biāo)準(zhǔn)曲線消失。另外,根據(jù)谷歌的材料設(shè)計(jì)語言,物體出現(xiàn)的時(shí)間應(yīng)該更長(zhǎng),以吸引更多的關(guān)注。

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


使用函數(shù)cubic-bezier()來描述曲線。之所以稱為立方,是因?yàn)樗谒膫€(gè)點(diǎn)。在圖上已經(jīng)定義了具有坐標(biāo)的第一個(gè)點(diǎn)0;0(左下)和具有坐標(biāo)的最后一個(gè)點(diǎn)1;1(右上)。 


基于此,我們僅需描述圖形上的兩個(gè)點(diǎn),這些點(diǎn)由函數(shù)的四個(gè)參數(shù)給出cubic-bezier():前兩個(gè)是坐標(biāo)x和y第一個(gè)點(diǎn),后兩個(gè)是坐標(biāo)x和y第二個(gè)點(diǎn)。 


為了簡(jiǎn)化曲線的工作,建議使用easings.net和cubic-bezier.com網(wǎng)站。第一個(gè)包含最常用曲線的列表,你可以將其參數(shù)復(fù)制到原型工具中。第二個(gè)來源使你可以使用曲線的不同參數(shù),并立即查看到物體將是如何移動(dòng)的。

函數(shù)三次貝塞爾曲線的不同類型的曲線及其參數(shù)


03 界面動(dòng)畫中的編排

就像在芭蕾舞蹈設(shè)計(jì)中一樣,主要思想是在從一種狀態(tài)轉(zhuǎn)換為另一種狀態(tài)的過程中,引導(dǎo)用戶注意一個(gè)流動(dòng)的方向上。舞蹈編排有兩種類型——平等交互和從屬交互。


3/1 平等交互

平等交互意味著所有對(duì)象的外觀都遵循一個(gè)特定的規(guī)則。在這種情況下,所有卡片的外觀都被視為一種流程,可以引導(dǎo)用戶的注意力集中在一個(gè)方向上,即從上到下。如果我們不按照順序,那么用戶的注意力將會(huì)分散。所有元素同時(shí)出現(xiàn)看起來也會(huì)很糟糕。

用戶的注意力應(yīng)引導(dǎo)在一個(gè)流動(dòng)的方向上


對(duì)于表格視圖,它有點(diǎn)復(fù)雜。在這里,用戶的焦點(diǎn)應(yīng)指向?qū)蔷€,所以逐個(gè)地顯示元素是一個(gè)很糟糕的主意。單個(gè)展示元素會(huì)使動(dòng)畫過長(zhǎng),并且用戶的注意力會(huì)呈鋸齒狀,這是錯(cuò)誤的。

卡片形式的對(duì)角線外觀


3/2 從屬交互

從屬交互意味著我們要有一個(gè)吸引用戶注意力的中心對(duì)象,而所有其他元素都從屬于它。這種類型的動(dòng)畫給人一種有序的感覺,從而引起用戶對(duì)主要內(nèi)容的更多關(guān)注。


在其他情況下,用戶將很難知道該關(guān)注哪個(gè)對(duì)象,因此他的注意力將被分散。所以,如果有多個(gè)要設(shè)置動(dòng)畫的元素,則需要明確它們的運(yùn)動(dòng)順序,并盡可能將動(dòng)畫設(shè)置為最小的對(duì)象。

只有一個(gè)中心對(duì)象的動(dòng)畫很有必要,其余元素應(yīng)是被引導(dǎo)的。否則,用戶將不知道關(guān)注什么對(duì)象


根據(jù)材料設(shè)計(jì)語言,當(dāng)移動(dòng)的物體尺寸發(fā)生不均衡變化時(shí),它們應(yīng)沿著弧線而不是直線移動(dòng)。這有助于使動(dòng)作更自然。“不成比例”是指物體的高度和寬度的增加/減少是不對(duì)稱的,即以不同的速度進(jìn)行(例如,一個(gè)正方形的卡片變成了一個(gè)長(zhǎng)方形)。

當(dāng)移動(dòng)的物體不按原有比例變化時(shí),應(yīng)沿著弧線運(yùn)動(dòng)


當(dāng)物體按比例改變其大小時(shí),使用沿直線的移動(dòng)。由于這種移動(dòng)的實(shí)現(xiàn)比較容易,因此通常會(huì)忽略不成比例的圓弧移動(dòng)的規(guī)則??纯磳?shí)際應(yīng)用的例子,你會(huì)看到線性運(yùn)動(dòng)的主導(dǎo)地位。

尺寸的比例變化是沿著直線上運(yùn)動(dòng)的


曲線上的運(yùn)動(dòng)可以通過兩種方式實(shí)現(xiàn):第一種稱為垂直向外——物體開始水平移動(dòng)并以垂直移動(dòng)結(jié)束;第二種是水平向外——物體開始垂直移動(dòng)并以水平運(yùn)動(dòng)結(jié)束。


物體沿曲線的移動(dòng)路徑必須與滾動(dòng)界面的主軸線重合。例如,在下一張圖片上,我們可以上下滾動(dòng)界面,相應(yīng)的卡片以“垂直輸出”的方式展開-首先從右到下,然后向下。反向移動(dòng)以相反的方式進(jìn)行-即卡片首先垂直上升,最后水平移動(dòng)。

卡片的展開/折疊方向應(yīng)與界面的軸線一致


如果移動(dòng)物體的路徑彼此相交,則它們將無法彼此移動(dòng)。這些物體應(yīng)通過減慢或加快自身的速度,為另一個(gè)物體的移動(dòng)留下足夠的空間。另一種選擇-他們只是推開其他物體。為什么?因?yàn)槲覀兗僭O(shè)界面中的所有物體都位于一個(gè)平面中。

在移動(dòng)過程中,物體之間不應(yīng)相互穿過,而應(yīng)為另一個(gè)物體的移動(dòng)留下空間


另一種情況,移動(dòng)物體可以高于其他物體。但也不能通過其他物體消失或移動(dòng)。為什么?因?yàn)槲覀兿嘈沤缑嬖氐男袨榉衔锢矶?,現(xiàn)實(shí)世界中沒有任何固體物體能夠做到這一點(diǎn)。

物體可以超越其他物體,然后移動(dòng)


結(jié)論

從以上總結(jié)的規(guī)則和原則能明白,UX界面動(dòng)畫是反映物理世界中存在的運(yùn)動(dòng),如摩擦、加速等,模仿現(xiàn)實(shí)世界存在的行為。我們可以創(chuàng)建一個(gè)序列,讓用戶能夠理解期望從界面得到什么。如果動(dòng)畫是正確構(gòu)建的,那么它不會(huì)太引人注目,并且不會(huì)分散用戶的目標(biāo),動(dòng)畫不應(yīng)該影響用戶使用或完成任務(wù)。


但是不要忘記動(dòng)畫更多的是一種藝術(shù)而不是科學(xué),所以最好的方法是在用戶身上試驗(yàn)和測(cè)試你的決定。


文章來源:站酷    作者:UX辭典


藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔