2019年即將過(guò)去，我們將迎來(lái)嶄新的2020年，下面我也將講講2020年或?qū)⒘餍械淖凡▌?dòng)效設(shè)計(jì)流行趨勢(shì)。

為什么叫流行趨勢(shì)呢？不是我想這么叫，是大家都這么寫(xiě)這么叫?；蛘呶覀兛梢試L試用一種新的理解方式是對(duì)過(guò)去的總結(jié)和為未來(lái)的展望。

回歸正題和往年一樣我從追波中挑選了2019年中最流行的Shots，由于今年追波支持上傳視頻作品，今年挑選的600件設(shè)計(jì)作品中動(dòng)效（包含GIF和MP4）246件作品，我算了下就光動(dòng)效就占到總數(shù)的41%，差不多半壁江山了，或許2020年就是動(dòng)效元年，動(dòng)效本身就是一種設(shè)計(jì)趨勢(shì)。

為什么我猜2020年或許就是動(dòng)效元年？

首先追波平臺(tái)今天率先支持了視頻格式展示作品，包括國(guó)內(nèi)的短視頻平臺(tái)的快速發(fā)展已經(jīng)形成了N個(gè)巨頭企業(yè)。

明年5G時(shí)代的到來(lái)，到時(shí)候我們的手機(jī)、電腦等硬件設(shè)備將迎來(lái)一個(gè)大的迭代，速度效率會(huì)更快，如果動(dòng)效的制作成本降低，同樣是設(shè)計(jì)一幅插畫(huà)或制作一個(gè)短片來(lái)運(yùn)營(yíng)用戶(hù)你會(huì)更喜歡那種形式呢，在更注重用戶(hù)體驗(yàn)的今天短片會(huì)從視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)等多維度給用戶(hù)帶來(lái)極致體驗(yàn)。

在這樣的大環(huán)境下我們也希望能有一款動(dòng)效軟件出現(xiàn)像Sketch、Figma顛覆Ps去顛覆Ae（這里只是從互聯(lián)網(wǎng)行業(yè)協(xié)同實(shí)現(xiàn)層的顛覆，Adobe軟件還是很強(qiáng)大的），從界面的簡(jiǎn)單易學(xué)和代碼實(shí)現(xiàn)層面上去創(chuàng)新?，F(xiàn)在我們來(lái)了解下追波平臺(tái)的主流動(dòng)效有哪些呢？

品牌動(dòng)效篇 

品牌動(dòng)效Logo作為一種更新穎的展現(xiàn)方式，動(dòng)態(tài)品牌圖形會(huì)更容易讓用戶(hù)理解其寓意，當(dāng)然也會(huì)具有更高的品牌辨識(shí)度。一個(gè)好的有趣的動(dòng)態(tài)Logo能夠讓人體會(huì)到不同的情感。我們可以設(shè)計(jì)營(yíng)造一個(gè)美好的故事情節(jié)，讓用戶(hù)更容易記住并體現(xiàn)我們品牌專(zhuān)業(yè)性。

品牌升級(jí)

UNFOLD是追波一個(gè)很老牌的設(shè)計(jì)團(tuán)隊(duì)了，他們來(lái)自美國(guó)佛羅里達(dá)州的薩拉索塔，他們將自己的設(shè)計(jì)作品做出動(dòng)效作為自己的品牌來(lái)宣傳，更好的體現(xiàn)了他們?cè)O(shè)計(jì)的專(zhuān)業(yè)、用心和前衛(wèi)。

Firefox新品牌VI升級(jí)設(shè)計(jì)，在新的品牌架構(gòu)中，F(xiàn)irefox瀏覽器與Firefox Send，F(xiàn)irefox Monitor和Firefox Lockwise產(chǎn)品相當(dāng)。

新創(chuàng)建的產(chǎn)品系列由傘品牌Firefox領(lǐng)導(dǎo)。作為傘形商標(biāo)的商標(biāo)，F(xiàn)irefox的功能是基于瀏覽器的徽標(biāo)螺旋圖形。你可以將徽章標(biāo)志想象為瀏覽器的圖標(biāo)，因?yàn)樽鳛閼?yīng)用程序圖標(biāo)和菜單圖標(biāo)，狐貍和地球儀只剩下橙藍(lán)色黃球。漩渦是動(dòng)態(tài)的，開(kāi)放的并且在視覺(jué)上吸引人。

品牌IP篇?jiǎng)有?/h3>

品牌IP化是移動(dòng)互聯(lián)網(wǎng)變革下產(chǎn)生的，品牌IP就是品牌的“人格化”，目的是為了迎合品牌的主流人群用的一種營(yíng)銷(xiāo)手段。品牌IP主體可以是一個(gè)擬物的形象，可以表達(dá)用戶(hù)情感在精神層面與用戶(hù)達(dá)成共鳴。

品牌IP可以緩解品牌的周期性衰落問(wèn)題，給品牌重新賦予生命力，所以品牌IP化漸漸的流行起來(lái)。當(dāng)品牌IP賦予了動(dòng)效會(huì)更加真實(shí)形象，更好的傳達(dá)寓意。

界面動(dòng)效篇 

界面動(dòng)效可以讓界面更活潑生動(dòng)，還可以更好傳達(dá)用戶(hù)與界面之間的交互情感，好的界面動(dòng)效設(shè)計(jì)可以解決界面中的功能問(wèn)題，讓產(chǎn)品更容易被用戶(hù)接受，能讓你的應(yīng)用更快、更流暢。

微交互動(dòng)效

界面微交互動(dòng)效會(huì)讓用戶(hù)體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開(kāi)的，UI界面設(shè)計(jì)通過(guò)微交互反饋告知用戶(hù)當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶(hù)情緒，取悅用戶(hù)。

圖標(biāo)動(dòng)效

在短視頻領(lǐng)域中圖標(biāo)動(dòng)效運(yùn)用更為廣泛，在直播廣場(chǎng)中涮禮物時(shí)有炫酷的圖標(biāo)動(dòng)效會(huì)更加用戶(hù)的炫耀感和愉悅感。當(dāng)然我們?cè)诋a(chǎn)品設(shè)計(jì)中也可以設(shè)計(jì)微動(dòng)效來(lái)傳達(dá)用戶(hù)點(diǎn)擊或觸摸的行為動(dòng)效，可以更加用戶(hù)理解界面之間的轉(zhuǎn)場(chǎng)和交互關(guān)系。

界面動(dòng)效

界面動(dòng)效沒(méi)什么好說(shuō)的，依然是動(dòng)效占比最重的部分，對(duì)比初學(xué)者界面動(dòng)效首先把握時(shí)間的長(zhǎng)短，關(guān)于動(dòng)效時(shí)間的學(xué)習(xí)可以學(xué)習(xí)Material design界面動(dòng)效，里面都有嚴(yán)謹(jǐn)?shù)臅r(shí)間規(guī)范。www.material.io/design/motion/speed.html#duration

難點(diǎn)在于緩動(dòng)函數(shù)貝塞爾曲線Linear、Ease、Ease-in、Ease-out、Ease-in-out，轉(zhuǎn)場(chǎng)時(shí)運(yùn)用了大量的緩動(dòng)函數(shù)效果都很棒。

Mg動(dòng)畫(huà)篇 

Mg動(dòng)畫(huà)

Mg動(dòng)畫(huà)需要很好的節(jié)奏感、韻律，每一個(gè)場(chǎng)景動(dòng)畫(huà)都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場(chǎng)動(dòng)畫(huà)更加自然，MG人物動(dòng)畫(huà)通過(guò)點(diǎn)線面的動(dòng)效變化讓畫(huà)面更加有趣、自然，通過(guò)粒子效果讓特定場(chǎng)景無(wú)限循環(huán)會(huì)讓人更加印象深刻。

行走動(dòng)效

行走動(dòng)效是Mg動(dòng)效學(xué)習(xí)的必修課，大體分為動(dòng)物人物的行走、奔跑、跳躍等形態(tài)，如果簡(jiǎn)單的行走動(dòng)畫(huà)只要參考動(dòng)物或人的行走分步圖插上關(guān)鍵幀就可以制作完成。

對(duì)于一些彈性的行走動(dòng)畫(huà)，我們那需要使用插件可以使用Puppet Tools插件利用圖釘來(lái)制作骨架的工具，但因?yàn)閳D釘工具本身的缺陷，容易破圖。DUIK插件現(xiàn)在普遍用在AE制作角色動(dòng)畫(huà)（角色動(dòng)畫(huà)比較硬），RubberHose插件角色動(dòng)畫(huà)比較軟，相對(duì)更加自然。為了更好的做好人物角色動(dòng)畫(huà)還需要平時(shí)對(duì)人物形態(tài)更細(xì)致的觀察。

Q彈動(dòng)畫(huà)

 

Q彈動(dòng)畫(huà)中的Q彈效果會(huì)讓畫(huà)面更加有趣，會(huì)讓人重復(fù)欣賞不回感到膩。使用AE彈性表達(dá)式Bounce 和 Overshoot！利用這個(gè)兩個(gè)表達(dá)式你可以輕而易舉地實(shí)現(xiàn)各種彈性動(dòng)畫(huà)，也可以使用Ae腳本：物體彈簧彈性預(yù)設(shè)腳本 Aescripts Rubberize It，可以將你的物體圖形層中的元素模擬成具有彈簧彈性效果，更符合力學(xué)！

循環(huán)動(dòng)效

循環(huán)動(dòng)效是為了更好的展示一個(gè)作品的自然收尾銜接，沒(méi)有明顯的停頓感會(huì)讓欣賞者樂(lè)此不疲。所以我們?cè)谠O(shè)計(jì)動(dòng)效時(shí)應(yīng)盡可能使用循環(huán)動(dòng)效。

動(dòng)效創(chuàng)意篇 

偽3D旋轉(zhuǎn)動(dòng)效

偽3D旋轉(zhuǎn)動(dòng)效漸漸的成為一種趨勢(shì)，360度無(wú)死角旋轉(zhuǎn)對(duì)角色造型有更高的要求。偽3D旋轉(zhuǎn)動(dòng)效也漸漸被更多的設(shè)計(jì)愛(ài)好者所喜歡，偽3D旋轉(zhuǎn)動(dòng)效主要使用了ae表達(dá)式進(jìn)行制作對(duì)360不同旋轉(zhuǎn)角度進(jìn)行定型，這種動(dòng)效比較新穎、很有意思百看不厭。

抖音風(fēng)（魔性）

抖音風(fēng)就是一種加上魔性的音樂(lè)，可以讓用戶(hù)無(wú)限循環(huán)進(jìn)行觀看。抖音風(fēng)動(dòng)效也是如此，光看動(dòng)效畫(huà)面就很魔性可以無(wú)限循環(huán)看很多篇，越看越有趣。

形變動(dòng)效

形變動(dòng)效的魅力就在于都是圍繞主題進(jìn)行展開(kāi)，并且通過(guò)一定的趣味性來(lái)抓住用戶(hù)的眼球，通過(guò)一些不規(guī)律的形變會(huì)讓人思考它是如何實(shí)現(xiàn)的，是不是用了很高深的技術(shù)等，會(huì)給人留下深刻印象并嘗試去思考。

跟隨動(dòng)效

早期的跟隨動(dòng)畫(huà)多為網(wǎng)站上的鼠標(biāo)跟隨形變動(dòng)效，現(xiàn)在跟隨動(dòng)畫(huà)可以加入三維動(dòng)畫(huà)或使用插件Joysticks ’n Sliders可以在一個(gè)小的框框內(nèi)實(shí)時(shí)反應(yīng)畫(huà)面的動(dòng)態(tài)。

酷炫科技風(fēng)

AE Trapcode插件最常用的是particular和form了，這兩款粒子插件可以制作出很多酷炫的動(dòng)態(tài)效果，隨著科技進(jìn)步上面的動(dòng)態(tài)炫酷風(fēng)格可適用于多媒體大屏展示或用于公司企業(yè)官網(wǎng)，通過(guò)粒子插件來(lái)突出企業(yè)科技感，多用戶(hù)互聯(lián)網(wǎng)公司。

三維動(dòng)效（C4D）

c4d三維場(chǎng)景動(dòng)畫(huà)通過(guò)構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景，會(huì)讓用戶(hù)體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過(guò)動(dòng)力學(xué)和表達(dá)式會(huì)模擬真實(shí)感，未來(lái)在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。

動(dòng)效應(yīng)用篇 

字體篇

小米MIUI 11推出了“動(dòng)態(tài)字體系統(tǒng)”，可以無(wú)級(jí)調(diào)節(jié)字體粗細(xì)，每個(gè)人都能找到自己感覺(jué)舒適的閱讀字重，同時(shí)系統(tǒng)會(huì)根據(jù)內(nèi)容不同，給予不同程度的加粗，交互細(xì)節(jié)也得到了全面提升。字體也慢慢加入動(dòng)效的行業(yè)里來(lái)了。

2019年11月7日，我們將在阿姆斯特丹中央車(chē)站接管通常用于24小時(shí)廣告的所有80個(gè)屏幕，以展示來(lái)自世界各地的設(shè)計(jì)師的動(dòng)畫(huà)設(shè)計(jì)。該網(wǎng)站旨在引起公眾參觀展覽的興趣，并鼓勵(lì)設(shè)計(jì)師，工作室和藝術(shù)院校提交他們的作品。

技術(shù)本身在很大程度上依賴(lài)于我們使用Processing和After Effects創(chuàng)建的動(dòng)畫(huà)。我們使用了p5.js的Javascript來(lái)設(shè)定網(wǎng)站上的交互元素?？梢酝ㄟ^(guò)鼠標(biāo)輸入，也可以使用手機(jī)中的陀螺儀。

插畫(huà)動(dòng)效

插畫(huà)繪制一般都具有藝術(shù)感，插畫(huà)傳達(dá)的信息是否明確就顯得格外重要。適當(dāng)添加簡(jiǎn)單的動(dòng)效，會(huì)增加插畫(huà)的場(chǎng)景性給用戶(hù)帶入感。插畫(huà)和動(dòng)效結(jié)合起來(lái)更容易引導(dǎo)用戶(hù)，吸引人的眼球。插畫(huà)動(dòng)畫(huà)可以幫助用戶(hù)更好的了解內(nèi)容，會(huì)讓用戶(hù)在界面插畫(huà)中尋找可交互的體驗(yàn)樂(lè)趣。

Ipad插畫(huà)動(dòng)效

 Ipad插畫(huà)之所以能流行還是因?yàn)樘O(píng)果公司出的ApplePencil ，用過(guò)的都說(shuō)好。ApplePencil 能幫你盡情表達(dá)創(chuàng)意。無(wú)論你是在畫(huà)水彩，進(jìn)行室內(nèi)設(shè)計(jì)，還是潤(rùn)色照片，ApplePencil 總能幫你把創(chuàng)想變成現(xiàn)實(shí)。

追波大佬Gal Shir上傳的作品都是錄制自己使用 Ipad插畫(huà)的整個(gè)過(guò)程，從構(gòu)圖起形加光陰加材質(zhì)，最后形成一幅美麗的插畫(huà)。想學(xué)習(xí) Ipad插畫(huà)技巧更多請(qǐng)到Gal Shir的追波主頁(yè)觀看。https://dribbble.com/galshir

游戲動(dòng)效

游戲動(dòng)效可以很好的引導(dǎo)玩家操作，幫助新手引導(dǎo)，讓玩家了解游戲規(guī)則和操作使用，好的游戲動(dòng)效可以增加用戶(hù)粘性。游戲動(dòng)態(tài)、場(chǎng)景特效、角色動(dòng)畫(huà)對(duì)動(dòng)畫(huà)運(yùn)動(dòng)規(guī)律都有很高的要求，游戲動(dòng)態(tài)demo也可以節(jié)約研發(fā)人員的時(shí)間成本和溝通效率。

Priciple高保真

Principle是一款做原型的軟件。很多公司也用Principle做高保真原型，這樣就可以作為最小可行性產(chǎn)品（mvp）,在正式開(kāi)發(fā)前就進(jìn)行用戶(hù)調(diào)查、可用性測(cè)試。

阿里大佬Dimest的作品最具有代表性，視覺(jué)沖擊力強(qiáng)有美感，加上創(chuàng)意的微交互讓Priciple高保真作品獨(dú)具一格。更多的高保真動(dòng)效作品可以去Dimest追波主頁(yè)欣賞。www.dribbble.com/Dimest

代碼動(dòng)效篇

GitHub是一個(gè)面向開(kāi)源及私有軟件項(xiàng)目的托管平臺(tái)，GitHub是基于代碼已經(jīng)實(shí)現(xiàn)了可用的代碼動(dòng)效，如果工作中有類(lèi)似的動(dòng)效效果可用直接使用，對(duì)于設(shè)計(jì)或者產(chǎn)品來(lái)說(shuō)公司中有這樣的前端此乃大幸。愿意實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)中的微交互微動(dòng)效花時(shí)間花精力。

最后還是要感謝程序員幫我們守住產(chǎn)品實(shí)現(xiàn)的最后一道防線，可能我們?cè)O(shè)計(jì)時(shí)會(huì)出現(xiàn)思考不周的情況或者理想與實(shí)踐之間的沖突問(wèn)題等等，程序員會(huì)用更理性的思考方式幫我們找到產(chǎn)品界面中的漏洞，及時(shí)調(diào)整確保產(chǎn)品的合理上線。

 

原文地址： 水手哥學(xué)設(shè)計(jì)（公眾號(hào)）

作者：水手哥