編輯導(dǎo)語(yǔ)：隨著市場(chǎng)上出現(xiàn)了越來(lái)越多的APP，用戶對(duì)APP的要求也在不斷提高。這就要求APP在各項(xiàng)設(shè)計(jì)上都要符合用戶的需求，提升體驗(yàn)感。由此，動(dòng)態(tài)設(shè)計(jì)的重要性也大大提升，本文作者針對(duì)APP的動(dòng)效設(shè)計(jì)，從目標(biāo)到落地進(jìn)行了詳細(xì)的分析，快來(lái)一起思考學(xué)習(xí)吧。

隨著移動(dòng)互聯(lián)網(wǎng)的普及和技術(shù)的發(fā)展進(jìn)步，用戶使用到越來(lái)越多，體驗(yàn)也越來(lái)越優(yōu)秀的產(chǎn)品，對(duì)于產(chǎn)品的感知變的更加深入，挑剔程度也在變得更加嚴(yán)格。

越來(lái)越多的產(chǎn)品都在努力提升自己的產(chǎn)品體驗(yàn)，嘗試通過(guò)不同的方式來(lái)打造產(chǎn)品的差異化，動(dòng)效設(shè)計(jì)在這一過(guò)程中開(kāi)始扮演越來(lái)越重要的角色。尤其是擬物設(shè)計(jì)逐漸被摒棄之后，動(dòng)效作為模擬物理世界運(yùn)動(dòng)規(guī)律的一種形式，讓冰冷的屏幕更接近真實(shí)世界的觸感。

動(dòng)效設(shè)計(jì)作為一種設(shè)計(jì)師必備的技能，越來(lái)越被重視。

接下來(lái)通過(guò)動(dòng)效設(shè)計(jì)的分類、目標(biāo)、原則、落地實(shí)現(xiàn)這幾個(gè)方便來(lái)系統(tǒng)性跟大家聊聊，并結(jié)合工作中的一些真實(shí)項(xiàng)目，讓大家了解動(dòng)效的原理以及我們圍繞動(dòng)效在產(chǎn)品的整個(gè)生命周期中可以做哪些事情。

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

互聯(lián)網(wǎng)產(chǎn)品的動(dòng)效，從整體上來(lái)說(shuō)可分為兩種：交互動(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)效是一類比較常見(jiàn)的動(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í)具體登錄信息通過(guò)不透明度動(dòng)畫出現(xiàn)，同一輛車在兩個(gè)場(chǎng)景之間運(yùn)動(dòng)，車用戶會(huì)清晰地感知到這兩個(gè)場(chǎng)景之間的強(qiáng)關(guān)聯(lián)，過(guò)渡也很自然。

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

導(dǎo)航動(dòng)效也是見(jiàn)的比較多的一類，Path是最早開(kāi)始嘗試這種創(chuàng)新的交互形式的，把不同的功能收納在“+”中，點(diǎn)擊“+”這些圖標(biāo)會(huì)旋轉(zhuǎn)著彈出，提高操作效率的同時(shí)又可以給用戶帶來(lái)操作的愉悅感，設(shè)計(jì)者的用心用戶還是能夠充分感受到的。

隨著底部菜單欄中被加入更多的功能，現(xiàn)在這種形式被用的越來(lái)越少了，但他仍然還是有很大的使用空間和借鑒意義。

（此圖片來(lái)源于網(wǎng)絡(luò)）

3. 加載動(dòng)效

由于網(wǎng)絡(luò)等原因在數(shù)據(jù)傳輸過(guò)程中無(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ì)不是很多，通過(guò)展示表達(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)擊量，比如常見(jiàn)的金剛區(qū)圖標(biāo)加上MG動(dòng)畫以后，引導(dǎo)用戶點(diǎn)擊。

6. 反饋動(dòng)效

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

（此圖片來(lái)源于網(wǎng)絡(luò)）

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

動(dòng)效設(shè)計(jì)作為設(shè)計(jì)手段之一，有靜態(tài)頁(yè)面無(wú)法做到的優(yōu)勢(shì)，存在的意義必然是為了提升體驗(yàn)；而過(guò)多過(guò)于復(fù)雜的動(dòng)效設(shè)計(jì)就顯得不合時(shí)宜，非但達(dá)不到預(yù)期目標(biāo)，還會(huì)降低用戶體驗(yàn)，拉低產(chǎn)品品牌印象。

所以在動(dòng)效的使用時(shí)要克制，避免讓頁(yè)面的重心產(chǎn)生偏差，把用戶引到不必要的地方，或者產(chǎn)生過(guò)度設(shè)計(jì)，徒增用戶使用負(fù)擔(dān)。

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

1. 必要性

在考慮動(dòng)效時(shí)往往會(huì)不自覺(jué)地想加入盡可能多的動(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)目做過(guò)的一次動(dòng)效，當(dāng)時(shí)考慮給通知做一個(gè)動(dòng)效，引導(dǎo)用戶關(guān)注從而提升通知的打開(kāi)率。其實(shí)通知的內(nèi)容權(quán)重在當(dāng)前頁(yè)面中并不大，沒(méi)有必要給他做很強(qiáng)的內(nèi)容引導(dǎo)，讓用戶點(diǎn)進(jìn)去通知里面之后并沒(méi)有很強(qiáng)的業(yè)務(wù)屬性。

這就是沒(méi)有站在全局的角度思考，沒(méi)有遵守必要性原則。

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ù)雜性、視覺(jué)的重心、開(kāi)發(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ì)一些使用過(guò)程的負(fù)面情緒更加包容。

比如下面這個(gè)服務(wù)評(píng)價(jià)頁(yè)面，當(dāng)乘客體驗(yàn)不友好給出差評(píng)時(shí)，用憨厚可愛(ài)的動(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)說(shuō)的產(chǎn)品目標(biāo)是什么？

動(dòng)效設(shè)計(jì)的目標(biāo)可分為業(yè)務(wù)目標(biāo)和體驗(yàn)?zāi)繕?biāo)兩個(gè)方向，如上圖所列。比如對(duì)產(chǎn)品來(lái)說(shuō)，很多場(chǎng)景做動(dòng)效設(shè)計(jì)是為了引導(dǎo)用戶操作。同樣是服務(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ù)流程。

四、產(chǎn)品開(kāi)發(fā)的什么階段開(kāi)始動(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)效而言，比如常見(jiàn)的金剛區(qū)圖標(biāo)加上MG動(dòng)畫以后，引導(dǎo)用戶關(guān)注，提升某個(gè)業(yè)務(wù)場(chǎng)景的點(diǎn)擊量，或者點(diǎn)贊動(dòng)畫這一類。

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

接下來(lái)通過(guò)一個(gè)具體的項(xiàng)目案例來(lái)加以說(shuō)明。

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

挖掘到了用戶需求然后確定產(chǎn)品目標(biāo)為縮短此場(chǎng)景的用戶路徑，就開(kāi)始思考可能的交互策略，下面這個(gè)交互方案便從這個(gè)場(chǎng)景切入：

用戶從視頻廣場(chǎng)信息流左滑時(shí)直接進(jìn)入作者的作品列表信息流頁(yè)面，而且從當(dāng)前瀏覽的那條視頻開(kāi)始，可上下滑動(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)知格局。

不再只是從單一角度思考問(wè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)依次說(shuō)下這幾種方式的優(yōu)缺點(diǎn)和需要注意的地方。

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

大部分交互動(dòng)效還是需要開(kāi)發(fā)老哥哥們通過(guò)代碼實(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)擊展開(kāi)和點(diǎn)擊收起，需要清晰的標(biāo)注出每一個(gè)元素的運(yùn)動(dòng)屬性以及時(shí)間。

AE插件Flow可導(dǎo)出貝塞爾曲線數(shù)值，貝塞爾曲線數(shù)值就是兩個(gè)坐標(biāo)值，分別代表運(yùn)動(dòng)速率曲線的兩個(gè)手柄的坐標(biāo)，通過(guò)這兩個(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)說(shuō)很好的解決了顏色的支持?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)過(guò)幾個(gè)版本迭代，目前已經(jīng)比較穩(wěn)定，所有主流的瀏覽器都可以支持，在移動(dòng)應(yīng)用上對(duì)安卓支持比較好，iOS應(yīng)用通過(guò)一些代碼框架也可以完美支持。

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，沒(méi)有操作學(xué)習(xí)成本，直接可上手。

4. JSON

Lottie，是 Airbnb 開(kāi)發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開(kāi)源工具。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)就是幫助開(kāi)發(fā)者和設(shè)計(jì)師能夠更輕松的為應(yīng)用創(chuàng)建動(dòng)畫。

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

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

（由于圖片大小限制，已對(duì)效果做加速播放處理）

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

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

在輸出json的時(shí)候，不一定是要有個(gè)固定的規(guī)則，具體要怎么樣輸出都可以通過(guò)跟開(kāi)發(fā)商量看他們認(rèn)知到了怎樣的實(shí)現(xiàn)方式。

這個(gè)登錄的項(xiàng)目也是前后導(dǎo)出了不同形式的json，最先是每一段動(dòng)作導(dǎo)出一個(gè)json，一共四段，開(kāi)發(fā)嘗試之后實(shí)現(xiàn)比較麻煩，覺(jué)得還是需要輸出一整個(gè)連貫的動(dòng)作，且動(dòng)作之間不必做任何時(shí)間停留。他們可以對(duì)json監(jiān)控，在動(dòng)畫暫停處加入交互動(dòng)作，最終形成一套完整的交互行為。

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

5. MP4

有些時(shí)長(zhǎng)較長(zhǎng)的大型動(dòng)畫用以上幾種方式都不合適，就需要用視頻格式了，視頻也是被廣泛兼容的格式，再經(jīng)過(guò)壓縮后文件也不至于過(guò)大，視頻也是一種有損的輸出格式且對(duì)透明通道的支持不好，一般不選用此格式。

AE直接導(dǎo)出的視頻文件非常大，給大家推薦一個(gè)視頻壓縮的軟件Total Video Converter，非常好用提供了很多輸出格式，一般選常用的MP4格式。

最后我們要根據(jù)動(dòng)效的特點(diǎn)，來(lái)決定具體要用哪一種輸出方式。在選擇輸出方式時(shí)，往往方法不是唯一的，具體用哪種方法可以跟配合的開(kāi)發(fā)老哥哥們協(xié)同商定，大家形成統(tǒng)一習(xí)慣時(shí)，輸出就會(huì)很默契和高效了。

下圖對(duì)這幾種輸出方式的優(yōu)缺點(diǎn)做下對(duì)比：

一個(gè)小小的動(dòng)效，我們也要從全局角度出發(fā)，找到價(jià)值的源頭，呈現(xiàn)完美的解決方案。當(dāng)然動(dòng)效設(shè)計(jì)的意義遠(yuǎn)非如此，本篇文章的表述也只是從一些局限性角度，更多動(dòng)效的價(jià)值和意義期待和大家一起探索。

希望這篇簡(jiǎn)短的文章，能夠?qū)ζ聊磺罢谔剿髟O(shè)計(jì)奧秘的你有些許幫助～

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

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