接口中的動(dòng)畫(huà)并不新鮮，在Facebook上，在我們的操作系統(tǒng)上，甚至在亞馬遜echo和谷歌助手上的LED燈上，我們都能看到它，但可能都沒(méi)有意識(shí)到，界面動(dòng)畫(huà)幫助用戶(hù)了解如何使用產(chǎn)品、網(wǎng)站或應(yīng)用程序，但如何使用動(dòng)畫(huà)創(chuàng)建更好的用戶(hù)體驗(yàn)?zāi)兀?

要記住一些最佳實(shí)踐

UI動(dòng)畫(huà)必須：

讓用戶(hù)感覺(jué)自然

在用戶(hù)滿(mǎn)意之前增加用戶(hù)的理解

不能阻止用戶(hù)完成任務(wù)

不要分散用戶(hù)的注意力

通過(guò)遵循一組原則，您將沒(méi)有問(wèn)題地滿(mǎn)足這些需求，您的用戶(hù)將為此感謝您

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

當(dāng)元素改變它們的狀態(tài)或位置時(shí)，動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)該足夠長(zhǎng)，讓用戶(hù)有可能注意到變化，但同時(shí)動(dòng)畫(huà)的持續(xù)時(shí)間應(yīng)該足夠短，不會(huì)引起等待。

許多研究發(fā)現(xiàn)，界面動(dòng)畫(huà)的最佳速度在200到500毫秒之間，這些數(shù)字是基于人類(lèi)大腦的特殊性質(zhì)和感知運(yùn)動(dòng)的能力。一般來(lái)說(shuō)，小于100ms的動(dòng)畫(huà)被認(rèn)為是瞬時(shí)的，根本無(wú)法識(shí)別。而動(dòng)畫(huà)超過(guò)1秒就會(huì)有延遲的感覺(jué)。

對(duì)于移動(dòng)設(shè)備，材質(zhì)設(shè)計(jì)指南也建議將動(dòng)畫(huà)的持續(xù)時(shí)間限制在200-300ms，至于平板電腦，使用時(shí)間應(yīng)該延長(zhǎng)30%——大約400-450毫秒。原因很簡(jiǎn)單：屏幕更大。當(dāng)物體改變位置時(shí)，它們會(huì)克服較長(zhǎng)的路徑?？纱┐髟O(shè)備的續(xù)航時(shí)間應(yīng)相應(yīng)地縮短30%，約150至200毫秒，因?yàn)樵谳^小的屏幕上，飛行距離更短。

Web動(dòng)畫(huà)的處理方式不同，習(xí)慣了在瀏覽器中幾乎是即時(shí)打開(kāi)網(wǎng)頁(yè)的用戶(hù)也希望在不同的狀態(tài)之間快速切換。因此，web轉(zhuǎn)換的持續(xù)時(shí)間應(yīng)該比移動(dòng)設(shè)備短兩倍左右，在150-200ms之間。在其他情況下，用戶(hù)不可避免地會(huì)認(rèn)為計(jì)算機(jī)凍結(jié)或有互聯(lián)網(wǎng)連接問(wèn)題。

當(dāng)在網(wǎng)站上創(chuàng)建裝飾性動(dòng)畫(huà)或試圖吸引用戶(hù)注意某些元素時(shí)，這些規(guī)則可以被忽略。在這些情況下，動(dòng)畫(huà)可以更長(zhǎng)。

需要記住的最重要的指導(dǎo)原則是，不管使用什么平臺(tái)，動(dòng)畫(huà)的持續(xù)時(shí)間都應(yīng)該取決于移動(dòng)的距離和對(duì)象的大小。較小的元素或動(dòng)畫(huà)應(yīng)該移動(dòng)得更快。具有大型和復(fù)雜元素的動(dòng)畫(huà)在使用較長(zhǎng)時(shí)間后看起來(lái)會(huì)更好。

在相同大小的運(yùn)動(dòng)物體中，第一個(gè)停下來(lái)的物體是經(jīng)過(guò)最短距離的物體。與大對(duì)象相比，小對(duì)象移動(dòng)得更慢，因?yàn)樗鼈儠?huì)創(chuàng)建更大的偏移量。

寬松

放松有助于使物體的運(yùn)動(dòng)更自然。這是動(dòng)畫(huà)的基本原則之一，在由兩位重要的迪斯尼動(dòng)畫(huà)師奧利·約翰斯頓（Ollie Johnston）和弗蘭克·托馬斯（Frank Thomas）所著的《幻像人生：迪斯尼動(dòng)畫(huà)》（the Illusion Life：Disney animation）一書(shū)中有詳細(xì)的描述。

為了使動(dòng)畫(huà)看起來(lái)不像機(jī)械和人工的，物體應(yīng)該像物理世界中的物體一樣，以一定的加速度或減速運(yùn)動(dòng)。

線性運(yùn)動(dòng)

不受任何物理力影響的物體呈線性運(yùn)動(dòng)，換句話說(shuō)，速度不變。正因?yàn)槿绱?，它們看起?lái)非常不自然和人為的人眼。

所有的動(dòng)畫(huà)應(yīng)用程序都使用動(dòng)畫(huà)曲線，該曲線顯示了同一時(shí)間間隔（x軸）內(nèi)物體（y軸）的位置如何變化。在當(dāng)前情況下，移動(dòng)是線性的。物體在同一時(shí)間內(nèi)走相同的距離。

線性運(yùn)動(dòng)確實(shí)有它的用途，例如，當(dāng)對(duì)象更改顏色或透明度時(shí)，可以使用它。但是，一般來(lái)說(shuō)，當(dāng)對(duì)象不改變位置時(shí)，將其用于狀態(tài)。

易于加速或加速曲線

在這條曲線上，物體的位置開(kāi)始變化緩慢，速度逐漸增加。這意味著物體以一定的加速度運(yùn)動(dòng)。

當(dāng)物體以全速飛離屏幕時(shí)，應(yīng)使用此曲線。這些可能是接口中的系統(tǒng)通知或卡片。請(qǐng)記住，只有當(dāng)對(duì)象永遠(yuǎn)離開(kāi)屏幕并且不能被收回或返回時(shí)，才應(yīng)該使用此方法。

動(dòng)畫(huà)曲線有助于表達(dá)正確的情緒，在下面的例子中，我們可以看到所有對(duì)象的運(yùn)動(dòng)持續(xù)時(shí)間和距離都是一樣的，但是即使是曲線上很小的變化也會(huì)影響動(dòng)畫(huà)的情緒。

緩和或減速曲線

這是易進(jìn)曲線的倒數(shù)，物體迅速地跑過(guò)一段很長(zhǎng)的距離，然后慢慢地減速，直到最后停下來(lái)。

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

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

這條曲線使物體在開(kāi)始時(shí)獲得速度，然后慢慢下降到零。這個(gè)動(dòng)作在界面動(dòng)畫(huà)中最常用。當(dāng)你懷疑在動(dòng)畫(huà)中使用哪種類(lèi)型的運(yùn)動(dòng)時(shí)，使用標(biāo)準(zhǔn)曲線。

根據(jù)材料設(shè)計(jì)準(zhǔn)則，非對(duì)稱(chēng)曲線是最好的，因?yàn)檫\(yùn)動(dòng)看起來(lái)更自然和現(xiàn)實(shí)。曲線的終點(diǎn)必須比起點(diǎn)更強(qiáng)調(diào)，這樣加速度的持續(xù)時(shí)間就比減速的持續(xù)時(shí)間短。在這種情況下，用戶(hù)將更多地關(guān)注元素的最終移動(dòng)，從而關(guān)注它的新?tīng)顟B(tài)。

當(dāng)對(duì)象從屏幕的一個(gè)部分移動(dòng)到另一個(gè)部分時(shí)，使用Ease-in-out。在這種情況下，動(dòng)畫(huà)避免了引人注目和戲劇性的效果。

當(dāng)元素從屏幕上消失，但用戶(hù)可以隨時(shí)將其返回到之前的位置時(shí)，應(yīng)該使用相同的移動(dòng)類(lèi)型。例如，一個(gè)導(dǎo)航抽屜。

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

函數(shù)cubic-bezier（）用于描述動(dòng)畫(huà)曲線。它叫三次是因?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。

為了簡(jiǎn)化曲線處理，可以使用easings.net和-bezier.com網(wǎng)站。第一個(gè)包含最常用曲線的列表，您可以將這些曲線的參數(shù)復(fù)制到原型工具中。第二種方法允許用戶(hù)使用曲線的參數(shù)，并立即查看對(duì)象將如何移動(dòng)。

總結(jié)

界面中的動(dòng)畫(huà)應(yīng)該反映我們從物理世界中了解到的運(yùn)動(dòng)——摩擦、加速度等等。模仿現(xiàn)實(shí)世界中對(duì)象的行為可以創(chuàng)建一個(gè)序列，允許用戶(hù)理解從接口期望什么。

如果動(dòng)畫(huà)構(gòu)建正確，它就不會(huì)引人注目，也不會(huì)分散用戶(hù)對(duì)目標(biāo)的注意力。這意味著動(dòng)畫(huà)不應(yīng)該減慢用戶(hù)的速度或阻止他們執(zhí)行任務(wù)。如果是這樣，動(dòng)畫(huà)需要軟化，甚至刪除。

永遠(yuǎn)記住，動(dòng)畫(huà)與其說(shuō)是一門(mén)科學(xué)，不如說(shuō)是一門(mén)藝術(shù)，所以最好是對(duì)用戶(hù)進(jìn)行試驗(yàn)和測(cè)試。