本篇結合當下最佳流行設計與實例，淺析 2021 年動效趨勢，希望可以 You guys 帶來一些靈感~全篇多動圖與視頻，可口易咀嚼~請放心服用

（(⊙_⊙)溫馨提示：因內含視頻可提前將音量調節至靜音，動圖需加載等待）

前言

動效設計在 UI 的使用除了其五彩斑斕的外表( 花里胡哨 ），也有硬核的內心。對產品和用戶影響相輔相成，動效作用可以體現在 ——

1. 使用動效使產品達到層級傳達的效果，讓用戶快速清晰頁面的層級結構，減少用戶的認知成本

2. 可以將一些引導操作以動效的形式呈現，吸引用戶的注意，互動形式的動效反饋提升用戶的操控感

3. 有趣的動效往往會使產品更加生動形象，可以向用戶傳達出相應的情緒，從而引發用戶的共鳴，增強用戶感官體驗

目錄

接下來圍繞當前動效趨勢，分享 3 招讓你的動效更豐富——分別是 P1 虛擬現實 · P2 輕量風格 · P3 粗獷主義

虛擬現實

首先來看動效趨勢中的第一式 ——虛擬現實

靜態或扁平的設計在 App 與網頁中大家已經習以為常，增加 3D 或 AR 等立體元素讓平淡的頁面更加生動，讓用戶在虛擬世界感受現實世界的真切

1. 3D 動效

3D 動效是虛擬現實的基礎，越來越多的 3D 設計被用于 App 中，所以 3D 立體元素應用到互聯網產品中是一種不可忽視的趨勢，結合上 3D 動效后會使得產品更加生動有趣

3D 元素非常多樣，如 3D 人物、大火的 Big sur 圖標、手勢實物等

動圖

我們看下微軟最新的 3D 表情案例視頻來感受一下

2. 新擬態

新擬態在今年的概念稿中讓大家眼前一亮，通過漸變與光影打造一種偽 3D 的效果，在 mac OS 的 Big sur 系統中有所涉略——比如開關按鈕等將投影和高光效果更為細化了

但是識別性差是這種風格的弊端，所以廣泛應用前需進行更深入的研究，提升其辨識度

這些圖模擬光影變化實現偽 3D 立體感，類似于浮雕的效果，介于扁平和投影之間。

圖標設計上同樣也可以使用到新擬態效果，結合了新擬態與多彩效果不再單一難識別。

3. 實景再現

使用動效進行還原真實場景，或者最新的一些實時熱點，提升趣味性的同時也讓用戶獲得更多的體驗。

左邊是騰訊最新的動效表情 yyds、又菜又狗等活潑可愛熱詞，右邊調節溫度背景色的調整與動態氣流似乎真的可以體驗溫度變化。

可以看到一下視頻中，動態 AR 在視頻運用上越來越廣泛，人臉識別跟隨動效這類真實場景集成到設計中。

輕量風格

接下來，傳授第二式 —— 輕量風格

何為輕量風格？利用液態、夢幻色彩打造清透的質感，朦朧的透氣性使得整體設計更輕質靈動。

1. 極光液態

輕量風格的第一內容，極光液態。它的使用早在微軟系統中就有體現，交錯的流光與液態感賦予了產品靈氣，為設計提升了呼吸感。

UXDC 的液態宣講會大家都有印象了。當今液態的運用如 iOS 14 設計、或概念稿中結合極光背景和點擊后的液態柔軟觸感都很有趣。

欣賞一下微軟發布極光液態動效的視頻更為直觀，用色選擇以及液態運用非常舒適。

2. 玻璃模糊

輕量風格的第二內容，玻璃模糊效果。玻璃模糊效果的出現給設計領域帶來了更多的設計可能性，輕量的材質變化提升了視覺美感

騰訊的圖標、網頁設計運用、蘋果圖標的玻璃質感都讓設計有了新的沖擊。

優酷在今年的品牌設計中大膽運用了輕量風格，液態結合極光撞色，柔和清透卻不失沖擊力，玻璃質感的點綴更為畫龍點睛。

粗獷主義

招式不用多，第三招終極大招——粗獷主義

常規認為設計是精致的，但結合跳躍性的質感給人們帶來更刺激的愉悅感，不太規矩的質感、酷炫極致的風格統稱為粗獷主義。

1. 酸性 & Y2K

酸性 & Y2K 的出現可謂是帶來了一股復古風潮，是一種腐蝕性感觀，實際上代表著幻彩搭配給人以迷幻的效果。

它是類千禧年的潮流風，給用戶一種未來感，科技感，復古虛幻。

可以看到致幻的酸性風格與復古的 Y2K 風格圖，特別又極致。

通過一段視頻了解一下酸性與動效的結合。

2. 加粗字體

加粗的字體如何讓它變得個性化？并非狹義上的粗體，而是廣義上讓用戶更直觀的看到文字表達，特殊排版加上復古元素讓你的文字動效時尚吸睛。

字體案例，加粗字體、重復式、故障風、文字扭曲或環狀文字都讓其充滿趣味和律動。

今年奧運會海報同樣也將字體結合國潮、酸性等潮流元素。

3. 真實材質

粗狂風格不止于一些虛無的感覺，大塊幾何結合真實材質或仿真材質進行設計，如積木、軟陶等可以使設計更具有創新質感。

左邊的插畫人物身體都是由幾何積木拼接，右邊是一款記賬軟件用軟陶的花朵表示數量多少。

利用幾何積木拼接人物造型。

小彩蛋

快速制作 3D 圖形軟件——Spline

對于 3D 設計有許多軟件可使用，最常見無疑是 C4D，但是學習成本較高，對于想要快速制作 3D 圖形的小伙伴—— Spline 無疑是絕佳的選擇，操作簡單易上手，界面同 Sketch 與 PS 學習成本低，從設計到建模可直接在Spline中實現。

下載地址： https://spline.design/

可以花一分鐘來小小了解一下使用視頻：

寫在最后

通過以上三個動效招式，希望通過粗淺介紹，讓大家了解 2021 動效部分趨勢，也讓我們的設計有更多的可能性和趣味性~

謝謝大家~(??ω??)

歡迎關注作者微信公眾號：「UED粽一了」