本文主要講述了為什么做動效，好的動效設(shè)計的標(biāo)準(zhǔn)是什么，如何做動效設(shè)計，以及如何使自己設(shè)計的動效完美落地。

看完本文你會學(xué)到：

1. 為什么需要動效設(shè)計？

• 什么是動效設(shè)計？
• 動效在產(chǎn)品設(shè)計的作用
• 動效設(shè)計的好標(biāo)準(zhǔn)

2. 如何設(shè)計動效？

• 6個構(gòu)思動效的方法
• 6個實(shí)現(xiàn)動效的方法

3. 動效的類別

4. 常用的動效軟件

5. 讓動效落地的4個方法

為什么需要設(shè)計動效？

我最開始接觸動效設(shè)計，只是覺得又炫，又酷，翻滾的，旋轉(zhuǎn)的，爆炸的。只是覺得新鮮，好玩，可以炫技?？梢宰屧O(shè)計更加酷炫?？赡艽蟛糠滞瑢W(xué)，在做剛開始接觸的時候多多少少都會有和我差不多的想法。這就是我們做動效設(shè)計的目的嗎？應(yīng)該不是。

解決為什么要做動效設(shè)計這個問題，就要搞清楚什么是動效設(shè)計？動效設(shè)計有什么作用？

1. 什么是動效設(shè)計呢？

動效大范圍興起，大概始于扁平化設(shè)計之后，扁平化設(shè)計的好處在于用戶的注意力可以集中在界面的核心信息上，將對用戶無效的設(shè)計元素去掉，不被設(shè)計所打擾分散注意力，使用體驗(yàn)更加純粹自然。這個思路是對的，回歸了產(chǎn)品設(shè)計的本質(zhì)，就是提供更好的使用體驗(yàn)，而不是提供更漂亮的界面設(shè)計。但是，過于扁平化的設(shè)計，也帶來了新的問題，一些復(fù)雜層級關(guān)系如何展現(xiàn)？用戶如何被引導(dǎo)和吸引？這與用戶在現(xiàn)實(shí)3D世界中的自然感受很不一致。所以Google推出了Material Design設(shè)計語言。

Material design 設(shè)計規(guī)范中，將動效設(shè)計這一章命名為「Animation」，動畫，活潑的意思。

動詞 Animate 是「賦予生命」的意思，動效可以定義為使用類似動畫的手法，賦予界面生命和活力。

前面我們說過Material design設(shè)計語言，一部分作用是為了解決過于扁平化設(shè)計所帶來的弊端，復(fù)雜層級關(guān)系如何展現(xiàn)，用戶如何被引導(dǎo)和代入。為了解決這個問題，Material design 設(shè)計風(fēng)格，充分利用Z軸，通過分層設(shè)計以及動效相配合的方式，在扁平化基礎(chǔ)上提供給用戶更好理解的層級關(guān)系，賦予設(shè)計以情感增加用戶使用過程中的參與度。

2. 動效設(shè)計對于產(chǎn)品設(shè)計有什么作用？

動效設(shè)計的作用

如上圖所示，動效對于產(chǎn)品設(shè)計的作用包含：

• 傳遞層級信息 ；
• 傳遞狀態(tài)信息；
• 提示隱藏信息功能；
• 傳遞情感化信息。

知道了這些，那么，我們?yōu)槭裁葱枰獎有гO(shè)計？

通過上面說的，結(jié)合我們自身產(chǎn)品設(shè)計的特性，我們可以總結(jié)出動效設(shè)計的動機(jī)主要有如下幾點(diǎn)：

• 使等待不枯燥；
• 使變化不生硬；
• 使反饋不單調(diào)；
• 使體驗(yàn)有情感；
• 使用戶更愉悅。

好的動效是什么?

知道為什么做動效設(shè)計，那我們應(yīng)該做什么樣的動效設(shè)計？或者說好的動效設(shè)計是什么呢？是炫酷的，翻滾的，旋轉(zhuǎn)的，爆炸的嗎? 復(fù)雜程度是評判好與壞的標(biāo)準(zhǔn)嗎？

國外一位著名的一線設(shè)計師，曾經(jīng)在分享會上對于好的動效下過這樣一個定義：

好的動效應(yīng)該是隱形的，好的動效應(yīng)該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機(jī)制。

這句話其實(shí)就是，好的動效設(shè)計是合適的，是對于用戶使用體驗(yàn)的提升，最終服務(wù)的是體驗(yàn)而不是展示你的動畫設(shè)計。

既然如此 ，那么讓我們總結(jié)一下好的動效設(shè)計的標(biāo)準(zhǔn)。

首先要具備一下幾點(diǎn)特性：

• 快速且流暢；
• 恰到好處的反饋；
• 提升操作感受；
• 提供良好的視覺效果。

動效設(shè)計標(biāo)準(zhǔn)

其次，好的動效設(shè)計應(yīng)該是首先服務(wù)于體驗(yàn)，其次適當(dāng)設(shè)計（考慮全面，如性能，實(shí)現(xiàn)成本，是否干擾用戶等），再次就是要讓用戶感受到你輸出的情感互動，最后也是最基本的就是要具有視覺上的美感。

怎樣設(shè)計動效？

知道了什么是好的動效設(shè)計，那么就引申出下一個問題，我們怎么進(jìn)行動效設(shè)計？ 或者說，動效設(shè)計該如何入手，尤其是初學(xué)者？

很簡單，就兩步：

• 先要有一個構(gòu)思，想法；
• 根據(jù)想法進(jìn)行豐滿實(shí)現(xiàn)。

沒有想法？想法怎么來？怎么構(gòu)思？從我自身總結(jié)，可以從這6個方面進(jìn)行構(gòu)思：

動效靈感來源

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

要結(jié)合產(chǎn)品進(jìn)行思考，思路設(shè)計要符合提升的產(chǎn)品體驗(yàn)，要經(jīng)過細(xì)致思考不要盲目。

2. 了解基本常識

這些常識包含，動效設(shè)計的基本常識（如，基本的運(yùn)動規(guī)律，節(jié)奏，動畫如何），開發(fā)的基本常識，什么樣子的動效果大概如何實(shí)現(xiàn)，實(shí)現(xiàn)成本大概是多少。確保能夠順利落地。

3. 觀察生活

人們對于美的認(rèn)知，大部分來自于日常的生活經(jīng)歷。比如什么樣的運(yùn)動是溫柔地，激烈的，具有震撼性的。當(dāng)我們對于我們需要構(gòu)思的動效有性質(zhì)定位的時候，可以從生活中這些相同的，定性的自然事物中尋找靈感，截取精華。

4. 看并思考

就是除了觀察生活，我們還需要多看一些優(yōu)秀的動效設(shè)計，時刻作為積累。同時，也需要對于「看」的事物進(jìn)行細(xì)致思考。要思考他為什么這么設(shè)計，怎么完成這套動畫設(shè)計的（是通過那些技巧構(gòu)成這個動效設(shè)計的，整體節(jié)奏是怎樣的一種感覺）。時刻與自己對類似事物的想法進(jìn)行對比，找差距，補(bǔ)不足。這就是經(jīng)驗(yàn)技巧積累的過程。

5. 學(xué)會拆解

web，app中大部分的動效設(shè)計，都是通過基本的變化組合而成的。我們要通過多看多觀察，慢慢學(xué)會怎么去拆解別人復(fù)雜的動效設(shè)計，從中總結(jié)經(jīng)驗(yàn)。而后，通過合理的編排設(shè)計出自己的動效設(shè)計，你就是這場動效設(shè)計的導(dǎo)演。

6. 關(guān)注流行

這個很簡單，就是大家要保持對于設(shè)計行業(yè)，或者說是web，app動效設(shè)計領(lǐng)域的關(guān)注。了解當(dāng)下新的設(shè)計手法，設(shè)計趨勢以及設(shè)計方式。不要做一個落伍者，也不要把自己永遠(yuǎn)定義為一個跟隨者。

前面我們說大部分我們在web&app中看到的動效設(shè)計，都是由一些基本的變化組合而成的，那這些基礎(chǔ)變化是什么呢？（見下圖）

動畫的基礎(chǔ)變化

基礎(chǔ)變化主要包含：移動，旋轉(zhuǎn)，縮放以及屬性變化。前面幾點(diǎn)都很好理解，在此就不在詳細(xì)解釋。解釋一下最后一個屬性變化，它其實(shí)就是指透明度，形狀，顏色等這些屬性的變化。所有的這些變化形式，經(jīng)過合理的編排在配合上合適的運(yùn)動節(jié)奏，就是一個完整的動效設(shè)計。

簡單來說就是：你要確定你要發(fā)生什么樣的運(yùn)動，這個運(yùn)動要以何種節(jié)奏運(yùn)動。貝塞爾曲線，就是將速度與時間的關(guān)系，用圖形的形式展現(xiàn)出來，使其表意更直觀。

變化節(jié)奏

上圖就是一些常見的貝塞爾曲線，右邊就是我們在AE設(shè)計過程中，運(yùn)動曲線調(diào)節(jié)界面。

為什么運(yùn)動需要配合合適的節(jié)奏呢？

因?yàn)樽匀唤缰羞\(yùn)動都不是線性的勻速運(yùn)動，而是按照物理規(guī)律，呈現(xiàn)出的曲線的變速運(yùn)動。這就是之前說的基本常識，基本規(guī)律。人們對于一個運(yùn)動形式產(chǎn)生的情感反饋，大部分也來自于生活中看到的類似的運(yùn)動形式。所以我們要符合物理規(guī)律，這樣才能準(zhǔn)確的專遞我們動效設(shè)計的情感。當(dāng)然可以適當(dāng)根據(jù)需要夸張，精簡。規(guī)矩是死的人是活的。活學(xué)活用。

http://easings.net這個網(wǎng)站上歸結(jié)了基本全部運(yùn)動形式的貝塞爾曲線，并且有預(yù)覽。還能直接使用js代碼，很方便，很直觀。

說了如何構(gòu)思，接下來就要想想怎么實(shí)現(xiàn)你的想法：

實(shí)現(xiàn)動效設(shè)計

如上圖所示：

實(shí)現(xiàn)想法基本就是技術(shù)與技巧的問題，這需要學(xué)習(xí)與積累，怎么學(xué)習(xí)積累呢？

1. ?動手嘗試，熟能生巧

不斷嘗試才能不斷鍛煉自己的技術(shù)技巧。只有嘗試了才能真的驗(yàn)證你的設(shè)計。

2. 臨摹作品

學(xué)習(xí)任何東西，尤其是設(shè)計這個行當(dāng)。臨摹都是很有效的入門辦法，之前的寫實(shí)圖標(biāo)，現(xiàn)在的動效設(shè)計都是如此。臨摹的過程其實(shí)就是你與優(yōu)秀設(shè)計者交流的過程，從中你能仔細(xì)了解和學(xué)習(xí)他的設(shè)計思路手法，也能在臨摹過程中對于原有設(shè)計手法結(jié)合自身經(jīng)驗(yàn)進(jìn)行優(yōu)化升級，是很好的提升技巧的方法。

3. 注重細(xì)節(jié)

這個很簡單，就和做單純的視覺設(shè)計一樣，一定要注意細(xì)節(jié)，細(xì)節(jié)決定成敗，尤其是動效設(shè)計。要認(rèn)真，多想，想全面。

4. 有節(jié)奏感

這個前面說過。要讓你的作品有活力不死板，才能賦予產(chǎn)品以新的活力。

5. 先加后減

在實(shí)現(xiàn)過程中你一定是要不斷的豐富你的原有設(shè)計想法的，當(dāng)你不太明確如何豐富自己的設(shè)計，或者，不太清楚使用何種技巧達(dá)到自己設(shè)想的感覺時?？梢韵葒L試看哪些地方可以動態(tài)化?？梢赃@樣運(yùn)動是否可以那樣運(yùn)動，制造出可能性，制造出突破。而后，在這些可能性和突破后進(jìn)行減法，去除多余保留精華。

6. 搜索引擎

有問題我建議大家盡量使用搜索引擎，善用搜索引擎基本可以解決你遇到的95%的問題。重要的是，自己去尋找解決問題的辦法，你可以記憶的更加深刻系統(tǒng)。你還可以掌握解決問題的辦法。

動效有那些類別？

我們可以把現(xiàn)在的動效設(shè)計粗略的分為兩個大類：

1. 功能性動效（如下圖）

此種動效設(shè)計多適用于產(chǎn)品設(shè)計，也是本文中主要陳述的內(nèi)容。

功能性動效（此圖來自網(wǎng)絡(luò)采集非作者原創(chuàng)）

2. 展示型動效果（如下圖）

這些動效設(shè)計，相對來說復(fù)雜，實(shí)際應(yīng)用中比較少?；居糜谝恍┱故拘缘膭有гO(shè)計，也不能用我們哪些基本運(yùn)動規(guī)律去很好的嵌套（不是不能嵌套，是太復(fù)雜），他們實(shí)現(xiàn)一般是通過AE插件進(jìn)行實(shí)現(xiàn)的，插件也不是很難，有專門的插件網(wǎng)站，大家有興趣可以去研究，一般插件都是英文的。

展示型動效（此圖來自網(wǎng)絡(luò)采集非作者原創(chuàng)）

用什么軟件做動效設(shè)計？

動效設(shè)計所用軟件

簡單給大家介紹幾個常用個制作軟件，制作動效，比較頭疼的就是時間成本問題。這幾個軟件各有特點(diǎn)：

• AE：全能選手，幾乎可以制作任何你想要的效果，但是操作相對復(fù)雜時間成本較高。
• Principle：操作簡單，效率高。適合制作快速展示用的demo或一些簡單的動效設(shè)計。
• Hype3：介于AE 與 Principle之間。是近年來新興起的動畫設(shè)計軟件，可以直接生成代碼，配合sketch使用效率極高。

大家可以在工作中根據(jù)實(shí)際情況酌情使用。

動效設(shè)計如何落地？

前面講了為什么做，什么是好的，怎么做。接下來就要說說我們?nèi)绾螌⑽覀冑M(fèi)盡心機(jī)的設(shè)計最終完美落地。

基本上就是你和開發(fā)怎么在動效設(shè)計這塊，高效配合。普遍做法就是口述+例子?；鞠喈?dāng)于我們用中文與一個日本人用日語在一起手舞足蹈的交流，只能傳達(dá)大意，絕大多數(shù)是有偏差，而且成本比較大，很多時候彼此都不懂。

我們需要告別通信基本靠吼，如何才能讓開發(fā)愛上動效設(shè)計呢？

自己簡單總結(jié)了一下幾個要點(diǎn)：

動效落地

1. ?專業(yè)的設(shè)計產(chǎn)出

若要讓開發(fā)信服你，首先我們自己在我們本職的事情上要做到專業(yè)。希望有一個靠譜的開發(fā)，首先自己要成為一名靠譜的設(shè)計師。比如我們希望開發(fā)精確到像素級別，那我們提供的產(chǎn)出起碼要先精確到像素級別，同理心，專業(yè)性。

2. 良好的前期溝通

在設(shè)計之初一定要多和開發(fā)溝通，知道自己做的時間成本是否允許。目前技術(shù)條件是否有坑。就是確定你的方案基本可行，再開始開發(fā)設(shè)計。一句話，讓開發(fā)先知道你要做什么，在他眼里怎么看待這件事的實(shí)現(xiàn)成本，畢竟他們是最終代碼產(chǎn)出者，避免工作白費(fèi)。

3. 了解基本實(shí)現(xiàn)原理

自己要學(xué)習(xí)了解一些基本的實(shí)現(xiàn)原理，邏輯。這樣你做的時候能夠更有根據(jù)，知道什么好做，什么難做，什么目前此平臺暫時達(dá)不到你的目的。這樣可以更好地控制動效設(shè)計的節(jié)奏，和最終落地。有時候也能幫助開發(fā)思考這個動畫設(shè)計該以怎樣的邏輯實(shí)現(xiàn)，因?yàn)槟闶莿有У脑O(shè)計者，你更清楚這個動效里面有哪些變化，哪些步驟。

4. 具象的闡述動效設(shè)計

就是讓開發(fā)形象的知道你要做的什么，這個時候就需要適當(dāng)?shù)膶⒛愕膭有гO(shè)計——數(shù)據(jù)化。

（必要時輸出動效說明文檔）

那么問題來了，是所有動設(shè)計都是可以數(shù)據(jù)化的描述的嗎？

準(zhǔn)確的講我們平常web&APP設(shè)計中大部分是可以描述的。

還有一些不可描述的動效設(shè)計，他們的基本是用在品牌展示（比如logo的變化等），或者一些小的驚喜點(diǎn)，比如JD的app中l(wèi)oadinggif，是正在送貨的小人。這類的動效設(shè)計我歸結(jié)為展示型動效設(shè)計。

展示型動效設(shè)計：

展示型動效（此圖來自網(wǎng)絡(luò)采集非作者原創(chuàng)）

因?yàn)樗麄兓静淮嬖趶?fù)雜的交互，尤其在動效原件本身上，基本是滿足一定條件觸發(fā)播放，滿足一定條件觸發(fā)停止的邏輯。

他們基本實(shí)現(xiàn)方式就是輸出PNG序列，或者視頻或者GIF文件形式，所以也就不存在輸出說明文檔的問題了。

輸出視頻就要涉及到壓縮體積，下面給大家說一說怎么壓縮這類文件的體積：

AE文件壓縮

AE壓縮設(shè)置

如果你用AE做，在渲染輸出時，如圖設(shè)置。基本可以將一半的動效設(shè)計控制在幾百KB以內(nèi)，將復(fù)雜動效控制在幾M之內(nèi)。

如果還是過大，怎么辦?? 就需要壓縮軟件：

視頻壓縮軟件

HandBrake是一款強(qiáng)大的視頻壓縮軟件，可以將幾十（MB）的視頻文件在畫面幾乎無損的情況下壓縮至幾十（KB）大小。是不是很感人？? 更感人的是它還免費(fèi)。有需要的同學(xué)可以下載下來研究一下。

功能型動效設(shè)計：

功能型動效（此圖來自網(wǎng)絡(luò)采集非作者原創(chuàng)）

類似上面這種動效設(shè)計我叫他們功能型動效設(shè)計，這是我們平常工作中可能使用最多的一種動效設(shè)計。這些動效設(shè)計就需要涉及到我們前面講的動效設(shè)計數(shù)據(jù)化，輸出效果設(shè)計文檔。因?yàn)樗麄冞\(yùn)動本身會涉及到頁面中各種交互元件，以及交互操作。不能單單輸出一個視頻。需要開發(fā)使用程序控制個原件的運(yùn)動實(shí)現(xiàn)動效設(shè)計，但是如果只對開發(fā)說我要這樣一個動效設(shè)計，開發(fā)是很難理解你到底要干什么，要做到什么程度？往往還原度很低，會被開發(fā)鄙視。為了使我們的動效也能精確到像素，這個時候我們就需要進(jìn)行動效數(shù)據(jù)化就是根據(jù)實(shí)際情況適當(dāng)?shù)臅鴮憽秳有гO(shè)計文檔》。

這里說的 ，根據(jù)實(shí)際情況適當(dāng)?shù)臅鴮憽秳有гO(shè)計文檔》。為什么要加根據(jù)實(shí)際情況和適時呢？這就是時間成本問題。我們書寫這個的目的就是想要通過精確的用數(shù)字和文字傳遞一種具象的動效設(shè)計。所以動效說明文檔，只是一種可以向開發(fā)傳遞具象動效設(shè)計的方法。這個方案最終落地的形式，不需要一定是一份文檔，可以根據(jù)實(shí)際情況活學(xué)活用。

如何書寫動效設(shè)計文檔？

怎么書寫動效說明文檔呢？ 或者說我們怎么向開發(fā)具象的陳述我們的動效設(shè)計呢？我做了一張表，簡單描述了一下動效說明文檔的輸出的基本流程（見下圖）

書寫動效說明文檔流程圖

舉個例子：

以下示例為之前在某滴專車事業(yè)部所做實(shí)際項(xiàng)目。

轉(zhuǎn)場動效

動效基本參數(shù)：

• 動 畫 尺 寸: 750*1334(px)
• 幀 ? 速 ? 率: 25f/s(幀/秒)
• 動 畫 時 長: 1.0s(秒)

動效詳細(xì)說明：

（1）0f – 6f 接機(jī)頂部欄從屏幕上邊緣移入其對應(yīng)位置；Y軸位移: 128px；動畫速率: 先快后慢。

速度曲線:(截圖中時間幀不做參考)

（2）3f – 8f 背景色#edeff0，做漸顯動畫；透明度: 0%-100%；動畫速率: 勻速運(yùn)動。

（3）0f – 6f 表單下方「叫車按鈕」背景圖漸顯出現(xiàn)；透明度：0%-100%；動畫速率: 勻速運(yùn)動。

（4）2f – 8f 表單下方「叫車按鈕」整體做從下至上位移和漸顯動畫；Y軸位移：20px；透明度：0%-100%；動畫速率: 先做短暫加速運(yùn)動，后做減速運(yùn)動。

速度曲線:(截圖中時間幀不做參考)

（5）15f – 23f 接機(jī)表單卡片從距離屏幕上邊緣268px的位置向上；移動，至距離屏幕上邊緣148px的位置（設(shè)計圖中最終位置）；透明度：0%-100%；動畫速率: 先做短暫加速運(yùn)動，后做減速運(yùn)動。

速度曲線:(截圖中時間幀不做參考)

（6）17f – 25f 車型選擇卡片從距離屏幕上邊緣852px的位置向上；移動，至距離屏幕上邊緣732px的位置（設(shè)計圖中最終位置）；透明度：0%-100%；動畫速率: 先做短暫加速運(yùn)動，后做減速運(yùn)動。

速度曲線:(截圖中時間幀不做參考)

我們輸出動效說明文檔的原因是：傳遞更清晰具象，效果更可控，降低溝通成本，提高配合默契度，保證設(shè)計還原度。

寫在最后

說了這么多其實(shí)就是想盡量的告訴大家，我認(rèn)為的要怎么把設(shè)計做好。我并不覺得，現(xiàn)在我們需要做動效設(shè)計了，就該將原來的界面設(shè)計師，在分出一個動效設(shè)計師職位。真正的獨(dú)立的動效設(shè)計師需要做的，絕對不僅僅是我們產(chǎn)品設(shè)計中需要的這點(diǎn)東西。因?yàn)槲矣X得這都是界面設(shè)計師應(yīng)該輸出體驗(yàn)的一部分，只不過就現(xiàn)在而言我們又多了一種表現(xiàn)形式可以使用。設(shè)計師應(yīng)該為最終輸出的體驗(yàn)負(fù)責(zé)，就是正在被用戶使用的產(chǎn)品的體驗(yàn)，而不是為幾張漂亮的設(shè)計稿。講了這么多動效設(shè)計，動效設(shè)計難嗎？ 之前有個人和我說過一句話，我覺得挺有道理。

要對設(shè)計或者你做的產(chǎn)品，充滿愛。要帶著愛去做設(shè)計。這樣你輸出的設(shè)計才會讓用戶感受到情感。

作者：AaronCui ，Sogou-UED，公眾號：老美工聊設(shè)計

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

題圖來自 unsplash