掌握這3招，搭上 2021-2022 動效設計趨勢快車!

本篇結合當下最佳流行設計與實例，淺析 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 圖標、手勢實物等

動圖

2. 新擬態

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

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

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

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

3. 實景再現

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

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

輕量風格

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

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

1. 極光液態

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

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

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

2. 玻璃模糊

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

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

粗獷主義

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

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

1. 酸性 & Y2K

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

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

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

2. 加粗字體

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

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

3. 真實材質

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

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

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

寫在最后

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

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