2024年已經(jīng)到來，對于UX/UI設(shè)計領(lǐng)域來說，這可能是過去若干年來UI / UX趨勢最統(tǒng)一、最確定的一年。在接下來的文章中，小摹將在點(diǎn)評各個設(shè)計趨勢的同時，分析現(xiàn)象背后的原因，并給新入行的設(shè)計師一些成長的建議。

什么是UI和UX？

UI（用戶界面設(shè)計）設(shè)計是UX（用戶體驗設(shè)計）的子集，前者更聚焦數(shù)字界面的視覺表現(xiàn)，后者則需要關(guān)注用戶在實現(xiàn)某個目標(biāo)時全流程的感受。總結(jié)來說：

1）UI關(guān)注產(chǎn)品的外觀和交互細(xì)節(jié)，注重界面的美觀和易用性。

2）UX關(guān)注用戶在使用產(chǎn)品時的整體體驗，注重用戶的需求、目標(biāo)和情感。

雖然UI和UX是兩個設(shè)計領(lǐng)域，但實際工作中有很大的重疊空間。以國內(nèi)的實際情況來看，新入行的設(shè)計師沒必要去糾結(jié)這兩者的區(qū)別，提升自己的“設(shè)計手活”和“專業(yè)知識”在是才最要緊的。

2024年的UX/UI 設(shè)計點(diǎn)評

1）Bento布局

在2024年初，Bento這個概念不知道怎么又開始爆火，成為了全網(wǎng)瘋狂推崇的風(fēng)格。這種版式的布局很像日式的便當(dāng)盒，所以使用了Bento（便當(dāng)）的諧音。

簡潔文案搭配優(yōu)質(zhì)圖片是實現(xiàn)Bento的關(guān)鍵

Bento風(fēng)格往往由一些大小不一的矩形錯落組合而成，借助簡潔的文案和高清配圖呈現(xiàn)內(nèi)容。早期的Windows Phone隨處可見這種瓷磚一樣的設(shè)計，但當(dāng)時的屏幕尺寸太小，Bento呈現(xiàn)效果反而不佳。而在最近的幾年，蘋果不厭其煩地在發(fā)布會中表演“Bento一圖流”，也終于把這個風(fēng)格徹底帶火。

Bento的流行和硬件發(fā)展密不可分：數(shù)字屏幕的尺寸、分辨率大幅提高給Bento帶來了實施的土壤；用戶對多信息接受能力提升，并渴求更高密度的信息也是Bento能持續(xù)火爆的重要原因。再加上在規(guī)則中富有變化感的視覺感、高效率的信息傳遞能力、響應(yīng)式友好等優(yōu)勢，Bento不火下去才真是奇怪了。

2）網(wǎng)頁視差滾動

另一個被蘋果不厭其煩地表演，并最終帶火的設(shè)計風(fēng)格就是“頁面視差滾動”。它的特點(diǎn)就是隨著用戶的滾動操作，內(nèi)容會呈現(xiàn)和滾動同頻的動態(tài)效果。

騰訊WeGame網(wǎng)頁改版的視差滾動效果

視差一詞源于希臘語中的“Parallaxis”，意為變化，視差本質(zhì)上是一種錯覺。在網(wǎng)頁、APP和動畫設(shè)計中，往往故意將前景和背景之間運(yùn)動速率做出差異來實現(xiàn)這種效果，最終能為為產(chǎn)品營造出順滑并極具創(chuàng)意的用戶體驗。

網(wǎng)頁視差滾動效果需要設(shè)計師和前端工程師之間緊密的配合才能實現(xiàn)，同時也需要設(shè)計師和前端工程師有相關(guān)效果的實施經(jīng)驗，才能達(dá)到良好的最終效果。這樣高的要求，自然讓視差滾動效果成為了彰顯產(chǎn)品力的必備手法。如果是致力于打造高端產(chǎn)品體驗的設(shè)計師，推薦細(xì)致地了解一下這門技術(shù)并運(yùn)用到自己的項目中。

3）AI視覺設(shè)計

AI作為2023年科技圈火了一整年的概念，能在2024年再火上一年應(yīng)該是毫無爭議的。對于設(shè)計師，了解現(xiàn)階段AI設(shè)計能力邊界很重要?；\統(tǒng)地說，現(xiàn)階段AI對產(chǎn)品側(cè)的助力基本就是閱讀理解，在視覺側(cè)就是生成高水準(zhǔn)的隨機(jī)圖片，如何結(jié)合好這兩項能力其實是一門比較高深的學(xué)問。

摹客AI是一款智能生成原型圖的AI設(shè)計工具

也正是因為AI的能力相對難以把控，所以筆者還是建議新入行的設(shè)計師使用Agent類的AI產(chǎn)品。比如摹客旗下的摹客AI（http://www.qtfd.com.cn/ai?hmsr=?），結(jié)合了大模型的閱讀理解能力和行業(yè)微調(diào)后創(chuàng)意發(fā)揮能力，可以一鍵生成可編輯的產(chǎn)品原型圖，大大提升產(chǎn)品經(jīng)理的工作效率。

4）Playground練習(xí)區(qū)

越來越多的工具類產(chǎn)品會在自己的落地頁或者官方案例中加入Playground（練習(xí)區(qū)），讓用戶能夠在閱讀文案的同時，親自上手操作來加深理解。Playground概念原本出自代碼開發(fā)領(lǐng)域，原指在介紹語法概念時讓學(xué)習(xí)者可以立即有一個區(qū)域編寫代碼，以增強(qiáng)學(xué)習(xí)效果。

每塊介紹區(qū)域都可以親自上手操作，提升互動性

在過去幾年中，功能介紹大多會選擇配一段視頻來提升互動性，但被動地查看肯定是沒有讓用戶主動去“玩兒”的效果好。于是我們看到了2023年下半年開始，越來越多的產(chǎn)品將Playground的概念融入產(chǎn)品介紹頁面中，進(jìn)一步提升了用戶接受新事物時的趣味性和效率。

5）主視覺3D化

主視覺效果3D化在國內(nèi)已經(jīng)流行了很多年，早期各種云服務(wù)平臺互相內(nèi)卷時，相信大家對下面這種等軸的3D風(fēng)格插圖已經(jīng)看到快吐了。

C4D渲染的等軸3D元素已經(jīng)成為了B端視覺的萬金油風(fēng)格

在過去的10年，移動互聯(lián)網(wǎng)的飛速發(fā)展徹底完成了智能設(shè)備和高速網(wǎng)絡(luò)的普及。在這個過程中，用戶對數(shù)字界面的接受程度變得非常高，這給與了設(shè)計師增加視覺細(xì)節(jié)和信息量的底氣。在iOS7（2013年）中開始率先使用純扁平風(fēng)格的蘋果產(chǎn)品，也在這幾年走向輕擬物的視覺風(fēng)格，這更是大大地影響了整個行業(yè)對于設(shè)計趨勢的判斷。

對于新入行的設(shè)計師來說，3D設(shè)計可以作為可選的職業(yè)路徑，但不要急于求成。3D設(shè)計是一個非常依賴實踐的學(xué)科，學(xué)習(xí)曲線還是比較陡峭的，如果平時沒有足夠的時間進(jìn)行練習(xí)和持續(xù)學(xué)習(xí)，極易半途而廢。當(dāng)然，如果最終能達(dá)到一定的水平，給予設(shè)計師的收獲還是很大的。

6）AR / VR / 元宇宙

在蘋果的Vision Pro正式開售前，可能所有人都覺得在AR / VR技術(shù)已經(jīng)“涼了”。直到2月處的Vision Pro上市即被搶購一空的景象出現(xiàn)，設(shè)計師們才開始意識到，人們從來都不缺乏對新技術(shù)和美好體驗的向往，人們只是在等待一個合適產(chǎn)品出現(xiàn)。

Apple的Vision Pro可能會改寫VR類產(chǎn)品的命運(yùn)

可以想象的是，在Vision Pro的加持下，整個AR / VR技術(shù)的命運(yùn)可能被徹底改寫，相關(guān)的需求也會迎來井噴式的爆發(fā)。未來如果Vision系產(chǎn)品價格能夠回落到普通人能接受的水平，虛擬空間設(shè)計、3D、元宇宙等相關(guān)設(shè)計理念肯定會再度引領(lǐng)風(fēng)潮，并對各種數(shù)字產(chǎn)品體驗設(shè)計都帶來影響。

7）實體材質(zhì)變化

也正是由于最近幾年3D風(fēng)格的風(fēng)靡，元素開始被賦予新的視覺材質(zhì)。相比早期的網(wǎng)頁設(shè)計師喜歡使用具有平面特性的重復(fù)紋理（比如建筑表面），這幾年特別流行的就是各種半透明材質(zhì)，比如透明玻璃、磨砂玻璃、亞克力等等。

半透明的玻璃材質(zhì)成為最近幾年最熱門視覺效果

當(dāng)今主流的平面設(shè)計軟件都可以輕松地模擬玻璃效果（背景 / 高斯模糊），這也讓玻璃這種材質(zhì)相比其他材質(zhì)的實現(xiàn)難度會更低一些。如果想要使用設(shè)計軟件來繪制，需要尤其注意高光的呈現(xiàn)，從而增強(qiáng)材質(zhì)的寫實感。

8）深色模式

深色模式大概已經(jīng)流行了3年+，但筆者認(rèn)為這個風(fēng)格還會繼續(xù)流行下去：越來越多的用戶開始有意識地嘗試切換深淺色，并且逐漸固定自己的習(xí)慣。兩種模式的視覺差異如此之大，必然導(dǎo)致用戶一旦習(xí)慣一種模式，就很難適應(yīng)另一種。

深 / 淺色模式一旦適應(yīng)一種，就很難適應(yīng)另外一種

在設(shè)計產(chǎn)品的深淺色模式時，建議參考Google的MD規(guī)范或者Apple的深淺色規(guī)范。此外如果在深色模式中合理加入玻璃材質(zhì)，會更容易突出光感，呈現(xiàn)出非常細(xì)膩真實的視覺感受。最后，不同的開發(fā)人員實現(xiàn)深淺色模式的技術(shù)方案可能并不相同，設(shè)計師一定要和開發(fā)人員做好溝通和配合，才能做到準(zhǔn)確的配色還原。

9）霓虹和光效

深色模式的流行，也帶來了衍生的視覺效果：霓虹和光效。在淺色模式最普及的時代，光效是很難體現(xiàn)的（因為背景都是白色），而深色模式則為這些光線的運(yùn)用提供了絕佳的舞臺。

光線可以作為視覺主題，同時也能持續(xù)引導(dǎo)視線流動

在深色模式下，光線容易形成聚光燈效應(yīng)，更好地突出主體，同時也賦予了頁面或產(chǎn)品更沉浸的感受?？紤]到還有大量的數(shù)字產(chǎn)品沒有完成深色模式的改造，光效作為深色模式的絕佳搭配，未來還有廣闊的發(fā)揮空間。

10）智能設(shè)備與HMI設(shè)計

隨著人們接受程度的提高，手機(jī)和電腦之外的移動智能設(shè)備開始走入千家萬戶。最近幾年比較火熱就是新能源智能汽車，以及各種可穿戴智能終端。由于這些產(chǎn)品的和人們發(fā)生交互的場景更復(fù)雜，設(shè)計時也需要使用更多的新技術(shù)，人機(jī)交互的方式也被拓展到了多模態(tài)（語音、肢體、視覺等）的新紀(jì)元。

國內(nèi)汽車新勢力在車機(jī)體驗方面具備很強(qiáng)的競爭力

智能汽車作為當(dāng)下國產(chǎn)制造的重要發(fā)力點(diǎn)，座艙和車機(jī)的體驗則是各車廠產(chǎn)品力的重中之重。在2024年中我們一定還能看到各種新奇的HMI設(shè)計方案，帶領(lǐng)著整個行業(yè)的設(shè)計水平不斷向前。對于新入行的設(shè)計師來說，將汽車HMI作為主攻的設(shè)計方向也是一個非常不錯的選擇。

結(jié)語

以上就是小摹為大家總結(jié)并點(diǎn)評的2024年UX/UI設(shè)計趨勢?？傮w來說，2024年的UX/UI設(shè)計趨勢是最近2~3年設(shè)計趨勢的延續(xù)，但年內(nèi)大量的硬件新品發(fā)布，又讓趨勢的變化充滿想象力。如果你是一名新入行的設(shè)計師，建議至少從文中提到的趨勢中選擇一項作為自己年內(nèi)的重點(diǎn)學(xué)習(xí)或研究的方向，更快地為自己積累和未來市場相匹配的設(shè)計能力。