#p#副標題#e#

#p#副標題#e#

#p#副標題#e#

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

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

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

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

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

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

品牌動效篇 

品牌動效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是基于代碼已經實現了可用的代碼動效，如果工作中有類似的動效效果可用直接使用，對于設計或者產品來說公司中有這樣的前端此乃大幸。愿意實現更好的用戶體驗中的微交互微動效花時間花精力。

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

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

作者：水手哥

 1、新聞列表互動類 

https://dribbble.com/shots/4757077-Newslist-Interactions 

這個新聞列表的互動非常順滑，用良好的原型設計工具來創建這個應用程序原型，使其更加真實。 

2、閱讀類

https://dribbble.com/shots/5284950-Reading-App-Design-Project-Interactive-2 

這是一個閱讀應用程序設計，具有流暢的動畫和精致的UI設計，使這個應用程序更加真實。最令人驚訝的部分是添加到購物車的微交互。超酷。 

3、液體下拉動畫

https://dribbble.com/shots/2590603-Liquid-Pull-Down-UI-Animation 

這是Dribbble應用程序項目的重新設計，帶有液體下拉動畫，使設計更加有趣和生動。 

4、nelio食品插畫

https://dribbble.com/shots/4023198-Nelio-Food-Illustrations 

5、nike+聊天界面

https://dribbble.com/shots/6289684-Nike-Chat-dark-concept 

這是Nike +聊天應用程序的聊天概念，具有深色背景和流暢的交互，使這個應用程序項目達到一個全新的水平。 

6、交互式標簽欄

https://dribbble.com/shots/5982908-Interactive-animation-Tab-bar 

7、視頻應用動畫

https://dribbble.com/shots/6248258-Video-App-Animation 

這個視頻應用交互是驚人的。整個設計流程超順暢，色彩搭配得非常好。我肯定會使用這個應用程序。 

8、點餐動畫 

https://dribbble.com/shots/5567998-interactive-animation-0144 

如果您想以有趣的方式訂購一杯可口可樂，這個應用程序概念非常有趣。美麗的色彩和流暢的設計流程使得整體非常干凈。 

9、Rally網頁 

https://rallyinteractive.com/ 

Rally是一個小型的數字產品工作室，交互和動畫非常酷，具有干凈的界面和精致的色彩搭配。點擊箭頭以獲取更多信息功能是本網站上最時尚的設計元素之一。 

10、Globekit 

https://globekit.co/ 

GlobeKit是一個可視化平臺，可以將地理數據轉化為令人驚嘆的交互式體驗。巨大的移動地球儀令人驚嘆，并通過使用動畫獲得了很多關注。 

11、電子商務類 

https://dribbble.com/shots/6314115-Products-Page-Animation 

電子商務網站始終保持安全，特別是在其產品頁面上。如果您想增加轉化率和收入，此產品頁面就是一個很好的例子，使用流暢的互動來展示他們的產品。 

12、開發者網站 

https://dribbble.com/shots/5999213-Developer-Website-Contacts-Page 

我不敢相信這是一個聯系頁面！如果我是網絡開發者，我肯定會通過電子郵件發送給這個網站設西瓜非?？蓯?，互動使整個頁面在視覺上很有趣。 

13、Apple Music 

https://dribbble.com/shots/5523931-Apple-Music 

這是Apple Music的非官方重新設計。通過在黑暗模式下繪制具有漂亮的色彩漸變和藝術家卡片的功能卡，在播放音樂時看起來更有趣。 

14、Hello World Agency Portfolio 

https://dribbble.com/shots/6339620-Hello-World-Agency-Portfolio-Website 

15、Almea解決方案 

https://dribbble.com/shots/6036333- 

這個項目太棒了，布局干凈，用戶界面精致，互動性強，顏色很棒。 

16、馬里布蘭界面

Tab bar設計中，有一個很重要但卻常常會被設計師們遺漏的關鍵點——tab切換時的 “圖標動畫設計” 。

Tab Bars圖標動畫的作用

精彩的圖標動畫，對整體的設計具有畫龍點睛的作用，降低tab切換時的枯燥感，提升操作的愉悅度和期待感。甚至可以通過tab的動畫設計給用戶傳達出整個APP設計的品牌及理念。

動靜對比

動態的設計豐富了圖標更多可能性的表達，結合不同的動態效果表達出不同的情緒或情感。而除了情感的表達之外，最基礎的作用在于動態比靜態更加吸引眼球、增加視覺關注度，因此在切換tab時具有更強的視覺沖擊力。

柔和與生硬

緩動的動效過度，相比于無動效的設計，在tab切換時整體的視覺感受會更加柔和、輕量。過度直接的反饋，容易造成過度生硬而不具美感。

趣味的表達

由于動效的加入，我們在設計tab切換時會變得更加多元化，而不是單純的只是設計一個動作的反饋。在過度的時間差中，可以進行很多趣味的表達。

情緒代入

圖標結合表情的設計，運用動效的設計，讓整體的情緒感受更加直觀。如下圖案例，默認態與選中態通過前后的差異對比，點擊后出現的表情驚喜，具有不一樣的情緒變化。

Tab Bar 圖標動畫的基礎類型

動畫的設計是多樣化的，Tab bar 圖標動畫的類型實際上并沒有明確的劃分，這里主要列舉的是自己在日常瀏覽設計網站時的收集，以及個人認為比較常見的一些類型。我們可以基于這些常見類型的設計，對我們的設計進行再升華，從而提高整體設計的質感和趣味。

縮放動畫

點擊后通過一定的比例的 “縮放” 反饋，突出tab之前的變化，從而強化了tab操作的感知，提升對于操作區域的視覺聚焦。結合不同的縮放效果，可以呈現出不同的視覺感知，縮放動畫大致分為線性和彈性兩種類型。

線性縮放

圖標在放大或縮小的過程中，使用了勻速的動畫效果，整體動畫一步到位、干凈利落。整體視覺感知較為柔和。

彈性縮放

帶有彈性縮放的tab反饋，讓整體的設計更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標的運動規則：先從0放大到最大（數值根據實際情況設定），然後再回彈至正常大小。

透明度自然過度

讓tab切換之間的過度更加自然、柔和。相比于純靜態切換只多了一層透明度變化，但卻具有完全不一樣的操作視覺感受。

位移

位移出現的圖標會產生一定的速度感，但需要控制位移的速度，過快容易忽略中間的運動軌跡，而影響自然過度的效果。

抖動

通過圖標的左右、上下快速位移或旋轉形成，整體的動畫效果節奏較快，具有一定的速度感。情緒表達上較為俏皮。

左右抖動

點擊后，圖標反饋進行上下快速位移。建議來回位移次數不太太多，控制在1-2次左右，次數太多容易顯得拖沓。

跳動的圖標

點擊切換后，圖標從底部彈起再回到初始位置，整體視覺感受具有跳動的韻律感。

晃動的圖標

旋轉抖動的圖標比上下或左右會更加具有趣味感。設定圖標的中心點或角點為旋轉軸，通過來回晃動而形成的效果。

填充

切換時，默認tab由線形向面形的轉變。填充類型的動畫效果整體簡單、直接，直觀的表達出圖標切換前后的對應關系。關鍵點在于處理好線形與面形的圖標的細節轉換。

中心填充

使用某種幾何圖形（可以是圓形或其他）通過發散放大的設計方式，結合一定的節奏韻律擴展至填滿整個圖標。

掃描填充

動畫效果從圖標的一側，通過劃動變化至填滿。

畫線 – 線形軌跡

以線性圖標或線面圖標中的線運動為主，在設計整套圖標是，在運動軌跡的上需要保持統一（線的初始與結束的位置/方向等）。軌跡不一致，容易導致圖標的一致性被破壞。

局部細節畫線

選擇圖標的關鍵細節或圖標的特征進行畫設計，增強圖標的特征細節，提高圖標的記憶點。

整體畫線

與局部細節畫線基本一致，差別的點在于表達了不同的視覺感受。整體畫線從視覺感受上會相對更加飽滿。但需要根據圖標的復雜程度而定，圖標過度復雜，可能容易造成拖沓的動畫效果。

結合容器

結合不同的幾何形作為選中圖標的當前態的背景，在背景上設計出現的動畫效果。既強化了選中當前態，整體的tab切換的一致性也較高。

元素介質

設計上結合某種圖形元素作為當前選中態，在切換時通過元素的位移、跳動等方式來達到tab切換的動畫效果。

Tab 圖標動畫的組合形

除了以上單種類型的動畫方式外，還可以嘗試多種方式結合。通過不同的方式結合可以產生出更多的可能性，讓你的設計更加具有創意和打破常規的設計。

填充 畫線

填充 抖動

彈性縮放 填充

元素介質 抖動

位移 透明度

更多案例（來自dribbble）

總結

tabbar的圖標動畫最大的作用在于解決切換時的枯燥與單調，我們在設計時除了單純追求動畫的變化及多樣性之外，更多需要思考的是什么樣的動畫更符合我們的設計。

本文的主旨主要是分享自己日常看到的一些動畫效果，以及對收集的內容進行一個分享。實際的動畫樣式或者效果肯定遠遠不只這些，我們可以通過基礎的方法再結合自己的創意發揮出更多滿足自我設計的表達方式。

作者：IDfor (公眾號:IDfor_all)