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

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

1. 為什么需要?jiǎng)有гO(shè)計(jì)？

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

2. 如何設(shè)計(jì)動(dòng)效？

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

3. 動(dòng)效的類別

4. 常用的動(dòng)效軟件

5. 讓動(dòng)效落地的4個(gè)方法

為什么需要設(shè)計(jì)動(dòng)效？

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

解決為什么要做動(dòng)效設(shè)計(jì)這個(gè)問(wèn)題，就要搞清楚什么是動(dòng)效設(shè)計(jì)？動(dòng)效設(shè)計(jì)有什么作用？

1. ?什么是動(dòng)效設(shè)計(jì)呢？

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

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

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

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

2. 動(dòng)效設(shè)計(jì)對(duì)于產(chǎn)品設(shè)計(jì)有什么作用？

△ 動(dòng)效設(shè)計(jì)的作用

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

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

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

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

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

好的動(dòng)效是什么?

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

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

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

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

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

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

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

△ 動(dòng)效設(shè)計(jì)標(biāo)準(zhǔn)

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

怎樣設(shè)計(jì)動(dòng)效？

知道了什么是好的動(dòng)效設(shè)計(jì)，那么就引申出下一個(gè)問(wèn)題，我們?cè)趺催M(jìn)行動(dòng)效設(shè)計(jì)？ 或者說(shuō)，動(dòng)效設(shè)計(jì)該如何入手，尤其是初學(xué)者？

很簡(jiǎn)單，就兩步：

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

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

△ 動(dòng)效靈感來(lái)源

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

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

2. 了解基本常識(shí)

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

3. 觀察生活

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

4. 看并思考

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

5. 學(xué)會(huì)拆解

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

6. 關(guān)注流行

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

前面我們說(shuō)大部分我們?cè)趙eb&app中看到的動(dòng)效設(shè)計(jì)，都是由一些基本的變化組合而成的，那這些基礎(chǔ)變化是什么呢？（見(jiàn)下圖）

△ 動(dòng)畫(huà)的基礎(chǔ)變化

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

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

△ 變化節(jié)奏

上圖就是一些常見(jiàn)的貝塞爾曲線，右邊就是我們?cè)贏E設(shè)計(jì)過(guò)程中，運(yùn)動(dòng)曲線調(diào)節(jié)界面。

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

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

http://easings.net

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

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

△ 實(shí)現(xiàn)動(dòng)效設(shè)計(jì)

如上圖所示：

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

1. ?動(dòng)手嘗試，熟能生巧

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

2. 臨摹作品

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

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

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

4. 有節(jié)奏感

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

5. 先加后減

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

6. 搜索引擎

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

動(dòng)效有那些類別？

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

1.功能性動(dòng)效（如下圖）

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

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

2.展示型動(dòng)效果（如下圖）

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

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

用什么軟件做動(dòng)效設(shè)計(jì)？

△ 動(dòng)效設(shè)計(jì)所用軟件

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

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

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

動(dòng)效設(shè)計(jì)如何落地？

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

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

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

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

△ 動(dòng)效落地

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

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

2. 良好的前期溝通

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

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

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

4. 具象的闡述動(dòng)效設(shè)計(jì)

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

（必要時(shí)輸出動(dòng)效說(shuō)明文檔）

那么問(wèn)題來(lái)了，是所有動(dòng)設(shè)計(jì)都是可以數(shù)據(jù)化的描述的嗎？

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

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

展示型動(dòng)效設(shè)計(jì)：

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

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

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

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

AE文件壓縮

△ AE壓縮設(shè)置

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

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

△ 視頻壓縮軟件

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

功能型動(dòng)效設(shè)計(jì)：

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

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

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

如何書(shū)寫(xiě)動(dòng)效設(shè)計(jì)文檔？

怎么書(shū)寫(xiě)動(dòng)效說(shuō)明文檔呢？ 或者說(shuō)我們?cè)趺聪蜷_(kāi)發(fā)具象的陳述我們的動(dòng)效設(shè)計(jì)呢？我做了一張表，簡(jiǎn)單描述了一下動(dòng)效說(shuō)明文檔的輸出的基本流程（見(jiàn)下圖）

△ 書(shū)寫(xiě)動(dòng)效說(shuō)明文檔流程圖

舉個(gè)例子：

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

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

動(dòng)效基本參數(shù):

動(dòng) 畫(huà) 尺 寸: 750*1334(px)

幀 ? 速 ? 率: 25f/s(幀/秒)

動(dòng) 畫(huà) 時(shí) 長(zhǎng): 1.0s(秒)

動(dòng)效詳細(xì)說(shuō)明：

1. ?0f - 6f 接機(jī)頂部欄從屏幕上邊緣移入其對(duì)應(yīng)位置；Y軸位移: 128px；動(dòng)畫(huà)速率: 先快后慢。

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

2. 3f - 8f 背景色#edeff0，做漸顯動(dòng)畫(huà)；透明度: 0%-100%；動(dòng)畫(huà)速率: 勻速運(yùn)動(dòng)。

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

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

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

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

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

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

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

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

寫(xiě)在最后：

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「老美工聊設(shè)計(jì)」

「超實(shí)用新手指南！零基礎(chǔ)如何學(xué)習(xí)動(dòng)效」

• 《新人手冊(cè)！動(dòng)效設(shè)計(jì)幾乎都是這10個(gè)軟件做的（內(nèi)附教程）》
• 《交互設(shè)計(jì)基礎(chǔ)！四個(gè)移動(dòng)界面最常見(jiàn)的動(dòng)效類型》
• 《超全面干貨！如何制作符合場(chǎng)景的交互動(dòng)效？》
• 《用這4個(gè)超實(shí)用的方法，做出有價(jià)值的功能性動(dòng)效！》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com