什么是動(dòng)效呢？動(dòng)效就是使UI富有表現(xiàn)力且讓產(chǎn)品易于使用的元素和表現(xiàn)手段。

設(shè)計(jì)師在工作中經(jīng)常會(huì)收到“我覺的這里感覺不太好”或者“沒達(dá)到我想要的感覺”。

這種情況下，是設(shè)計(jì)方案沒有滿足產(chǎn)品需求？還是設(shè)計(jì)方案沒有解決產(chǎn)品問(wèn)題？都不是，而是缺乏了動(dòng)效對(duì)于靜態(tài)元素的補(bǔ)充說(shuō)明，缺乏了動(dòng)態(tài)元素的鏈接，減弱了關(guān)聯(lián)性，增加了需求方對(duì)于方案的理解成本，或者腦補(bǔ)不到對(duì)應(yīng)的操作效果。所以動(dòng)效就呼之而出了。

會(huì)AE的設(shè)計(jì)師有很多，似乎動(dòng)效已經(jīng)是設(shè)計(jì)師的標(biāo)配，但你懂得如何利用動(dòng)效提升產(chǎn)品體驗(yàn)嗎？

產(chǎn)品有哪些體驗(yàn)問(wèn)題

1. 產(chǎn)品操作流程；
2. 用戶主觀感受；
3. 品牌主張。

做動(dòng)效不能為了做動(dòng)效而做動(dòng)效，一定要想清楚通過(guò)動(dòng)效想解決什么問(wèn)題。主要從產(chǎn)品操作流程和用戶感受兩個(gè)視角來(lái)分析。通過(guò)梳理業(yè)務(wù)流程、產(chǎn)品流程，從用戶的視角去發(fā)現(xiàn)用戶在使用過(guò)程中的需求、痛點(diǎn)和對(duì)產(chǎn)品有什么樣的期望。

以體驗(yàn)為目標(biāo)，以發(fā)現(xiàn)的問(wèn)題為出發(fā)點(diǎn)，思考每一個(gè)操作節(jié)點(diǎn)出現(xiàn)了什么問(wèn)題，哪些問(wèn)題可以通過(guò)動(dòng)效解決，或者用戶在哪些節(jié)點(diǎn)中產(chǎn)生的消極情緒可以通過(guò)動(dòng)效的形式降低。當(dāng)然除此之外，產(chǎn)品在使用和推廣的過(guò)程中背后的品牌價(jià)值和理念是否得到了合理的傳遞，進(jìn)而觸達(dá)用戶的內(nèi)心，用戶對(duì)于產(chǎn)品的認(rèn)知是否形成特有的心智。

通常情況下遇到的一些體驗(yàn)問(wèn)題有：

1. 加載時(shí)間過(guò)長(zhǎng)；
2. 產(chǎn)品缺乏趣味性元素；
3. 動(dòng)效混亂；
4. 內(nèi)容加載過(guò)于生硬；
5. 產(chǎn)品框架復(fù)雜，用戶理解成本過(guò)高。

等等，希望通過(guò)拋磚引玉，大家思考自己產(chǎn)品現(xiàn)階段存在的問(wèn)題。

動(dòng)效分為哪幾種類型

從形式上分析主要有四種類型構(gòu)成，分別是圖標(biāo)動(dòng)效、界面動(dòng)效、提示動(dòng)效、信息狀態(tài)動(dòng)效。從屬性上分析主要有被動(dòng)觸發(fā)和主動(dòng)顯示兩種。

圖標(biāo)動(dòng)效：基于產(chǎn)品內(nèi)部的圖標(biāo)而生成的動(dòng)效，主要應(yīng)用在用戶行為觸發(fā)的狀態(tài)切換，幫助用戶理解操作行為產(chǎn)生的意義，并且引導(dǎo)用戶繼續(xù)后續(xù)的操作，使整個(gè)流程傳遞趣味性，增加產(chǎn)品的人性化。

界面動(dòng)效：當(dāng)喚起新頁(yè)面內(nèi)容時(shí)，界面的動(dòng)效幫助用戶理解產(chǎn)品的框架結(jié)構(gòu)和層級(jí)關(guān)系，在認(rèn)知上給用戶一個(gè)緩沖時(shí)間，減弱用戶獲取信息的跳躍感，提升界面之間的關(guān)聯(lián)性。

提示型動(dòng)效：一般是主動(dòng)顯示的動(dòng)效，比如：當(dāng)有新消息，或者是有緊急任務(wù)需要處理的時(shí)候，提示型動(dòng)效就會(huì)主動(dòng)發(fā)生作用（這也是人類在進(jìn)化的過(guò)程中對(duì)于運(yùn)動(dòng)物體最敏感的特性所決定的），并且比閱讀文字的成本要低。(沒有找到合適的案例）

信息狀態(tài)動(dòng)效：這種動(dòng)效是向用戶傳遞產(chǎn)品運(yùn)行的狀態(tài)，也稱為加載動(dòng)效，主要是當(dāng)產(chǎn)品由于某種原因無(wú)法及時(shí)展現(xiàn)信息，而幫助產(chǎn)品傳遞狀態(tài)，增加用戶預(yù)期，降低焦慮的負(fù)面情緒。

被動(dòng)觸發(fā)：由用戶行為觸發(fā)的，通過(guò)動(dòng)效的形式反饋產(chǎn)品信息，提升產(chǎn)品的趣味性和用戶的愉悅感。

主動(dòng)顯示：由于產(chǎn)品的加載或者是產(chǎn)品自身狀態(tài)發(fā)生的變化時(shí)，通過(guò)動(dòng)效引起用戶的注意，傳遞產(chǎn)品信息。

適用在產(chǎn)品的哪個(gè)階段

從產(chǎn)品的生命周期分析，可以分為啟動(dòng)期、發(fā)展期、穩(wěn)定成熟期、衰退期。在不同的發(fā)展階段，用戶的需求、團(tuán)隊(duì)聚焦點(diǎn)、項(xiàng)目資源都在發(fā)生變化。

在啟動(dòng)期，團(tuán)隊(duì)會(huì)把人力、時(shí)間等項(xiàng)目資源向產(chǎn)品戰(zhàn)略、功能傾斜，快速構(gòu)建產(chǎn)品，驗(yàn)證產(chǎn)品方向的準(zhǔn)確性，體驗(yàn)作為次重點(diǎn)對(duì)待。在發(fā)展期和穩(wěn)定成熟期間，產(chǎn)品戰(zhàn)略和形態(tài)已經(jīng)確定，用戶開始從認(rèn)識(shí)產(chǎn)品到了解產(chǎn)品，對(duì)產(chǎn)品的體驗(yàn)開始提出新的訴求。

合作團(tuán)隊(duì)也開始以用戶目標(biāo)為基礎(chǔ)在構(gòu)建產(chǎn)品差異化上發(fā)力，聚焦體驗(yàn)，通過(guò)不同的方式提升產(chǎn)品體驗(yàn)，優(yōu)化用戶使用產(chǎn)品的感知，使產(chǎn)品更加貼合用戶的心里模型。合作團(tuán)隊(duì)也會(huì)釋放資源支持體驗(yàn)提升的使命，提升設(shè)計(jì)價(jià)值。

設(shè)計(jì)師基于對(duì)團(tuán)隊(duì)、目標(biāo)、資源了解的基礎(chǔ)上，以產(chǎn)品定位為基點(diǎn)，以用戶目標(biāo)為動(dòng)力，把動(dòng)效作為設(shè)計(jì)賦能的切入點(diǎn)，通過(guò)感性的動(dòng)效，提升產(chǎn)品體驗(yàn)感染用戶，滿足用戶的可預(yù)測(cè)的非理性需求，讓用戶在使用的過(guò)程中可追憶過(guò)去，和產(chǎn)品形成共鳴增加用戶粘性，塑造產(chǎn)品體驗(yàn)壁壘，賦能業(yè)務(wù)。

動(dòng)效的設(shè)計(jì)目標(biāo)

• 用戶：輔助用戶理解產(chǎn)品，吸引用戶注意力，視覺引導(dǎo)，情感共鳴，減弱用戶焦慮；
• 產(chǎn)品：提升產(chǎn)品趣味性，曝光產(chǎn)品品牌，增加用戶粘性，提升產(chǎn)品差異化。

在使用動(dòng)效之前要想清楚動(dòng)效的意義是什么，如何去運(yùn)用動(dòng)效，動(dòng)效能給產(chǎn)品帶來(lái)什么樣的亮點(diǎn)和體驗(yàn)上的提升。

動(dòng)效的意義主要有兩個(gè)部分：

1. 對(duì)用戶認(rèn)知的影響；
2. 對(duì)產(chǎn)品體驗(yàn)和品牌的提升。

從用戶使用產(chǎn)品的順序分析，獲取信息、理解產(chǎn)品、感受產(chǎn)品、形成認(rèn)知，動(dòng)效可以通過(guò)符合真實(shí)物理運(yùn)動(dòng)規(guī)律的設(shè)計(jì)元素，讓用戶理解產(chǎn)品，使實(shí)現(xiàn)模型、設(shè)計(jì)模型和用戶的認(rèn)知模型形成匹配，降低理解成本。

通過(guò)抓住眼球?qū)τ谶\(yùn)動(dòng)物體的敏感性，以動(dòng)效吸引用戶注意力，引導(dǎo)用戶的瀏覽順序，讓用戶快速感知到產(chǎn)品希望用戶獲取的信息。同時(shí)動(dòng)效也是一種趣味元素的集合，人的天性對(duì)動(dòng)效有吸引力，相信每一個(gè)人幼年時(shí)對(duì)動(dòng)畫片都愛的目不轉(zhuǎn)睛。

動(dòng)效就是一個(gè)簡(jiǎn)短的故事，通過(guò)動(dòng)效向用戶講述產(chǎn)品的狀態(tài)情節(jié)，讓用戶在感受趣味性的同時(shí)，減弱負(fù)面情緒的影響，留下對(duì)產(chǎn)品的正面的認(rèn)知。

從產(chǎn)品需求的角度分析，分別是獲取用戶、增加用戶粘性、留下用戶、品牌傳遞。動(dòng)效區(qū)別于靜態(tài)設(shè)計(jì)方案的獨(dú)特之處就是動(dòng)效體現(xiàn)出來(lái)的趣味性，能讓用戶在使用產(chǎn)品的過(guò)程中，感受到是和一個(gè)人性化的產(chǎn)品在交流，獲取交流的趣味性，讓產(chǎn)品從可用變成易用。

在視覺感性層面，形成和同類產(chǎn)品的差異性，進(jìn)而傳遞產(chǎn)品背后的品牌理念和主張。集易用、獨(dú)特性、品牌為一體的動(dòng)效設(shè)計(jì)理念應(yīng)運(yùn)而生。

合格的動(dòng)效具備哪些特征

動(dòng)效的真實(shí)感、節(jié)奏的一致性、動(dòng)效的物理性、元素路徑的一致性、動(dòng)效的故事性。

（1）動(dòng)效的真實(shí)感

是指元素運(yùn)動(dòng)形式的可能性。每一中元素都有自己的運(yùn)動(dòng)能力范圍（生活中類似物品的運(yùn)動(dòng)情況和用戶的認(rèn)知習(xí)慣），設(shè)計(jì)師的腦洞大并不代表動(dòng)效的合理，超出能力范圍的動(dòng)效不僅不會(huì)增分，反而會(huì)降低用戶的認(rèn)知體驗(yàn)。

比如：表示一個(gè)電話的Icon動(dòng)效，想吸引用戶點(diǎn)擊，引導(dǎo)用戶的行為，通俗情況下可能是Icon元素的抖動(dòng)，或者是上下彈跳，來(lái)引導(dǎo)用戶。但如果用一種類似波浪的翻滾動(dòng)效來(lái)表示，就超出了電話Icon的運(yùn)動(dòng)能力范圍。因?yàn)樵谟脩舻恼J(rèn)知范圍內(nèi)是沒有波浪狀的Icon動(dòng)效。

（2）節(jié)奏的一致性

是指界面動(dòng)效中的所有運(yùn)動(dòng)元素和動(dòng)效屬性采用同樣的時(shí)間，同樣的速度，同樣的節(jié)奏，引導(dǎo)用戶獲取信息、理解產(chǎn)品。如果節(jié)奏不一致，首先用戶感受到的是一個(gè)不舒服的運(yùn)動(dòng)場(chǎng)景。其次用戶無(wú)法理解動(dòng)效傳遞的意義，無(wú)法獲取應(yīng)該獲取的信息。最后會(huì)感覺整個(gè)動(dòng)效太過(guò)拖沓、不嚴(yán)謹(jǐn)，減弱用戶的正面感受。

（3）動(dòng)效的物理性和直實(shí)性不同

物理性指元素在真實(shí)感的基礎(chǔ)上符合運(yùn)動(dòng)的物理特性。繼續(xù)拿電話Icon舉例，電話Icon設(shè)計(jì)了上下彈跳的動(dòng)效，但I(xiàn)con的上下運(yùn)動(dòng)是勻速的，沒有減速和加速，這就是不符合物理性。符合物理性的動(dòng)效便于用戶理解動(dòng)效含義。

大家想想小時(shí)候看過(guò)的《貓和老鼠》，卡通人物的運(yùn)動(dòng)特性都是在真實(shí)生活中呈現(xiàn)出來(lái)的物理性的基礎(chǔ)上進(jìn)行夸張，所以你會(huì)感受到動(dòng)畫所傳遞的趣味。

（4）元素路徑的一致性

是指所有參與運(yùn)動(dòng)的元素的運(yùn)動(dòng)方向保持一致，不能出現(xiàn)有元素A向上移動(dòng)，元素B向下移動(dòng)，這就違背了運(yùn)動(dòng)路徑的一致性。運(yùn)動(dòng)路徑的一致性通常包括三類，橫向一致性，縱向一致性，和中心輻射一致性。

（5）動(dòng)效的故事性和趣味性

再此提起《貓和老鼠》，相信大家小時(shí)候都喜歡看，因?yàn)橛泄适隆⒂腥の?。?dòng)效也是簡(jiǎn)短的動(dòng)畫，所以動(dòng)效通過(guò)元素的運(yùn)動(dòng)來(lái)傳遞背后的品牌故事，這就是動(dòng)效的魅力。想清楚你的動(dòng)效想傳遞什么、故事性是什么非常重要，因?yàn)閯?dòng)效不僅讓用戶感受到趣味，還要通過(guò)動(dòng)效建立對(duì)于產(chǎn)品的立體認(rèn)知、品牌認(rèn)知。

動(dòng)效應(yīng)該是一整套動(dòng)效語(yǔ)言

解決問(wèn)題不能僅僅停留在做好了一個(gè)動(dòng)效，針對(duì)產(chǎn)品體驗(yàn)的解決方案應(yīng)該是一整套針對(duì)產(chǎn)品的動(dòng)效語(yǔ)言。通過(guò)動(dòng)效語(yǔ)言來(lái)形成具有品牌性、一致性的認(rèn)知體驗(yàn)。主要通過(guò)動(dòng)效屬性和動(dòng)效類別來(lái)定義設(shè)計(jì)語(yǔ)言。

動(dòng)效屬性包括速度、軌跡、時(shí)間、視覺焦點(diǎn)、節(jié)奏、層級(jí)，動(dòng)效類別就是在前面談到的四種動(dòng)效圖標(biāo)動(dòng)效、界面動(dòng)效、提示動(dòng)效、信息狀態(tài)動(dòng)效。

在不同動(dòng)效類別的基礎(chǔ)上去定義它們的屬性應(yīng)該做怎樣的變化，進(jìn)而搭建一整套動(dòng)效語(yǔ)言，例如：界面動(dòng)效元素在多長(zhǎng)時(shí)間（時(shí)間的單位建議是統(tǒng)一的，比如：毫秒）中運(yùn)動(dòng)多長(zhǎng)的距離（距離可以通過(guò)設(shè)計(jì)圖的尺寸去計(jì)算），元素的運(yùn)動(dòng)軌跡是什么，整個(gè)過(guò)程中是否有視覺焦點(diǎn)（用于引動(dòng)用戶的視覺），動(dòng)效的運(yùn)動(dòng)節(jié)奏如何，是加速運(yùn)動(dòng)還是減速運(yùn)動(dòng)？

最理想的動(dòng)效語(yǔ)言是一整套數(shù)據(jù)表格和動(dòng)效范例，范例主要用作團(tuán)隊(duì)成員之間溝通和理解，在達(dá)成一致之后，修改表格的數(shù)據(jù)并且給到開發(fā)團(tuán)隊(duì)修改元素的動(dòng)效屬性。

動(dòng)效注意事項(xiàng)

必須要說(shuō)的是很多動(dòng)效的實(shí)現(xiàn)，可能不是由代碼去繪制出來(lái)的，而是由設(shè)計(jì)師制作輸出動(dòng)效序列幀，所以需要注意一下幾點(diǎn)：

1. 需要設(shè)計(jì)師確定動(dòng)效的播放幀速率（平衡動(dòng)效占用的手機(jī)資源和動(dòng)效的流暢性，24fps是能夠滿足一般性需求）。
2. 動(dòng)效是運(yùn)動(dòng)的，顯示區(qū)域要比靜態(tài)元素的區(qū)域要大，所以在設(shè)計(jì)之前要先和開發(fā)成員溝通，了解現(xiàn)在開發(fā)框架中的顯示面積情況，可變動(dòng)性有都多大，技術(shù)邊界在哪里，這樣輸出的動(dòng)效才是一個(gè)可落地的方案。
3. 在動(dòng)效樣式不多的情況下建議使用序列幀動(dòng)效，開發(fā)成本低，設(shè)計(jì)師主導(dǎo)具體動(dòng)效樣式，減少反復(fù)溝通的成本。
4. 界面轉(zhuǎn)場(chǎng)動(dòng)效和提示動(dòng)效，建議使用代碼編寫，因?yàn)槌霈F(xiàn)場(chǎng)景多，編寫成本低，可修改性強(qiáng)。而圖標(biāo)型動(dòng)效，建議是序列幀動(dòng)效，因?yàn)樽兓瘏?shù)多，程序表現(xiàn)難度大。
5. 特別注意H5環(huán)境中的動(dòng)效，減少在加載動(dòng)效中使用序列幀的方式，因?yàn)樵诩虞d過(guò)程中，序列幀也是需要加載的，由于網(wǎng)絡(luò)環(huán)境的不同會(huì)造成動(dòng)效的卡頓。代碼動(dòng)效中動(dòng)畫屬性變化過(guò)多，會(huì)過(guò)分占用程序資源，造成動(dòng)效不流暢，代碼實(shí)現(xiàn)的動(dòng)效需要制作Demo或者找案例參考，并且把變形屬性轉(zhuǎn)譯成代碼語(yǔ)言，否則就會(huì)造成大家都能理解，但不知道哪些屬性發(fā)生了變化，增加溝通成本。

如何去落地

在開始設(shè)計(jì)之前，先與開發(fā)人員溝通表現(xiàn)動(dòng)效的形式，分幾期去完成，達(dá)成統(tǒng)一共識(shí)。提前溝通動(dòng)效方案的風(fēng)險(xiǎn)點(diǎn)和困難點(diǎn)，會(huì)讓后期推動(dòng)更加便利。圖標(biāo)型動(dòng)效制作成本高，可以先找參考案例，在樣式上和團(tuán)隊(duì)形成統(tǒng)一共識(shí)的基礎(chǔ)上再進(jìn)行定制化、品牌化的設(shè)計(jì)。

界面動(dòng)效和提示型動(dòng)效可以采用Flinto，Principle等制作成高保真Demo，便于團(tuán)隊(duì)成員理解，形成視覺上的感知，減少后期不必要的反復(fù)溝通和修改。

總結(jié)

動(dòng)效是一種設(shè)計(jì)語(yǔ)言和表現(xiàn)手段，在使用之前一定要思考為什么使用，使用之后產(chǎn)生什么價(jià)值。

動(dòng)效一定是輔助用戶理解產(chǎn)品，輔助產(chǎn)品傳遞產(chǎn)品價(jià)值。動(dòng)效方案的創(chuàng)意性，邏輯性，物理規(guī)律一定要在動(dòng)效中呈現(xiàn)，否則方案是沒有價(jià)值的。

切莫過(guò)分動(dòng)效，否則會(huì)弄巧成拙。

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

題圖來(lái)自 Unsplash，基于CC0協(xié)議。