現(xiàn)在關(guān)于講解動效的文章越來越多，說明動效在日常工作中使用到的占比也在隨之增高。今天我就從我的角度按照時(shí)間的順序，與大家分享一下我在動效設(shè)計(jì)方面的一些小小想法。首先我要強(qiáng)調(diào)一點(diǎn)，這不是一篇純干貨的文章，為了避免枯燥，我會以我的工作經(jīng)歷為故事線，中間會穿插一些我曾經(jīng)參與的案例或者做過的練習(xí)，也會放一些我認(rèn)為比較優(yōu)秀的動效與大家共同討論。我在這里把我要講的大綱提前預(yù)告一下，如果不喜歡我的故事，看完這一部分就可以退出了。

大綱

伴隨著移動終端設(shè)備的快速普及以及工作流程的不斷更新迭代，傳統(tǒng)的信息呈現(xiàn)方式在移動設(shè)備上的短板愈發(fā)明顯。

動效設(shè)計(jì)的目的：

1.降低用戶焦慮情緒

應(yīng)用場景：刷新加載動畫，啟動頁

2.吸引用戶注意力

相對于靜態(tài)圖形或交互，動畫更容易捕捉用戶的眼球

3.豐富場景取悅用戶

通過動態(tài)效果使主題更加富有生命力，達(dá)到身臨其境的目的

4.向用戶傳遞有效信息

通過動效短時(shí)間內(nèi)視覺上分清主次，讓用戶第一時(shí)間感知重要信息

5.告知當(dāng)前所處狀態(tài)/關(guān)聯(lián)上下級信息

關(guān)聯(lián)上下層級的內(nèi)容，使之看起來具有視覺的連貫性和邏輯性，從而優(yōu)化體驗(yàn)

好的動畫傳遞情感，好的動效提升用戶體驗(yàn)

動畫可以更加夸張的表達(dá)，動效更加客觀規(guī)律，符合用戶的真實(shí)操作反饋

動效設(shè)計(jì)交付實(shí)現(xiàn)的方式：

1.GIF：Demo展示，小動效輸出

優(yōu)點(diǎn)：直觀體現(xiàn)

缺點(diǎn)：體積大，存在色彩偏差

2.PNG序列幀：直接引用

優(yōu)點(diǎn)：可控性更強(qiáng)

缺點(diǎn)：文件過大

3.代碼形式（Lottie生成json文件）：小動畫輸出

優(yōu)點(diǎn)：高還原度，占空間小

缺點(diǎn)：對于制作要求高

4.Demo+文檔：頁面大型交互（屬性動畫）

優(yōu)點(diǎn)：更好的進(jìn)行交付，適用場景不受限制

缺點(diǎn)：制作周期長

動畫

動效嚴(yán)格意義上來說是動畫的一個(gè)分支，只是這部分具備了與使用者之間建立數(shù)據(jù)交互的關(guān)系，所以稱之為交互動畫，這也是在互聯(lián)網(wǎng)大時(shí)代背景下發(fā)展開來的產(chǎn)物。既然如此，那我們就先從動畫說起。

我在接觸動畫這塊的時(shí)候還是在大學(xué)時(shí)期上的《多媒體設(shè)計(jì)》課程里了解到動畫設(shè)計(jì)，使用的軟件為Ae和flash。

由于課程的緣故，當(dāng)時(shí)的制作方向還比較偏向于影視包裝這一塊，而我又比較喜歡扁平化一些的設(shè)計(jì)，所以向老師訴求了我以后要做的內(nèi)容，也得到了老師的肯定，這才讓我真正的能“學(xué)以致用”。

學(xué)以致用

第一份工作我是在一家廣告公司從事網(wǎng)頁設(shè)計(jì)，但其實(shí)工作的內(nèi)容遠(yuǎn)不止網(wǎng)頁設(shè)計(jì)的內(nèi)容，由于公司人員配比的原因，所以我會經(jīng)常做一些LOGO動畫的提案，在這里我就講一個(gè)比較經(jīng)典的案例。OPGclub的影視短片包裝，有幸參與短片的分鏡和片尾的動畫制作。其實(shí)早期我并未參與這個(gè)項(xiàng)目，當(dāng)時(shí)的情景比較焦灼，片尾的LOGO演繹動畫方案一直未通過，時(shí)間一直在消耗，離截稿的時(shí)間也越來越近。最后我臨時(shí)受命，制作了這個(gè)方案，比較意外的是竟然一稿過！雖然制作周期比較短，但依然是考慮了它自身的品牌元素（六邊形），以及品牌特質(zhì)（多元化，靈動感），上海的朋友應(yīng)該是會在地鐵或者公交上看過這個(gè)短片的。

不難看出，為了適應(yīng)影片的場景，我還是做了一些空間縱深感以及在影視包裝中經(jīng)常用到的流線高光，使得其切合品牌的調(diào)性，增強(qiáng)其品牌的特有屬性。其中用了3Dstroke插件實(shí)現(xiàn)手寫字母的流暢效果?，F(xiàn)在看起來，可能背景略顯陳舊了點(diǎn)。

在我的作品《2017動效設(shè)計(jì)—LOGO篇 》有我當(dāng)時(shí)做的其他LOGO動效設(shè)計(jì)方案，后期還做了也寫MG動畫，在今天很多的品牌升級發(fā)布基本都會如此制作一段宣傳視頻。

其實(shí)在網(wǎng)頁時(shí)代已然存在交互動效，只是不像今天這般，得到大量的應(yīng)用與宣傳。在一次網(wǎng)頁案例中我也局部的應(yīng)用了交互動效，當(dāng)鼠標(biāo)懸停選項(xiàng)按鈕，即觸發(fā)PNG到GIF形式的轉(zhuǎn)變，這也增加了一定的趣味性，更好的捕捉用戶的注意力，同時(shí)也將其與未選中狀態(tài)大大的拉開差距。

這是在17年做的吉凱基因檢驗(yàn)所官網(wǎng)上的幾個(gè)動態(tài)icon，當(dāng)然PC端的交互還有很多可以講的地方，但它不是今天的主角。

在大屏終端上的應(yīng)用

時(shí)間來到2018年，這一年我從“乙方公司”正式來到“甲方公司”，這是一家互聯(lián)網(wǎng)健身公司（likingfit）有幸接觸更多的不同終端設(shè)備。以跑步機(jī)為例，作為大屏終端（iMac同等尺寸），和PC端以及移動端都有所不同，寬大的屏幕上需要用戶觸發(fā)操作得到很好的反饋就需要動效的加入。當(dāng)時(shí)跑步機(jī)的項(xiàng)目大部分UI部分為另一個(gè)設(shè)計(jì)師完成，我主要負(fù)責(zé)動效部分以及補(bǔ)充剩余頁面。后來我又做了一個(gè)改版，發(fā)布的作品《COMMAFIT 智能跑步機(jī)1.1.0》中有詳細(xì)說明。

以這個(gè)作品中的動效為例，如果制作較大的頁面跳轉(zhuǎn)動效，就需要給到前端動效參考，如何給？我當(dāng)時(shí)的方法是直接給的principle源文件，不懂的地方再溝通，在今天看來有點(diǎn)太考驗(yàn)開發(fā)的功底了。

這是當(dāng)時(shí)上線版我所做的principle源文件。

嚴(yán)格來說應(yīng)該是要給出principle源文件/Demo樣式+動效文檔，這種比較適合制作大型頁面交互的屬性動畫，只是這樣對于設(shè)計(jì)師整理文檔的能力很考驗(yàn)，同時(shí)也會在一定程度上加大制作周期，不過實(shí)現(xiàn)效果會更佳。

其中的開機(jī)LOGO動畫由于開發(fā)環(huán)境的緣故，我則是利用的PNG序列圖片，在制作完成LOGO動畫后，利用AE導(dǎo)出PNG序列圖片，打包給到開發(fā)即可實(shí)現(xiàn)效果。這種方式可控性比較強(qiáng)，不夠由于每張圖片的尺寸比較大，所以整體文件也比較大。

當(dāng)時(shí)在制作的過程中也用到了json文件制作，在這里我簡要說一下，后面會有對這種制作方式的說明。

平面/PC端到移動端的轉(zhuǎn)變

由于前面主要接觸的多以影視類動畫，PC端和大屏終端為主，所以當(dāng)時(shí)制作移動端動效的機(jī)會并不多，于是我開始利用工作之余做了大量的練習(xí)，為了以后能夠用上，也讓自己不至于被行業(yè)淘汰。其中我以兩個(gè)練習(xí)稿《上海機(jī)場APP重設(shè)》《小當(dāng)家APP設(shè)計(jì)-在線找廚師的美食社交軟件》的制作為例。

小當(dāng)家APP起初是公司有一款類似的產(chǎn)品，由于戰(zhàn)略轉(zhuǎn)型已被邊緣化，所以我個(gè)人也就當(dāng)作了一次練習(xí)機(jī)會。

在這里我首次制作了標(biāo)簽欄的彈性動畫，有很多人問我標(biāo)簽欄的動畫如何制作，其實(shí)標(biāo)簽欄icon的動效注重連貫性和格調(diào)的一致性，在一組icon中找到一個(gè)自己最有想法去實(shí)現(xiàn)的icon（實(shí)在沒想法就多看，找參考）作為突破口，實(shí)現(xiàn)了一個(gè)，其他自然而然就實(shí)現(xiàn)了。當(dāng)然并不是刻板的復(fù)制，而是根據(jù)不同的icon的狀態(tài)名稱進(jìn)行合理的變換，不然賦予它的動效也將失去意義。一般的手法無非體積變換，縱向橫向的體積伸縮，針對特殊形態(tài)加以具備特殊屬性的變換，最后加一點(diǎn)點(diǎn)修建路徑即可很好的實(shí)現(xiàn)。

局部的交互動效也是當(dāng)下很多應(yīng)用注重的細(xì)節(jié)點(diǎn)，拿這個(gè)點(diǎn)贊的動效為例，和前面講到的，當(dāng)鼠標(biāo)懸停選項(xiàng)按鈕，即觸發(fā)PNG到GIF形式的轉(zhuǎn)變形式類似，只是這里的鼠標(biāo)變成了手指，懸停變成了點(diǎn)擊。

左右滑動banner的同時(shí)連帶著地步輪播點(diǎn)的變化也不失是一件微妙的動效語言。

對于這一類的交互動效，方式有兩種，一種是在AE中制作好動效利用Lottie插件導(dǎo)出json文件直接給到開發(fā)即可，體積一般都不大，還原度還是比較高的。但是這對制作的源文件也有移動的要求，例如說遮罩樣式，透明度，表達(dá)式等都對導(dǎo)出json文件有影響，所以一般的彈性動畫不是很難，我都會用K幀實(shí)現(xiàn)。另一種就是導(dǎo)出GIF，不過這種應(yīng)該是無奈之下才會用，畢竟本身體積大，還有一定的色彩偏差。

人臉識別的動效也是多個(gè)當(dāng)時(shí)也是靈光一現(xiàn)，為啥這么說，其實(shí)剛好當(dāng)時(shí)我們線下在做一款自動售賣的產(chǎn)品，需要采集用戶頭像，不過當(dāng)時(shí)那是線下終端，在這里我將它融入到移動端，后來在阿里系的產(chǎn)品中經(jīng)?？吹饺四樧R別的功能了。

在制作一款產(chǎn)品的動效部分是要契合產(chǎn)品調(diào)性，考慮使用場景的。

做上海機(jī)場APP這款產(chǎn)品重設(shè)練習(xí)的背后故事就不在這說了，說多了都是淚。

首先從最初的靜態(tài)設(shè)計(jì)就要為后面的動效實(shí)現(xiàn)考慮充分，不然前面的圖形完全不適應(yīng)動效的實(shí)現(xiàn)，那就要哭了。如果有好的參考當(dāng)然是要利用起來的，參考是參考它的想法實(shí)現(xiàn)，并不是直接照抄，那樣意義不大。

為了使用戶更好的等待頁面加載過程，或是說屬性頁面時(shí)得到較好的反饋，可以加入比較有趣味性的加載動畫和下拉刷新動畫，結(jié)合產(chǎn)品的屬性進(jìn)行發(fā)揮，總有一些內(nèi)容可做。在loding動畫和刷新動畫中加入品牌特屬元素，使其具備一定的獨(dú)特性，同時(shí)也具備一定的品牌宣傳效益。

從飛機(jī)稿到實(shí)際落地的考慮

前面做了一些練習(xí)后，發(fā)現(xiàn)了一些問題，比如說移動端頁面的大幅度交互動效，這種就比較飛機(jī)稿，難以落地，由于移動端的特殊屬性使其不太適用大幅度的交互動效，微動效或者趣味動效都有所克制的去用。所以經(jīng)歷了一些移動端的實(shí)戰(zhàn)后就會發(fā)現(xiàn)哪些動效能夠加入到應(yīng)用中，哪些是難以實(shí)現(xiàn)或者根本不需要的。

這個(gè)案例是我一份短暫的工作經(jīng)歷中參與的項(xiàng)目，當(dāng)時(shí)的動效需求比較急，而且產(chǎn)品的需求也不是特別明確，所以我是口頭描述+動效樣式去和前端溝通的。這種情況比較常見，大多時(shí)候的非正規(guī)流程都是壓縮時(shí)間所導(dǎo)致，但是我們要清楚，動效的加入是要怎樣呈現(xiàn)的，這樣才能更好的與前端溝通。（由于動圖的問題可能有些卡頓）

后來在參加UI中國APP設(shè)計(jì)大賽中就克制的去做動效了，因?yàn)椴宦涞氐膭有o非就是炫技，不是否定這種行為，而是既然選擇靠近真實(shí)，就要有所取舍。

結(jié)語

無論是視頻還是交互動效，其實(shí)都有很多的共同點(diǎn)，比如說都需要一個(gè)試用環(huán)境，視頻需要寫腳本畫分鏡，動效需要邏輯框架。為了達(dá)到一個(gè)終極訴求，需要完整輸出解決方案。我在這里不是和大家分享什么技能，而是一種想法，驅(qū)動來源不是為了完成任務(wù)。慢慢的會發(fā)現(xiàn)，做設(shè)計(jì)，軟件只是實(shí)現(xiàn)想法的工具，并不是你會了軟件就能有好的想法，所以在以前的作品中經(jīng)常會有人問“用了什么軟件”，“動效用什么做的”諸如此類的問題，大多數(shù)的時(shí)候也是一個(gè)人在探索，硬著頭皮做。設(shè)計(jì)之路任重而道遠(yuǎn)，希望能與各位同成長，共突破！

作者：古月設(shè)計(jì)

原文鏈接：https://www.zcool.com.cn/article/ZOTkyNTUy.html