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

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

前言

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

1. 使用動效使產(chǎn)品達(dá)到層級傳達(dá)的效果，讓用戶快速清晰頁面的層級結(jié)構(gòu)，減少用戶的認(rèn)知成本

2. 可以將一些引導(dǎo)操作以動效的形式呈現(xiàn)，吸引用戶的注意，互動形式的動效反饋提升用戶的操控感

3. 有趣的動效往往會使產(chǎn)品更加生動形象，可以向用戶傳達(dá)出相應(yīng)的情緒，從而引發(fā)用戶的共鳴，增強(qiáng)用戶感官體驗

目錄

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

虛擬現(xiàn)實

首先來看動效趨勢中的第一式 ——虛擬現(xiàn)實

靜態(tài)或扁平的設(shè)計在 App 與網(wǎng)頁中大家已經(jīng)習(xí)以為常，增加 3D 或 AR 等立體元素讓平淡的頁面更加生動，讓用戶在虛擬世界感受現(xiàn)實世界的真切

1. 3D 動效

3D 動效是虛擬現(xiàn)實的基礎(chǔ)，越來越多的 3D 設(shè)計被用于 App 中，所以 3D 立體元素應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品中是一種不可忽視的趨勢，結(jié)合上 3D 動效后會使得產(chǎn)品更加生動有趣

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

動圖

2. 新擬態(tài)

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

但是識別性差是這種風(fēng)格的弊端，所以廣泛應(yīng)用前需進(jìn)行更深入的研究，提升其辨識度

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

圖標(biāo)設(shè)計上同樣也可以使用到新擬態(tài)效果，結(jié)合了新擬態(tài)與多彩效果不再單一難識別。

3. 實景再現(xiàn)

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

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

輕量風(fēng)格

接下來，傳授第二式 —— 輕量風(fēng)格

何為輕量風(fēng)格？利用液態(tài)、夢幻色彩打造清透的質(zhì)感，朦朧的透氣性使得整體設(shè)計更輕質(zhì)靈動。

1. 極光液態(tài)

輕量風(fēng)格的第一內(nèi)容，極光液態(tài)。它的使用早在微軟系統(tǒng)中就有體現(xiàn)，交錯的流光與液態(tài)感賦予了產(chǎn)品靈氣，為設(shè)計提升了呼吸感。

UXDC 的液態(tài)宣講會大家都有印象了。當(dāng)今液態(tài)的運(yùn)用如 iOS 14 設(shè)計、或概念稿中結(jié)合極光背景和點擊后的液態(tài)柔軟觸感都很有趣。

欣賞一下微軟發(fā)布極光液態(tài)動效的視頻更為直觀，用色選擇以及液態(tài)運(yùn)用非常舒適。

2. 玻璃模糊

輕量風(fēng)格的第二內(nèi)容，玻璃模糊效果。玻璃模糊效果的出現(xiàn)給設(shè)計領(lǐng)域帶來了更多的設(shè)計可能性，輕量的材質(zhì)變化提升了視覺美感

騰訊的圖標(biāo)、網(wǎng)頁設(shè)計運(yùn)用、蘋果圖標(biāo)的玻璃質(zhì)感都讓設(shè)計有了新的沖擊。

粗獷主義

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

常規(guī)認(rèn)為設(shè)計是精致的，但結(jié)合跳躍性的質(zhì)感給人們帶來更刺激的愉悅感，不太規(guī)矩的質(zhì)感、酷炫極致的風(fēng)格統(tǒng)稱為粗獷主義。

1. 酸性 & Y2K

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

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

可以看到致幻的酸性風(fēng)格與復(fù)古的 Y2K 風(fēng)格圖，特別又極致。

2. 加粗字體

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

字體案例，加粗字體、重復(fù)式、故障風(fēng)、文字扭曲或環(huán)狀文字都讓其充滿趣味和律動。

3. 真實材質(zhì)

粗狂風(fēng)格不止于一些虛無的感覺，大塊幾何結(jié)合真實材質(zhì)或仿真材質(zhì)進(jìn)行設(shè)計，如積木、軟陶等可以使設(shè)計更具有創(chuàng)新質(zhì)感。

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

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

寫在最后

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

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