2020追波Dribbble動效流行趨勢

2019年即將過去，我們將迎來嶄新的2020年，下面我也將講講2020年或將流行的追波動效設計流行趨勢。

為什麼叫流行趨勢呢？不是我想這麼叫，是大家都這麼寫這麼叫。或者我們可以嚐試用一種新的理解方式是對過去的總結和為未來的展望。

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

為什麼我猜2020年或許就是動效元年？

首先追波平台今天率先支持了視頻格式展示作品，包括國內的短視頻平台的快速發展已經形成了N個巨頭企業。

明年5G時代的到來，到時候我們的手機、電腦等硬件設備將迎來一個大的迭代，速度效率會更快，如果動效的製作成本降低，同樣是設計一幅插畫或製作一個短片來運營用戶你會更喜歡那種形式呢，在更注重用戶體驗的今天短片會從視覺、聽覺、觸覺等多維度給用戶帶來極致體驗。

在這樣的大環境下我們也希望能有一款動效軟件出現像Sketch、Figma顛覆Ps去顛覆Ae（這裏隻是從互聯網行業協同實現層的顛覆，Adobe軟件還是很強大的），從界面的簡單易學和代碼實現層面上去創新。現在我們來了解下追波平台的主流動效有哪些呢？

品牌動效篇 

品牌動效Logo作為一種更新穎的展現方式，動態品牌圖形會更容易讓用戶理解其寓意，當然也會具有更高的品牌辨識度。一個好的有趣的動態Logo能夠讓人體會到不同的情感。我們可以設計營造一個美好的故事情節，讓用戶更容易記住並體現我們品牌專業性。

品牌升級

UNFOLD是追波一個很老牌的設計團隊了，他們來自美國佛羅裏達州的薩拉索塔，他們將自己的設計作品做出動效作為自己的品牌來宣傳，更好的體現了他們設計的專業、用心和前衛。

Firefox新品牌VI升級設計，在新的品牌架構中，Firefox瀏覽器與Firefox Send，Firefox Monitor和Firefox Lockwise產品相當。

新創建的產品係列由傘品牌Firefox領導。作為傘形商標的商標，Firefox的功能是基於瀏覽器的徽標螺旋圖形。你可以將徽章標誌想象為瀏覽器的圖標，因為作為應用程序圖標和菜單圖標，狐狸和地球儀隻剩下橙藍色黃球。漩渦是動態的，開放的並且在視覺上吸引人。

品牌IP篇動效

品牌IP化是移動互聯網變革下產生的，品牌IP就是品牌的“人格化”，目的是為了迎合品牌的主流人群用的一種營銷手段。品牌IP主體可以是一個擬物的形象，可以表達用戶情感在精神層面與用戶達成共鳴。

品牌IP可以緩解品牌的周期性衰落問題，給品牌重新賦予生命力，所以品牌IP化漸漸的流行起來。當品牌IP賦予了動效會更加真實形象，更好的傳達寓意。

界面動效篇 

界面動效可以讓界面更活潑生動，還可以更好傳達用戶與界面之間的交互情感，好的界面動效設計可以解決界面中的功能問題，讓產品更容易被用戶接受，能讓你的應用更快、更流暢。

微交互動效

界面微交互動效會讓用戶體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。

圖標動效

在短視頻領域中圖標動效運用更為廣泛，在直播廣場中涮禮物時有炫酷的圖標動效會更加用戶的炫耀感和愉悅感。當然我們在產品設計中也可以設計微動效來傳達用戶點擊或觸摸的行為動效，可以更加用戶理解界面之間的轉場和交互關係。

界面動效

界面動效沒什麼好說的，依然是動效占比最重的部分，對比初學者界面動效首先把握時間的長短，關於動效時間的學習可以學習Material design界面動效，裏面都有嚴謹的時間規範。www.material.io/design/motion/speed.html#duration

難點在於緩動函數貝塞爾曲線Linear、Ease、Ease-in、Ease-out、Ease-in-out，轉場時運用了大量的緩動函數效果都很棒。

Mg動畫篇 

Mg動畫

Mg動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。

行走動效

行走動效是Mg動效學習的必修課，大體分為動物人物的行走、奔跑、跳躍等形態，如果簡單的行走動畫隻要參考動物或人的行走分步圖插上關鍵幀就可以製作完成。

對於一些彈性的行走動畫，我們那需要使用插件可以使用Puppet Tools插件利用圖釘來製作骨架的工具，但因為圖釘工具本身的缺陷，容易破圖。DUIK插件現在普遍用在AE製作角色動畫（角色動畫比較硬），RubberHose插件角色動畫比較軟，相對更加自然。為了更好的做好人物角色動畫還需要平時對人物形態更細致的觀察。

Q彈動畫

 

Q彈動畫中的Q彈效果會讓畫面更加有趣，會讓人重複欣賞不回感到膩。使用AE彈性表達式Bounce 和 Overshoot！利用這個兩個表達式你可以輕而易舉地實現各種彈性動畫，也可以使用Ae腳本：物體彈簧彈性預設腳本 Aescripts Rubberize It，可以將你的物體圖形層中的元素模擬成具有彈簧彈性效果，更符合力學！

循環動效

循環動效是為了更好的展示一個作品的自然收尾銜接，沒有明顯的停頓感會讓欣賞者樂此不疲。所以我們在設計動效時應盡可能使用循環動效。

動效創意篇 

偽3D旋轉動效

偽3D旋轉動效漸漸的成為一種趨勢，360度無死角旋轉對角色造型有更高的要求。偽3D旋轉動效也漸漸被更多的設計愛好者所喜歡，偽3D旋轉動效主要使用了ae表達式進行製作對360不同旋轉角度進行定型，這種動效比較新穎、很有意思百看不厭。

抖音風（魔性）

抖音風就是一種加上魔性的音樂，可以讓用戶無限循環進行觀看。抖音風動效也是如此，光看動效畫面就很魔性可以無限循環看很多篇，越看越有趣。

形變動效

形變動效的魅力就在於都是圍繞主題進行展開，並且通過一定的趣味性來抓住用戶的眼球，通過一些不規律的形變會讓人思考它是如何實現的，是不是用了很高深的技術等，會給人留下深刻印象並嚐試去思考。

跟隨動效

早期的跟隨動畫多為網站上的鼠標跟隨形變動效，現在跟隨動畫可以加入三維動畫或使用插件Joysticks ’n Sliders可以在一個小的框框內實時反應畫面的動態。

酷炫科技風

AE Trapcode插件最常用的是particular和form了，這兩款粒子插件可以製作出很多酷炫的動態效果，隨著科技進步上面的動態炫酷風格可適用於多媒體大屏展示或用於公司企業官網，通過粒子插件來突出企業科技感，多用戶互聯網公司。

三維動效（C4D）

c4d三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件製作動效的最大優勢是通過動力學和表達式會模擬真實感，未來在AR/VR領域會有更好的發展。相對於界面動效學習成本難度也相對較大。

動效應用篇 

字體篇

小米MIUI 11推出了“動態字體係統”，可以無級調節字體粗細，每個人都能找到自己感覺舒適的閱讀字重，同時係統會根據內容不同，給予不同程度的加粗，交互細節也得到了全面提升。字體也慢慢加入動效的行業裏來了。

2019年11月7日，我們將在阿姆斯特丹中央車站接管通常用於24小時廣告的所有80個屏幕，以展示來自世界各地的設計師的動畫設計。該網站旨在引起公眾參觀展覽的興趣，並鼓勵設計師，工作室和藝術院校提交他們的作品。

技術本身在很大程度上依賴於我們使用Processing和After Effects創建的動畫。我們使用了p5.js的Javascript來設定網站上的交互元素。可以通過鼠標輸入，也可以使用手機中的陀螺儀。

插畫動效

插畫繪製一般都具有藝術感，插畫傳達的信息是否明確就顯得格外重要。適當添加簡單的動效，會增加插畫的場景性給用戶帶入感。插畫和動效結合起來更容易引導用戶，吸引人的眼球。插畫動畫可以幫助用戶更好的了解內容，會讓用戶在界面插畫中尋找可交互的體驗樂趣。

Ipad插畫動效

 Ipad插畫之所以能流行還是因為蘋果公司出的ApplePencil ，用過的都說好。ApplePencil 能幫你盡情表達創意。無論你是在畫水彩，進行室內設計，還是潤色照片，ApplePencil 總能幫你把創想變成現實。

追波大佬Gal Shir上傳的作品都是錄製自己使用 Ipad插畫的整個過程，從構圖起形加光陰加材質，最後形成一幅美麗的插畫。想學習 Ipad插畫技巧更多請到Gal Shir的追波主頁觀看。https://dribbble.com/galshir

遊戲動效

遊戲動效可以很好的引導玩家操作，幫助新手引導，讓玩家了解遊戲規則和操作使用，好的遊戲動效可以增加用戶粘性。遊戲動態、場景特效、角色動畫對動畫運動規律都有很高的要求，遊戲動態demo也可以節約研發人員的時間成本和溝通效率。

Priciple高保真

Principle是一款做原型的軟件。很多公司也用Principle做高保真原型，這樣就可以作為最小可行性產品（mvp）,在正式開發前就進行用戶調查、可用性測試。

阿裏大佬Dimest的作品最具有代表性，視覺衝擊力強有美感，加上創意的微交互讓Priciple高保真作品獨具一格。更多的高保真動效作品可以去Dimest追波主頁欣賞。www.dribbble.com/Dimest

代碼動效篇

GitHub是一個面向開源及私有軟件項目的托管平台，GitHub是基於代碼已經實現了可用的代碼動效，如果工作中有類似的動效效果可用直接使用，對於設計或者產品來說公司中有這樣的前端此乃大幸。願意實現更好的用戶體驗中的微交互微動效花時間花精力。

最後還是要感謝程序員幫我們守住產品實現的最後一道防線，可能我們設計時會出現思考不周的情況或者理想與實踐之間的衝突問題等等，程序員會用更理性的思考方式幫我們找到產品界面中的漏洞，及時調整確保產品的合理上線。

 

原文地址： 水手哥學設計（公眾號）

作者：水手哥