5000字干貨！UX/UI 領(lǐng)域 2024 年設(shè)計(jì)趨勢(shì)重磅發(fā)布

設(shè)計(jì)界每年都會(huì)有新趨勢(shì)，這些趨勢(shì)不僅好看，還很有生命力，會(huì)被其他設(shè)計(jì)師爭(zhēng)相模仿。不管你喜歡還是不喜歡，總有一些設(shè)計(jì)趨勢(shì)是既聰明又實(shí)用的。這些趨勢(shì)可以幫助你在有限的空間里放進(jìn)更多信息，也可以讓用戶更有參與感。

讓我們一起來(lái)看看在2024年，都有哪些熱門的設(shè)計(jì)趨勢(shì)吧。

更多設(shè)計(jì)趨勢(shì)：

一、這不僅僅是一個(gè)兒童午餐盒——Bento Boxes

便當(dāng)盒是日本簡(jiǎn)餐和盒飯文化的主要產(chǎn)品，他們因?yàn)榭梢愿咝в袟l理地儲(chǔ)存食物和保持食物干凈而被大眾所熟知。

誰(shuí)發(fā)明了用便當(dāng)盒裝數(shù)字內(nèi)容，我們或許永遠(yuǎn)不會(huì)知道了，但無(wú)論是在屏幕上還是裝著食物放在包里，它都同樣精彩。

“便當(dāng)式（Bento Boxes）”設(shè)計(jì)是風(fēng)靡 Dribbble 和 Behance 等平臺(tái)的最新趨勢(shì)，它將“模塊化”設(shè)計(jì)推向了新的高度，吸引了無(wú)數(shù)設(shè)計(jì)師的追捧。其實(shí)，“模塊化”設(shè)計(jì)最早誕生于網(wǎng)站儀表盤，例如 PayPal 的銷售和財(cái)務(wù)儀表盤、Google Ads 的分析儀表盤等等。

還記得 Windows Phone 和 Lumia 手機(jī)嗎？它們使用的界面其實(shí)是便當(dāng)式設(shè)計(jì)的早期嘗試。后來(lái)，微軟在 Windows 8 的桌面開(kāi)始菜單中也應(yīng)用了這種概念。

Windows8 開(kāi)始菜單

雖然整個(gè)行業(yè)都在使用便當(dāng)式設(shè)計(jì)，但真正讓它爆紅的是蘋果的加入。蘋果初次將它應(yīng)用于 iPhone 產(chǎn)品介紹頁(yè)面，之后迅速拓展到 Apple 發(fā)布會(huì)的PPT和展示中。

（彩云注：這種趨勢(shì)的背后，我認(rèn)為是用戶的注意力進(jìn)一步下降，內(nèi)容的聚焦化設(shè)計(jì)在迎合這種趨勢(shì)。另一方面，好的設(shè)計(jì)始終來(lái)源于生活。）

Bento 風(fēng)靡設(shè)計(jì)界，堪稱蘋果引領(lǐng)的又一設(shè)計(jì)巨浪。不只是專業(yè)設(shè)計(jì)師，各行各業(yè)都對(duì) Bento 青睞有加，將其運(yùn)用到PPT、網(wǎng)站、產(chǎn)品發(fā)布等諸多領(lǐng)域。

舊的便當(dāng)式設(shè)計(jì)就像一個(gè)統(tǒng)一的拼圖，而新的便當(dāng)式設(shè)計(jì)則強(qiáng)調(diào)每個(gè)網(wǎng)格的獨(dú)立地位，讓各個(gè)部分不再僅僅是背景板，而是擁有自己個(gè)性和功能的舞臺(tái)。

與許多其他 UI 設(shè)計(jì)趨勢(shì)不同，Bento 不僅是一種美觀布局風(fēng)格，更在不斷發(fā)展，融入產(chǎn)品演示、融合其他獨(dú)特布局，甚至融合了新的視覺(jué)設(shè)計(jì)概念。

就像下面這樣：

bento布局交互的示例

以上示例來(lái)自 diagram（https://diagram.com），它巧妙地利用了便當(dāng)式網(wǎng)格來(lái)展示工具的實(shí)際應(yīng)用場(chǎng)景，并通過(guò)交互式體驗(yàn)讓用戶身臨其境。這種設(shè)計(jì)讓工具更具吸引力，也讓用戶對(duì)其功能有了清晰的預(yù)期。

在這個(gè)也給大家分享一個(gè)寶藏網(wǎng)站，專門收集bento設(shè)計(jì)趨勢(shì)的網(wǎng)站！bentogrids（https://bentogrids.com） 就是設(shè)計(jì)師們的靈感百寶箱，里面全是各式各樣的 Bento 網(wǎng)格案例，簡(jiǎn)直看不夠！UI、平面設(shè)計(jì)都能用的上，網(wǎng)站創(chuàng)建者簡(jiǎn)直神仙下凡，必須點(diǎn)個(gè)贊（當(dāng)然也別忘了給今天這篇文章點(diǎn)個(gè)贊）！

二、空間設(shè)計(jì)趨勢(shì)

2023年6月5日，全球科技和設(shè)計(jì)愛(ài)好者們醒來(lái)之后，發(fā)現(xiàn)整個(gè)信息流都被蘋果最新的 Vision Pro 刷屏了。

蘋果 Vision Pro 引爆了 2023 年夏季的科技圈，空間設(shè)計(jì)成為炙手可熱的話題，每位設(shè)計(jì)師都在爭(zhēng)相學(xué)習(xí)空間設(shè)計(jì)技能。這股熱潮也波及了沉寂許久的 AR/VR 領(lǐng)域，眾多 AR/VR 初創(chuàng)公司浮出水面，他們的技術(shù)獲得了前所未有的關(guān)注，為 AR/VR 的發(fā)展注入了強(qiáng)勁的動(dòng)力。

設(shè)計(jì)師們是科技潮流的弄潮兒！從智能手表到折疊手機(jī)，他們總能玩出新花樣，讓科技產(chǎn)品變得更加驚艷。空間設(shè)計(jì)這個(gè)新戰(zhàn)場(chǎng)，咱們?cè)O(shè)計(jì)師當(dāng)然不會(huì)錯(cuò)過(guò)，準(zhǔn)備好大顯身手啦！

（彩云注：我現(xiàn)在已經(jīng)加入這個(gè)領(lǐng)域，也正在持續(xù)學(xué)習(xí)，去年光XR相關(guān)的設(shè)計(jì)文章也寫了10多篇，也推薦大家多看多關(guān)注）

Vision os UI 截圖

隨著一款名為“Bezi”的熱門設(shè)計(jì)師工具推出，空間設(shè)計(jì)正在變得簡(jiǎn)單。Bezi與 Figma 和 Spline 等設(shè)計(jì)工具類似，但加入了3D工具。設(shè)計(jì)師們可以利用它涉足空間設(shè)計(jì)領(lǐng)域，連接功能齊全的 AR/VR 頭顯，并創(chuàng)造出交互式的空間體驗(yàn)。

下面展示了一個(gè)用Bezi設(shè)計(jì)的互動(dòng)demo

來(lái)自于 Bezi.com 的演示案例

想打造驚艷的 AR/VR 體驗(yàn)？UX 設(shè)計(jì)師肩負(fù)重任！除了美觀的設(shè)計(jì)，你還需要對(duì)技術(shù)有深入的理解，戴上 VR 頭顯進(jìn)入真實(shí)場(chǎng)景，親自感受并測(cè)試每一個(gè)細(xì)節(jié)。

這是一條充滿挑戰(zhàn)和驚喜的學(xué)習(xí)之路，將會(huì)顛覆你以往對(duì) UX 的理解，收獲前所未有的經(jīng)驗(yàn)。把握當(dāng)下，磨煉 UX 技能，迎接 AR/VR 時(shí)代的到來(lái)吧！

除了蘋果公司雄厚的技術(shù)力和資金投入，一些并非以科技著稱的公司也在眼鏡佩戴體驗(yàn)方面帶來(lái)了令人耳目一新的嘗試。

同樣瞄準(zhǔn)智能眼鏡市場(chǎng)，雷朋的 Meta Wayfarer 似乎吸取了谷歌教訓(xùn)，避開(kāi)了大規(guī)模生產(chǎn)的坎，采用更為謹(jǐn)慎的策略，向智能穿戴市場(chǎng)邁出了第一步。

雷朋眼鏡圖片

別被經(jīng)典的雷朋外觀迷惑，隱藏在時(shí)尚鏡框之中的智能功能可讓你輕松存儲(chǔ)視頻/圖像并直接在社交媒體上進(jìn)行直播，從而為用戶體驗(yàn)帶來(lái)全新升級(jí)。這或許會(huì)成為2025年的科技潮流，拭目以待吧！

三、萬(wàn)物皆可動(dòng)

當(dāng)一種新技能變得更容易普及時(shí)，往往會(huì)催生出新的趨勢(shì)。

LottieFiles 的使命之一就是讓動(dòng)畫(huà)變得簡(jiǎn)單易用。當(dāng)我加入公司作為動(dòng)效推動(dòng)者時(shí)，我已經(jīng)對(duì)他們能夠輕松添加到任何 UI 和任何工具中的動(dòng)畫(huà)贊嘆不已。看到如此強(qiáng)烈的需求，他們甚至為 Figma 推出了一個(gè)插件，可以將 Figma 動(dòng)畫(huà)轉(zhuǎn)換為可導(dǎo)出的 Lottie JSON 文件。

Fgma 中的 LottieFile 插件

不用再苦學(xué) After Effects 了！Lottie 動(dòng)畫(huà)讓動(dòng)畫(huà)創(chuàng)作門檻大大降低，任何設(shè)計(jì)師都可以輕松上手，隨時(shí)添加靈動(dòng)的動(dòng)畫(huà)效果。

現(xiàn)在，各大公司的登錄頁(yè)面都變得賞心悅目，互動(dòng)性十足，這離不開(kāi)人們對(duì)個(gè)性化體驗(yàn)的追求。

下面是一個(gè)示例頁(yè)面：

Apple Watch Series 9 落地頁(yè)— 雙擊滾動(dòng)效果

隨著滾動(dòng)動(dòng)畫(huà)的引入，用戶會(huì)全神貫注于你呈現(xiàn)給他們的東西。Webflow 和 Framer 等無(wú)代碼工具不斷創(chuàng)新，讓設(shè)計(jì)師無(wú)需編寫冗長(zhǎng)的代碼就能實(shí)現(xiàn)這樣的動(dòng)畫(huà)功能。

動(dòng)畫(huà)似乎已經(jīng)登峰造極，再無(wú)驚喜可言？幸好，科技界從未停下探索的腳步，而功能強(qiáng)大的工具層出不窮，讓一切想象都能變成現(xiàn)實(shí)。

其中一個(gè)令人欣喜的趨勢(shì)就是“動(dòng)畫(huà)按鈕”。這種全新的 UI 風(fēng)格將動(dòng)畫(huà)技術(shù)融入按鈕之中，賦予其更多活力。按鈕的變化形式多種多樣，從簡(jiǎn)單的描邊動(dòng)畫(huà)到鼠標(biāo)懸停時(shí)內(nèi)部閃爍的星星，應(yīng)有盡有。

就像推倒第一塊多米諾骨牌，一個(gè)設(shè)計(jì)師的熱門社交媒體帖子可以瞬間引發(fā)連鎖反應(yīng)，其他知名設(shè)計(jì)師紛紛加入，讓趨勢(shì)在短時(shí)間內(nèi)席卷整個(gè)設(shè)計(jì)界。

四、扁平化終結(jié)？

近期，許多設(shè)計(jì)師都在討論設(shè)計(jì)界正從扁平化設(shè)計(jì)轉(zhuǎn)向更具寫實(shí)風(fēng)格的視覺(jué)效果。

這些風(fēng)格包括 3D 圖形、深度效果、擬態(tài)設(shè)計(jì)、擬物設(shè)計(jì)等等。最近，我們看到許多公司將 3D 作為核心風(fēng)格加以應(yīng)用。盡管它可能現(xiàn)在還沒(méi)有直接體現(xiàn)在網(wǎng)頁(yè)和應(yīng)用設(shè)計(jì)上，但許多標(biāo)志已經(jīng)根據(jù)這一新趨勢(shì)進(jìn)行了更新。

正好彩云上一篇文章也寫到這個(gè)過(guò)趨勢(shì)：

一些偏3D的圖標(biāo)設(shè)計(jì)示例，By Chan Karunaratne

想玩轉(zhuǎn)3D設(shè)計(jì)，Spline（https://spline.design） 和 Vectary（https://www.vectary.com） 幫你搞定！告別復(fù)雜軟件，這些網(wǎng)頁(yè)3D工具讓你分分鐘將炫酷的3D元素嵌入網(wǎng)頁(yè)和應(yīng)用。更令人驚喜的是，它們自帶強(qiáng)大的動(dòng)畫(huà)功能，讓3D作品栩栩如生，學(xué)習(xí)起來(lái)也是輕松無(wú)壓力！

誰(shuí)能想到？一個(gè)簡(jiǎn)單的線性漸變和一些陰影，就能讓你的設(shè)計(jì)和素材瞬間擁有立體感和深度！這種效果簡(jiǎn)直令人著迷。

設(shè)計(jì)界風(fēng)向標(biāo)Airbnb 又放大招了！以簡(jiǎn)潔設(shè)計(jì)和流暢交互著稱的Airbnb，在2023年宣布重磅App更新，加入了超過(guò)12個(gè)3D視覺(jué)元素，發(fā)布視頻全程聚焦3D，引領(lǐng)未來(lái)設(shè)計(jì)潮流！

Airbnb發(fā)布的產(chǎn)品更新視頻

等距視覺(jué)、3D 角色和動(dòng)畫(huà)，加上流暢的應(yīng)用交互，讓我欲罷不能！設(shè)計(jì)從扁平到 3D 的過(guò)渡穩(wěn)步推進(jìn)，這種細(xì)致入微的變化正是這個(gè)趨勢(shì)經(jīng)久不衰的秘訣。

誰(shuí)是潮流的發(fā)起人或許難以追溯，但對(duì)真實(shí)貼近用戶需求的設(shè)計(jì)的追求才是驅(qū)使我們不斷創(chuàng)新的動(dòng)力，當(dāng)然，也少不了我們天馬行空的想象力。

五、AI 設(shè)計(jì)師來(lái)了：朋友還是敵人？

AIGC橫空出世，科技圈都炸鍋了！有人怕丟飯碗，有人笑看風(fēng)云。說(shuō)白了，就是用科技提升效率，讓設(shè)計(jì)更快更精彩！

Adobe Firefly 應(yīng)用展示

一群宣稱自己是 “AI 驅(qū)動(dòng)” 的設(shè)計(jì)工具正在嘗試不同程度地整合 OpenAI 的 API，同時(shí)也在研發(fā)自己的 AI 模型。然而，許多所謂的 AI 功能只是華而不實(shí)的噱頭，像是隨機(jī)設(shè)計(jì) UI、排列素材，甚至提供一些基本問(wèn)題的簡(jiǎn)單解決方案。這些都不過(guò)是社區(qū)成員普遍提出的批評(píng)的佐證，并不能解決真正的設(shè)計(jì)問(wèn)題。

在這些噱頭的洪流中，少數(shù)英雄橫空出世，拯救了設(shè)計(jì)界。其中一位英雄就是 Relume，深受設(shè)計(jì)師喜愛(ài)。這家專注于 Webflow 的公司推出了 Relume AI，一款功能強(qiáng)大的線框圖和站點(diǎn)地圖工具。

Relume A.I 操作演示

你只需輸入項(xiàng)目描述，它就會(huì)自動(dòng)生成完整詳細(xì)的站點(diǎn)地圖和線框圖。這個(gè)線框圖包含了相關(guān)數(shù)據(jù)和布局，可以快速?gòu)?fù)制到 Figma 和 Webflow 中使用。

老實(shí)說(shuō)，我對(duì) Chat-GPT 自動(dòng)生成設(shè)計(jì)方案的功能有點(diǎn)擔(dān)憂。雖然方便，但會(huì)不會(huì)讓設(shè)計(jì)師變得懶惰，無(wú)法充分發(fā)揮個(gè)人創(chuàng)意？

六、更周到和同理心的用戶體驗(yàn)設(shè)計(jì)

不止于華麗的視覺(jué)和復(fù)雜的 UI，UX 設(shè)計(jì)正迎來(lái)真正的革新！UX設(shè)計(jì)師們將目光投向更深層次的需求，致力于打造無(wú)障礙且包容的設(shè)計(jì)，優(yōu)化設(shè)計(jì)流程成為關(guān)鍵。

近來(lái)，許多設(shè)計(jì)師開(kāi)始更加重視可用性，而非單純的視覺(jué)設(shè)計(jì)。這股風(fēng)潮將簡(jiǎn)潔易用的設(shè)計(jì)推上了舞臺(tái)中央。即使設(shè)計(jì)行業(yè)不斷變化，設(shè)計(jì)師們也開(kāi)始更多地選擇行之有效的方案，而非一味追逐創(chuàng)新。

Google “UX 可用性” 的谷歌指數(shù)從2019 到 2023的關(guān)注度趨勢(shì)

從上圖的 Google 趨勢(shì)圖中可以看出，無(wú)障礙設(shè)計(jì)正成為一股不可阻擋的潮流，逐漸成為整個(gè)行業(yè)的剛需。

從色彩對(duì)比、可讀字體、清晰的操作元素到針對(duì)不同殘障群體進(jìn)行優(yōu)化，這些無(wú)障礙設(shè)計(jì)技術(shù)涵蓋了方方面面，旨在將以無(wú)障礙為核心的功能融入產(chǎn)品設(shè)計(jì)。

1）時(shí)代潮流：無(wú)障礙設(shè)計(jì)為何成為主流需求？

無(wú)障礙設(shè)計(jì)浪潮席卷而來(lái)！面對(duì)不同年齡、不同障礙人群的需求，以及企業(yè)對(duì)包容性的追求，無(wú)障礙設(shè)計(jì)成為設(shè)計(jì)界的頭等大事。數(shù)字時(shí)代的到來(lái)更是讓無(wú)障礙設(shè)計(jì)成為設(shè)計(jì)師不可忽視的責(zé)任。

嗅覺(jué)靈敏的在線課程和設(shè)計(jì)速成班及時(shí)洞察到了無(wú)障礙設(shè)計(jì)市場(chǎng)的需求，紛紛開(kāi)始提供相關(guān)課程，幫助學(xué)員掌握無(wú)障礙設(shè)計(jì)知識(shí)，順利進(jìn)入設(shè)計(jì)領(lǐng)域。

2）個(gè)性化

除了無(wú)障礙性，個(gè)性化才是真正讓人們對(duì)應(yīng)用或網(wǎng)站產(chǎn)生興趣的東西。你一定在YouTube上看過(guò)那個(gè)小視頻。

Youtube評(píng)估你喜歡哪種內(nèi)容，以便給你更好的建議

快速試錯(cuò)，聆聽(tīng)用戶心聲！一些 app 會(huì)臨時(shí)上線新功能，并在用戶反響不佳時(shí)果斷撤回。這種敏捷迭代正是 UX 設(shè)計(jì)師引領(lǐng)產(chǎn)品和服務(wù)革新的有力證明。

以上就是對(duì)2024年設(shè)計(jì)趨勢(shì)的一種總結(jié)，希望你關(guān)注起來(lái)，用到自己的設(shè)計(jì)方案中。

歡迎關(guān)注作者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」