總結(jié)!2024年的熱門UX / UI設計趨勢
每年都可能會有新的、或者熱門的設計趨勢出現(xiàn),那么當時間進入2024年,有哪些熱門的設計趨勢是值得我們關注的?這篇文章里,作者總結(jié)了6個熱門設計趨勢,一起來看看吧,或許可以為你帶來一些啟發(fā)。
年初第一篇,聊聊設計趨勢。
設計界每年都會有新趨勢,這些趨勢不僅好看,還很有生命力,會被其他設計師爭相模仿。不管你喜歡還是不喜歡,總有一些設計趨勢是既聰明又實用的。這些趨勢可以幫助你在有限的空間里放進更多信息,也可以讓用戶更有參與感。
讓我們一起來看看在2024年,都有哪些熱門的設計趨勢吧。
一、便當盒(Bento Boxes)設計趨勢
在日本,精致又實用的便當盒是用餐文化的重要組成部分。它們以巧妙的隔層和精致的包裝,將美味的食物井然有序地呈現(xiàn),讓你享受到視覺和味覺的雙重享受。
誰發(fā)明了用便當盒裝數(shù)字內(nèi)容,我們或許永遠不會知道了,但無論是在屏幕上還是裝著食物放在包里,它都同樣精彩。
“便當式(Bento Boxes)”設計是風靡 Dribbble 和 Behance 等平臺的最新趨勢,它將“模塊化”設計推向了新的高度,吸引了無數(shù)設計師的追捧。其實,“模塊化”設計最早誕生于網(wǎng)站儀表盤,例如 PayPal 的銷售和財務儀表盤、Google Ads 的分析儀表盤等等。
還記得 Windows Phone 和 Lumia 手機嗎?它們使用的界面其實是便當式設計的早期嘗試。后來,微軟在 Windows 8 的桌面開始菜單中也應用了這種概念。
Windows 8 開始菜單
雖然整個行業(yè)都在使用便當式設計,但真正讓它爆紅的是蘋果的加入。蘋果初次將它應用于 iPhone 產(chǎn)品介紹頁面,之后迅速拓展到 Apple 發(fā)布會的PPT和展示中。
(彩云注:這種趨勢的背后,我認為是用戶的注意力進一步下降,內(nèi)容的聚焦化設計在迎合這種趨勢。另一方面,好的設計始終來源于生活。)
Apple 宣傳海報
Bento 風靡設計界,堪稱蘋果引領的又一設計巨浪。不只是專業(yè)設計師,各行各業(yè)都對 Bento 青睞有加,將其運用到PPT、網(wǎng)站、產(chǎn)品發(fā)布等諸多領域。
舊的便當式設計就像一個統(tǒng)一的拼圖,而新的便當式設計則強調(diào)每個網(wǎng)格的獨立地位,讓各個部分不再僅僅是背景板,而是擁有自己個性和功能的舞臺。
與許多其他 UI 設計趨勢不同,Bento 不僅是一種美觀布局風格,更在不斷發(fā)展,融入產(chǎn)品演示、融合其他獨特布局,甚至融合了新的視覺設計概念。
就像下面這樣:
bento布局交互的示例
以上示例來自 diagram(https://diagram.com),它巧妙地利用了便當式網(wǎng)格來展示工具的實際應用場景,并通過交互式體驗讓用戶身臨其境。這種設計讓工具更具吸引力,也讓用戶對其功能有了清晰的預期。
在這個也給大家分享一個寶藏網(wǎng)站,專門收集bento設計趨勢的網(wǎng)站!bentogrids(https://bentogrids.com) 就是設計師們的靈感百寶箱,里面全是各式各樣的 Bento 網(wǎng)格案例,簡直看不夠!UI、平面設計都能用的上,網(wǎng)站創(chuàng)建者簡直神仙下凡,必須點個贊!
二、空間設計趨勢(Spatial Design Trends)
2023年6月5日,全球科技和設計愛好者們醒來之后,發(fā)現(xiàn)整個信息流都被蘋果最新的 Vision Pro 刷屏了。
圖片來源 — Apple.com
蘋果 Vision Pro 引爆了 2023 年夏季的科技圈,空間設計成為炙手可熱的話題,每位設計師都在爭相學習空間設計技能。這股熱潮也波及了沉寂許久的 AR/VR 領域,眾多 AR/VR 初創(chuàng)公司浮出水面,他們的技術獲得了前所未有的關注,為 AR/VR 的發(fā)展注入了強勁的動力。
設計師們是科技潮流的弄潮兒!從智能手表到折疊手機,他們總能玩出新花樣,讓科技產(chǎn)品變得更加驚艷??臻g設計這個新戰(zhàn)場,咱們設計師當然不會錯過,準備好大顯身手啦!
(彩云注:我現(xiàn)在已經(jīng)加入這個領域,也正在持續(xù)學習,去年光XR相關的設計文章也寫了10多篇)
vision os UI 截圖
隨著一款名為“Bezi”的熱門設計師工具推出,空間設計正在變得簡單。Bezi與 Figma 和 Spline 等設計工具類似,但加入了3D工具。設計師們可以利用它涉足空間設計領域,連接功能齊全的 AR/VR 頭顯,并創(chuàng)造出交互式的空間體驗。
想打造驚艷的 AR/VR 體驗?UX 設計師肩負重任!除了美觀的設計,你還需要對技術有深入的理解,戴上 VR 頭顯進入真實場景,親自感受并測試每一個細節(jié)。
這是一條充滿挑戰(zhàn)和驚喜的學習之路,將會顛覆你以往對 UX 的理解,收獲前所未有的經(jīng)驗。把握當下,磨煉 UX 技能,迎接 AR/VR 時代的到來吧!
除了蘋果公司雄厚的技術力和資金投入,一些并非以科技著稱的公司也在眼鏡佩戴體驗方面帶來了令人耳目一新的嘗試。
同樣瞄準智能眼鏡市場,雷朋的 Meta Wayfarer 似乎吸取了谷歌教訓,避開了大規(guī)模生產(chǎn)的坎,采用更為謹慎的策略,向智能穿戴市場邁出了第一步。
圖片來源 — RayBan
別被經(jīng)典的雷朋外觀迷惑,隱藏在時尚鏡框之中的智能功能可讓你輕松存儲視頻/圖像并直接在社交媒體上進行直播,從而為用戶體驗帶來全新升級。這或許會成為2025年的科技潮流,拭目以待吧!
三、萬物皆可動
當一種新技能變得更容易普及時,往往會催生出新的趨勢。
LottieFiles 的使命之一就是讓動畫變得簡單易用。當我加入公司作為動效推動者時,我已經(jīng)對他們能夠輕松添加到任何 UI 和任何工具中的動畫贊嘆不已??吹饺绱藦娏业男枨螅麄兩踔翞?Figma 推出了一個插件,可以將 Figma 動畫轉(zhuǎn)換為可導出的 Lottie JSON 文件。
LottieFiles plugin for Figma
不用再苦學 After Effects 了!Lottie 動畫讓動畫創(chuàng)作門檻大大降低,任何設計師都可以輕松上手,隨時添加靈動的動畫效果。
現(xiàn)在,各大公司的登錄頁面都變得賞心悅目,互動性十足,這離不開人們對個性化體驗的追求。
下面是一個示例頁面:
Apple Watch Series 9 落地頁— 雙擊滾動效果
隨著滾動動畫的引入,用戶會全神貫注于你呈現(xiàn)給他們的東西。Webflow 和 Framer 等無代碼工具不斷創(chuàng)新,讓設計師無需編寫冗長的代碼就能實現(xiàn)這樣的動畫功能。
動畫似乎已經(jīng)登峰造極,再無驚喜可言?幸好,科技界從未停下探索的腳步,而功能強大的工具層出不窮,讓一切想象都能變成現(xiàn)實。
其中一個令人欣喜的趨勢就是“動畫按鈕”。這種全新的 UI 風格將動畫技術融入按鈕之中,賦予其更多活力。按鈕的變化形式多種多樣,從簡單的描邊動畫到鼠標懸停時內(nèi)部閃爍的星星,應有盡有。
圖片來源 learnframer
就像推倒第一塊多米諾骨牌,一個設計師的熱門社交媒體帖子可以瞬間引發(fā)連鎖反應,其他知名設計師紛紛加入,讓趨勢在短時間內(nèi)席卷整個設計界。
四、扁平化終結(jié)?
近期,許多設計師都在討論設計界正從扁平化設計轉(zhuǎn)向更具寫實風格的視覺效果。
這些風格包括 3D 圖形、深度效果、擬態(tài)設計、擬物設計等等。最近,我們看到許多公司將 3D 作為核心風格加以應用。盡管它可能現(xiàn)在還沒有直接體現(xiàn)在網(wǎng)頁和應用設計上,但許多標志已經(jīng)根據(jù)這一新趨勢進行了更新。
正好彩云上一篇文章也寫到這個過趨勢《扁平化設計終結(jié)?新趨勢來了?》
一些偏3D的圖標設計示例,By Chan Karunaratne
想玩轉(zhuǎn)3D設計,Spline(https://spline.design) 和 Vectary(https://www.vectary.com) 幫你搞定!告別復雜軟件,這些網(wǎng)頁3D工具讓你分分鐘將炫酷的3D元素嵌入網(wǎng)頁和應用。更令人驚喜的是,它們自帶強大的動畫功能,讓3D作品栩栩如生,學習起來也是輕松無壓力!
誰能想到?一個簡單的線性漸變和一些陰影,就能讓你的設計和素材瞬間擁有立體感和深度!這種效果簡直令人著迷。
設計界風向標Airbnb 又放大招了!以簡潔設計和流暢交互著稱的Airbnb,在2023年宣布重磅App更新,加入了超過12個3D視覺元素,發(fā)布視頻全程聚焦3D,引領未來設計潮流!
等距視覺、3D 角色和動畫,加上流暢的應用交互,讓我欲罷不能!設計從扁平到 3D 的過渡穩(wěn)步推進,這種細致入微的變化正是這個趨勢經(jīng)久不衰的秘訣。
誰是潮流的發(fā)起人或許難以追溯,但對真實貼近用戶需求的設計的追求才是驅(qū)使我們不斷創(chuàng)新的動力,當然,也少不了我們天馬行空的想象力。
五、AI 設計師來了:朋友還是敵人?
AIGC橫空出世,科技圈都炸鍋了!有人怕丟飯碗,有人笑看風云。說白了,就是用科技提升效率,讓設計更快更精彩!
Adobe Firefly 應用展示
一群宣稱自己是 “AI 驅(qū)動” 的設計工具正在嘗試不同程度地整合 OpenAI 的 API,同時也在研發(fā)自己的 AI 模型。然而,許多所謂的 AI 功能只是華而不實的噱頭,像是隨機設計 UI、排列素材,甚至提供一些基本問題的簡單解決方案。這些都不過是社區(qū)成員普遍提出的批評的佐證,并不能解決真正的設計問題。
在這些噱頭的洪流中,少數(shù)英雄橫空出世,拯救了設計界。其中一位英雄就是 Relume,深受設計師喜愛。這家專注于 Webflow 的公司推出了 Relume AI,一款功能強大的線框圖和站點地圖工具。
Relume A.I 操作演示
你只需輸入項目描述,它就會自動生成完整詳細的站點地圖和線框圖。這個線框圖包含了相關數(shù)據(jù)和布局,可以快速復制到 Figma 和 Webflow 中使用。
老實說,我對 Chat-GPT 自動生成設計方案的功能有點擔憂。雖然方便,但會不會讓設計師變得懶惰,無法充分發(fā)揮個人創(chuàng)意?
六、更周到和同理心的用戶體驗設計
不止于華麗的視覺和復雜的 UI,UX 設計正迎來真正的革新!UX設計師們將目光投向更深層次的需求,致力于打造無障礙且包容的設計,優(yōu)化設計流程成為關鍵。
近來,許多設計師開始更加重視可用性,而非單純的視覺設計。這股風潮將簡潔易用的設計推上了舞臺中央。即使設計行業(yè)不斷變化,設計師們也開始更多地選擇行之有效的方案,而非一味追逐創(chuàng)新。
Google “UX 可用性” 的谷歌指數(shù)從2019 到 2023的關注度趨勢
從上圖的 Google 趨勢圖中可以看出,無障礙設計正成為一股不可阻擋的潮流,逐漸成為整個行業(yè)的剛需。
從色彩對比、可讀字體、清晰的操作元素到針對不同殘障群體進行優(yōu)化,這些無障礙設計技術涵蓋了方方面面,旨在將以無障礙為核心的功能融入產(chǎn)品設計。
1)時代潮流:無障礙設計為何成為主流需求?
無障礙設計浪潮席卷而來!面對不同年齡、不同障礙人群的需求,以及企業(yè)對包容性的追求,無障礙設計成為設計界的頭等大事。數(shù)字時代的到來更是讓無障礙設計成為設計師不可忽視的責任。
嗅覺靈敏的在線課程和設計速成班及時洞察到了無障礙設計市場的需求,紛紛開始提供相關課程,幫助學員掌握無障礙設計知識,順利進入設計領域。
2)個性化
除了無障礙性,個性化才是真正讓人們對應用或網(wǎng)站產(chǎn)生興趣的東西。你一定在YouTube上看過那個小視頻。
Youtube評估你喜歡哪種內(nèi)容,以便給你更好的建議
快速試錯,聆聽用戶心聲!一些 app 會臨時上線新功能,并在用戶反響不佳時果斷撤回。這種敏捷迭代正是 UX 設計師引領產(chǎn)品和服務革新的有力證明。
以上就是對2024年設計趨勢的一種總結(jié),希望你關注起來,用到自己的設計方案中。
原文作者:Punit Chawla(本文翻譯已獲得作者的正式授權)
原文:https://blog.prototypr.io/ux-ui-design-trends-going-into-2024-ca43a839b541
譯者:彩云Sky,公眾號:彩云譯設計;人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設計師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
很好的機翻,愛來自瓷器
哈哈哈哈哈哈哈哈哈哈哈