前言

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

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

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

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

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

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

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

特點：

? 直觀感受；

? 立體真實；

? 形態(tài)豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

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

實例應(yīng)用：

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

▲閑魚、QQ、花椒直播的3D啟動頁

▲得物（毒）的3D空間動效

▲樂無登錄頁

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

▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景

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

▲總結(jié)報告Banner的動效

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

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

▲IP在播放兒歌時的互動

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

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

2、軟漸變（Soft gradients）

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

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

特點：

? 低調(diào)溫和

? 微妙漸變

? 清新愉悅

 

2.1、柔和背景

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

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

實例應(yīng)用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

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

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

實例應(yīng)用：

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

▲Uki

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

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

▲Alexander Plyut

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

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

特點：

? 透氣磨砂

? 層級空間

? 簡潔擬物

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

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

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

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

▲圖標(biāo)的變化

4、暗黑模式

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

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

 

特點：

? 突出內(nèi)容

? 減輕干擾

? 沉浸體驗

▲Tom Koszyk

▲Victa Wille

▲Golo

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

▲Tran Mau Tri Tam ?

實例應(yīng)用：

▲有道詞典

▲愛范兒（ifanr）

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

▲小度車載

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

▲MOO音樂(可手動切換顏色模式)

▲Space FM

5、多彩高對比度界面

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

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

 

特點：

? 活潑大膽

? 對比鮮明

? 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

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

▲https://www.theartcenter.nyc/

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

▲https://takeboost.com/

實例應(yīng)用：

▲GoFun出行

▲開言英語

6、抽象幾何元素

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

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

特點：

? 規(guī)則組合

? 品牌印象

? 重復(fù)記憶

▲Johnny Nova

▲Vladimir Gruev

實例應(yīng)用：

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

▲專輯的主視覺

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

7、極簡風(fēng)

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

特點

? 專注信息

? 清晰易用

? 簡單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

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

▲Taras Migulko

▲Gleb Kuznetsov?

實例應(yīng)用：

▲夸克瀏覽器的夸克寶寶

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

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

特點：

? 營造氛圍

? 類型多樣

? 品牌調(diào)性

▲Fireart Studio

▲Ehsan Rahimi

實例應(yīng)用：

▲moo音樂登錄頁

▲蝦米音樂歡迎頁

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

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

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

▲3D人物的畫筆觸感

▲畫面光源處由波普圓點組成的背景

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

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

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

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

實例應(yīng)用：

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

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

10、更多的微交互動效

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

 

動效起到的作用：

? 引起人們對應(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

實例應(yīng)用：

▲GoFun選擇車輛后的頁面轉(zhuǎn)場動效

結(jié)尾：

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

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

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