前言

在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來(lái)的2021的開(kāi)篇帶個(gè)好頭。本文在了解這些趨勢(shì)的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來(lái)幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。

流行趨勢(shì)跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說(shuō)趨勢(shì)就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒(méi)有絕對(duì)的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開(kāi)始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。 

而在進(jìn)入下一個(gè)十年的過(guò)程中，我們對(duì)數(shù)字產(chǎn)品和體驗(yàn)的依賴將日益增長(zhǎng)，預(yù)測(cè)真正勝出的將會(huì)是3D動(dòng)畫和用戶界面/用戶體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無(wú)法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來(lái)看看未來(lái)那些不可忽視的設(shè)計(jì)趨勢(shì)吧。

（注:圖片來(lái)自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請(qǐng)告知?jiǎng)h除）

1、3D與UI結(jié)合

隨著且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開(kāi)始變得越來(lái)越受歡迎，而在這之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動(dòng)效、電商到平面視覺(jué)，在所有的設(shè)計(jì)類型中都能找到它，3D現(xiàn)實(shí)主義已是各個(gè)領(lǐng)域的大勢(shì)。

圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場(chǎng)景組件，幫助3D小白更快地搭建出具有沖擊力的視覺(jué)組合。

特點(diǎn)：

? 直觀感受；

? 立體真實(shí)；

? 形態(tài)豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

實(shí)例應(yīng)用：

各大廠都開(kāi)始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個(gè)品牌靜態(tài)頁(yè)面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時(shí)間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開(kāi)始慢慢運(yùn)用到更多的界面交互、H5活動(dòng)中。

▲閑魚、QQ、花椒直播的3D啟動(dòng)頁(yè)

▲得物（毒）的3D空間動(dòng)效

網(wǎng)易云音樂(lè)每年的音樂(lè)總結(jié)報(bào)告都追隨著的設(shè)計(jì)潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶的主觀代入感，以下是每年的設(shè)計(jì)風(fēng)格變化：

▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場(chǎng)景

▲2020-總結(jié)陳詞H5

▲總結(jié)報(bào)告Banner的動(dòng)效

其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營(yíng)場(chǎng)景，高度還原現(xiàn)實(shí)世界，給小朋友帶來(lái)最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。

▲洪恩識(shí)字（3D學(xué)習(xí)場(chǎng)景）、騰訊開(kāi)心鼠英語(yǔ)ABCmouse

▲IP在播放兒歌時(shí)的互動(dòng)

值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺(jué)層次。

蘋果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶體驗(yàn)。”這次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計(jì)趨勢(shì)。

2、軟漸變（Soft gradients）

過(guò)于強(qiáng)烈的漸變不再是趨勢(shì)，大多數(shù)設(shè)計(jì)師都開(kāi)始喜歡使用非常簡(jiǎn)單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶人群需要輕松溫和的視覺(jué)環(huán)境，那么此風(fēng)格再適合不過(guò)。

軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計(jì)中。

特點(diǎn)：

? 低調(diào)溫和

? 微妙漸變

? 清新愉悅

 

2.1、柔和背景

在設(shè)計(jì)網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來(lái)創(chuàng)造多彩的模糊背景。它使設(shè)計(jì)看起來(lái)非?，F(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺(jué)焦點(diǎn)。

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

實(shí)例應(yīng)用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來(lái)塑造物體，柔陰影使設(shè)計(jì)元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

實(shí)例應(yīng)用：

▲有道數(shù)學(xué)（已下架）

▲Uki

3、玻璃擬態(tài)（Glassmorphism）

去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會(huì)出現(xiàn)問(wèn)題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無(wú)法完整地使用在整套應(yīng)用程序中。

▲Alexander Plyut

伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來(lái)的生硬不立體感。而Big Sur的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語(yǔ)言更為時(shí)尚簡(jiǎn)潔。蘋果設(shè)計(jì)師 Alan Dye 在發(fā)布會(huì)上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺(jué)的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。

而的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實(shí)結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對(duì)關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。

特點(diǎn)：

? 透氣磨砂

? 層級(jí)空間

? 簡(jiǎn)潔擬物

▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的作品也朝著玻璃擬態(tài)變化

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

實(shí)例運(yùn)用：▲毛玻璃視覺(jué)可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語(yǔ)言

▲的MacOS Big Sur操作系統(tǒng)

▲圖標(biāo)的變化

4、暗黑模式

暗黑模式是白色界面的相反版本，適用于午夜時(shí)分。之前用了很長(zhǎng)時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見(jiàn)到太陽(yáng)光般刺眼，果然暗黑模式用久了還是比較舒服的。

 暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡(jiǎn)單來(lái)說(shuō)暗黑模式可以在任何場(chǎng)景下使用，并沒(méi)有降低對(duì)比亮度；夜間模式則專為夜間場(chǎng)景設(shè)計(jì)，重在降低對(duì)比度，以降低在暗光環(huán)境下屏幕對(duì)人眼的刺激。

 

特點(diǎn)：

? 突出內(nèi)容

? 減輕干擾

? 沉浸體驗(yàn)

▲Tom Koszyk

▲Victa Wille

▲Golo

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

▲Tran Mau Tri Tam ?

實(shí)例應(yīng)用：

▲有道詞典

▲愛(ài)范兒（ifanr）

最常使用暗黑模式的車載系統(tǒng)：

▲小度車載

暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來(lái)的沉浸以及輕打擾體驗(yàn)還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計(jì)：

▲MOO音樂(lè)(可手動(dòng)切換顏色模式)

▲Space FM

5、多彩高對(duì)比度界面

受Material Design調(diào)色板的影響，2020年用戶界面趨勢(shì)的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡(jiǎn)約的界面中明亮大膽且對(duì)比鮮明的色彩一直都處于增長(zhǎng)趨勢(shì)。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。

顏色是為界面添加信息和情緒以及使其看起來(lái)美觀和吸引人的最有效方式之一，對(duì)比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢(shì)還將會(huì)繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。

 

特點(diǎn)：

? 活潑大膽

? 對(duì)比鮮明

? 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

在網(wǎng)站設(shè)計(jì)中的應(yīng)用：

▲https://www.theartcenter.nyc/

▲https://www.squadeasy.com/en/

▲https://takeboost.com/

實(shí)例應(yīng)用：

▲GoFun出行

▲開(kāi)言英語(yǔ)

6、抽象幾何元素

從上世紀(jì)初開(kāi)始，抽象構(gòu)成中的簡(jiǎn)單幾何形狀就已經(jīng)用于視覺(jué)藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡(jiǎn)單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計(jì)看起來(lái)既規(guī)則又有趣。

幾何圖形可以運(yùn)用到UI設(shè)計(jì)中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號(hào)的記憶點(diǎn)。

特點(diǎn)：

? 規(guī)則組合

? 品牌印象

? 重復(fù)記憶

▲Johnny Nova

▲Vladimir Gruev

實(shí)例應(yīng)用：

最近看到的一組原色視覺(jué)剛好融合了高對(duì)比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來(lái)打造畫面空間及變化，帶來(lái)極具視覺(jué)沖擊的音樂(lè)色彩與魅力。

▲專輯的主視覺(jué)

當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來(lái)越多的關(guān)注。

7、極簡(jiǎn)風(fēng)

極簡(jiǎn)設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長(zhǎng)一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來(lái)越多，所以現(xiàn)在用戶想要盡可能避免“視覺(jué)垃圾”，這也是為什么我們會(huì)選擇更簡(jiǎn)潔專一的界面。

特點(diǎn)

? 專注信息

? 清晰易用

? 簡(jiǎn)單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

談到極簡(jiǎn)主義，就不可避免會(huì)涉及到無(wú)鍵趨勢(shì)，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡(jiǎn)潔，而這種簡(jiǎn)化過(guò)的設(shè)計(jì)將讓手勢(shì)操作和語(yǔ)音交互更為流行。

▲Taras Migulko

▲Gleb Kuznetsov?

實(shí)例應(yīng)用：

▲夸克瀏覽器的夸克寶寶

8、將視頻應(yīng)用到UI中

在 2020 年，信息的觸達(dá)的速度將會(huì)變得更快，而視頻是很好的載體，各個(gè)年齡段的用戶都喜歡觀看引人入勝的動(dòng)畫，無(wú)論是選擇通過(guò)短視頻還是電影的方式來(lái)推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶忠誠(chéng)信任感。

特點(diǎn)：

? 營(yíng)造氛圍

? 類型多樣

? 品牌調(diào)性

▲Fireart Studio

▲Ehsan Rahimi

實(shí)例應(yīng)用：

▲moo音樂(lè)登錄頁(yè)

▲蝦米音樂(lè)歡迎頁(yè)

9、插畫與3D的界線越來(lái)越模糊

藝術(shù)插圖從2017年開(kāi)始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計(jì)行業(yè)，是設(shè)計(jì)領(lǐng)域中最熱的趨勢(shì)之一。插畫的視覺(jué)能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問(wèn)題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。 

在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對(duì)比強(qiáng)烈的大色塊擴(kuò)大了視覺(jué)張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！

▲3D人物的畫筆觸感

▲畫面光源處由波普?qǐng)A點(diǎn)組成的背景

▲紙本漫畫書中的“聲音詞”

▲漫畫經(jīng)典線條

▲Entei Ryu在3D建模使用插畫質(zhì)感

▲Minh Pham ?在ui界面中的嘗試

實(shí)例應(yīng)用：

騰訊旗下音樂(lè)平臺(tái)JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個(gè)風(fēng)格之間來(lái)回切換，給我們帶來(lái)了一個(gè)多元的音樂(lè)世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號(hào)“UoU_Studio”觀看完整視頻。

在3D開(kāi)始迅速發(fā)展的階段，二維與三維之間的界限變得越來(lái)越模糊，插畫作品也可以具備強(qiáng)互動(dòng)性，而3D插畫與動(dòng)效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來(lái)插畫更多的可能性。

10、更多的微交互動(dòng)效

最后一點(diǎn)，還是要強(qiáng)調(diào)動(dòng)效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗(yàn)方面扮演著非常重要的角色。它們?cè)?UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。

 

動(dòng)效起到的作用：

? 引起人們對(duì)應(yīng)該做什么或接下來(lái)將要發(fā)生的事情的關(guān)注；

? 創(chuàng)造流暢和視覺(jué)愉悅的過(guò)渡；

? 帶給使用者美觀的享受；

? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；

? 確認(rèn)用戶使用旅程中的操作。

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

實(shí)例應(yīng)用：

▲GoFun選擇車輛后的頁(yè)面轉(zhuǎn)場(chǎng)動(dòng)效

結(jié)尾：

2020的趨勢(shì)在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會(huì)根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供的豐富體驗(yàn)。

借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計(jì)。

設(shè)計(jì)趨勢(shì)還在快速增長(zhǎng)變化，有些趨勢(shì)總能長(zhǎng)期霸屏，未來(lái)還將迎來(lái)更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢(shì)，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。

文章來(lái)源：UI中國(guó)   作者：_阿丹a_

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)