編輯導(dǎo)語(yǔ)：隨著時(shí)代的不斷發(fā)展，互聯(lián)網(wǎng)行業(yè)也在不斷的進(jìn)步和改變；根據(jù)時(shí)代的流行以及新事物的出現(xiàn)，每年的設(shè)計(jì)趨勢(shì)也會(huì)有一定的發(fā)展和改變，出現(xiàn)更多更符合用戶(hù)審美和體驗(yàn)的新設(shè)計(jì)；本文作者分享了關(guān)于2021年的設(shè)計(jì)趨勢(shì)報(bào)告，我們一起來(lái)了解一下。

主要整理了Behance 2021設(shè)計(jì)趨勢(shì)報(bào)告、騰訊2021 設(shè)計(jì)趨勢(shì)ISUX報(bào)告 · 用戶(hù)體驗(yàn)篇，方便大家閱讀。

一、Behance 2021

1. UI/IXD設(shè)計(jì)

1）App vs 移動(dòng)端

2021年，不是以“移動(dòng)優(yōu)先”的網(wǎng)站將會(huì)過(guò)時(shí)。

在大多數(shù)業(yè)務(wù)部門(mén)中，如果你使用的是應(yīng)用程序，將獲得最佳體驗(yàn)；所以這些業(yè)務(wù)都專(zhuān)注于其開(kāi)發(fā)和實(shí)施、包括在線商店，社交媒體平臺(tái)，交易平臺(tái)等，將選擇把客戶(hù)遷移到應(yīng)用程序，以獲得更好的用戶(hù)體驗(yàn)并增加其轉(zhuǎn)化率。

2）顏色

顏色是UI設(shè)計(jì)中重要的視覺(jué)元素之一，可以突出內(nèi)容并增強(qiáng)品牌風(fēng)格；而一套好的配色，應(yīng)該是將UI元素以及畫(huà)面進(jìn)行準(zhǔn)確的區(qū)分，達(dá)到和諧的視覺(jué)效果。

3）小部件尺寸

今年推出的iOS14，引用了小組件管理，在一定程度上也影響了界面設(shè)計(jì)；小部件現(xiàn)有3種尺寸：小、中、大，用戶(hù)可以根據(jù)使用習(xí)慣自由排列它們。

設(shè)計(jì)師必須創(chuàng)建3種基本樣式的組件圖標(biāo)，供用戶(hù)自主選擇，而且較大的組件可以顯示更多數(shù)據(jù)和信息。

4）動(dòng)畫(huà)&交互

動(dòng)畫(huà)是構(gòu)建應(yīng)用程序和用戶(hù)體驗(yàn)的重要組成部分，如果不包含動(dòng)畫(huà)，設(shè)計(jì)總像是缺少了點(diǎn)兒什么；有很多創(chuàng)建動(dòng)畫(huà)的方法，比如JSON，將圖像和動(dòng)畫(huà)提取為代碼，JSON與GIF相比，它的大小僅占很小的一部分，并且支持完全透明。

5）3D圖標(biāo)定制

3D已越來(lái)越占據(jù)大家的視線了，且現(xiàn)在它對(duì)UI細(xì)分市場(chǎng)的影響比以往任何時(shí)候都要大；3D圖標(biāo)是2021年新的UI趨勢(shì)，如果覺(jué)得扁平圖標(biāo)有些審美疲勞，轉(zhuǎn)向3D版也不錯(cuò)。

2. 插圖設(shè)計(jì)

1）細(xì)輪廓插畫(huà)

去年，這種特殊的繪畫(huà)風(fēng)格為主導(dǎo)的插畫(huà)非常常見(jiàn)；通過(guò)細(xì)線條呈現(xiàn)的插畫(huà)形式，2021年依舊會(huì)流行。

2）3D

3D插畫(huà)在近年來(lái)，有了很多大的發(fā)展；通過(guò)簡(jiǎn)約的形式，采用或強(qiáng)烈或柔和的色調(diào)，傳遞畫(huà)面信息。

3）70&80年代卡通插圖

在插畫(huà)風(fēng)格上，七八十年代的懷舊卡通風(fēng)插圖占主導(dǎo)地位；一般這種經(jīng)典的風(fēng)格，都是采用輪廓繪制，簡(jiǎn)單的形狀以及一些細(xì)節(jié)處理來(lái)表達(dá)。

4）夸張的形狀&顏色

這種夸張的插畫(huà)形式，盡管乍看下似乎像還未完成，但其實(shí)都是經(jīng)過(guò)深思熟慮的；重疊的形狀和強(qiáng)烈的色彩構(gòu)成了大膽夸張的插圖，激發(fā)任何觀看者的靈感。

3. 動(dòng)態(tài)設(shè)計(jì)

1）經(jīng)典卡通動(dòng)畫(huà)設(shè)計(jì)

在插畫(huà)風(fēng)格上，七八十年代的懷舊卡通風(fēng)插圖占主導(dǎo)地位；一般這種經(jīng)典的風(fēng)格，都是采用輪廓繪制，簡(jiǎn)單的形狀以及一些細(xì)節(jié)處理來(lái)表達(dá)。

2）超逼真的3D VFX

VFX或Visual Effects，是將現(xiàn)有素材與計(jì)算機(jī)生成的圖像結(jié)合，以創(chuàng)建逼真的特效場(chǎng)景；它們是插入到真實(shí)生活場(chǎng)景中的動(dòng)畫(huà)，以前多是用攝像機(jī)錄制，隨著眾多易用軟件出現(xiàn)，VFX在視頻和短片中變得更加常見(jiàn)。

3）3D插圖

隨著“增強(qiáng)現(xiàn)實(shí)感”，在越來(lái)越多的應(yīng)用程序及軟件中的重視，3D將獲得越來(lái)越多的應(yīng)用。我們可以看到設(shè)計(jì)師，喜歡將3D與攝影或2D畫(huà)面結(jié)合起來(lái)，創(chuàng)建的設(shè)計(jì)；所有這些技術(shù)，結(jié)合運(yùn)動(dòng)，創(chuàng)造了獨(dú)特的概念。

4）動(dòng)態(tài)logo

動(dòng)態(tài)logo從出現(xiàn)至今已變得非常醒目，甚至席卷了很多我們熟知的大品牌；將標(biāo)識(shí)與平滑流暢的動(dòng)畫(huà)相結(jié)合，可以為品牌帶來(lái)令人難忘的效果。

4. 平面設(shè)計(jì)與印刷

1）大膽的排版設(shè)計(jì)

排版是設(shè)計(jì)中最重要的元素！一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)師可以?xún)H用排版來(lái)呈現(xiàn)視覺(jué)，排版對(duì)于構(gòu)建信息、建立視覺(jué)層次結(jié)構(gòu)、傳遞價(jià)值觀以及為用戶(hù)創(chuàng)造良好的體驗(yàn)至關(guān)重要；無(wú)論使用動(dòng)態(tài)的、變形的、3D的、動(dòng)畫(huà)的或靜態(tài)排版，它會(huì)一直是熱門(mén)趨勢(shì)。

2）幾何形狀

通過(guò)簡(jiǎn)單的幾何形狀創(chuàng)造復(fù)雜的視覺(jué)設(shè)計(jì)，這種手法一直以來(lái)都非常常見(jiàn)；雖然不是新趨勢(shì)，但還是非常重要的；無(wú)論是在海報(bào)、印刷還是品牌標(biāo)識(shí)上，幾何圖形的運(yùn)用都非常廣泛。

3）細(xì)輪廓&線稿

排版是設(shè)計(jì)中最重要的元素！一個(gè)有經(jīng)驗(yàn)的設(shè)計(jì)師可以?xún)H用排版來(lái)呈現(xiàn)視覺(jué)，排版對(duì)于構(gòu)建信息、建立視覺(jué)層次結(jié)構(gòu)、傳遞價(jià)值觀以及為用戶(hù)創(chuàng)造良好的體驗(yàn)至關(guān)重要；無(wú)論使用動(dòng)態(tài)的、變形的、3D的、動(dòng)畫(huà)的或靜態(tài)排版，它會(huì)一直是熱門(mén)趨勢(shì)。

5. 包裝設(shè)計(jì)

1）可持續(xù)發(fā)展包裝

在近幾年，我們都知道冠狀病毒以及各種自然災(zāi)害，對(duì)地球產(chǎn)生了重大的影響；所以在包裝行業(yè)中，必須采取措施以減少對(duì)環(huán)境的影響，這也成為品牌們?cè)絹?lái)越重視的方面；企業(yè)必須使用可生物降解的材料，例如紙板、生物塑料或玉米土豆或蘑菇制成的材料。

2）插圖定制

精心設(shè)計(jì)和獨(dú)特的插圖，可以為品牌創(chuàng)造出色的故事。

3）故事性

有故事性的產(chǎn)品包裝可以激發(fā)用戶(hù)的產(chǎn)品購(gòu)買(mǎi)欲望，包裝上的字體、圖形、以及包裝材質(zhì)，會(huì)聯(lián)動(dòng)帶來(lái)影響。

4）互動(dòng)性包裝

Smart Packaging正在創(chuàng)造新的體驗(yàn)，使客戶(hù)能夠與產(chǎn)品互動(dòng)，從而建立品牌知名度；互動(dòng)包裝受技術(shù)的影響很大，大多數(shù)新產(chǎn)品都圍繞著智能手機(jī)進(jìn)行交互。

5）3D打印包裝

隨著3D打印機(jī)的出現(xiàn)，具有不尋常形狀的包裝也開(kāi)始出現(xiàn)了；設(shè)計(jì)師可以自由發(fā)揮自己的想象力，印刷具有奇特形狀的包裝；與傳統(tǒng)包裝相比，3D打印出的產(chǎn)品價(jià)格仍然很高。

二、Tencent 設(shè)計(jì)趨勢(shì)2021

1. 研究語(yǔ)境

任何一個(gè)新事物的悄悄冒頭，都有可能在未知的將來(lái)影響著用戶(hù)體驗(yàn)設(shè)計(jì)師。

我們能做的是，在起初感受到微微震幅時(shí)，便沿著震感逐步尋找源頭，并思考未來(lái)的發(fā)展走向，趕在變化降臨前先擁抱變化。

2. 用戶(hù)體驗(yàn)影響因素

隨著人工時(shí)代到來(lái)，過(guò)去機(jī)械的單向交互方式逐漸被打破，機(jī)器漸漸演化成了會(huì)主動(dòng)“觀察”真實(shí)場(chǎng)景，“感受”用戶(hù)情感，預(yù)判用戶(hù)意圖并自動(dòng)完成任務(wù)的貼心小棉襖。

機(jī)器如何為人們提供更智能便捷的服務(wù)，未來(lái)還有非常大的想象空間。

3. 更智能的服務(wù)提供方式

1）基于真實(shí)場(chǎng)景推理用戶(hù)意圖

智能設(shè)備可以越來(lái)越無(wú)縫地將數(shù)字世界和物理世界嫁接起來(lái)，主動(dòng)感知用戶(hù)所處情境并智能提供相應(yīng)服務(wù)。

在2019的 Google I/O 大會(huì)上，Google Lens 展示的AR點(diǎn)菜功能可以智能識(shí)別用戶(hù)菜單并將美食網(wǎng)站上的相關(guān)推薦呈現(xiàn)在屏幕上。

Google Lens 識(shí)別小票時(shí)，可快速提取小票上的金額，且可自動(dòng)彈起計(jì)算器快速幫助用戶(hù)計(jì)算人均消費(fèi)。

2）任務(wù)自動(dòng)化，簡(jiǎn)化用戶(hù)旅程

完成一項(xiàng)任務(wù)，用戶(hù)往往需要借助多個(gè)應(yīng)用來(lái)回切換配合，使用起來(lái)瑣碎。

Google Assistant的Duplex on the web 可以跨應(yīng)用來(lái)簡(jiǎn)化用戶(hù)旅程。用戶(hù)發(fā)出語(yǔ)音指令“預(yù)定一輛去某地的車(chē)”，助手便可自動(dòng)跨郵件、日歷、付款等應(yīng)用調(diào)取信息，根據(jù)使用習(xí)慣做選擇，并填寫(xiě)信息，用戶(hù)只在關(guān)鍵節(jié)點(diǎn)“確認(rèn)”即可。

4. 更自然豐富的交互方式

1）隔空手勢(shì)交互：更自由、更靈動(dòng)

為了讓機(jī)器更好地讀懂用戶(hù)的身體語(yǔ)言，能夠感知深度信息的攝像頭走進(jìn)了日常手機(jī)。

2019年國(guó)內(nèi)外手機(jī)廠商的發(fā)布大會(huì)上，LG 手機(jī) G8 ThinQ 以及華為發(fā)布 Mate 30 系列推出的隔空手勢(shì)，可實(shí)現(xiàn)一些簡(jiǎn)單的諸如滑動(dòng)、切歌、截屏等效果。

2）語(yǔ)音交互：更精準(zhǔn)、更好玩

語(yǔ)音交互趨向更自然、更人性化、更個(gè)性化。此外，多人會(huì)話(huà)場(chǎng)景下的技術(shù)方案日漸增多。

2020年2月索尼提交了一項(xiàng)廣告播放新專(zhuān)利。當(dāng)用戶(hù)在觀看電視節(jié)目時(shí)，如果出現(xiàn)廣告，只要站起來(lái)大喊廣告中對(duì)應(yīng)品牌的名字，便可直接跳過(guò)這個(gè)廣告。

5. 硬件形態(tài)帶來(lái)新的挑戰(zhàn)

1）大屏幕：?jiǎn)问殖治招绿魬?zhàn)

操作與信息進(jìn)一步下移；底部導(dǎo)航被賦予更多能力；利用下滑手勢(shì)代替點(diǎn)擊。

2）折疊屏：新形態(tài)的交互方式

更靈活的信息布局；更便捷的多任務(wù)操作；更直觀的拖拽交互；雙面屏互動(dòng)玩法。

6. 疫情催生新的線上體驗(yàn)

1）更關(guān)注效率導(dǎo)向

疫情讓遠(yuǎn)程辦公學(xué)習(xí)需求劇增，多人協(xié)作場(chǎng)景越來(lái)越頻繁，許多企業(yè)隨之升級(jí)了電話(huà)、視頻會(huì)議、文檔制作等多人協(xié)作效率軟件。

2）更注重緩解社交疏離感

隨著長(zhǎng)時(shí)間的線上學(xué)習(xí)與辦公所產(chǎn)生社交疏離感和缺失感，人們對(duì)于線上學(xué)習(xí)工作的情感化訴求也進(jìn)一步增強(qiáng)。

2020年推出的plagi遠(yuǎn)程辦公軟件支持設(shè)置每個(gè)人的avartar形象，讓大家在遠(yuǎn)程辦公時(shí)依舊能時(shí)刻感受到彼此的存在；在完成任務(wù)時(shí)還可以放鞭炮慶祝，讓員工能感受到親密無(wú)間的線上辦公體驗(yàn)。

3）加速人和信息的強(qiáng)連接

疫情的發(fā)生加速了人與信息之間的連接。人們?cè)絹?lái)越習(xí)慣將自身的身體資料、心情狀態(tài)等信息沉淀在智能設(shè)備上。

微信和支付寶在2020年年初都上線了健康碼服務(wù)，不同顏色的健康碼代表人們不同的健康情況，市民出入特定場(chǎng)所都需初始健康碼。

7. 關(guān)注以人為本

1）更包容性的設(shè)計(jì)

為身障人士設(shè)計(jì)：餓了么送貨騎手中約8%受色盲色弱困擾，為此餓了么設(shè)計(jì)團(tuán)隊(duì)在2019年對(duì)app的進(jìn)行了重新設(shè)計(jì)。

跨年齡段設(shè)計(jì)：谷歌助手禮貌功能 ( Google Pretty Please ) ：開(kāi)啟谷歌助手禮貌功能后，如果使用者在下達(dá)指令的語(yǔ)句中包括“Please”，谷歌助手會(huì)對(duì)禮貌的請(qǐng)求表示感謝，以此培養(yǎng)孩子的禮貌言行。

為性別平等而設(shè)計(jì)：回看歷年蘋(píng)果emoji的更新，從膚色平等，到性別、性向平等，再到為殘疾人設(shè)計(jì)，2020年再為跨性別者增加新表情，性別平等依舊是包容性設(shè)計(jì)中重要一環(huán)。

2）關(guān)注用戶(hù)隱私

MIUI12推出隱匿面具功能，Android開(kāi)放生態(tài)導(dǎo)致的權(quán)限隱私問(wèn)題一直被用戶(hù)所詬病，某些APP存在用戶(hù)不授權(quán)就無(wú)法使用情況；針對(duì)這一情況，MIUI12推出了隱匿面具功能；當(dāng)用戶(hù)在開(kāi)啟某些APP要求授權(quán)權(quán)限時(shí)，可以選擇空白通行證進(jìn)行授權(quán)，從而保護(hù)用戶(hù)真實(shí)信息。

在iOS 14的更新中，保護(hù)用戶(hù)隱私方面進(jìn)一步升級(jí)。其中剪貼板提醒設(shè)計(jì)很貼心，當(dāng)用戶(hù)打開(kāi)應(yīng)用，如果該應(yīng)用讀取了你剪貼板的內(nèi)容，會(huì)在系統(tǒng)頂部彈出提示，用戶(hù)能在第一時(shí)間意識(shí)到剪貼板內(nèi)容被讀取，幫助用戶(hù)更好的保護(hù)自己的隱私內(nèi)容。

3）健康的數(shù)碼生活方式

Android Q的更新加入了專(zhuān)注模式，用戶(hù)在專(zhuān)注模式下，可以在系統(tǒng)層面快捷地關(guān)閉使你分心的應(yīng)用，讓你聚焦于更重要的事情。

防沉迷系統(tǒng)升級(jí)：王者榮耀在2020年升級(jí)防沉迷系統(tǒng)，對(duì)青少年的娛樂(lè)時(shí)間和點(diǎn)券充值的限制進(jìn)行了進(jìn)一步升級(jí)。B站在2019年推出青少年模式，在該模式下，使用時(shí)長(zhǎng)和內(nèi)容推薦等做了定制化處理。

8. UI的繼承與創(chuàng)新

1）深色模式

2019年iOS 13深色模式姍姍來(lái)遲，緊接著大廠APP相繼推出此功能；在2020年，深色模式會(huì)繼續(xù)普及外，也會(huì)在可視性和實(shí)現(xiàn)成本方面有更多細(xì)節(jié)打磨和研究。

2）新擬態(tài)

設(shè)計(jì)趨勢(shì)的發(fā)展是螺旋式上升的，在扁平化設(shè)計(jì)流行之后，對(duì)物體的擬真再一次回歸設(shè)計(jì)圈，新擬態(tài)以一種對(duì)舊擬物風(fēng)格的再創(chuàng)新，重新流行起來(lái)。

3）多彩配色

在扁平簡(jiǎn)潔UI風(fēng)格盛行之后，豐富的色彩依舊是設(shè)計(jì)趨勢(shì)之一，大面積色塊，碰撞配色，帶來(lái)更具沖擊感的視覺(jué)體驗(yàn)。

4）更大圓角

大圓角的風(fēng)格會(huì)繼續(xù)延續(xù)，相較以往，卡片的處理圓角會(huì)更大，隨之帶來(lái)的是多的留白處理，結(jié)合大字號(hào)，帶來(lái)更透氣通透的視覺(jué)感受。

5）更豐富的插圖

UI插圖的豐富體現(xiàn)在樣式和內(nèi)容上，樣式上開(kāi)始3D化，內(nèi)容上更注重插圖敘事的表達(dá)。

6）多維度動(dòng)畫(huà)表現(xiàn)

新趨勢(shì)下，動(dòng)畫(huà)一方面回溯復(fù)古線描手繪風(fēng)格，另一方面追求更三維的體驗(yàn)，同時(shí)幀率進(jìn)一步提升，追求更流暢的視覺(jué)感受。

9. 更高效的設(shè)計(jì)協(xié)作方式

1）從本地文件到云端協(xié)作

近些年在線設(shè)計(jì)協(xié)同工具發(fā)展迅速，從UI設(shè)計(jì)、 設(shè)計(jì)交付以及組件協(xié)同等環(huán)節(jié)上給設(shè)計(jì)師提供更加高效實(shí)時(shí)的協(xié)作體驗(yàn)，獲得大量UX設(shè)計(jì)師的簇?fù)怼?/p>

在2019 uxtool的設(shè)計(jì)工具調(diào)研中，在線設(shè)計(jì)協(xié)同工具佼佼者figma以其協(xié)作和性能優(yōu)勢(shì)，大有追趕sketch之勢(shì)。

2）科學(xué)有效的設(shè)計(jì)系統(tǒng)

“設(shè)計(jì)系統(tǒng)(Design systems)是一組為了共同目標(biāo)而服務(wù)的內(nèi)在相互聯(lián)系的設(shè)計(jì)模式和多人協(xié)同執(zhí)行的方法?！保ㄒ浴禗esign systems》，Alla Kholmatova，C7210翻譯）。

以上是對(duì)對(duì)國(guó)內(nèi)外權(quán)威趨勢(shì)的資料搜集，希望對(duì)各位有所啟發(fā)。2021，希望你找到新的突破方向～

參考資料：

Behance 原文：https://www.behance.net/gallery/107015729/2021-Design-Trends?tracking_source=project_owner_other_projects

Tencent發(fā)布2021設(shè)計(jì)趨勢(shì)報(bào)告原文：https://isux.tencent.com/articles/ux-design-trend.html

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

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