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

((☉_☉)溫馨提示︰因內含視頻可提前將音量調節至靜音,動圖需加載等待)

前言

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

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

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

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

目錄

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

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

虛擬現實

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

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

1. 3D 動效

3D 動效是虛擬現實的基。 嚼叢蕉嗟3D 設計被用于 App 中,所以 3D 立體元素應用到互聯網產品中是一種不可忽視的趨勢,結合上 3D 動效後會使得產品更加生動有趣

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

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

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

動圖

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

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

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

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

2. 新擬態

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

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

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

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

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

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

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

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

3. 實景再現

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

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

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

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

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

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

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

輕量風格

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

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

1. 極光液態

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

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

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

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

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

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

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

2. 玻璃︰/strong>

輕量風格的第二內容,玻璃︰L。玻璃︰L某魷指杓屏 虼戳爍嗟納杓瓶贍芐,輕量的材質變化提升了視覺美感

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

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

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

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

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

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

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

粗獷主義

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

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

1. 酸性 & Y2K

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

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

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

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

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

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

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

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

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

2. 加粗字體

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

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

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

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

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

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

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

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

3. 真實材質

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

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

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

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

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

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

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

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

小彩蛋

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

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

下載地址︰

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

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

寫在最後

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

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

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

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

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

點贊 68
收藏 235
繼續閱讀相關资讯

發表評論 已發布 8

還可以輸入 800 個字
 
 
載入中....
8 收藏