編輯導語：用戶在使用一款產(chǎn)品時，都希望能有良好的使用體驗。出色的動效，可以使頁面之間聯(lián)系更加緊密，整體體驗更加流暢，減少用戶的負面情緒；同時，也可以增加產(chǎn)品的趣味性與品牌特色，讓用戶產(chǎn)生興趣并提高品牌認知度。接下來，本文作者就帶我們?nèi)チ私鈩有гO(shè)計。

現(xiàn)如，今動效設(shè)計在產(chǎn)品中的使用已經(jīng)十分普遍。

這也導致動效設(shè)計由早期的「魅力型因素」逐漸成為「必要型因素」，越來越多的公司和團隊已經(jīng)意識到動效在產(chǎn)品用戶體驗中的重要性，動效也逐漸成為UI設(shè)計師的基本能力之一。

一、動效是什么

動效設(shè)計，顧名思義即動態(tài)效果的設(shè)計，用戶界面上所有運動的效果，也可以視其為界面設(shè)計與動態(tài)設(shè)計的結(jié)合。

而在Material design 設(shè)計規(guī)范中，將動效設(shè)計這一章命名為「Animation」，意思是動畫，活潑的意思。好的動效設(shè)計可以幫助引導、取悅用戶，減少等待焦慮，是拉近用戶與產(chǎn)品之間距離的有效手段。

二、動效分類

動效的分類并沒有明確的界限，根據(jù)其作用大致可以分為3類：

1. 功能型動效

此類動效一般用于產(chǎn)品設(shè)計，通過動態(tài)圖形向用戶傳遞信息，其中加載/刷新和進度條應(yīng)該是我們平時接觸最多也是最早的動效了，此類動效最開始只是為了告知用戶產(chǎn)品的頁面狀態(tài)。

隨著社會上產(chǎn)品數(shù)量的快速增長以及競爭日益激烈，產(chǎn)品的有趣和差異化顯得愈發(fā)重要，于是便看到越來越多的產(chǎn)品將自己的品牌因素融入動效當中，設(shè)計也越來越生動有趣。

除了加載、刷新和進度外，功能型動效還被廣泛的運用在產(chǎn)品的其他各種狀態(tài)當中，如信息報錯、二維碼掃描等。雖然具體表現(xiàn)不同，但都是通過動態(tài)形式幫助用戶理解和使用產(chǎn)品。

2. 交互型動效

顧名思義，該類動效的核心是“交互”，其主要的作用是幫助用戶理解界面的層級邏輯關(guān)系，讓產(chǎn)品的使用更加符合現(xiàn)實生活中的認知習慣，從而降低使用成本，提升產(chǎn)品體驗。

要注意的是此類動效不能脫離用戶的認知模型，只是單純的炫酷對于整個產(chǎn)品來說是有害的。

其實交互型動效是用戶在產(chǎn)品使用中接觸最多的一種動效，因為產(chǎn)品的使用是通過不同產(chǎn)品元素串聯(lián)而完成的，而負責元素串聯(lián)的就是交互型動效。

一般可分為「單頁面交互動效」和「多頁面交互動效」。

「單頁面交互動效」：就是在當前頁面發(fā)生的交互動畫，比如tab切換、左滑刪除、二級菜單展開、返回頂部等等。

「多頁面交互動效」：就是不同頁面之間的交互動畫，其實就是頁面的跳轉(zhuǎn)，根據(jù)不同的場景會使用到不同的跳轉(zhuǎn)樣式，好的跳轉(zhuǎn)動畫能夠幫助用戶理解前后頁面的邏輯關(guān)系。

3. 展示型動效

此類動效的最大作用就是盡可能的為用戶制造視覺上的愉悅，營造活動氛圍，讓用戶覺得有趣生動，使用的場景也十分廣泛，常見的如「品牌展示」、「運營活動」、「H5營銷」等。

1）品牌展示

將有趣的動態(tài)圖形與品牌相結(jié)合，讓原本生硬的產(chǎn)品形象變得有趣生動，拉近用戶與產(chǎn)品之間的距離。

2）運營活動

動效設(shè)計同樣也可以使用在運營設(shè)計中，作為業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化的重要入口，動效可以極大的吸引用戶的注意力，從而提升業(yè)務(wù)數(shù)據(jù)。

H5營銷

從2014年開始，H5因其豐富的表現(xiàn)形式便開始逐漸走紅，每年都會有很多火遍全網(wǎng)的H5活動，如「網(wǎng)易云音樂聽歌報告」、「支付寶集五?！埂ⅰ钢Ц秾毮甓荣~單」、「穿越故宮來看你」等等。

網(wǎng)易云音樂聽歌報告

支付寶五福

支付寶年度賬單

穿越故宮來看你

三、如何設(shè)計動效

1. 結(jié)合產(chǎn)品去設(shè)計

不同的產(chǎn)品有屬于自己的產(chǎn)品調(diào)性，例如：

金融產(chǎn)品強調(diào)的是可靠理性，而手游類產(chǎn)品的重點則是炫酷有趣，二者的動效設(shè)計自然也需要貼合各自的屬性，思路設(shè)計要符合提升的產(chǎn)品體驗，要經(jīng)過細致思考不能盲目跟風。

2. 了解動畫的運動節(jié)奏

因為自然界中運動都不是線性的勻速運動，而是按照物理規(guī)律，呈現(xiàn)出的曲線的變速運動，這也是物體運動的基本常識和規(guī)律。

人們對于一個運動形式產(chǎn)生的情感反饋，大部分也來自于生活中看到的類似的運動形式。所以我們要符合物理規(guī)律，這樣才能準確的專遞我們動效設(shè)計的情感。當然可以適當根據(jù)需要夸張、精簡。

3. 多看多思考

我們還需要多看一些優(yōu)秀的動效設(shè)計作為積累，同時也需要對優(yōu)秀的動效設(shè)計進行深入思考，思考別人為什么這么設(shè)計，以及如何完成動畫設(shè)計的。

要與自己對類似事物的想法進行對比，找差距，補不足，這是經(jīng)驗技巧積累的過程。同時要學會怎么去拆解別人復(fù)雜的動效設(shè)計，從中總結(jié)經(jīng)驗，最后通過合理的編排設(shè)計出自己的動效設(shè)計作品。

4. 關(guān)注流行

就是要保持對于設(shè)計行業(yè)，或者說是APP動效設(shè)計領(lǐng)域的關(guān)注。了解當下新的設(shè)計手法，設(shè)計趨勢以及設(shè)計工具，不要做一個落伍者。

四、動效文件格式類型

常見的動效文件格式有GIF、APNG/WEBP、序列幀/精靈圖、Lottle、SVGA。

1. GIF

GIF 圖格式應(yīng)該是設(shè)計師接觸過的最多的動態(tài)格式了， 因其體積小而成像相對清晰，其在各個平臺的兼容性非常好，使得它的傳播性非常強。

當然gif格式也存在很明顯的缺陷：

1. 對電腦的內(nèi)存和性能占用非常大（根據(jù) GIF 的時間尺寸的等情況會有不同的程度的影響），作為設(shè)計師常有的一個經(jīng)驗是在網(wǎng)頁上多開幾個 GIF 之后電腦風扇就開始飚起來了。
2. 它是一個有損的文件格式，不論是色彩還是畫面質(zhì)感都會有一定程度的壓縮。
3. 對透明通道的支持非常有限，輸出結(jié)果會非常差，時常會有鋸齒或白邊的情況。以上是我們在輸出 GIF 格式的之前需要提前思考是否可以接受以上的問題。

2. APNG/WEBP

這些格式是基于現(xiàn)有的 JPEG、PNG、GIF 格式的所衍生出來的。

APNG 格式在目前主流的所有瀏覽器上都可以完美支持，在移動的設(shè)備上通過一些代碼框架也可以完美支持，它相比 GIF 支持的色彩范圍更廣，更清晰，并且占用更低的內(nèi)存，支持透明通道，有非常多的優(yōu)勢。

WEBP格式目前也基本兼容所有的主流瀏覽器，相同的效果，webp 格式要比 png 格式小出來大概一半的大小，同時它也兼容所有的安卓設(shè)備，像一些 ios 設(shè)備需要通過一定的方式才可以支持。

不過，相比來說各方面的表現(xiàn)都是非常優(yōu)秀的。

3. 序列幀/精靈圖

1）序列幀

序列幀就是將動動效的所有畫面拆分開來，形成一系列靜態(tài)的png圖片，然后通過前端代碼來控制每張png圖片出現(xiàn)的間隔時間，而且實現(xiàn)連貫的動畫效果。

序列幀是一個無損且低內(nèi)存的格式，但是它只能在客戶端環(huán)境中使用，不建議在 Web 環(huán)境中使用。

原因是序列幀一般都是隨著 App 程序包一起下載下來的，但是 Web 中每次進入一個新的網(wǎng)頁都需要重新下載。

舉個例子如果一個 60 幀的動畫就得重復(fù)向服務(wù)器請求 60 次，在這種高頻次的請求下很容易因為一個小的問題導致整個動畫無法正常播放，為了避免這種錯誤我們一般會這個 60 張圖合并為一個，并且通過代碼在指定時間內(nèi)顯示某一個區(qū)塊，所以這里我們引出另一種格式——精靈圖/雪碧圖。

2）精靈圖（又叫雪碧圖）

當我們把所有序列合并在一張圖片上往往還是不夠的，我們還需要提供給開發(fā)具體哪個時間顯示哪一部分的具體參數(shù)。

我們可以直接通過 AE 插件 CSS Sprite Exporter(By Bigxixi) 直接快速的輸出開發(fā)所需的代碼和精靈圖：

Lottie：

Lottie 可以說是近幾年在動畫輸出方面不得不提的一個格式，它由 Airbnb 推出，并且迅速在國內(nèi)外各種大小廠快速推廣開來，目前已經(jīng)是一個非常普遍常用的格式。它在 AE 中的插件叫 Bodymovin，它的原理是把各種矢量元素以及位圖圖層以及他們的效果關(guān)鍵節(jié)點打包行成一個 json 格式的文行。

開發(fā)人員拿到 Bodymovin 輸出的 json 格式是無法直接使用的，它需要在代碼中加入 Airbnb 提供的 Lottie 第三方庫來讀取播放，相當于 lottie 文件在我們各個端口設(shè)備上的播放器的作用。

ps：

1. 由于lottie不支持ae表達式，可以用插件（Easy Bake）將表達式轉(zhuǎn)為關(guān)鍵幀，這樣問題就解決了；
2. ae軟件因為漢化的原因，會導致Bodymovin插件對其中的某些屬性不支持，比如ae中如果存在顏色漸變，導出來的json文件所有的漸變會變?yōu)楹诎诐u變。

解決的辦法有兩個：一個是使用英文版ae軟件；第二個是將屬性「漸變填充1」重命名改為「Gradient Fill1」（后面的數(shù)字需與漢化版的保持一致）。

SVGA：

針對 Lottie 對緩動曲線解析差帶來的性能問題和穩(wěn)定性問題，我們會有第二種備選方案是 SVGA，不管是導出之后的內(nèi)存占用，還是在各個端的表現(xiàn)穩(wěn)定性都會好很多。

但是它的內(nèi)存占用會比 Lottie 稍高，并且支持的特性也會比 Lottie 少一些。

SVGA 與 Lottie 最本質(zhì)的區(qū)別在于代碼對動畫過程記錄的方式， Lottie基本上是按照我們在 ae 當中的關(guān)鍵幀及緩動的結(jié)合形式去記錄動畫；而 SVGA 則是通過記錄我們每一個圖層每一個時間上的動畫狀態(tài)，從而省去對緩動值的計算。

跟序列幀的邏輯非常相似，但是因為它的素材可以復(fù)用，所以會比序列幀占用更低的內(nèi)存。

基于實現(xiàn)方式，它會比 Lottie 穩(wěn)定很多，相應(yīng)的，它所支持的特性也要比 ?Lottie 少很多。

四、動效制作軟件

動效制作的軟件其實非常多，這里只介紹一些自己接觸過的主流動效軟件：

1. AE

AE是時間軸動效軟件，不支持交互操作，但幾乎可以制作任何你想要的動畫效果，但操作相對復(fù)雜時間成本較高。

2. Principle

Principle是可交互的動效軟件，主要用于交互動效Dome制作，可以制作出較為復(fù)雜效果的交互動效，操作難度相對較低。

3. Origami

Origami是一款以代碼思維進行動效制作的軟件，學習門檻較高，但可以實現(xiàn)與開發(fā)的無縫對接。

4. C4D

C4D主要針對三維動畫效果的制作，學習門檻較高。

作者：WOWdesign，研究設(shè)計價值最大化，涉及用戶體驗、品牌體驗、空間體驗。

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

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