隨著移動(dòng)互聯(lián)網(wǎng)的普及和技術(shù)的發(fā)展，用戶接觸的產(chǎn)品更加成熟，對(duì)于產(chǎn)品的感知變得更加深入，挑剔程度也在變得更加嚴(yán)格，越來(lái)越多的產(chǎn)品都在努力提升用戶體驗(yàn)，嘗試通過不同的方式來(lái)打造產(chǎn)品的差異化：通過用戶人群細(xì)分確定產(chǎn)品定位-找到目標(biāo)人群的訴求點(diǎn)-定制化產(chǎn)品功能-流暢的交互體驗(yàn)-友好的視覺展示… 動(dòng)效設(shè)計(jì)屬于非常細(xì)分深入的手段之一；

在面對(duì)用戶口味更加挑剔，容忍度及耐心更差的當(dāng)下，動(dòng)效設(shè)計(jì)在這一過程中開始扮演越來(lái)越重要的角色，尤其是現(xiàn)在扁平設(shè)計(jì)風(fēng)格的廣泛運(yùn)用，動(dòng)效作為模擬物理世界運(yùn)動(dòng)規(guī)律的一種形式，讓冰冷的屏幕更接近真實(shí)世界的觸感。動(dòng)效設(shè)計(jì)也在作為一種設(shè)計(jì)師必備的技能越來(lái)越被重視。

接下來(lái)通過“動(dòng)效設(shè)計(jì)的原則、目標(biāo)、分類、落地實(shí)現(xiàn)”這幾個(gè)方便來(lái)系統(tǒng)性跟大家聊聊，并結(jié)合工作中的一些真實(shí)項(xiàng)目，讓大家了解動(dòng)效的原理以及動(dòng)效在用戶體驗(yàn)地圖中可以做哪些事情。

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

動(dòng)效設(shè)計(jì)作為設(shè)計(jì)手段之一，有靜態(tài)頁(yè)面無(wú)法做到的優(yōu)勢(shì)，存在的意義必然是為了提升體驗(yàn)，而過多過于復(fù)雜的動(dòng)效設(shè)計(jì)就顯得不合時(shí)宜，非但達(dá)不到預(yù)期目標(biāo)，還會(huì)降低用戶體驗(yàn)，拉低產(chǎn)品品牌印象。所以在動(dòng)效的使用時(shí)要克制，避免讓頁(yè)面的重心產(chǎn)生偏差，把用戶引到不必要的地方，或者產(chǎn)生過度設(shè)計(jì)，徒增用戶使用負(fù)擔(dān)。

基于過往的項(xiàng)目經(jīng)驗(yàn)總結(jié)了動(dòng)效設(shè)計(jì)的四個(gè)基本原則：必要性、簡(jiǎn)潔性、物理性、趣味性。

1、必要性

在做針對(duì)性漏斗轉(zhuǎn)化時(shí)，動(dòng)效是個(gè)不錯(cuò)的方式，往往我們會(huì)不自覺地想加入盡可能多的動(dòng)效設(shè)計(jì)，有時(shí)甚至單個(gè)頁(yè)面塞進(jìn)去多處動(dòng)效，這也不是不可以但需要注意的是單個(gè)頁(yè)面肯定會(huì)有自己的權(quán)重重心，動(dòng)效不應(yīng)讓頁(yè)面的功能重心產(chǎn)生偏差。單位時(shí)間內(nèi)產(chǎn)生的固定流量在頁(yè)面內(nèi)分配時(shí)，流向一部分的多了，流向其他部分就會(huì)減少。

給大家分享之前的項(xiàng)目做過的一次動(dòng)效，當(dāng)時(shí)考慮給通知做一個(gè)動(dòng)效，引導(dǎo)用戶關(guān)注從而提升通知的打開率，其實(shí)通知的內(nèi)容權(quán)重在當(dāng)前頁(yè)面中并不大，沒有必要給他做很強(qiáng)的內(nèi)容引導(dǎo)，用戶點(diǎn)進(jìn)去通知里面之后并沒有很強(qiáng)的業(yè)務(wù)屬性，這就是沒有站在全局的角度思考，沒有遵守必要性原則。

2、簡(jiǎn)潔性

不只是動(dòng)效設(shè)計(jì)，一切設(shè)計(jì)的準(zhǔn)則都包含簡(jiǎn)潔性，好的動(dòng)效方案一定不是復(fù)雜難懂需要用戶花心思去思考的。而動(dòng)效的簡(jiǎn)潔還需要考慮更多層面，時(shí)間的長(zhǎng)度、動(dòng)作的復(fù)雜性、視覺的重心、開發(fā)的成本。

3、符合物理運(yùn)動(dòng)規(guī)律

人對(duì)事物的觀察和理解都是基于物理世界的規(guī)律，當(dāng)虛擬界面元素的運(yùn)動(dòng)特性越能夠模擬物理世界的運(yùn)動(dòng)規(guī)律，比如慣性、重力加速等，就會(huì)越符合人在真實(shí)物理世界形成的心智模型，讓虛擬的屏幕與真實(shí)世界交匯，往往會(huì)更好的幫助用戶預(yù)判和理解頁(yè)面的邏輯。

4、趣味性

趣味性動(dòng)效的意義在于培養(yǎng)用戶的正向情感，比如愉悅、放松、認(rèn)可，避免用戶產(chǎn)生反向情感，比如憤怒、否定、失望，越強(qiáng)烈的正向情感越有利于幫助產(chǎn)品培養(yǎng)用戶的忠誠(chéng)度，對(duì)一些使用過程的負(fù)面情緒更加包容。

比如下面這個(gè)服務(wù)評(píng)價(jià)頁(yè)面，當(dāng)乘客體驗(yàn)不友好給出差評(píng)時(shí)，用憨厚可愛的動(dòng)效形象給予乘客情緒上的緩沖。

司機(jī)頭條項(xiàng)目中的雙擊點(diǎn)贊情感化動(dòng)效。?

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

在做動(dòng)效之前先要搞清楚目標(biāo)，為什么要做動(dòng)效設(shè)計(jì)？從動(dòng)效角度來(lái)說的產(chǎn)品目標(biāo)是什么？動(dòng)效設(shè)計(jì)的目標(biāo)可分為業(yè)務(wù)目標(biāo)和體驗(yàn)?zāi)繕?biāo)兩個(gè)方向，如上圖所示。

同樣是服務(wù)評(píng)價(jià)的動(dòng)效，我們從其他角度去聊一下設(shè)計(jì)出發(fā)點(diǎn)及目標(biāo)，首汽約車在對(duì)司機(jī)服務(wù)態(tài)度收集評(píng)價(jià)時(shí)，會(huì)有評(píng)價(jià)動(dòng)效，以提升用戶的評(píng)價(jià)意愿，當(dāng)用戶點(diǎn)擊好評(píng)時(shí)，下方的“去星級(jí)評(píng)價(jià)”會(huì)出現(xiàn)動(dòng)效，引導(dǎo)用戶操作，以提升星級(jí)評(píng)價(jià)的點(diǎn)擊率，而好評(píng)的評(píng)價(jià)率對(duì)于司機(jī)的接單而言又是很重要的推動(dòng)因素?？此莆⑿〉募?xì)節(jié)，也會(huì)正向影響到整個(gè)服務(wù)流程。

三、動(dòng)效設(shè)計(jì)的分類

互聯(lián)網(wǎng)產(chǎn)品的動(dòng)效，從整體上來(lái)說可分為兩種：交互動(dòng)效和MG動(dòng)畫（圖形動(dòng)畫）；如果繼續(xù)細(xì)分，還可以按場(chǎng)景和功能分為轉(zhuǎn)場(chǎng)動(dòng)效、導(dǎo)航動(dòng)效、加載動(dòng)效、展示動(dòng)效、引導(dǎo)動(dòng)效、反饋動(dòng)效。

1、轉(zhuǎn)場(chǎng)動(dòng)效

轉(zhuǎn)場(chǎng)動(dòng)效是一類比較常見的動(dòng)效，讓頁(yè)面之間有更順暢的跳轉(zhuǎn)連接，同時(shí)也可以更好的體現(xiàn)頁(yè)面之間的層級(jí)關(guān)系，讓用戶更容易理解頁(yè)面結(jié)構(gòu)，給用戶更好的使用體驗(yàn)。

比如下面這個(gè)登錄的動(dòng)效，點(diǎn)擊登錄按鈕時(shí)，底部背景的斜線一邊變直一邊向上運(yùn)動(dòng)且伴隨顏色變化，同時(shí)具體登錄信息通過不透明度動(dòng)畫出現(xiàn)，同一輛車在兩個(gè)場(chǎng)景之間運(yùn)動(dòng)，車用戶會(huì)清晰地感知到這兩個(gè)場(chǎng)景之間的強(qiáng)關(guān)聯(lián)，過渡也很自然。

2、導(dǎo)航動(dòng)效

導(dǎo)航動(dòng)效也是見的比較多的一類，Path 是最早開始嘗試這種創(chuàng)新的交互形式的，把不同的功能收納在“+”中，點(diǎn)擊“+”這些圖標(biāo)會(huì)旋轉(zhuǎn)著彈出，提高操作效率的同時(shí)又可以給用戶帶來(lái)操作的愉悅感，設(shè)計(jì)者的用心用戶還是能夠充分感受到的。隨著底部菜單欄中被加入更多的功能，現(xiàn)在這種形式被用的越來(lái)越少了，但他仍然還是有很大的使用空間和借鑒意義。

3、加載動(dòng)效

由于網(wǎng)絡(luò)等原因在數(shù)據(jù)傳輸過程中無(wú)法即時(shí)加載完成時(shí)，會(huì)出現(xiàn)等待時(shí)長(zhǎng)，加載動(dòng)效的意義在于緩解用戶等待的負(fù)面焦慮情緒，提升產(chǎn)品的使用體驗(yàn)。

4、展示動(dòng)效

展示動(dòng)效作為純展示出現(xiàn)的機(jī)會(huì)不是很多，通過展示表達(dá)信息，不承擔(dān)引導(dǎo)和交互行為，比如天氣情感化動(dòng)效展示。

5、引導(dǎo)動(dòng)效

引導(dǎo)動(dòng)效的意義在于引導(dǎo)用戶行為，把流量引導(dǎo)目標(biāo)場(chǎng)景，從而提升目標(biāo)場(chǎng)景的點(diǎn)擊量，比如常見的金剛區(qū)圖標(biāo)加上MG動(dòng)畫以后，引導(dǎo)用戶點(diǎn)擊。

6、反饋動(dòng)效

尼爾森十大可用性原則的第一條是狀態(tài)可見原則，應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)，需要在合適的時(shí)間給用戶適當(dāng)?shù)姆答?，防止用戶使用出現(xiàn)錯(cuò)誤。

四、產(chǎn)品開發(fā)的什么階段開始動(dòng)效設(shè)計(jì)？

動(dòng)效設(shè)計(jì)是不是應(yīng)該等交互UI都定好了，再來(lái)看哪里可以加得進(jìn)去動(dòng)效進(jìn)行豐富和點(diǎn)綴，這是很多初接觸同學(xué)對(duì)于動(dòng)效的認(rèn)知。實(shí)際上這也是可行的，但這只是對(duì)于一些基礎(chǔ)性動(dòng)效而言，比如常見的金剛區(qū)圖標(biāo)加上MG動(dòng)畫以后，引導(dǎo)用戶關(guān)注，提升某個(gè)業(yè)務(wù)場(chǎng)景的點(diǎn)擊量，或者點(diǎn)贊動(dòng)畫這一類。

但如果想動(dòng)過交互動(dòng)效來(lái)做更深層次的業(yè)務(wù)提升，在考慮動(dòng)效的時(shí)候，就需要把流程前置了，至少在原型設(shè)計(jì)階段甚至業(yè)務(wù)目標(biāo)確定之初就應(yīng)該考慮有沒有可能通過創(chuàng)新的交互形式來(lái)幫助達(dá)成目標(biāo)。接下來(lái)通過一個(gè)具體的項(xiàng)目案例來(lái)加以說明。

我們?cè)诙桃曨l應(yīng)用瀏覽視頻時(shí)往往會(huì)遇到這種情況，作者通過系列視頻介紹一部電影或其他內(nèi)容，當(dāng)我們看完當(dāng)前視頻想接著看該系列的下一條時(shí)，左滑進(jìn)入該作者的個(gè)人中心，發(fā)現(xiàn)作者的作品總量竟然有數(shù)百條之多，這時(shí)候想找到剛剛看到的那條視頻是非常困難的。

挖掘到了用戶需求然后確定產(chǎn)品目標(biāo)為縮短此場(chǎng)景的用戶路徑，就開始思考可能的交互策略，下面這個(gè)交互方案便從這個(gè)場(chǎng)景切入，用戶從視頻廣場(chǎng)信息流左滑時(shí)直接進(jìn)入作者的作品列表信息流頁(yè)面，而且從當(dāng)前瀏覽的那條視頻開始，可上下滑動(dòng)繼續(xù)瀏覽作者的其他視頻，再繼續(xù)左滑即可進(jìn)入作者個(gè)人中心。這樣只需一步操作即可從視頻廣場(chǎng)直接繼續(xù)瀏覽作者其他視頻。

優(yōu)秀的交互動(dòng)效要能夠做到對(duì)業(yè)務(wù)和體驗(yàn)同時(shí)產(chǎn)生價(jià)值，這需要考驗(yàn)設(shè)計(jì)師的全局思維，站在全局的角度洞察事物的全貌，體系化的連接事物的核心要素，不斷的構(gòu)建自己的認(rèn)知格局，不再只是從單一角度思考問題、想辦法、做決策，找到價(jià)值的源頭、設(shè)定行為目標(biāo)、掌握專業(yè)技能、最終呈現(xiàn)結(jié)果。

五、動(dòng)效設(shè)計(jì)的落地

具體的落地實(shí)現(xiàn)方式，基本分為代碼實(shí)現(xiàn)、GIF、序列幀、JSON、WEBP、APNG、MP4，下面來(lái)依次說下這幾種方式的優(yōu)缺點(diǎn)和需要注意的地方。

1、代碼實(shí)現(xiàn)

大部分交互動(dòng)效還是需要開發(fā)老哥哥們通過代碼實(shí)現(xiàn)的，想要完全實(shí)現(xiàn)設(shè)計(jì)稿的效果，就需要對(duì)每一個(gè)分解行為進(jìn)行標(biāo)注，主要從運(yùn)用對(duì)象、運(yùn)動(dòng)對(duì)象的變化屬性、貝塞爾曲線數(shù)值、運(yùn)動(dòng)時(shí)間、變化屬性的描述五部分來(lái)分解標(biāo)注。就像下面這個(gè)動(dòng)效設(shè)計(jì)，看似簡(jiǎn)單的兩步，點(diǎn)擊展開和點(diǎn)擊收起，需要清晰的標(biāo)注出每一個(gè)元素的運(yùn)動(dòng)屬性以及時(shí)間。

AE 插件 Flow 可導(dǎo)出貝塞爾曲線數(shù)值，貝塞爾曲線數(shù)值就是兩個(gè)坐標(biāo)值，分別代表下圖兩個(gè)手柄的坐標(biāo)，通過這兩個(gè)坐標(biāo)便能夠控制曲線的形狀。

2、GIF與序列幀

GIF 與序列幀也是比較常用的動(dòng)效導(dǎo)出方式，但也有各自的局限性。GIF 支持的顏色最多只有256種，而且對(duì)透明通道支持不友好，在輸出透明背景的動(dòng)圖時(shí)會(huì)出現(xiàn)鋸齒邊沿，由于這種特性它只適用于色彩較少的動(dòng)圖，如果是色彩較多的大型圖片它的表現(xiàn)力就有限了。

序列幀相對(duì) GIF 來(lái)說很好的解決了顏色的支持?jǐn)?shù)量太少和對(duì)透明通道支持不好的缺點(diǎn)，序列幀就是一張張的 png 圖片所以他支持顏色達(dá)千萬(wàn)種，缺點(diǎn)就是文件較大更耗內(nèi)存，小型動(dòng)圖時(shí)可以選擇這種方式。

3、WEBP與APNG

當(dāng)動(dòng)圖色彩豐富且需要透明背景格式而序列幀文件又比較大時(shí)，GIF 和序列幀就都不是合適的輸出方式了，這時(shí)可以選擇用 WEBP 或 APNG 格式。

WEBP 是 Google 在2010年收購(gòu)了 On2 Technologies 推出，經(jīng)過幾個(gè)版本迭代，目前已經(jīng)比較穩(wěn)定，所有主流的瀏覽器都可以支持，在移動(dòng)應(yīng)用上對(duì)安卓支持比較好，iOS 應(yīng)用通過一些代碼框架也可以完美支持。WEBP 支持的顏色與 png 相當(dāng)，并且完美的支持動(dòng)圖的透明通道且內(nèi)存占用比 GIF 更低。

APNG 是 Mozilla 代碼社區(qū)推出，基于 PNG 的位圖動(dòng)畫格式，擴(kuò)展方法類似網(wǎng)頁(yè)的 GIF 89a，第一幀是標(biāo)準(zhǔn)的單幅圖像，動(dòng)畫不被支持時(shí)也可以正常顯示第一幀畫面。目前已經(jīng)比較穩(wěn)定，所有主流的瀏覽器都可以支持，支持的顏色與 png 相當(dāng)，也可以完美的支持動(dòng)圖的透明通道且內(nèi)存占用比GIF更低。

給大家介紹一個(gè)導(dǎo)出 APNG 和 WEBP 的常用軟件isparta，沒有操作學(xué)習(xí)成本，直接可上手。

4、JSON

Lottie 是 Airbnb 開發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開源工具。Lottie 目前提供了 iOS, Android, 和 React Native 版本，能夠?qū)崟r(shí)渲染 After Effects動(dòng)畫特效。Lottie 在不需要對(duì)代碼進(jìn)行重寫的情況下讓工程師更加方便的創(chuàng)建更豐富的動(dòng)畫效果，Lottie 還有一個(gè)可選的緩存機(jī)制，對(duì)那些頻繁使用的東西能夠更快加載，目標(biāo)就是幫助開發(fā)者和設(shè)計(jì)師能夠更輕松的為應(yīng)用創(chuàng)建動(dòng)畫。

Lottie 依賴于 AE 的 Bodymovin 插件，Bodymovin 可以把各種矢量元素以及位圖動(dòng)畫導(dǎo)出一個(gè) json 格式的文本，開發(fā)工程師拿到 json 文件后就可以用Lottie 來(lái)解析讀取。

下面以工作中的一個(gè)具體的項(xiàng)目來(lái)闡述下 json 的使用經(jīng)驗(yàn)。

Bodymovin 并不能支持所有AE的動(dòng)畫屬性（常見的基本都支持），不支持漸變導(dǎo)出（位圖中包含漸變完全沒影響，比如這個(gè)項(xiàng)目案例的漸變就只是位圖），如果你的動(dòng)畫有形狀動(dòng)畫且形狀填充了漸變，那就沒辦法用 json 了，他導(dǎo)出的漸變是黑白而非彩色的。

下圖是 Bodymovin 導(dǎo)出時(shí)設(shè)置的勾選注意事項(xiàng)，設(shè)置后指定文件夾渲染導(dǎo)出即可。

在輸出 json 的時(shí)候，不一定是要有個(gè)固定的規(guī)則，具體要怎么樣輸出都可以通過跟開發(fā)商量看他們認(rèn)知到了怎樣的實(shí)現(xiàn)方式。這個(gè)登錄的項(xiàng)目也是前后導(dǎo)出了不同形式的 json ，最先是每一段動(dòng)作導(dǎo)出一個(gè) json，一共四段，開發(fā)嘗試之后實(shí)現(xiàn)比較麻煩，覺得還是需要輸出一整個(gè)連貫的動(dòng)作，且動(dòng)作之間不必做任何時(shí)間停留，他們可以對(duì) json 監(jiān)控，在動(dòng)畫暫停處加入交互動(dòng)作，最終形成一套完整的交互行為。

json 有個(gè)很大的優(yōu)點(diǎn)是如果動(dòng)畫是整屏他可以適配屏幕大小。