作為用戶體驗(yàn)領(lǐng)域不可或缺的一部分,，動效設(shè)計(jì)已經(jīng)隨處可見,，今天我們就一起系統(tǒng)的了解下相關(guān)內(nèi)容，讓它真正變成設(shè)計(jì)師手中解決問題的好幫手,。

前言

1970年左右,，用戶界面還只是一系列頭尾相連的 PDF，沒有任何的動效,。但是由于電腦畫面處理能力的限制,，動效使用的十分有限。而那時(shí)大部分動效也都是為了解決某個(gè)具體的交互問題而存在,，具有很強(qiáng)的目標(biāo)性,。到了2007年，改變?nèi)祟惖漠a(chǎn)品IPhone 問世了,，動效真正開始進(jìn)入了每個(gè)人的日常生活,。

在體驗(yàn)設(shè)計(jì)的領(lǐng)域里，動效設(shè)計(jì)是提升用戶體驗(yàn)的有效手段,，然而有些動效并沒有和界面的實(shí)際功能聯(lián)系起來,，因此造成用戶的認(rèn)知障礙。合理高效的使用動效成為了設(shè)計(jì)師需要思考的問題,。

動效并不陌生,，對于大部分用戶而言，人生中接觸的第一例動效來自于Disk Operating System,，也就是我們熟知的DOS系統(tǒng)（1981MS-DOS1.0問世）,。

在蘋果發(fā)布的Macintash中出現(xiàn)了動效設(shè)計(jì)，但由于技能問題，使用的場景十分有限,。而在游戲領(lǐng)域中,，無論是《坦克大戰(zhàn)》菜單頁中行走的的坦克光標(biāo)，或是《熱血格斗》菜單頁的動態(tài)背景,，動效無處不在,，伴隨科技的提升與用戶體驗(yàn)學(xué)科的不斷發(fā)展，我們的產(chǎn)品已經(jīng)離不開這種設(shè)計(jì)形式了,。

下面幫助大家梳理了動效設(shè)計(jì)的相關(guān)知識,，具體如下：

1.動效的優(yōu)勢

動效設(shè)計(jì)并不是可有可無的視覺修飾，也不是設(shè)計(jì)師炫技的手段,，而是解決問題,，提升體驗(yàn)的有效工具，其存在明確的目的性,，同時(shí),，相比靜態(tài)頁面動效設(shè)計(jì)有一下幾點(diǎn)明顯的優(yōu)勢：

（1）闡述：更好的告知界面發(fā)生的變化

當(dāng)界面中對象狀態(tài)需要發(fā)生變化時(shí)，可以用動效展示變化的過程,，讓用戶更清楚的感知,，闡述層級關(guān)系和界面變化。

（2）吸引：更有效的吸引用戶注意力,，營造視覺焦點(diǎn)

當(dāng)你想讓用戶關(guān)注某一個(gè)區(qū)域,，或執(zhí)行某一個(gè)操作時(shí)，可以通過動效吸引他們的注意力,，有效傳達(dá)信息,。

（3）及時(shí)反饋：讓用戶更有掌控感

當(dāng)用戶執(zhí)行了某一操作后，動效是一個(gè)非常好用的反饋機(jī)制,。通過動效的適當(dāng)運(yùn)用,，用戶可以清晰感知到自己操作的反饋，讓用戶知道自己做了什么,。但反饋動畫不可濫用,，會使用戶界面變得凌亂。

（4）提升：趣味性的內(nèi)容緩解用戶焦慮,，提升用戶體驗(yàn)

例如加載動畫,，可以有效降低用戶對時(shí)間的感知，對于用戶,，他們關(guān)注的是感受到的速度,，而不是應(yīng)用實(shí)際消耗的速度。

2.如何評價(jià)動效設(shè)計(jì)的好壞,？

從感官體驗(yàn)上來講動效設(shè)計(jì)非?；顫娪腥?，但其背后存在明確的原則，這些原則能夠幫助設(shè)計(jì)師對作品進(jìn)行自我評估,然而動效原則眾多且晦澀抽象,所以筆者將其歸納為以下三個(gè)設(shè)問句,需要大家反復(fù)思考權(quán)衡這3個(gè)問題：

（1）承載功能性了嗎,？

動效設(shè)計(jì)一定是某項(xiàng)功能的載體,任何動效都有其意義,它能夠補(bǔ)充理解能力的差距。

思考自己動效的功能是什么?最終目標(biāo)是什么,？產(chǎn)品意圖是什么,？闡述層級關(guān)系？吸引用戶注意力,？對用戶操作做出反饋,？讓頁面變得更加美觀？或者是在這些表現(xiàn)層面之后的其他意義,？

這些內(nèi)容往往是穿插在一起的,，讀者可從上文提到的闡述，吸引,，反饋,，提升四個(gè)方向入手。

（2）動效合理嗎,？

符合客觀世界規(guī)律：元素運(yùn)動的方式是否符合物理規(guī)則,？元素的使用是否符合用戶常識以及對產(chǎn)品的認(rèn)知？

一致性：交互設(shè)計(jì)原則也存在于動效設(shè)計(jì)中,，運(yùn)動中元素的X（橫向）Y（縱向）Z（垂直屏幕方向）軸方向應(yīng)該存在規(guī)律,，元素的運(yùn)動應(yīng)該是有序的。同時(shí),，動效的視覺語言（基本動畫原則：動態(tài)曲線,，動效風(fēng)格等）也應(yīng)該是一致的。

效率：元素是否簡潔,？是否存在夸張的動態(tài)效果？用戶討厭被無關(guān)的內(nèi)容分散注意力

時(shí)長動效的時(shí)長是否合適,？（在手機(jī)這樣的移動端設(shè)備上,，按照 Material Design 的建議，動效時(shí)長應(yīng)該控制在200~300毫秒之間,；在平板電腦上,，這個(gè)時(shí)長應(yīng)該延長大概30%，時(shí)長應(yīng)該在400~450毫秒之間,；在可穿戴設(shè)備的小屏幕上,，這個(gè)時(shí)長應(yīng)該縮短30%，在150~200毫秒之間,。）

（3）動效生動嗎？

在不降低用戶執(zhí)行任務(wù)效率的前提下,，我們應(yīng)該使動畫更加生動，更具趣味性,，表達(dá)情緒,，避免枯燥。關(guān)于“生動”,，我們可以從以下方面入手：

速度：線性的速度會使得物體的運(yùn)動看起來機(jī)械呆板,，調(diào)整運(yùn)動曲線可以很好地解決這個(gè)問題。

緩入（ease in）：當(dāng)物體以慢速開始并積累速度時(shí),，這一過程被稱為緩入,，使用的時(shí)機(jī)以目的為準(zhǔn)側(cè)進(jìn)行判斷，例如物體移出畫面時(shí),，該元素重要性降低，所以可以讓其進(jìn)行加速運(yùn)動,。

緩出（ease out）：與緩入恰恰相反,，當(dāng)物體快速開始運(yùn)動并降低速度時(shí)，這一過程被稱為緩出,。例如物體移入畫面時(shí),，該元素重要性較強(qiáng)，所以可以讓其進(jìn)行減速運(yùn)動,，同時(shí)可避免對于用戶的驚嚇

緩入緩出（ease in-out）：適合用來表達(dá)元素形態(tài)狀態(tài)的改變,，加速時(shí)間要小于減速時(shí)間，動畫能夠引導(dǎo)用戶更加關(guān)注元素的結(jié)束部分,。從物理性角度講,，緩動動畫遵循的是 慣性定律——物體運(yùn)動不會突然停止和瞬間加速（都有加速和減速過程）。

然而單一改變速度并不足以將畫面變得生動,，我們需要了解一下三個(gè)關(guān)鍵要素：

慣性,、重力與材質(zhì)

我們可以嘗試賦予元素各種屬性來加強(qiáng)其生動性

慣性：物體因?yàn)閼T性原因，可能會發(fā)生形態(tài)或者速度的改變

重力：物體因?yàn)橹亓υ?，可能會發(fā)生形態(tài)或者速度的改變,，重心的存在也使得一些對象在移動之前需要做出準(zhǔn)備動作。

材質(zhì)：賦予物體不同的材質(zhì)屬性,，該物體可能會發(fā)生形態(tài)或者速度的改變,，例如果凍狀的彈性效果,，不同材質(zhì)的在慣性和重力會呈現(xiàn)不同的狀態(tài)。

網(wǎng)絡(luò)上關(guān)于運(yùn)動曲線的資料很多,，筆者在這里只例舉最常用的幾種,，在了解基本的運(yùn)動曲線屬性后，希望大家能夠結(jié)合慣性重力材質(zhì)三要素進(jìn)行嘗試,，相信會有所收獲,，同時(shí)觀察生活細(xì)節(jié)，模擬動植物的動勢能夠讓你直觀的體會上文中的內(nèi)容,。

3.動效的主要類型

分類針對上文四種的目標(biāo)，結(jié)合uec的實(shí)際案例介紹并分析幾種常見的動效類型：

（1）銜接動效

在我們平?？吹接耙暪?jié)目中,，大部分鏡頭采用跳切的形式（畫面直接切換沒有任何銜接形式），這是因?yàn)橛耙曌髌返膬?nèi)容直觀,，主線明確,，且觀眾與用戶的之間存在巨大差別，前者大部分處于被動,，而用戶則會帶著目標(biāo)和任務(wù)進(jìn)行操作,，此時(shí)應(yīng)用只要跟用戶有互動，就會有狀態(tài)的變化,，而絕大多數(shù)的變化都是由界面視覺展示的,。這時(shí)，界面上的狀態(tài)變化,，是否有過渡,，過渡的是否流暢，動效本身承載的信息是否清晰,，就直接的影響著用戶的感受,。在內(nèi)容優(yōu)先的設(shè)計(jì)趨勢下，用戶界面變的更加簡潔,。這將給用戶帶來操作上的認(rèn)知障礙,，動效則可以在不打破界面美感的前提下，彌補(bǔ)認(rèn)知的損失,。

銜接動畫主要分為頁面間的銜接以及同一頁面下不同元素/狀態(tài)的銜接,。

頁面間的銜接-傳遞層級信息 

轉(zhuǎn)場動效的應(yīng)用最多，用來向用戶傳達(dá)層級信息,，告知用戶界面前后變化,，幫助用戶理解產(chǎn)品結(jié)構(gòu)（當(dāng)呈現(xiàn)模型與用戶心理模型重合度越高，產(chǎn)品功能就越容易被用戶理解）,。

案例

錯(cuò)誤：頁面出現(xiàn)的形式與當(dāng)前頁面關(guān)聯(lián)性不強(qiáng),，也無法正確引導(dǎo)用戶的手勢操作

正確：明確傳達(dá)產(chǎn)品的結(jié)構(gòu),，深化層級關(guān)系

頁面內(nèi)的動效-傳達(dá)界面內(nèi)元素的變化

頁面內(nèi)的動效主要用來闡述內(nèi)容的展示以及狀態(tài)的變化，給予用戶反饋:

1. 強(qiáng)調(diào)空間感（x·y·z軸的空間擴(kuò)展,，闡述功能）

2. 引導(dǎo)視覺焦點(diǎn)（吸引功能）

案例

錯(cuò)誤：元素的改變過于生硬,，從屬關(guān)系不明確

（2）響應(yīng)動效

無論是點(diǎn)擊、長按,、拖拽,、滑動等交互行為，都應(yīng)該得到系統(tǒng)的即時(shí)反饋,，將其以視覺或動效的方式展現(xiàn),，幫助用戶了解當(dāng)前系統(tǒng)對交互過程的響應(yīng)情況，為用戶帶來安全感,。

案例

錯(cuò)誤：操作無反饋,，可能造成用戶任務(wù)的多次提交

正確：第一時(shí)間反饋用戶的操作，告知用戶操作是否有效

(3) 演示動效

多用于動態(tài)引導(dǎo)頁,，旨在吸引用戶注意力,，幫助用戶理解產(chǎn)品功能或展示作者想法

案例來自WPSMail4.0的啟動動畫，將產(chǎn)品功能以抽象的動畫形式表現(xiàn),，在思路上有以下幾個(gè)重點(diǎn)：

三要素的體現(xiàn)

請注意左圖中物體通過使用不同運(yùn)動曲線和形狀變化手段所呈現(xiàn)的重力感,，慣性，以及彈性,，這使得動畫更加生動

通過觀察生活得到的靈感

通過觀察生活,，我們能夠得到一些啟示，并從中找到聯(lián)系和設(shè)計(jì)依據(jù)

(4) 加載動效

眾所周知,，app服務(wù)器在加載數(shù)據(jù)的時(shí)候需要用戶等待一段時(shí)間,，為了緩解用戶等待過程中的焦慮情緒，設(shè)計(jì)者可以采用加載動畫的方式來緩解用戶的等待時(shí)間,，使整個(gè)等待過程變得更加友好,、流暢。

一個(gè)好的加載動畫分為兩個(gè)層次,，第一個(gè)層次是滿足用戶的基本心理預(yù)期,，緩解等待的焦慮；第二個(gè)層次是要給出用戶一定的驚喜,，加載動畫的常見使用場景一共分為以下幾種：

下拉刷新加載

下拉刷新可以讓用戶在看到本地?cái)?shù)據(jù)的同時(shí)去重新加載數(shù)據(jù),，以確保用戶可以看到最新的內(nèi)容。

下拉加載一般分為兩種形式：

圖文結(jié)合

動畫加文字的形式相對簡單,，因?yàn)橛休o助文字,，所以對于“達(dá)意”這一項(xiàng)原則的把握不難。

示例是WPSCalendar的列表加載動畫,，在這個(gè)動畫有一個(gè)細(xì)節(jié)：上拉加載未來事項(xiàng)的時(shí)候出現(xiàn)的時(shí)鐘為順時(shí)針旋轉(zhuǎn),；下拉加載過往事項(xiàng)的時(shí)候則是逆時(shí)針旋轉(zhuǎn),，在實(shí)際案例中我們往往需要結(jié)合現(xiàn)實(shí)生活中的規(guī)律進(jìn)行設(shè)計(jì)，使得作品的體驗(yàn)更優(yōu),。

單一的動畫形式

動畫形式相對復(fù)雜,，對設(shè)計(jì)師的圖形表現(xiàn)能力要求更高，示例是WPSMail的列表加載動畫,，在產(chǎn)品中,，下拉刷新=收取新郵件，郵件則在原有的版本中以紙飛機(jī)表示,，相應(yīng)的,，收取新郵件可以認(rèn)為是飛機(jī)飛入，于是延續(xù)飛機(jī)的設(shè)計(jì),，圍繞著郵件與飛機(jī)的思路,，以飛入郵箱的形式來展現(xiàn)“收取新郵件”的主題。

自此確定了動畫的方向：紙飛機(jī)與郵箱,。

頁面數(shù)據(jù)加載

當(dāng)切換到新頁面時(shí)，常常會有加載數(shù)據(jù)的時(shí)候,，這也是加載動畫使用最多的場景,，市面上的加載樣式也是多種多樣，如：toast加載,、進(jìn)度條加載等,。

預(yù)加載

為了緩解用戶啟動app時(shí)的等待時(shí)間，有些app會將啟動頁設(shè)計(jì)成一個(gè)加載動畫,，如京東,、百度貼吧等，不僅使等待時(shí)間變得有趣,，并且增加了品牌記憶,，達(dá)到了一箭雙雕的效果。

（5） logo動效

一個(gè)設(shè)計(jì)足夠優(yōu)秀突出的LOGO,，能夠和用戶建立聯(lián)系,，能夠幫助企業(yè)建立起品牌形象。而動態(tài)LOGO 是一種更為現(xiàn)代,、更為動態(tài)的品牌呈現(xiàn)方式,。能夠更好的吸引用戶注意力，提升品牌認(rèn)知,，讓logo利用方式更加多元化,。

更高的品牌識別度

動態(tài)圖形比靜態(tài)的圖像更容易為用戶所理解，也更容易被記住,。

更好地呈現(xiàn)故事

和靜態(tài)的LOGO不同,，動態(tài)LOGO可以呈現(xiàn)的不僅僅是視覺效果,，甚至一個(gè)簡短的故事。它可以成為產(chǎn)品或者公司的獨(dú)有故事的載體,，也能同用戶更好地建立情感聯(lián)系,。

4.軟件選擇以及動效輸出

（1）軟件選擇 

在軟件方面筆者主要推薦以下3款：

• AE：強(qiáng)大的后期制作軟件，動效設(shè)計(jì)只是ae功能的分支之一,，合理利用插件可以事半功倍,，缺點(diǎn)是專業(yè)度偏高，不易上手,。

• principle：能夠快速的實(shí)現(xiàn)邏輯簡單的高保真原型,，有預(yù)置好的運(yùn)動曲線屬性，上手簡單,，但不支持3d旋轉(zhuǎn),，陀螺儀等功能。

• proto pie：功能強(qiáng)大,，支持語音,、陀螺儀感應(yīng)功能，但操作不如principle方便,。

（2） 關(guān)于動效輸出

動效輸出主要有這幾種格式：

GIF

不建議使用

一種非常古老的格式,，體積大，取色范圍小,，支持背景透明,。

視頻

可以考慮使用

在某些特殊的位置可以考慮使用壓縮過的，時(shí)長短體積小的視頻,，可以獲得不錯(cuò)的效果,，但是常用的MP4格式不支持背景透明。

幀序列

可以考慮使用

代碼控制播放,，對于圖片數(shù)量和動畫幀數(shù)有要求,，筆者線上經(jīng)驗(yàn)是22幀/秒左右（基本保證動畫較為流暢）

Bodymovin插件

建議使用

這款插件可以支持 Android、iOS平臺,；導(dǎo)出的json文件體積小,，方便開發(fā)使用，實(shí)現(xiàn)效果也不錯(cuò),。需要注意這是針對矢量動畫開發(fā)的,，不太適合圖片過多的情況，也不能支持外置插件的效果,，比如粒子,、光效等。同時(shí)使用前需要與開發(fā)溝通,。

寫在最后

動效早已成為設(shè)計(jì)師解決設(shè)計(jì)問題必備的利器,，它的本質(zhì)始終在圍繞如何給用戶帶來更優(yōu)的體驗(yàn),，上文中提到的內(nèi)容能夠讓我們更快的輸出動效方案，用實(shí)踐來檢驗(yàn)學(xué)習(xí)成果,，然后再不斷進(jìn)行優(yōu)化,。所以，請先大膽的設(shè)計(jì)吧：）

原文地址：UI中國

作者：金山辦公用戶體驗(yàn)中心_北京

轉(zhuǎn)載請注明：學(xué)UI網(wǎng) ? 所有設(shè)計(jì)師都應(yīng)該懂的動效設(shè)計(jì)