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

大綱

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

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

1.降低用戶焦慮情緒

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

2.吸引用戶注意力

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

3.豐富場景取悅用戶

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

4.向用戶傳遞有效信息

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

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

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

好的動畫傳遞情感，好的動效提升用戶體驗

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

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

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

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

缺點：體積大，存在色彩偏差

2.PNG序列幀：直接引用

優(yōu)點：可控性更強

缺點：文件過大

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

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

缺點：對于制作要求高

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

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

缺點：制作周期長

動畫

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

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

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

學(xué)以致用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

從飛機稿到實際落地的考慮

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

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

后來在參加UI中國APP設(shè)計大賽中就克制的去做動效了，因為不落地的動效無非就是炫技，不是否定這種行為，而是既然選擇靠近真實，就要有所取舍。

結(jié)語

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

作者：古月設(shè)計

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