前言

給大家分享這篇文章正文內(nèi)容前，我想給大家提一個(gè)問，當(dāng)你處理以下動(dòng)效事件時(shí)，你認(rèn)為哪一種是正確動(dòng)效設(shè)計(jì)。

這是一個(gè)元素進(jìn)入畫面中心的動(dòng)效，我們都知道物理世界中不存在絕對(duì)的勻速運(yùn)動(dòng)，所以我們做動(dòng)效的時(shí)候?yàn)榱丝雌饋砀幼匀唬覀儠?huì)給動(dòng)效加上一個(gè)緩動(dòng)。不過我們?cè)谟肞rinciple等動(dòng)效軟件制作的時(shí)候，面對(duì)軟件提供各種緩動(dòng)的運(yùn)動(dòng)曲線，你是否隨便選一個(gè)感覺“對(duì)”的曲線使用？

上面給大家提的問題，我采訪我周圍的同事和一些設(shè)計(jì)朋友，大多數(shù)給的回答是緩動(dòng)B是正確的，原因大都是緩動(dòng)B感覺舒服一些。

答案確實(shí)是B，不過大多數(shù)設(shè)計(jì)師都回答不出具體的原因，大家都是靠“感覺”做出的判斷。今天給大家的分享，是想帶一起了解動(dòng)效設(shè)計(jì)的底層原則和規(guī)律，不再只靠“感覺”做設(shè)計(jì)判斷。

你是否一直憑“感覺”去做動(dòng)效？

我在開始學(xué)習(xí)動(dòng)效設(shè)計(jì)的很長一段時(shí)間里，也是靠著“感覺”來做動(dòng)效的，我不覺得靠感覺做動(dòng)效是錯(cuò)的，甚至有的設(shè)計(jì)師認(rèn)為感覺才是做動(dòng)效的基礎(chǔ)（就像學(xué)音樂需要樂感）。不過一直靠感覺做動(dòng)效，呈現(xiàn)作品的準(zhǔn)確性主要依靠設(shè)計(jì)師的閱歷和經(jīng)驗(yàn)，他并不可靠譜。所以我們需要去理解動(dòng)效設(shè)計(jì)的底層原則和規(guī)律，讓我們的”感覺“準(zhǔn)確呈現(xiàn)出來。

動(dòng)效設(shè)計(jì)中有很多知識(shí)原理和常用技巧，不過經(jīng)過整理梳理后，就會(huì)變得很容易理解記憶。所謂：縱使風(fēng)云變幻，終究不離其宗。 只要我們對(duì)底層邏輯掌握，表層再怎么變化都脫離不了底層邏輯。 我們要讓動(dòng)效設(shè)計(jì)呈現(xiàn)準(zhǔn)確、自然、“感覺”對(duì)。我們就需要對(duì)動(dòng)效的四大要素有深入認(rèn)識(shí)：緩動(dòng)、時(shí)間、編排、運(yùn)動(dòng)理念

我們先通過案例和大家一起看這四個(gè)方面要素如何如何影響我們動(dòng)效“感覺”的傳達(dá)，然后再詳聊它們?cè)趧?dòng)效設(shè)計(jì)過程中的要點(diǎn)

緩動(dòng)

緩動(dòng)可調(diào)整動(dòng)畫的變化率，從而允許元素加速和減速，而不是以恒定的速度移動(dòng)。

現(xiàn)實(shí)中，物體在移動(dòng)時(shí)往往會(huì)加速或減速。我們的大腦習(xí)慣于這種運(yùn)動(dòng)，有速度變化的運(yùn)動(dòng)才符合物理世界客觀現(xiàn)實(shí)，在做動(dòng)畫時(shí)，應(yīng)利用此規(guī)律。

在其他因素相同的情況下，不同緩動(dòng)曲線，會(huì)呈現(xiàn)出不同的運(yùn)動(dòng)感受。上面藍(lán)色矩形呈現(xiàn)的感受是厚重有力量，黃色矩形則是輕盈的感覺。

時(shí)間

時(shí)間就是元素運(yùn)動(dòng)所消耗的時(shí)長

相同的運(yùn)動(dòng)距離，通過控制元素運(yùn)動(dòng)的時(shí)間長短，傳達(dá)不一樣的感受。上圖藍(lán)色和黃色矩形，運(yùn)動(dòng)的距離相同，消耗200ms的藍(lán)色矩形呈現(xiàn)出明快高效的感受，而效果500ms的黃色矩形則呈現(xiàn)出自然連貫的感受。

編排

編排就是過度，我們對(duì)動(dòng)畫效果進(jìn)行編排，也就是對(duì)動(dòng)效的過度效果進(jìn)行設(shè)計(jì)。讓元素從一個(gè)狀態(tài)切換到下一個(gè)狀態(tài)，自然過渡，讓用戶的注意力自然地被引導(dǎo)過去

同樣是從狀態(tài)A過度到狀態(tài)B，左邊的編排方式呈現(xiàn)連貫、流暢的感覺，右邊則是分散雜亂的。

運(yùn)動(dòng)理念

設(shè)計(jì)師結(jié)合品牌調(diào)性和物理世界的運(yùn)動(dòng)規(guī)律，賦予動(dòng)畫運(yùn)動(dòng)規(guī)則，不同的運(yùn)動(dòng)理念，動(dòng)畫的呈現(xiàn)出的感覺會(huì)大不一樣

同樣文字出現(xiàn)的動(dòng)畫，左邊呈現(xiàn)出濺撒有活力的感覺，右邊則是生長流暢的感覺

“感覺”的組成

緩動(dòng)、時(shí)間、編排、運(yùn)動(dòng)理念的細(xì)微差別，都會(huì)給我們呈現(xiàn)不同的動(dòng)畫感受。

我們做的動(dòng)效設(shè)計(jì)時(shí)，只要這四大要素處理到位，動(dòng)效的感覺就對(duì)了。緩動(dòng)、時(shí)間、編排、運(yùn)動(dòng)理念就是我們需要掌握的動(dòng)效設(shè)計(jì)的內(nèi)核，接下來，我會(huì)更細(xì)致的跟大家介紹它們的知識(shí)點(diǎn)，讓大家對(duì)他們有更深刻的理解。

緩動(dòng)——勻速運(yùn)動(dòng)和非勻速運(yùn)動(dòng)

我們對(duì)動(dòng)效進(jìn)行動(dòng)效進(jìn)行緩動(dòng)處理，讓它在某一個(gè)時(shí)間點(diǎn)加速或者減速，使動(dòng)效更符合物理世界客觀現(xiàn)實(shí)。不過在一些界面動(dòng)效中，一些運(yùn)動(dòng)是與物理屬性無關(guān)的，那對(duì)于這類的運(yùn)動(dòng)，是需要使用勻速的運(yùn)動(dòng)曲線。所以對(duì)于動(dòng)效設(shè)計(jì)的緩動(dòng)調(diào)節(jié)，要分為勻速運(yùn)動(dòng)和非勻速運(yùn)動(dòng)兩個(gè)方面來認(rèn)識(shí)。

勻速運(yùn)動(dòng)

勻速變化具有線性、驟停這兩個(gè)特征，一般適用于與物理屬性無關(guān)的過渡動(dòng)效，如透明度屬性的變化，顏色間的切換，或有規(guī)律的加載動(dòng)效，如均勻的循環(huán)，在與物理參數(shù)有關(guān)的變化中，如位置變化，盡量避免使用勻速變化，否則很容易給人帶來動(dòng)效僵硬、不自然的感覺。

非勻速運(yùn)動(dòng)

非勻速運(yùn)動(dòng)的應(yīng)用范圍最廣，用于與物理屬性相關(guān)的屬性變化中，如位移、旋轉(zhuǎn)、縮放等。 非勻速運(yùn)動(dòng)的緩動(dòng)曲線可以分為：標(biāo)準(zhǔn)緩動(dòng)曲線（標(biāo)準(zhǔn)運(yùn)動(dòng)），緩入曲線（加速運(yùn)動(dòng)），緩出曲線（減速運(yùn)動(dòng)），彈性曲線（其他運(yùn)動(dòng)）

界面中的運(yùn)動(dòng)規(guī)律，是我們物理世界認(rèn)知的延續(xù)。對(duì)于界面中不同運(yùn)動(dòng)的方式，他們分別對(duì)應(yīng)著確定的緩動(dòng)曲線。以下是每個(gè)動(dòng)效設(shè)計(jì)師需要理解熟知的規(guī)律：

1. 單物體可視范圍內(nèi)點(diǎn)到點(diǎn)之間的運(yùn)動(dòng)——需要用標(biāo)準(zhǔn)緩動(dòng)曲線（標(biāo)準(zhǔn)運(yùn)動(dòng)）

2. 單物體可視范圍外出場(chǎng)的運(yùn)動(dòng)——需要用緩入曲線（加速運(yùn)動(dòng)）

3. 單物體可視范圍外進(jìn)場(chǎng)的運(yùn)動(dòng)——需要用緩出曲線（減速運(yùn)動(dòng)）

4. 表現(xiàn)力與反作用力的運(yùn)動(dòng)——需要彈性曲線

如何理解輔助記憶運(yùn)動(dòng)規(guī)律

標(biāo)準(zhǔn)緩動(dòng)曲線、緩入曲線、緩出曲線、彈性曲線他們都是固定規(guī)律，我們?nèi)绾卫斫獠⒂涀。ＷC在動(dòng)效設(shè)計(jì)中不出錯(cuò)。

緩出曲線

這是黃色矩形元素進(jìn)入界面中心的動(dòng)畫，這是一個(gè)單物體可視范圍外進(jìn)場(chǎng)的運(yùn)動(dòng)，按照前面給大家總結(jié)過得規(guī)律，它就應(yīng)該是緩出曲線（減速運(yùn)動(dòng)）。為什么單物體可視范圍外進(jìn)場(chǎng)的運(yùn)動(dòng)就得是減速運(yùn)動(dòng)呢？如果理解?

我們前面多次提過，界面中的運(yùn)動(dòng)規(guī)律，是我們對(duì)物理世界認(rèn)知的延續(xù)。我們想象一個(gè)汽車從視線范圍外開到一個(gè)人面前速度變化是怎樣的，一個(gè)司機(jī)需要讓這樣汽車停下，那速度肯定是40km/h > 20km/h > 0km/h 這樣速度順序，這是一個(gè)減速過程。 上面圖示中，上面的汽車越來越慢停下下，下面的汽車越來越快停下來，顯然是上面的上面的速度變化規(guī)律更符合我們的認(rèn)知邏輯。 所以單物體可視范圍外進(jìn)場(chǎng)的運(yùn)動(dòng)——需要用緩出曲線（減速運(yùn)動(dòng)）

緩入曲線

單物體可視范圍外出場(chǎng)的運(yùn)動(dòng)，就會(huì)是一個(gè)加速運(yùn)動(dòng)。我們映射現(xiàn)實(shí)中的汽車來理解，當(dāng)一輛汽車從視線范圍內(nèi)開出，那汽車的的速度的變化是0km/h > 20km/h > 40km/h...，汽車需要從0啟動(dòng)再越來越快駛離視線之外。上面圖示中，上面的汽車越來越快駛離視線，下面汽車一開始就具備很快的速度，這不符合物理世界的邏輯，汽車要啟動(dòng)，速度肯定是小到大的。所以單物體可視范圍外出場(chǎng)的運(yùn)動(dòng)——需要用緩入曲線（加速運(yùn)動(dòng)）

標(biāo)準(zhǔn)緩動(dòng)曲線

單物體可視范圍內(nèi)點(diǎn)到點(diǎn)之間的運(yùn)動(dòng)，就是我們最常見的標(biāo)準(zhǔn)運(yùn)動(dòng)，它先慢再快然后再慢。同時(shí)映射汽車的啟停，當(dāng)視線內(nèi)一輛汽車啟動(dòng)——行駛——停止，它的速度變化是0km/h > 20km/h > 0km/h，物體不會(huì)突然啟動(dòng)或停止，它需要加速和減速才符合我們認(rèn)知規(guī)律。所以單物體可視范圍內(nèi)點(diǎn)到點(diǎn)之間的運(yùn)動(dòng)——需要用標(biāo)準(zhǔn)緩動(dòng)曲線（標(biāo)準(zhǔn)運(yùn)動(dòng)

彈性曲線

彈性動(dòng)畫我們平時(shí)不太常用，設(shè)計(jì)師也需要克制對(duì)這種動(dòng)效曲線的使用，要充分考慮使用的場(chǎng)景是否適合。這里作為拓展了解為大家介紹。一般通過彈性運(yùn)動(dòng)可以表達(dá)產(chǎn)品的品牌調(diào)性，例如向用戶展示活潑、靈動(dòng)有活力的品牌調(diào)性等，強(qiáng)調(diào)某種信息或吸引用戶注意。在iOS中的彈性運(yùn)動(dòng)的應(yīng)用中，通過彈性反饋給予用戶用為的獎(jiǎng)勵(lì)反饋，用戶滑動(dòng)UI，點(diǎn)擊放大，通過回彈，顯得用戶操作有力度，讓體驗(yàn)過程更加真實(shí)自然，不過在iOS中這種回彈處理得微妙，完全不會(huì)干擾用戶注意力

時(shí)間——響應(yīng)時(shí)間和持續(xù)時(shí)間

影響我們動(dòng)效呈現(xiàn)感覺另一個(gè)重要因素——時(shí)間，時(shí)間我們從響應(yīng)時(shí)間和持續(xù)時(shí)間兩個(gè)方面來理解。

響應(yīng)時(shí)間是指從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時(shí)間；

持續(xù)時(shí)間是指從動(dòng)效開始到動(dòng)效結(jié)束的時(shí)長

響應(yīng)時(shí)間

用戶執(zhí)行操作到反饋出現(xiàn)的間隔時(shí)間，用戶對(duì)這個(gè)間隔時(shí)間耐心是有限度的，我們需要根據(jù)這個(gè)間隔的時(shí)長來判斷采取不同的動(dòng)效反饋。以下是摘自Jakob Nielsen 在《可用性工程》的研究成果，可供我們參考。

1. 1. 0.1秒是用戶瞬間感受的界限，這意味著不需要任何提示（feedback）可直接顯示結(jié)果。

2. 2. 1秒：即使用戶感覺到了延遲，但仍然感覺流暢并保持連續(xù)的操作，一般來講，延遲在0.1秒~1秒之間，是不需要特殊提示的，但不可超過2秒無反饋。

3. 3. 對(duì)于2~10秒的操作，如果使用百分比進(jìn)度條顯得有些大材小用，并且過快的顯示也會(huì)讓用戶有種閃爍的不好效果。這時(shí)可以僅使用一個(gè)“忙碌”的動(dòng)畫，并且在合適的位置配上一個(gè)變化的數(shù)字提示進(jìn)度，效果更好。

4. 4. 10秒是用戶專注于單一任務(wù)的極限。對(duì)于超過10s延遲，在計(jì)算機(jī)執(zhí)行的過程中應(yīng)當(dāng)給用戶提示，用戶將會(huì)進(jìn)行其它的操作，而不會(huì)等待計(jì)算機(jī)執(zhí)行完畢。

持續(xù)時(shí)間

動(dòng)效開始到動(dòng)效結(jié)束的時(shí)長不宜過長，以避免浪費(fèi)用戶時(shí)間，影響用戶的閱讀和操作效率，其持續(xù)時(shí)間一般不超過500毫秒

若你希望用戶能清晰地捕捉到元素的漸進(jìn)變化，持續(xù)時(shí)須大于200毫秒；若你不介意用戶認(rèn)為元素的改變是瞬間的，希望盡量節(jié)省用戶時(shí)間，持續(xù)時(shí)間也可設(shè)計(jì)在 200毫秒以內(nèi)（如hover到按鈕上顏色瞬間發(fā)生微妙改變）

具體的持續(xù)時(shí)間的取值，一方面會(huì)受到元素的大小、動(dòng)效的復(fù)雜程度影響；

· 小元素的輕微變化效果（如漸隱漸現(xiàn)、大小變化等小范圍變化），一般在 200~300毫秒以內(nèi)

· 較大元素的復(fù)雜變化效果（如包含大范圍緩動(dòng)位移），可長達(dá) 400-500毫秒

運(yùn)動(dòng)的元素越大，動(dòng)效越復(fù)雜，一般持續(xù)的時(shí)間越長，上圖為Material Design動(dòng)效持續(xù)時(shí)間演示，從左往右100ms > 250ms > 300ms遞增。

在IBM的動(dòng)效規(guī)范中，運(yùn)動(dòng)的持續(xù)時(shí)間是根據(jù)動(dòng)畫的大小而定；元素的距離（移動(dòng)）或大小（縮放）的變化越大，動(dòng)畫花費(fèi)的時(shí)間越長。同樣下拉選擇組件，高度144px耗費(fèi)時(shí)長105ms，高度336px耗費(fèi)124ms。

在https://ibm.github.io/motion/ 可以體驗(yàn)IBM的動(dòng)效規(guī)范，你可以選擇動(dòng)效的屬性（縮放、位移、旋轉(zhuǎn)等），確定要運(yùn)動(dòng)的距離，系統(tǒng)可以自動(dòng)算出動(dòng)效的持續(xù)時(shí)間，并提供demo演示。

出場(chǎng)動(dòng)效一般比入場(chǎng)動(dòng)效更快 ( 如當(dāng)入場(chǎng)動(dòng)效設(shè)置為230毫秒時(shí)，出場(chǎng)動(dòng)效可設(shè)置為200毫秒) 這是因?yàn)樵厝雸?chǎng)時(shí)用戶一般需要閱讀并處理新出現(xiàn)的信息，而元素出場(chǎng)時(shí)通常表明用戶在此元素上的任務(wù)已完成，不需要再關(guān)注了，快速出場(chǎng)能夠節(jié)省用戶更多時(shí)間。

編排——元素的自然過渡

簡單理解，編排就是過度，我們對(duì)動(dòng)畫效果進(jìn)行編排，也就是對(duì)動(dòng)效的過度效果進(jìn)行設(shè)計(jì)。讓元素從一個(gè)狀態(tài)切換到下一個(gè)狀態(tài)，自然過渡，讓用戶的注意力自然地被引導(dǎo)過去。接下來我們從路徑、連續(xù)性、引導(dǎo)、優(yōu)先級(jí)四個(gè)方面注意編排中的注意點(diǎn)。

路徑

根據(jù) Material Design 的規(guī)定，當(dāng)元素不成比例地變幻尺寸的時(shí)候，它應(yīng)該沿著弧線運(yùn)動(dòng)，而不是直線運(yùn)動(dòng)，這樣有助于讓它看起來更加自然。上圖左邊呈弧線路徑顯得更加自然，右邊直線路徑感覺破壞了整體，刺眼。

連續(xù)性

我們要注意運(yùn)動(dòng)過度的連續(xù)線性，動(dòng)效可以幫助在不同頁面之間建立連續(xù)感；注意不同頁面共享的元素，例如標(biāo)題面板或按鈕，以創(chuàng)建舒適的過渡。上圖左邊運(yùn)動(dòng)前后有銜接，能讓用戶感受到對(duì)象是連續(xù)的整體，右邊的沒有連續(xù)感，主次不清，注意力被分散 。

引導(dǎo)

當(dāng)需要為多個(gè)元素設(shè)置動(dòng)畫時(shí)，錯(cuò)開元素入場(chǎng)，這將幫助用戶理解內(nèi)容和方向。用戶的注意力應(yīng)該沿著一個(gè)流向來引導(dǎo)。例如上圖中，將表內(nèi)容的入口錯(cuò)開20 ms會(huì)減少認(rèn)知負(fù)荷并引導(dǎo)閱讀方向。不過要根據(jù)交錯(cuò)元素的數(shù)量，調(diào)整延遲以確保總時(shí)間仍在500 ms之內(nèi)

優(yōu)先級(jí)

我們對(duì)動(dòng)效進(jìn)行編排時(shí)，盡可能排序頁面內(nèi)容的加載。從最穩(wěn)定的內(nèi)容（例如靜態(tài)內(nèi)容和標(biāo)題）開始，到最重要的信息（例如主按鈕或計(jì)算結(jié)果）結(jié)束，以使用戶將注意力集中在這些內(nèi)容上。IBM的動(dòng)效規(guī)范中，對(duì)頁面中元素出現(xiàn)的順序做了嚴(yán)格的定義，靜待內(nèi)容＞靜態(tài)內(nèi)容（正文）＞動(dòng)態(tài)內(nèi)容＞主要?jiǎng)幼鳎緞?dòng)畫內(nèi)容

運(yùn)動(dòng)理念——賦予動(dòng)效運(yùn)動(dòng)規(guī)則

運(yùn)動(dòng)理念是賦予動(dòng)效的運(yùn)動(dòng)規(guī)則。設(shè)計(jì)師根據(jù)品牌調(diào)性，賦予動(dòng)效運(yùn)動(dòng)規(guī)則和邏輯，最終達(dá)到目標(biāo)呈現(xiàn)效果。不過需要注意的是設(shè)計(jì)師們?cè)谝眠\(yùn)動(dòng)理念前需要充分的考慮當(dāng)下頁面使用場(chǎng)景、產(chǎn)品品牌調(diào)性等因素。

結(jié)語：

縱使風(fēng)云變幻，終究不離其宗，只要我們對(duì)動(dòng)效的緩動(dòng)、時(shí)間、編排、運(yùn)動(dòng)理念有了深刻的認(rèn)識(shí)，我們?cè)谌魏螘r(shí)候都能做出對(duì)好的動(dòng)效作品。

界面中的運(yùn)動(dòng)中的規(guī)律，是我們對(duì)物理世界的認(rèn)知的延續(xù)，將固定設(shè)計(jì)規(guī)律和我們常見的生活場(chǎng)景結(jié)合起來理解將會(huì)事半功倍。

同時(shí)，我們也明白，動(dòng)效按照正確的方式來設(shè)計(jì)，它應(yīng)該是不顯著，且不會(huì)分散用戶注意力的，我們界面中的動(dòng)效設(shè)計(jì)，多是聚焦于幫助用戶理解當(dāng)前所處的狀態(tài)。

以上就是本期分享的內(nèi)容，我們下期再見~

轉(zhuǎn)載聲明：本文來源于網(wǎng)絡(luò)，不作任何商業(yè)用途