動(dòng)畫的用戶體驗(yàn)技巧
接口中的動(dòng)畫并不新鮮,在Facebook上,在我們的操作系統(tǒng)上,甚至在亞馬遜echo和谷歌助手上的LED燈上,我們都能看到它,但可能都沒有意識(shí)到,界面動(dòng)畫幫助用戶了解如何使用產(chǎn)品、網(wǎng)站或應(yīng)用程序,但如何使用動(dòng)畫創(chuàng)建更好的用戶體驗(yàn)呢?
要記住一些最佳實(shí)踐
UI動(dòng)畫必須:
讓用戶感覺自然
在用戶滿意之前增加用戶的理解
不能阻止用戶完成任務(wù)
不要分散用戶的注意力
通過遵循一組原則,您將沒有問題地滿足這些需求,您的用戶將為此感謝您
動(dòng)畫的持續(xù)時(shí)間和速度
當(dāng)元素改變它們的狀態(tài)或位置時(shí),動(dòng)畫的持續(xù)時(shí)間應(yīng)該足夠長,讓用戶有可能注意到變化,但同時(shí)動(dòng)畫的持續(xù)時(shí)間應(yīng)該足夠短,不會(huì)引起等待。
許多研究發(fā)現(xiàn),界面動(dòng)畫的最佳速度在200到500毫秒之間,這些數(shù)字是基于人類大腦的特殊性質(zhì)和感知運(yùn)動(dòng)的能力。一般來說,小于100ms的動(dòng)畫被認(rèn)為是瞬時(shí)的,根本無法識(shí)別。而動(dòng)畫超過1秒就會(huì)有延遲的感覺。
對(duì)于移動(dòng)設(shè)備,材質(zhì)設(shè)計(jì)指南也建議將動(dòng)畫的持續(xù)時(shí)間限制在200-300ms,至于平板電腦,使用時(shí)間應(yīng)該延長30%——大約400-450毫秒。原因很簡單:屏幕更大。當(dāng)物體改變位置時(shí),它們會(huì)克服較長的路徑??纱┐髟O(shè)備的續(xù)航時(shí)間應(yīng)相應(yīng)地縮短30%,約150至200毫秒,因?yàn)樵谳^小的屏幕上,飛行距離更短。
Web動(dòng)畫的處理方式不同,習(xí)慣了在瀏覽器中幾乎是即時(shí)打開網(wǎng)頁的用戶也希望在不同的狀態(tài)之間快速切換。因此,web轉(zhuǎn)換的持續(xù)時(shí)間應(yīng)該比移動(dòng)設(shè)備短兩倍左右,在150-200ms之間。在其他情況下,用戶不可避免地會(huì)認(rèn)為計(jì)算機(jī)凍結(jié)或有互聯(lián)網(wǎng)連接問題。
當(dāng)在網(wǎng)站上創(chuàng)建裝飾性動(dòng)畫或試圖吸引用戶注意某些元素時(shí),這些規(guī)則可以被忽略。在這些情況下,動(dòng)畫可以更長。
需要記住的最重要的指導(dǎo)原則是,不管使用什么平臺(tái),動(dòng)畫的持續(xù)時(shí)間都應(yīng)該取決于移動(dòng)的距離和對(duì)象的大小。較小的元素或動(dòng)畫應(yīng)該移動(dòng)得更快。具有大型和復(fù)雜元素的動(dòng)畫在使用較長時(shí)間后看起來會(huì)更好。
在相同大小的運(yùn)動(dòng)物體中,第一個(gè)停下來的物體是經(jīng)過最短距離的物體。與大對(duì)象相比,小對(duì)象移動(dòng)得更慢,因?yàn)樗鼈儠?huì)創(chuàng)建更大的偏移量。
寬松
放松有助于使物體的運(yùn)動(dòng)更自然。這是動(dòng)畫的基本原則之一,在由兩位重要的迪斯尼動(dòng)畫師奧利·約翰斯頓(Ollie Johnston)和弗蘭克·托馬斯(Frank Thomas)所著的《幻像人生:迪斯尼動(dòng)畫》(the Illusion Life:Disney animation)一書中有詳細(xì)的描述。
為了使動(dòng)畫看起來不像機(jī)械和人工的,物體應(yīng)該像物理世界中的物體一樣,以一定的加速度或減速運(yùn)動(dòng)。
線性運(yùn)動(dòng)
不受任何物理力影響的物體呈線性運(yùn)動(dòng),換句話說,速度不變。正因?yàn)槿绱?,它們看起來非常不自然和人為的人眼?/p>
所有的動(dòng)畫應(yīng)用程序都使用動(dòng)畫曲線,該曲線顯示了同一時(shí)間間隔(x軸)內(nèi)物體(y軸)的位置如何變化。在當(dāng)前情況下,移動(dòng)是線性的。物體在同一時(shí)間內(nèi)走相同的距離。
線性運(yùn)動(dòng)確實(shí)有它的用途,例如,當(dāng)對(duì)象更改顏色或透明度時(shí),可以使用它。但是,一般來說,當(dāng)對(duì)象不改變位置時(shí),將其用于狀態(tài)。
易于加速或加速曲線
在這條曲線上,物體的位置開始變化緩慢,速度逐漸增加。這意味著物體以一定的加速度運(yùn)動(dòng)。
當(dāng)物體以全速飛離屏幕時(shí),應(yīng)使用此曲線。這些可能是接口中的系統(tǒng)通知或卡片。請(qǐng)記住,只有當(dāng)對(duì)象永遠(yuǎn)離開屏幕并且不能被收回或返回時(shí),才應(yīng)該使用此方法。
動(dòng)畫曲線有助于表達(dá)正確的情緒,在下面的例子中,我們可以看到所有對(duì)象的運(yùn)動(dòng)持續(xù)時(shí)間和距離都是一樣的,但是即使是曲線上很小的變化也會(huì)影響動(dòng)畫的情緒。
緩和或減速曲線
這是易進(jìn)曲線的倒數(shù),物體迅速地跑過一段很長的距離,然后慢慢地減速,直到最后停下來。
當(dāng)元素出現(xiàn)在屏幕上時(shí),應(yīng)該使用這種類型的曲線。它在屏幕上全速飛行,然后逐漸減速,直到完全停止。這也可以應(yīng)用于從屏幕外部出現(xiàn)的卡片或?qū)ο蟆?/p>
放松或標(biāo)準(zhǔn)曲線
這條曲線使物體在開始時(shí)獲得速度,然后慢慢下降到零。這個(gè)動(dòng)作在界面動(dòng)畫中最常用。當(dāng)你懷疑在動(dòng)畫中使用哪種類型的運(yùn)動(dòng)時(shí),使用標(biāo)準(zhǔn)曲線。
根據(jù)材料設(shè)計(jì)準(zhǔn)則,非對(duì)稱曲線是最好的,因?yàn)檫\(yùn)動(dòng)看起來更自然和現(xiàn)實(shí)。曲線的終點(diǎn)必須比起點(diǎn)更強(qiáng)調(diào),這樣加速度的持續(xù)時(shí)間就比減速的持續(xù)時(shí)間短。在這種情況下,用戶將更多地關(guān)注元素的最終移動(dòng),從而關(guān)注它的新狀態(tài)。
當(dāng)對(duì)象從屏幕的一個(gè)部分移動(dòng)到另一個(gè)部分時(shí),使用Ease-in-out。在這種情況下,動(dòng)畫避免了引人注目和戲劇性的效果。
當(dāng)元素從屏幕上消失,但用戶可以隨時(shí)將其返回到之前的位置時(shí),應(yīng)該使用相同的移動(dòng)類型。例如,一個(gè)導(dǎo)航抽屜。
從這些例子中可以看出一個(gè)許多初學(xué)者忽略的基本規(guī)則:開始動(dòng)畫并不等于結(jié)束動(dòng)畫。就像在導(dǎo)航抽屜的例子中一樣,它以減速曲線出現(xiàn),并以標(biāo)準(zhǔn)曲線消失。根據(jù)谷歌材料設(shè)計(jì),物體出現(xiàn)的時(shí)間應(yīng)該更長,以吸引更多的注意。
函數(shù)cubic-bezier()用于描述動(dòng)畫曲線。它叫三次是因?yàn)樗腔谒膫€(gè)點(diǎn)的。坐標(biāo)0;0(左下角)的第一個(gè)點(diǎn)和坐標(biāo)1;1(右上角)的最后一個(gè)點(diǎn)已經(jīng)在圖上定義。
基于只需要描述圖上的兩點(diǎn),這兩點(diǎn)由函數(shù)cubic-bezier()的四個(gè)參數(shù)給出。前兩個(gè)是第一個(gè)點(diǎn)的坐標(biāo)x和y,后兩個(gè)是第二個(gè)點(diǎn)的坐標(biāo)x和y。
為了簡化曲線處理,可以使用easings.net和-bezier.com網(wǎng)站。第一個(gè)包含最常用曲線的列表,您可以將這些曲線的參數(shù)復(fù)制到原型工具中。第二種方法允許用戶使用曲線的參數(shù),并立即查看對(duì)象將如何移動(dòng)。
總結(jié)
界面中的動(dòng)畫應(yīng)該反映我們從物理世界中了解到的運(yùn)動(dòng)——摩擦、加速度等等。模仿現(xiàn)實(shí)世界中對(duì)象的行為可以創(chuàng)建一個(gè)序列,允許用戶理解從接口期望什么。
如果動(dòng)畫構(gòu)建正確,它就不會(huì)引人注目,也不會(huì)分散用戶對(duì)目標(biāo)的注意力。這意味著動(dòng)畫不應(yīng)該減慢用戶的速度或阻止他們執(zhí)行任務(wù)。如果是這樣,動(dòng)畫需要軟化,甚至刪除。
永遠(yuǎn)記住,動(dòng)畫與其說是一門科學(xué),不如說是一門藝術(shù),所以最好是對(duì)用戶進(jìn)行試驗(yàn)和測(cè)試。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)