起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識全方位科普手冊：產品的動效設計
本文主要講述了為什么做動效，好的動效設計的標準是什么，如何做動效設計，以及如何使自己設計的動效完美落地。
看完本文你會學到：
1. 為什么需要動效設計？
- 什么是動效設計？
- 動效在產品設計的作用
- 動效設計的好標準
2. 如何設計動效？
- 6個構思動效的方法
- 6個實現動效的方法
3. 動效的類別
4. 常用的動效軟件
5. 讓動效落地的4個方法
為什么需要設計動效？
我最開始接觸動效設計，只是覺得又炫，又酷，翻滾的，旋轉的，爆炸的。只是覺得新鮮，好玩，可以炫技。可以讓設計更加酷炫?？赡艽蟛糠滞瑢W，在做剛開始接觸的時候多多少少都會有和我差不多的想法。這就是我們做動效設計的目的嗎？應該不是。
解決為什么要做動效設計這個問題，就要搞清楚什么是動效設計？動效設計有什么作用？
1. 什么是動效設計呢？
動效大范圍興起，大概始于扁平化設計之后，扁平化設計的好處在于用戶的注意力可以集中在界面的核心信息上，將對用戶無效的設計元素去掉，不被設計所打擾分散注意力，使用體驗更加純粹自然。這個思路是對的，回歸了產品設計的本質，就是提供更好的使用體驗，而不是提供更漂亮的界面設計。但是，過于扁平化的設計，也帶來了新的問題，一些復雜層級關系如何展現？用戶如何被引導和吸引？這與用戶在現實3D世界中的自然感受很不一致。所以Google推出了Material Design設計語言。
Material design 設計規范中，將動效設計這一章命名為「Animation」，動畫，活潑的意思。
動詞 Animate 是「賦予生命」的意思，動效可以定義為使用類似動畫的手法，賦予界面生命和活力。
前面我們說過Material design設計語言，一部分作用是為了解決過于扁平化設計所帶來的弊端，復雜層級關系如何展現，用戶如何被引導和代入。為了解決這個問題，Material design 設計風格，充分利用Z軸，通過分層設計以及動效相配合的方式，在扁平化基礎上提供給用戶更好理解的層級關系，賦予設計以情感增加用戶使用過程中的參與度。
2. 動效設計對于產品設計有什么作用？
動效設計的作用
如上圖所示，動效對于產品設計的作用包含：
- 傳遞層級信息 ；
- 傳遞狀態信息；
- 提示隱藏信息功能；
- 傳遞情感化信息。
知道了這些，那么，我們為什么需要動效設計？
通過上面說的，結合我們自身產品設計的特性，我們可以總結出動效設計的動機主要有如下幾點：
- 使等待不枯燥；
- 使變化不生硬；
- 使反饋不單調；
- 使體驗有情感；
- 使用戶更愉悅。
好的動效是什么?
知道為什么做動效設計，那我們應該做什么樣的動效設計？或者說好的動效設計是什么呢？是炫酷的，翻滾的，旋轉的，爆炸的嗎? 復雜程度是評判好與壞的標準嗎？
國外一位著名的一線設計師，曾經在分享會上對于好的動效下過這樣一個定義：
好的動效應該是隱形的，好的動效應該是以提高可用性為前提，并且以令人覺得自然含蓄的方式提供有效用戶反饋的一種機制。
這句話其實就是，好的動效設計是合適的，是對于用戶使用體驗的提升，最終服務的是體驗而不是展示你的動畫設計。
既然如此 ，那么讓我們總結一下好的動效設計的標準。
首先要具備一下幾點特性：
- 快速且流暢；
- 恰到好處的反饋；
- 提升操作感受；
- 提供良好的視覺效果。
動效設計標準
其次，好的動效設計應該是首先服務于體驗，其次適當設計（考慮全面，如性能，實現成本，是否干擾用戶等），再次就是要讓用戶感受到你輸出的情感互動，最后也是最基本的就是要具有視覺上的美感。
怎樣設計動效？
知道了什么是好的動效設計，那么就引申出下一個問題，我們怎么進行動效設計？ 或者說，動效設計該如何入手，尤其是初學者？
很簡單，就兩步：
- 先要有一個構思，想法；
- 根據想法進行豐滿實現。
沒有想法？想法怎么來？怎么構思？從我自身總結，可以從這6個方面進行構思：
動效靈感來源
1. 結合產品去設計
要結合產品進行思考，思路設計要符合提升的產品體驗，要經過細致思考不要盲目。
2. 了解基本常識
這些常識包含，動效設計的基本常識（如，基本的運動規律，節奏，動畫如何），開發的基本常識，什么樣子的動效果大概如何實現，實現成本大概是多少。確保能夠順利落地。
3. 觀察生活
人們對于美的認知，大部分來自于日常的生活經歷。比如什么樣的運動是溫柔地，激烈的，具有震撼性的。當我們對于我們需要構思的動效有性質定位的時候，可以從生活中這些相同的，定性的自然事物中尋找靈感，截取精華。
4. 看并思考
就是除了觀察生活，我們還需要多看一些優秀的動效設計，時刻作為積累。同時，也需要對于「看」的事物進行細致思考。要思考他為什么這么設計，怎么完成這套動畫設計的（是通過那些技巧構成這個動效設計的，整體節奏是怎樣的一種感覺）。時刻與自己對類似事物的想法進行對比，找差距，補不足。這就是經驗技巧積累的過程。
5. 學會拆解
web，app中大部分的動效設計，都是通過基本的變化組合而成的。我們要通過多看多觀察，慢慢學會怎么去拆解別人復雜的動效設計，從中總結經驗。而后，通過合理的編排設計出自己的動效設計，你就是這場動效設計的導演。
6. 關注流行
這個很簡單，就是大家要保持對于設計行業，或者說是web，app動效設計領域的關注。了解當下新的設計手法，設計趨勢以及設計方式。不要做一個落伍者，也不要把自己永遠定義為一個跟隨者。
前面我們說大部分我們在web&app中看到的動效設計，都是由一些基本的變化組合而成的，那這些基礎變化是什么呢？（見下圖）
動畫的基礎變化
基礎變化主要包含：移動，旋轉，縮放以及屬性變化。前面幾點都很好理解，在此就不在詳細解釋。解釋一下最后一個屬性變化，它其實就是指透明度，形狀，顏色等這些屬性的變化。所有的這些變化形式，經過合理的編排在配合上合適的運動節奏，就是一個完整的動效設計。
簡單來說就是：你要確定你要發生什么樣的運動，這個運動要以何種節奏運動。貝塞爾曲線，就是將速度與時間的關系，用圖形的形式展現出來，使其表意更直觀。
變化節奏
上圖就是一些常見的貝塞爾曲線，右邊就是我們在AE設計過程中，運動曲線調節界面。
為什么運動需要配合合適的節奏呢？
因為自然界中運動都不是線性的勻速運動，而是按照物理規律，呈現出的曲線的變速運動。這就是之前說的基本常識，基本規律。人們對于一個運動形式產生的情感反饋，大部分也來自于生活中看到的類似的運動形式。所以我們要符合物理規律，這樣才能準確的專遞我們動效設計的情感。當然可以適當根據需要夸張，精簡。規矩是死的人是活的?；顚W活用。
http://easings.net這個網站上歸結了基本全部運動形式的貝塞爾曲線，并且有預覽。還能直接使用js代碼，很方便，很直觀。
說了如何構思，接下來就要想想怎么實現你的想法：
實現動效設計
如上圖所示：
實現想法基本就是技術與技巧的問題，這需要學習與積累，怎么學習積累呢？
1. ?動手嘗試，熟能生巧
不斷嘗試才能不斷鍛煉自己的技術技巧。只有嘗試了才能真的驗證你的設計。
2. 臨摹作品
學習任何東西，尤其是設計這個行當。臨摹都是很有效的入門辦法，之前的寫實圖標，現在的動效設計都是如此。臨摹的過程其實就是你與優秀設計者交流的過程，從中你能仔細了解和學習他的設計思路手法，也能在臨摹過程中對于原有設計手法結合自身經驗進行優化升級，是很好的提升技巧的方法。
3. 注重細節
這個很簡單，就和做單純的視覺設計一樣，一定要注意細節，細節決定成敗，尤其是動效設計。要認真，多想，想全面。
4. 有節奏感
這個前面說過。要讓你的作品有活力不死板，才能賦予產品以新的活力。
5. 先加后減
在實現過程中你一定是要不斷的豐富你的原有設計想法的，當你不太明確如何豐富自己的設計，或者，不太清楚使用何種技巧達到自己設想的感覺時?？梢韵葒L試看哪些地方可以動態化?？梢赃@樣運動是否可以那樣運動，制造出可能性，制造出突破。而后，在這些可能性和突破后進行減法，去除多余保留精華。
6. 搜索引擎
有問題我建議大家盡量使用搜索引擎，善用搜索引擎基本可以解決你遇到的95%的問題。重要的是，自己去尋找解決問題的辦法，你可以記憶的更加深刻系統。你還可以掌握解決問題的辦法。
動效有那些類別？
我們可以把現在的動效設計粗略的分為兩個大類：
1. 功能性動效（如下圖）
此種動效設計多適用于產品設計，也是本文中主要陳述的內容。
功能性動效（此圖來自網絡采集非作者原創）
2. 展示型動效果（如下圖）
這些動效設計，相對來說復雜，實際應用中比較少?；居糜谝恍┱故拘缘膭有гO計，也不能用我們哪些基本運動規律去很好的嵌套（不是不能嵌套，是太復雜），他們實現一般是通過AE插件進行實現的，插件也不是很難，有專門的插件網站，大家有興趣可以去研究，一般插件都是英文的。
展示型動效（此圖來自網絡采集非作者原創）
用什么軟件做動效設計？
動效設計所用軟件
簡單給大家介紹幾個常用個制作軟件，制作動效，比較頭疼的就是時間成本問題。這幾個軟件各有特點：
- AE：全能選手，幾乎可以制作任何你想要的效果，但是操作相對復雜時間成本較高。
- Principle：操作簡單，效率高。適合制作快速展示用的demo或一些簡單的動效設計。
- Hype3：介于AE 與 Principle之間。是近年來新興起的動畫設計軟件，可以直接生成代碼，配合sketch使用效率極高。
大家可以在工作中根據實際情況酌情使用。
動效設計如何落地？
前面講了為什么做，什么是好的，怎么做。接下來就要說說我們如何將我們費盡心機的設計最終完美落地。
基本上就是你和開發怎么在動效設計這塊，高效配合。普遍做法就是口述+例子?；鞠喈斢谖覀冇弥形呐c一個日本人用日語在一起手舞足蹈的交流，只能傳達大意，絕大多數是有偏差，而且成本比較大，很多時候彼此都不懂。
我們需要告別通信基本靠吼，如何才能讓開發愛上動效設計呢？
自己簡單總結了一下幾個要點：
動效落地
1. ?專業的設計產出
若要讓開發信服你，首先我們自己在我們本職的事情上要做到專業。希望有一個靠譜的開發，首先自己要成為一名靠譜的設計師。比如我們希望開發精確到像素級別，那我們提供的產出起碼要先精確到像素級別，同理心，專業性。
2. 良好的前期溝通
在設計之初一定要多和開發溝通，知道自己做的時間成本是否允許。目前技術條件是否有坑。就是確定你的方案基本可行，再開始開發設計。一句話，讓開發先知道你要做什么，在他眼里怎么看待這件事的實現成本，畢竟他們是最終代碼產出者，避免工作白費。
3. 了解基本實現原理
自己要學習了解一些基本的實現原理，邏輯。這樣你做的時候能夠更有根據，知道什么好做，什么難做，什么目前此平臺暫時達不到你的目的。這樣可以更好地控制動效設計的節奏，和最終落地。有時候也能幫助開發思考這個動畫設計該以怎樣的邏輯實現，因為你是動效的設計者，你更清楚這個動效里面有哪些變化，哪些步驟。
4. 具象的闡述動效設計
就是讓開發形象的知道你要做的什么，這個時候就需要適當的將你的動效設計——數據化。
（必要時輸出動效說明文檔）
那么問題來了，是所有動設計都是可以數據化的描述的嗎？
準確的講我們平常web&APP設計中大部分是可以描述的。
還有一些不可描述的動效設計，他們的基本是用在品牌展示（比如logo的變化等），或者一些小的驚喜點，比如JD的app中loadinggif，是正在送貨的小人。這類的動效設計我歸結為展示型動效設計。
展示型動效設計：
展示型動效（此圖來自網絡采集非作者原創）
因為他們基本不存在復雜的交互，尤其在動效原件本身上，基本是滿足一定條件觸發播放，滿足一定條件觸發停止的邏輯。
他們基本實現方式就是輸出PNG序列，或者視頻或者GIF文件形式，所以也就不存在輸出說明文檔的問題了。
輸出視頻就要涉及到壓縮體積，下面給大家說一說怎么壓縮這類文件的體積：
AE文件壓縮
AE壓縮設置
如果你用AE做，在渲染輸出時，如圖設置?；究梢詫⒁话氲膭有гO計控制在幾百KB以內，將復雜動效控制在幾M之內。
如果還是過大，怎么辦?? 就需要壓縮軟件：
視頻壓縮軟件
HandBrake是一款強大的視頻壓縮軟件，可以將幾十（MB）的視頻文件在畫面幾乎無損的情況下壓縮至幾十（KB）大小。是不是很感人？? 更感人的是它還免費。有需要的同學可以下載下來研究一下。
功能型動效設計：
功能型動效（此圖來自網絡采集非作者原創）
類似上面這種動效設計我叫他們功能型動效設計，這是我們平常工作中可能使用最多的一種動效設計。這些動效設計就需要涉及到我們前面講的動效設計數據化，輸出效果設計文檔。因為他們運動本身會涉及到頁面中各種交互元件，以及交互操作。不能單單輸出一個視頻。需要開發使用程序控制個原件的運動實現動效設計，但是如果只對開發說我要這樣一個動效設計，開發是很難理解你到底要干什么，要做到什么程度？往往還原度很低，會被開發鄙視。為了使我們的動效也能精確到像素，這個時候我們就需要進行動效數據化就是根據實際情況適當的書寫《動效設計文檔》。
這里說的 ，根據實際情況適當的書寫《動效設計文檔》。為什么要加根據實際情況和適時呢？這就是時間成本問題。我們書寫這個的目的就是想要通過精確的用數字和文字傳遞一種具象的動效設計。所以動效說明文檔，只是一種可以向開發傳遞具象動效設計的方法。這個方案最終落地的形式，不需要一定是一份文檔，可以根據實際情況活學活用。
如何書寫動效設計文檔？
怎么書寫動效說明文檔呢？ 或者說我們怎么向開發具象的陳述我們的動效設計呢？我做了一張表，簡單描述了一下動效說明文檔的輸出的基本流程（見下圖）
書寫動效說明文檔流程圖
舉個例子：
以下示例為之前在某滴專車事業部所做實際項目。
轉場動效
動效基本參數：
- 動 畫 尺 寸: 750*1334(px)
- 幀 ? 速 ? 率: 25f/s(幀/秒)
- 動 畫 時 長: 1.0s(秒)
動效詳細說明：
（1）0f – 6f 接機頂部欄從屏幕上邊緣移入其對應位置；Y軸位移: 128px；動畫速率: 先快后慢。
速度曲線:(截圖中時間幀不做參考)
（2）3f – 8f 背景色#edeff0，做漸顯動畫；透明度: 0%-100%；動畫速率: 勻速運動。
（3）0f – 6f 表單下方「叫車按鈕」背景圖漸顯出現；透明度：0%-100%；動畫速率: 勻速運動。
（4）2f – 8f 表單下方「叫車按鈕」整體做從下至上位移和漸顯動畫；Y軸位移：20px；透明度：0%-100%；動畫速率: 先做短暫加速運動，后做減速運動。
速度曲線:(截圖中時間幀不做參考)
（5）15f – 23f 接機表單卡片從距離屏幕上邊緣268px的位置向上；移動，至距離屏幕上邊緣148px的位置（設計圖中最終位置）；透明度：0%-100%；動畫速率: 先做短暫加速運動，后做減速運動。
速度曲線:(截圖中時間幀不做參考)
（6）17f – 25f 車型選擇卡片從距離屏幕上邊緣852px的位置向上；移動，至距離屏幕上邊緣732px的位置（設計圖中最終位置）；透明度：0%-100%；動畫速率: 先做短暫加速運動，后做減速運動。
速度曲線:(截圖中時間幀不做參考)
我們輸出動效說明文檔的原因是：傳遞更清晰具象，效果更可控，降低溝通成本，提高配合默契度，保證設計還原度。
寫在最后
說了這么多其實就是想盡量的告訴大家，我認為的要怎么把設計做好。我并不覺得，現在我們需要做動效設計了，就該將原來的界面設計師，在分出一個動效設計師職位。真正的獨立的動效設計師需要做的，絕對不僅僅是我們產品設計中需要的這點東西。因為我覺得這都是界面設計師應該輸出體驗的一部分，只不過就現在而言我們又多了一種表現形式可以使用。設計師應該為最終輸出的體驗負責，就是正在被用戶使用的產品的體驗，而不是為幾張漂亮的設計稿。講了這么多動效設計，動效設計難嗎？ 之前有個人和我說過一句話，我覺得挺有道理。
要對設計或者你做的產品，充滿愛。要帶著愛去做設計。這樣你輸出的設計才會讓用戶感受到情感。
作者：AaronCui ，Sogou-UED，公眾號：老美工聊設計
本文由 @AaronCui? 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 unsplash
八錯，愛死你了
贊！不只是產品，活動頁設計結合動效也能提升用戶的參與意愿。
很贊！ 寫的很詳細！