編輯導(dǎo)讀：2020年已經(jīng)過(guò)去一大半，大家有留意本年度有哪些新的UI設(shè)計(jì)趨勢(shì)出現(xiàn)，以及這些會(huì)對(duì)我們未來(lái)的設(shè)計(jì)有什么影響嗎？本文作者對(duì)界面設(shè)計(jì)領(lǐng)域的發(fā)展趨勢(shì)進(jìn)行了研究，從中提取一些2021年可能的設(shè)計(jì)風(fēng)格走向，與大家分享。

2020年已經(jīng)過(guò)去一大半，這些時(shí)間以來(lái)，我一直在關(guān)注數(shù)字設(shè)計(jì)領(lǐng)域未來(lái)的設(shè)計(jì)趨勢(shì)。從年初就開(kāi)始收集，到今8月份了，我想是時(shí)候?qū)l(fā)現(xiàn)的一些趨勢(shì)風(fēng)格分享出來(lái)，這些風(fēng)格很有可能繼續(xù)延續(xù)到2021的產(chǎn)品設(shè)計(jì)上。

2020年UI界面設(shè)計(jì)趨勢(shì)，這是我去年寫(xiě)的文章，其中大部分預(yù)測(cè)都已經(jīng)在今年的設(shè)計(jì)上呈現(xiàn)。

對(duì)于UI界面視覺(jué)趨勢(shì)，同樣需要我們高度重視。畢竟每年改版方向，視覺(jué)風(fēng)格研究是必不可少的一個(gè)環(huán)節(jié)，下面正式開(kāi)始。

01 少量的漸變

今年在各網(wǎng)站上看到大面積的漸變色設(shè)計(jì)，相對(duì)前兩年來(lái)說(shuō)越來(lái)越少，設(shè)計(jì)上有所克制。大面積的漸變色雖然視覺(jué)沖擊力強(qiáng)，但大部分停留在概念中。

從今年設(shè)計(jì)中我們可以看到設(shè)計(jì)更加理性與克制，將漸變色彩運(yùn)用到關(guān)鍵功能上，突出強(qiáng)調(diào)重要信息。

機(jī)票選購(gòu)界面，將漸變色運(yùn)用到頭部位置去強(qiáng)調(diào)功能。

運(yùn)用在功能卡片上，突出重點(diǎn)信息。

如上圖，設(shè)計(jì)上同樣只將漸變色運(yùn)用在背景上，其他卡片上基本沒(méi)有漸變色。

02 包豪斯風(fēng)格圖形

幾何圖形設(shè)計(jì)是目前運(yùn)用最多一個(gè)設(shè)計(jì)手法，今年發(fā)現(xiàn)一些比較抽象藝術(shù)化包豪斯風(fēng)格幾何圖形，在UI設(shè)計(jì)中大量運(yùn)用，且效果還不錯(cuò)。

這種圖形帶來(lái)好處就是記憶性強(qiáng)，應(yīng)用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運(yùn)用在UI設(shè)計(jì)中。

卡片設(shè)計(jì)采用一些具有意向符號(hào)的圖形，來(lái)表達(dá)功能的設(shè)計(jì)，形成記憶點(diǎn)。

品牌設(shè)計(jì)上，也是重復(fù)這種極簡(jiǎn)包豪斯風(fēng)格幾何圖形。將logo元素提取，進(jìn)行包豪斯風(fēng)格化，重復(fù)運(yùn)用在設(shè)計(jì)中。

03 有深度的界面

今年這樣的設(shè)計(jì)屢見(jiàn)不鮮，大量3D運(yùn)用在界面設(shè)計(jì)中，二維的界面已經(jīng)不再滿足當(dāng)前設(shè)計(jì)需要。設(shè)計(jì)師去探索更多維度學(xué)科與UI界面融合，形成一種全新的視覺(jué)感官。

uber的概念官網(wǎng)就通過(guò)3D來(lái)呈現(xiàn)，表達(dá)功能亮點(diǎn)。

將二維世界三維化，將是2021年重要的趨勢(shì)。目前國(guó)內(nèi)外線上有一些產(chǎn)品，開(kāi)始在部分功能模塊使用這樣設(shè)計(jì)手法，如Naver，支付寶等。

04 毛玻璃效果

可以說(shuō)是趨勢(shì)輪回，毛玻璃的效果又回來(lái)了。這也是今年在各網(wǎng)站設(shè)計(jì)上出現(xiàn)頻次多一些的設(shè)計(jì)。

新的毛玻璃效果更加去注重功能說(shuō)明，用在視覺(jué)強(qiáng)調(diào)的地方。

如上圖設(shè)計(jì)，毛玻璃運(yùn)用在頂部關(guān)鍵信息上。這樣設(shè)計(jì)即可減少其他色彩運(yùn)用，還可以對(duì)功能信息進(jìn)行強(qiáng)調(diào)。

毛玻璃效果運(yùn)用在個(gè)人中心，人物頭像位置，進(jìn)行設(shè)計(jì)強(qiáng)調(diào)。

運(yùn)用毛玻璃去包裝UI界面，可以提升品質(zhì)感與神秘感。

05 沉浸式界面

將功能與場(chǎng)景融合設(shè)計(jì)，用戶在使用產(chǎn)品過(guò)程中，能產(chǎn)生更多情景體驗(yàn)感觸。這也是最近今年喊的比較火的一種設(shè)計(jì)思路。在各網(wǎng)站上，這樣設(shè)計(jì)出現(xiàn)次數(shù)越來(lái)越多，設(shè)計(jì)效果沖擊力強(qiáng)，得到很多設(shè)計(jì)師的認(rèn)可。

場(chǎng)景中關(guān)鍵人物元素與設(shè)計(jì)進(jìn)行巧妙集合。

運(yùn)用超現(xiàn)實(shí)設(shè)計(jì)手法，將人物與酒店場(chǎng)景進(jìn)行排版布局。

將制作材料與產(chǎn)品集合。

擬真植物元素與土地進(jìn)行巧妙集合，在視覺(jué)上傳達(dá)逼真效果。

06 界面排版雜志化

雜志化設(shè)計(jì)風(fēng)格鮮明，可以有助產(chǎn)品去打造強(qiáng)化記憶點(diǎn)。雜志化設(shè)計(jì)的優(yōu)勢(shì)可以不受到網(wǎng)格約束，排版使用大字體，同時(shí)設(shè)計(jì)排版上更加個(gè)性。我們?cè)谧霎a(chǎn)品概念探索前期，可以多去嘗試這樣的風(fēng)格。

07 擬物化圖標(biāo)

擬物圖標(biāo)又回來(lái)了，apple新版本的Big Sur系統(tǒng)，就采用擬態(tài)圖標(biāo)，這也是一個(gè)新的嘗試，當(dāng)然也是一個(gè)開(kāi)始。我們很有必要時(shí)刻關(guān)注這個(gè)趨勢(shì)，未來(lái)將會(huì)在更多設(shè)計(jì)中看到擬物化圖標(biāo)的出現(xiàn)。

不過(guò)這種風(fēng)格也不能大面積運(yùn)用在界面中，我們可以運(yùn)用在一些關(guān)鍵功能入口設(shè)計(jì)上。

在天氣上的運(yùn)用，相對(duì)之前扁平化設(shè)計(jì)，目前具有空間的擬物化設(shè)計(jì)，增加了真實(shí)感。

08 圓形的運(yùn)用

圓形趨勢(shì)，我想大家也許會(huì)忽略的點(diǎn)，最近幾年設(shè)計(jì)中，圓形的設(shè)計(jì)無(wú)處不在。它的好處不言而喻，親和力強(qiáng)、場(chǎng)景覆蓋廣，幾乎任何設(shè)計(jì)都能去用圓形。因此我們有必要去注意圓形運(yùn)用技巧。

星巴克的web UI概念設(shè)計(jì)，采用圓形與產(chǎn)品進(jìn)行集合設(shè)計(jì)排版。

09 2021新擬態(tài)界面

新擬態(tài)趨勢(shì)是2020年受到廣泛關(guān)注的趨勢(shì)之一，這種趨勢(shì)大量使用了柔和的陰影和微弱漸變，使設(shè)計(jì)既具有未來(lái)感又具有現(xiàn)實(shí)感，并且為熟悉的界面帶來(lái)了新的感覺(jué)。相對(duì)之前大面積濃厚陰影而言，目前新的簡(jiǎn)化擬態(tài)界面，會(huì)克制使用這些元素。

2021年擬態(tài)界面，更注重功能與體驗(yàn)。擬態(tài)效果會(huì)使用在關(guān)鍵功能上，如儀表、按鈕，又或者需要重點(diǎn)強(qiáng)調(diào)的地方，避免了大面積使用這種設(shè)計(jì)手法。

寫(xiě)在最后

2021年的趨勢(shì)相對(duì)來(lái)說(shuō)，有繼續(xù)延續(xù)2020年一些設(shè)計(jì)風(fēng)格，這些風(fēng)格將會(huì)在繼續(xù)加強(qiáng)，同時(shí)我們也有發(fā)現(xiàn)，目前越來(lái)越多3D元素與二維界面進(jìn)行集合設(shè)計(jì)，能更生動(dòng)傳達(dá)功能與將故事，2021年大家務(wù)必要注意這種趨勢(shì)的延續(xù)。

作為設(shè)計(jì)師，我們對(duì)設(shè)計(jì)的思考不能只停留在表象層面，而更多的需要圍繞信息傳達(dá)這一設(shè)計(jì)的本質(zhì)功能，以充滿自省的精神深化和反思自己的設(shè)計(jì)意識(shí)，同時(shí)要時(shí)刻保持對(duì)趨勢(shì)的敏感度。將新趨勢(shì)合理的運(yùn)用在產(chǎn)品設(shè)計(jì)中，以產(chǎn)生最大化收益。

#相關(guān)閱讀#

2020年圖標(biāo)設(shè)計(jì)的5個(gè)趨勢(shì)

2020年UI界面設(shè)計(jì)的7個(gè)趨勢(shì)

2020年交互設(shè)計(jì)的9個(gè)趨勢(shì)

#專(zhuān)欄作家#

Tony，微信公眾號(hào)：洞見(jiàn)設(shè)計(jì)，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)，關(guān)注【洞見(jiàn)設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議