編輯導(dǎo)讀：在產(chǎn)品同質(zhì)化越發(fā)嚴(yán)重的今天，如何體現(xiàn)自己的差異化呢？不少人認(rèn)為動(dòng)效是一個(gè)很好的突破口，不僅能夠增加用戶操作的舒適度，還能引導(dǎo)用戶關(guān)注重要的信息。那么，渡河才能做好動(dòng)效設(shè)計(jì)呢？本文作者對(duì)此發(fā)表了自己的看法，與你分享。

隨著科技的進(jìn)步，用戶對(duì)于產(chǎn)品細(xì)節(jié)的感知度和挑剔程度日益俱增，而如今產(chǎn)品的同質(zhì)化愈發(fā)嚴(yán)重，此時(shí)，如何能夠讓產(chǎn)品存在差異化并脫穎而出成了當(dāng)下至關(guān)重要的話題。而動(dòng)效設(shè)計(jì)作為近些年來十分火熱的設(shè)計(jì)趨勢(shì)之一被眾多產(chǎn)品所青睞。

動(dòng)效從最初的不被認(rèn)可到如今的必不可少，經(jīng)歷了諸多的討論和驗(yàn)證。動(dòng)效設(shè)計(jì)不僅能夠增加用戶操作的舒適度，還能引導(dǎo)用戶關(guān)注重要的信息，而這些都只是動(dòng)效諸多作用當(dāng)中的一小部分，一個(gè)優(yōu)秀的動(dòng)效設(shè)計(jì)能夠賦能產(chǎn)品價(jià)值，帶給用戶更高質(zhì)量的用戶體驗(yàn)。

那么如何才能做好動(dòng)效設(shè)計(jì)？如何選擇動(dòng)效的落地方案？

以下是全文的大綱：

• 動(dòng)效設(shè)計(jì)的意義與價(jià)值
• 動(dòng)效的作用
• 交互動(dòng)效的設(shè)計(jì)原則
• 產(chǎn)品中的動(dòng)效分類
• 動(dòng)效時(shí)長(zhǎng)
• 動(dòng)效落地的N種解決方案

一、動(dòng)效設(shè)計(jì)的意義與價(jià)值

動(dòng)效設(shè)計(jì)（Motion design）是通過動(dòng)態(tài)手段，提升產(chǎn)品用戶體驗(yàn)的過程。好的動(dòng)效設(shè)計(jì)能夠清晰的表達(dá)產(chǎn)品層級(jí)之間的關(guān)系、提升易用性與可用性、減少用戶的認(rèn)知成本，也能夠彰顯產(chǎn)品品牌特性與差異化。在有些時(shí)候，動(dòng)效很容易被想象成某種為了增加愉悅性質(zhì)的內(nèi)容，其本身并不具備什么價(jià)值，因此常常被當(dāng)做可有可無的部分。

而實(shí)際上，動(dòng)效則是一種更為高級(jí)的設(shè)計(jì)展現(xiàn)形式，通過模擬真實(shí)世界的運(yùn)動(dòng)，建立起手機(jī)這個(gè)虛擬世界與用戶之間的認(rèn)知關(guān)聯(lián)，從而創(chuàng)造出符合用戶認(rèn)知習(xí)慣的操作體驗(yàn)，與此同時(shí)，不同品牌之間獨(dú)有的品牌特性也大不相同，對(duì)應(yīng)表現(xiàn)的行為與動(dòng)作也有所不同，所以，動(dòng)效設(shè)計(jì)在品牌特性的影響下，差異化也會(huì)非常明顯，這為塑造產(chǎn)品特色和品質(zhì)感奠定了重要的基礎(chǔ)。

二、動(dòng)效的作用

動(dòng)效設(shè)計(jì)在產(chǎn)品中可以起到緩解用戶因?yàn)榈却a(chǎn)生的負(fù)面情緒，吸引用戶眼球以達(dá)到提升對(duì)某個(gè)功能或者活動(dòng)的轉(zhuǎn)化效果。對(duì)于初次使用某個(gè)產(chǎn)品的新用戶來說，可以更快速的告訴用戶如何完成復(fù)雜功能的操作等等。

2.1 緩解負(fù)面情緒

在頁(yè)面加載過程中，長(zhǎng)時(shí)間的等待，會(huì)讓用戶感到焦慮和煩躁，例如：系統(tǒng)的報(bào)錯(cuò)提醒和空狀態(tài)呆板的文字展示等，都會(huì)讓用戶感到一種莫名的挫敗感和無趣。這時(shí)加入趣味的動(dòng)效設(shè)計(jì)就可以在一定程度上緩解用戶焦慮煩躁的情緒，并且還能夠提示用戶對(duì)產(chǎn)品的好感。

作者：Zhenya Karapetyan

2.2 吸睛

在產(chǎn)品設(shè)計(jì)當(dāng)中，動(dòng)效設(shè)計(jì)能夠讓功能入口或者按鈕最大程度吸引用戶注意力。但如果整個(gè)頁(yè)面存在大量的動(dòng)態(tài)元素時(shí)，也會(huì)造成用戶的視覺混亂，影響用戶獲取信息的速度造成不好的體驗(yàn)，所以動(dòng)效設(shè)計(jì)一定要適度。

2.3 降低認(rèn)知成本

好的動(dòng)效設(shè)計(jì)能夠輔助用戶理解產(chǎn)品信息，并且可以利用動(dòng)效與動(dòng)畫的敘事屬性共同點(diǎn)，解決靜態(tài)圖片和文字無法敘述清晰的事情。同時(shí)，動(dòng)效與互動(dòng)相結(jié)合，能夠給用戶更強(qiáng)烈的代入感，讓用戶愿意花費(fèi)精力去理解信息。相比枯燥的文字和無趣的圖片，動(dòng)效的融入能更好的降低用戶的認(rèn)知成本。

2.4 高效引導(dǎo)

引導(dǎo)用戶完成復(fù)雜且必要的操作步驟。在游戲化設(shè)計(jì)當(dāng)中“流程體驗(yàn)式引導(dǎo)”尤為強(qiáng)調(diào)，例如：游戲中的新手訓(xùn)練，會(huì)有語音以及閃爍的光標(biāo)等作為傻瓜式的引導(dǎo)，只有當(dāng)你按照提示完成指定的步驟，才能夠繼續(xù)往下進(jìn)行。還有獎(jiǎng)勵(lì)的領(lǐng)取，也是只有領(lǐng)取后，提示才會(huì)消失。

2.5 用戶行為轉(zhuǎn)化

良好的用戶體驗(yàn)促進(jìn)用戶跑通了產(chǎn)品，并建立起用戶對(duì)產(chǎn)品的基本認(rèn)識(shí)。同時(shí)，也完成了對(duì)新用戶到老用戶的轉(zhuǎn)變。此時(shí)產(chǎn)品需要使用更多的手段，去引導(dǎo)用戶完成對(duì)產(chǎn)品更深層次的探索。此時(shí)動(dòng)效的目的就是制造誘惑點(diǎn)，讓用戶產(chǎn)生主動(dòng)探索產(chǎn)品的欲望，從而完成用戶轉(zhuǎn)化。

2.6 交互串聯(lián)

動(dòng)效可以將不同級(jí)別的頁(yè)面相互關(guān)聯(lián)，避免用戶在頻繁的頁(yè)面切換中迷失，也能夠讓用戶快速理解頁(yè)面之間的層級(jí)關(guān)系和跳轉(zhuǎn)邏輯。

三、交互動(dòng)效的設(shè)計(jì)原則

說到動(dòng)效的設(shè)計(jì)原則，大家可能首先想到的都是《迪士尼動(dòng)畫十二原則》，但它并不完全適用于交互動(dòng)效的設(shè)計(jì)。既然《迪士尼動(dòng)畫十二原則》不適用于UI領(lǐng)域，那交互動(dòng)效應(yīng)該遵循怎樣的設(shè)計(jì)原則呢？下面就給大家介紹一下交互動(dòng)效的十二個(gè)設(shè)計(jì)原則

3.1 緩動(dòng)

當(dāng)用戶觸發(fā)某個(gè)元素致使產(chǎn)生交互事件時(shí)，對(duì)象元素的行為需要與用戶期望相一致。

在動(dòng)效設(shè)計(jì)中，無論什么樣的運(yùn)動(dòng)都需要緩動(dòng)。緩動(dòng)能夠讓運(yùn)動(dòng)效果變得更加自然流暢，并且能夠使動(dòng)效有更強(qiáng)的連續(xù)性，更能滿足用戶的期望。

圖A當(dāng)中的運(yùn)動(dòng)可以理解為勻速運(yùn)動(dòng)（線性運(yùn)動(dòng)），而這種運(yùn)動(dòng)是非常機(jī)械和生硬的。而圖B當(dāng)中的運(yùn)動(dòng)增加了適度的彈性效果，這樣就使整體的運(yùn)動(dòng)看起來更加和諧。

在交互動(dòng)效的設(shè)計(jì)中，要避免使用線性運(yùn)動(dòng)，因?yàn)榫€性運(yùn)動(dòng)會(huì)讓交互效果過于生硬和明顯，并且更容易分散用戶的注意力。而緩動(dòng)則能夠讓交互動(dòng)效與用戶的行為接近無縫銜接自然的過渡。但是要注意對(duì)時(shí)間的把控，時(shí)間太慢或太快，都會(huì)打破用戶預(yù)期造成注意力的分散，同樣如果緩動(dòng)效果與產(chǎn)品整體的體驗(yàn)不一致，也會(huì)產(chǎn)生負(fù)面影響。也就是說，緩動(dòng)在不同的場(chǎng)景下會(huì)產(chǎn)生不同的視覺效果，給用戶帶來不同的體驗(yàn)。

3.2 偏移和延遲

定義對(duì)象元素之間的關(guān)系和層次結(jié)構(gòu)，多用于元素的入場(chǎng)離場(chǎng)或場(chǎng)景切換。

這個(gè)原則能夠通過自然的方式讓用戶感知接下來將要發(fā)生的事情和界面元素之間的關(guān)系，上圖中的例子可以告訴用戶他們之間的層次關(guān)系，即：上面兩條與下面的一條是分開的。上面可能是文本信息，也可能是單純圖片或者圖文結(jié)構(gòu)的內(nèi)容，而下面則可能是一個(gè)按鈕。

他能夠在用戶使用之前，告訴用戶對(duì)象元素之間的層級(jí)關(guān)系，可以理解為降低了用戶的學(xué)習(xí)成本，提升了產(chǎn)品的用戶體驗(yàn)。

3.3 父子級(jí)關(guān)系

父子級(jí)關(guān)系是將界面中相關(guān)聯(lián)的元素連接起來，以增強(qiáng)可用性的一種原則。

圖中，頂部元素的尺寸和位置都會(huì)隨著底部元素運(yùn)動(dòng)而產(chǎn)生變化。父子級(jí)關(guān)系就是將界面中的不同元素屬性建立關(guān)聯(lián)性，產(chǎn)生彼此之間的關(guān)聯(lián)和繼承關(guān)系。界面中的很多屬性都可以相互關(guān)聯(lián)，例如：位置、旋轉(zhuǎn)、透明度、縮放、形狀和顏色等等。

作者：IVYJHZH

3.4 形變

當(dāng)界面中的某一個(gè)元素狀態(tài)發(fā)生改變時(shí)，要?jiǎng)?chuàng)建一個(gè)連續(xù)的過渡效果來表示狀態(tài)的變化。

形變是很容易被用戶捕捉并識(shí)別到的一種效果。如下圖所示，用戶可以輕松的注意到“訂閱”按鈕形態(tài)變化的全過程。這種形態(tài)變換非常容易吸引用戶的注意力，而且能夠有效的傳遞整個(gè)事件的完整信息。

作者：Peter Arumugam

這種變換是將3種不同的狀態(tài)無縫銜接在一起，將原本分散的狀態(tài)完美的融合，達(dá)到超預(yù)期的目的。也就是說，變換原則能夠把不同時(shí)刻的信息狀態(tài)無縫銜接，來完成一個(gè)完整的事件流程的傳遞，這樣連貫性的效果更容易被用戶所接受。

3.5 變焦

使用變換焦距的形式，建立起界面元素與空間過渡之間的橋梁。

焦距這個(gè)概念在攝像領(lǐng)域更為常見，影像的大小以及遠(yuǎn)近是由相機(jī)和物體的相對(duì)距離來決定的。有時(shí)候，我們是無法判斷元素變化趨勢(shì)的。

例如下圖中的效果就可以分為三種情況：

交互動(dòng)效原則中的變焦是指在相機(jī)與元素都不做空間移動(dòng)的前提下，元素本身或視角進(jìn)行縮放，而產(chǎn)生的一種空間變化效果。這一原則在蘋果設(shè)備中最為常見。

3.6 空間維度

通過在空間中變化的方式來表現(xiàn)元素的入場(chǎng)與離場(chǎng)。

空間緯度能夠有效的改善平面化的體驗(yàn)，具有空間感的入場(chǎng)和離場(chǎng)能夠增強(qiáng)用戶的心理預(yù)期。此外，空間維度還能夠改善平面視覺中無法分層的情況，能夠讓處于同一平面的元素產(chǎn)生折疊的效果?？臻g維度的呈現(xiàn)方式大致可以分為三種：折疊翻轉(zhuǎn)、浮動(dòng)翻轉(zhuǎn)、整體翻轉(zhuǎn)。折疊翻轉(zhuǎn)：可以理解成元素在三維空間中的折疊或旋轉(zhuǎn)效果

浮動(dòng)翻轉(zhuǎn)：讓界面中的元素在入場(chǎng)和離場(chǎng)時(shí)更具空間感和神秘感。

整體翻轉(zhuǎn)：讓界面中的元素更具真實(shí)感和深度。

3.7 視差

當(dāng)用戶滑動(dòng)界面時(shí)，視差能夠在二維空間中創(chuàng)造出層次感。

視差，是指不同的對(duì)象元素以不同的速度進(jìn)行運(yùn)動(dòng)。在保持原有設(shè)計(jì)完整性的前提下，讓用戶聚焦于主要操作的內(nèi)容上，并且弱化用戶對(duì)背景元素的感知。

這種視差的效果讓用戶在操作期間，能夠明確區(qū)分出各個(gè)元素之間的層級(jí)關(guān)系。相比移動(dòng)慢的元素，移動(dòng)更快的元素會(huì)讓用戶感覺更近，而移動(dòng)慢的元素用戶則感覺更遠(yuǎn)。

3.8 克隆

當(dāng)新元素從主體元素中分離出來時(shí)，可以清晰的闡述兩者之間的內(nèi)在聯(lián)系。

當(dāng)新的對(duì)象元素被創(chuàng)造出來時(shí)，對(duì)這個(gè)對(duì)象元素的形態(tài)描述是十分重要的。像單純的透明度或者顏色屬性的變化往往是不夠的，還需要融入一些儀式感。

作者：Mariusz Onichowski

在上述案例中，當(dāng)用戶把注意力全部集中在主體元素上時(shí)，新的元素從主體元素上出現(xiàn)，此時(shí)用戶會(huì)自然的將注意力轉(zhuǎn)向新元素。

3.9 遮蓋

當(dāng)分層對(duì)象元素堆疊在一起時(shí)，可以用相對(duì)位置的變化來描述他們之間的空間關(guān)系。

遮蓋通過堆疊的形式來彌補(bǔ)扁平空間缺乏層次感的問題，通俗的講就是在一個(gè)二維空間里，通過排列元素之間的上下關(guān)系來傳遞它們的相對(duì)位置變化。

作者：Daniel Tan

對(duì)于設(shè)計(jì)師來說，“層”的概念是非常清楚的，而對(duì)于用戶來說，“層”的概念就會(huì)有些含糊不清了。遮蓋原則就是通過層級(jí)之間的Z軸位置關(guān)系，向用戶傳達(dá)對(duì)象元素之間的空間關(guān)系。

3.10 蒙層

允許用戶看到非當(dāng)前主視覺的對(duì)象或場(chǎng)景，營(yíng)造出空間感。

蒙層原則，可以把它想像成兩種狀態(tài)之間的過渡。把他想像成是一個(gè)變化的過程，而非靜止的狀態(tài)。靜態(tài)設(shè)計(jì)只能表現(xiàn)出元素變朦朧的狀態(tài)，而加上時(shí)間的變化就成了對(duì)象元素變朦朧的行為。當(dāng)行為發(fā)生時(shí)，非主視覺元素變模糊，達(dá)到突出主視覺的效果。

從上述案例中可以看出，蒙層原則是次要元素被模糊化或被半透明圖層遮蓋的一種即時(shí)交互。蒙層原則經(jīng)常利用模糊和疊加透明度的手法，讓用戶感受主次元素在空間上的層次關(guān)系。

3.11 遮罩

當(dāng)界面中的某個(gè)元素以不同的展示形式同時(shí)存在于相關(guān)聯(lián)的不同頁(yè)面時(shí)，該原則能夠讓對(duì)象元素的展示變化過程具有連續(xù)性。

遮罩原則可以理解為對(duì)象元素形狀與功能之間的關(guān)系。在交互動(dòng)效原則中遮罩是隨著時(shí)間發(fā)生變化的，而我們平時(shí)在做界面設(shè)計(jì)時(shí)所用到的遮罩是靜止的，他和交互動(dòng)效原則中的遮罩是有所區(qū)別的。遮罩原則的這種無縫銜接顯示或隱藏元素區(qū)域的方式，能夠創(chuàng)造出連續(xù)性的過度效果。

在上述案例中，頂部圖片通過形狀和位置的變化轉(zhuǎn)換成為新頁(yè)面中的唱片。在不改變?cè)貎?nèi)容的情況下，通過遮罩來改變?cè)乇旧?，在?chuàng)造連續(xù)性的同時(shí)也降低了用戶的認(rèn)知成本。動(dòng)效是基于時(shí)間而產(chǎn)生的，并通過連續(xù)性、敘述性、關(guān)聯(lián)性和可預(yù)期來提高可用性。在這個(gè)案例中，盡管對(duì)象元素前后的的內(nèi)容沒有變化，但是位置和形狀的變化，足夠讓用戶辨別出他是什么。

3.12 數(shù)據(jù)變化

如果對(duì)象元素的值在發(fā)生變化時(shí)，使用動(dòng)態(tài)連續(xù)變換的方式可以獲得更好的用戶體驗(yàn)。

雖然在界面當(dāng)中文本和數(shù)字元素本身可以改變，但似乎他們的改變并沒有那么顯而易見，因此也不會(huì)被用戶輕易的察覺到，如果我們?yōu)閿?shù)字和文本元素添加動(dòng)態(tài)的變化則能夠讓用戶輕而易舉的察覺。

總結(jié)：數(shù)據(jù)的變化能夠向用戶表達(dá)數(shù)字背后的含義、建立起與用戶溝通的橋梁以及數(shù)據(jù)變化的動(dòng)態(tài)屬性。

如果在界面加載動(dòng)效當(dāng)中，數(shù)字或者文本沒有發(fā)生任何變化，用戶肯定會(huì)認(rèn)為當(dāng)前頁(yè)面是靜止的，如圖A當(dāng)中的效果，這樣也就違背了用戶體驗(yàn)設(shè)計(jì)原則當(dāng)中的“系統(tǒng)可見性原則”，用戶不知道發(fā)生了什么。如果使用動(dòng)態(tài)的形式呈現(xiàn)數(shù)字或者文本發(fā)生的變化，則能夠讓用戶直觀的感受到這些信息的變化過程，同時(shí)也建立起了數(shù)據(jù)與用戶之間溝通的橋梁。例如：健身數(shù)據(jù)、股票數(shù)據(jù)等都是動(dòng)態(tài)變化的數(shù)據(jù)

未完待續(xù)……

作者：Coldrain1，公眾號(hào)「CD動(dòng)效研究院」

本文由 @Coldrain1 發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議