前言

在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來的2021的開篇帶個(gè)好頭。本文在了解這些趨勢(shì)的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來幫助大家啟發(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ā)展，所以說趨勢(shì)就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒有絕對(duì)的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。 

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

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

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

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

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

特點(diǎn)：

? 直觀感受；

? 立體真實(shí)；

? 形態(tài)豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

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

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

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

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

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

網(wǎng)易云音樂每年的音樂總結(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í)世界，給小朋友帶來最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。

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

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

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

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

2、軟漸變（Soft gradients）

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

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

特點(diǎn)：

? 低調(diào)溫和

? 微妙漸變

? 清新愉悅

 

2.1、柔和背景

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

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

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

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(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)問題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無法完整地使用在整套應(yīng)用程序中。

▲Alexander Plyut

伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語言更為時(shí)尚簡(jiǎn)潔。蘋果設(shè)計(jì)師 Alan Dye 在發(fā)布會(huì)上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(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)用：▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語言

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

▲圖標(biāo)的變化

4、暗黑模式

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

 暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡(jiǎn)單來說暗黑模式可以在任何場(chǎng)景下使用，并沒有降低對(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)用：

▲有道詞典

▲愛范兒（ifanr）

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

▲小度車載

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

▲MOO音樂(可手動(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后啊。

顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對(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出行

▲開言英語

6、抽象幾何元素

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

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

特點(diǎn)：

? 規(guī)則組合

? 品牌印象

? 重復(fù)記憶

▲Johnny Nova

▲Vladimir Gruev

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

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

▲專輯的主視覺

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

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

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

特點(diǎn)

? 專注信息

? 清晰易用

? 簡(jiǎn)單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

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

▲Taras Migulko

▲Gleb Kuznetsov?

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

▲夸克瀏覽器的夸克寶寶

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

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

特點(diǎn)：

? 營(yíng)造氛圍

? 類型多樣

? 品牌調(diào)性

▲Fireart Studio

▲Ehsan Rahimi

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

▲moo音樂登錄頁

▲蝦米音樂歡迎頁

9、插畫與3D的界線越來越模糊

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

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

▲3D人物的畫筆觸感

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

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

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

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

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

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

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

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

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)該做什么或接下來將要發(fā)生的事情的關(guān)注；

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

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

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

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

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

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

▲GoFun選擇車輛后的頁面轉(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)期霸屏，未來還將迎來更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢(shì)，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。

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

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(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ù)