2024 年的 UX/UI 設(shè)計(jì)趨勢(shì),關(guān)于未來(lái)科技體驗(yàn)的可能性

0 評(píng)論 5900 瀏覽 23 收藏 22 分鐘

2023 年注定是備受矚目的一年,生成式 AI 技術(shù)之下,對(duì)話式交互等概念被人們所關(guān)注, UX / UI 應(yīng)如何幫助 AI 應(yīng)用打造突破式用戶體驗(yàn)?

Punit Chawla 自 2017 年起,就在各大互聯(lián)網(wǎng)公司從事設(shè)計(jì)工作,曾在 NOTEWORTHY 、 Prototypr 等企業(yè)就職。他每年推出的設(shè)計(jì)趨勢(shì),在當(dāng)年都會(huì)被廣泛關(guān)注并吸引其他設(shè)計(jì)師跟隨,包括如何在更小的空間內(nèi)包含更多信息,以及如何與用戶建立更多的互動(dòng)等。今年,Punit 也針對(duì) 24 年的設(shè)計(jì)趨勢(shì)進(jìn)行了預(yù)測(cè),基于他的年度設(shè)計(jì)趨勢(shì)報(bào)告內(nèi)容,我們也由此推演共同探討一下未來(lái)科技的設(shè)計(jì)體驗(yàn)可能性。

我們嘗試基于文章內(nèi)容,提出更多發(fā)散性的推演和深思,歡迎交流。

  • 生成式 AI 帶動(dòng)硬件、軟件的全面革新,隨之影響了現(xiàn)在的設(shè)計(jì)潮流。AR / VR 設(shè)計(jì)在蘋(píng)果 Vision Pro 發(fā)布之后引爆、動(dòng)畫(huà)、3D設(shè)計(jì)在設(shè)計(jì)工具不斷簡(jiǎn)化和低門(mén)檻的情況下風(fēng)靡
  • 對(duì)話式交互界面和圖形用戶界面需要有機(jī)結(jié)合:AIGC 時(shí)代,對(duì)話式交互界面不會(huì)是市場(chǎng)的唯一。我們?nèi)匀恍枰钊胄枨髨?chǎng)景,從用戶路徑出發(fā),解決用戶體驗(yàn)中的痛點(diǎn)時(shí)刻。
  • 用戶體驗(yàn)為核心:設(shè)計(jì)趨勢(shì)會(huì)隨著工業(yè)化進(jìn)程的推進(jìn),而演進(jìn)為更前沿的風(fēng)格,也會(huì)有更多工具幫助設(shè)計(jì)師開(kāi)放腦洞,快速得到心中所想。但無(wú)論社會(huì)如何進(jìn)步,以用戶體驗(yàn)為中心仍然是最核心的命題。

一、從便當(dāng)盒而來(lái)的 Bento UI

便當(dāng)盒是日本午餐和午餐盒文化的重要組成部分。他們以井然有序的方式儲(chǔ)存食物,并保持著食物清潔。

圖片來(lái)源 — Freepik

從便當(dāng)盒演變而來(lái)的 Bento UI 設(shè)計(jì)風(fēng)格,是便當(dāng)盒在屏幕上的數(shù)字化效果,基于卡片的設(shè)計(jì)或網(wǎng)格布局,其中信息以不同的部分或容器呈現(xiàn),以提高清晰度和易用性。它慢慢開(kāi)始在 Dribbble 和 Behance 等平臺(tái)上掀起波瀾,吸引數(shù)百萬(wàn)設(shè)計(jì)師關(guān)注。

后續(xù)這種“模塊化”設(shè)計(jì)概念開(kāi)始出現(xiàn)在網(wǎng)站的儀表板,包括 PayPal 的銷(xiāo)售和財(cái)務(wù)儀表板、Google Ads 的分析工具等。Windows Phone 和 Lumia 使用的 UI 本質(zhì)上是 Bento 設(shè)計(jì)風(fēng)格的早期迭代。后來(lái),微軟也將這一概念應(yīng)用到了 Windows 8 的 Windows 桌面開(kāi)始菜單中。

Windows 8 開(kāi)始菜單當(dāng)蘋(píng)果公司在 iPhone 登陸頁(yè)面上開(kāi)始使用 Bento 網(wǎng)格時(shí),Bento 設(shè)計(jì)被徹底引爆,很快擴(kuò)展到蘋(píng)果的發(fā)布會(huì)演示中。

另一張?zhí)O果海報(bào)

眾所周知,蘋(píng)果公司總能引領(lǐng)市場(chǎng)設(shè)計(jì)趨勢(shì),而 Bento 設(shè)計(jì)風(fēng)格只是其中之一。從那以后,每個(gè)設(shè)計(jì)師都使用 Bento 進(jìn)行產(chǎn)品設(shè)計(jì)、產(chǎn)品發(fā)布等。

日式便當(dāng)?shù)脑O(shè)計(jì)與 Bento 設(shè)計(jì)趨勢(shì)之間的最大區(qū)別在于, Bento 網(wǎng)格的每個(gè)部分都代表一個(gè)獨(dú)特的空間,而不是一個(gè)組的一部分。它現(xiàn)在已經(jīng)發(fā)展到包括產(chǎn)品演示,與其他一些獨(dú)特的布局混合,甚至采用新的視覺(jué)設(shè)計(jì)概念進(jìn)行風(fēng)格化。比如下面這個(gè):

Bento 設(shè)計(jì)互動(dòng)現(xiàn)場(chǎng)演示

上面的例子來(lái)自 diagram.com,它使用便當(dāng)網(wǎng)格來(lái)展示其工具通過(guò)交互式體驗(yàn)可以做什么的現(xiàn)實(shí)生活示例,讓這個(gè)工具更具吸引力,并告訴用戶他們應(yīng)該期待什么。

同時(shí),為了幫助全球設(shè)計(jì)師開(kāi)拓思路,出現(xiàn)了一些 Bento 設(shè)計(jì)靈感的收集網(wǎng)站,如 Bentogrids.com ,其中有大量用于 UI 和圖形設(shè)計(jì)的 Bento 網(wǎng)格。感興趣的設(shè)計(jì)師朋友可以前往體驗(yàn)。

Bentogrids官網(wǎng)

Bento UI 設(shè)計(jì)風(fēng)格擴(kuò)展性較強(qiáng),可以快速的創(chuàng)建響應(yīng)式動(dòng)態(tài)分布,同時(shí)可以輕松地創(chuàng)建明確的視覺(jué)層次結(jié)構(gòu)和布局,提高信息可讀性和可理解性。這些優(yōu)勢(shì)讓 Bento UI 在移動(dòng)設(shè)備上的發(fā)揮非常出色,但如果是層級(jí)結(jié)構(gòu)較為復(fù)雜的頁(yè)面,Bento UI可能并不適合。

二、AR / VR設(shè)計(jì)與更交互式的空間體驗(yàn)

想象一下,你剛剛醒來(lái),拿起手機(jī)查看“重要電子郵件”。畫(huà)面切換,你帶著蘋(píng)果的 Vision Pro,整個(gè)信息流都來(lái)源于這里。這是 2023 年 6 月 5 日全世界每一位科技和設(shè)計(jì)愛(ài)好者的早晨。

圖片來(lái)源 — Apple.com

在接下來(lái)的幾周里,這是科技界談?wù)摰闹饕掝},每個(gè)設(shè)計(jì)師都在努力學(xué)習(xí)空間設(shè)計(jì)技能。除了設(shè)計(jì)趨勢(shì)之外,各種 AR / VR 初創(chuàng)公司也走到了最前沿,他們的技術(shù)終于被人們談?wù)?。Vision Pro 真正推動(dòng)了 AR 和 VR 的發(fā)展。

偉大的技術(shù)帶來(lái)巨大的設(shè)計(jì)潛力。從智能手表到折疊手機(jī),設(shè)計(jì)師們總是挺身而出,展示他們的適應(yīng)性??臻g設(shè)計(jì)也不例外。

一睹即將發(fā)生的事情

一款名為“Bezi”的流行設(shè)計(jì)師工具隨之推出,它非常接近 Figma 和 Spline 等設(shè)計(jì)工具,但增加了第三維空間。設(shè)計(jì)師可以進(jìn)行空間設(shè)計(jì),連接可用的 AR / VR 耳機(jī),并創(chuàng)建交互式空間體驗(yàn)。

更好的 UX 是更好的 AR / VR 體驗(yàn)的一個(gè)重要貢獻(xiàn)者。深入了解前沿設(shè)計(jì)背后的技術(shù)、使用實(shí)際的 VR 耳機(jī)、在空間環(huán)境中進(jìn)行測(cè)試,這些都是工作的一部分。隨著我們的發(fā)展,我們目前對(duì)用戶體驗(yàn)的理解肯定會(huì)有很多新的變化。這是需要持續(xù)積累并會(huì)在將來(lái)使用的技能之一。

除了蘋(píng)果公司豐富的想象力和雄厚的財(cái)力之外,還有一些不太懂技術(shù)的公司也為佩戴眼鏡帶來(lái)了全新的體驗(yàn)。比如太陽(yáng)鏡公司 RayBan ,已經(jīng)憑借其新款 Meta Wayfarer 進(jìn)入了智能可穿戴設(shè)備競(jìng)賽。它的內(nèi)置攝像頭和智能功能允許用戶存儲(chǔ)視頻/圖像并直播到社交媒體,這為用戶體驗(yàn)和客戶體驗(yàn)帶來(lái)了新的維度。

圖片來(lái)源 — RayBan

三、動(dòng)畫(huà)與 3D 設(shè)計(jì)成為新趨勢(shì)

當(dāng)更多人掌握一項(xiàng)新技能時(shí),新趨勢(shì)往往就會(huì)誕生。LottieFiles 可以便捷的將 UI 生成簡(jiǎn)單的動(dòng)畫(huà),他們甚至推出了 Figma 插件,允許用戶將 Figma 動(dòng)畫(huà)轉(zhuǎn)換為可導(dǎo)出的 Lottie JSON 文件。這解決了 After Effects 和類(lèi)似軟件的漫長(zhǎng)學(xué)習(xí)曲線問(wèn)題,讓更多的設(shè)計(jì)師可以自己快速制作動(dòng)畫(huà)。

同時(shí)我們注意到,如今每個(gè)公司的登陸頁(yè)面上都有誘人的互動(dòng)。這源于網(wǎng)站訪問(wèn)者對(duì)差異化體驗(yàn)的需求不斷增長(zhǎng),以及在銷(xiāo)售產(chǎn)品/服務(wù)的過(guò)程中講好故事的更大需求。

以 Apple Watch Series 9 的登陸頁(yè)面交互為例:

有了滾動(dòng)動(dòng)畫(huà),訪問(wèn)者就會(huì)全神貫注于你要向他們展示的內(nèi)容。Webflow 和 Framer 等無(wú)代碼工具不斷創(chuàng)新,為設(shè)計(jì)人員帶來(lái)此類(lèi)動(dòng)畫(huà)功能,而無(wú)需編寫(xiě)長(zhǎng)行代碼。

人們可能會(huì)認(rèn)為,動(dòng)畫(huà)至此已經(jīng)達(dá)到頂峰,沒(méi)有什么值得期待的了。但幸運(yùn)的是,科技界的人總是在尋找下一件大事,并且提供無(wú)窮無(wú)盡的強(qiáng)大工具,讓想象的一切都變得可能。其中一種可能性就是新的“動(dòng)畫(huà)按鈕趨勢(shì)”。一種新的 UI 風(fēng)格,引入了動(dòng)畫(huà)技術(shù),使簡(jiǎn)單的按鈕變得生動(dòng)起來(lái)。這些變化的范圍從按鈕周?chē)暮?jiǎn)單筆劃動(dòng)畫(huà),到鼠標(biāo)懸停時(shí)在按鈕內(nèi)移動(dòng)的文字星星。

來(lái)源于 X的“@learnframer”的 GIF

除了動(dòng)畫(huà)的趨勢(shì)之外,最近,許多設(shè)計(jì)師都在談?wù)撛O(shè)計(jì)世界如何從扁平化設(shè)計(jì)轉(zhuǎn)向更偽現(xiàn)實(shí)的視覺(jué)風(fēng)格。其中包括 3D 圖形、深度效果、擬物化、擬物化等。我們也看到很多公司都將 3D 作為核心風(fēng)格。盡管它現(xiàn)在可能不會(huì)出現(xiàn)在網(wǎng)頁(yè)和應(yīng)用程序設(shè)計(jì)中,但徽標(biāo)正在隨著這一新趨勢(shì)而更新。

新 3D 浪潮的幾個(gè)很好的例子(來(lái)源于 Chan Karunaratne)

與動(dòng)畫(huà)設(shè)計(jì)趨勢(shì)非常相似,人們實(shí)現(xiàn)這些樣式的一個(gè)重要原因是出現(xiàn)了易于使用的基于 Web 的 3D 工具,例如 Spline 和 Vectary ,這些工具使得在 Web 和應(yīng)用程序上包含 3D 資源變得非常容易。他們還使用動(dòng)畫(huà)將 3D 資產(chǎn)帶入生活,這是很多設(shè)計(jì)師所經(jīng)歷過(guò)的最短的學(xué)習(xí)曲線。設(shè)計(jì)師很快就能使用基本的線性漸變和一些陰影為企業(yè)的品牌資產(chǎn)添加第三維度。另一家始終推動(dòng)設(shè)計(jì)和趨勢(shì)的公司是 Airbnb。他們因其簡(jiǎn)單而有效的應(yīng)用程序設(shè)計(jì)和交互而廣為人知。2023 年,他們宣布了一次應(yīng)用程序更新,融入了十多個(gè) 3D 視覺(jué)元素,甚至公告視頻幾乎都是關(guān)于3D的。

Airbnb 發(fā)布視頻

等距視覺(jué)效果、3D 角色和動(dòng)畫(huà)以及大量應(yīng)用程序交互足夠吸引眼球,讓用戶想要重復(fù)觀看。從平面到動(dòng)畫(huà)或 3D 的轉(zhuǎn)變?cè)诰徛€(wěn)定的發(fā)生著。這種趨勢(shì)通常是由多米諾骨牌效應(yīng)造成的。只要一位設(shè)計(jì)師的社交帖子受到歡迎,其他著名設(shè)計(jì)師也會(huì)效仿。

四、人工智能對(duì)于 UX / UI的影響

1. AI 設(shè)計(jì)工具是否可以成為設(shè)計(jì)師的好助手

雖然一些設(shè)計(jì)師認(rèn)為 AI 未來(lái)會(huì)對(duì)他們的職業(yè)構(gòu)成威脅,但我們大多數(shù)人都在使用這項(xiàng)技術(shù)更快地創(chuàng)造出最好的設(shè)計(jì)。

Adobe Firefly 用于視頻處理

不過(guò)大多數(shù)聲稱(chēng)自己為“人工智能驅(qū)動(dòng)”的設(shè)計(jì)工具,雖然開(kāi)放了生成式 AI 的 API,也在開(kāi)發(fā)自己的人工智能模型,但大多數(shù) AI 功能都還只是噱頭,只能完成隨機(jī)設(shè)計(jì) UI、重組資產(chǎn)等不穩(wěn)定功能。

但市場(chǎng)上也仍然存在一些設(shè)計(jì)領(lǐng)域的英雄產(chǎn)品,比如 Relume 。這家專(zhuān)注于 Webflow 的公司推出了名為 Relume AI 的產(chǎn)品,這是一款功能強(qiáng)大的線框和交互工具。在該網(wǎng)站中輸入你的網(wǎng)站描述,它會(huì)生成完整且詳細(xì)的交互稿和視覺(jué)圖,界面的布局和數(shù)據(jù)完整,可以快速?gòu)?fù)制到 Figma 和 Webflow。

前段時(shí)間我們也分享過(guò) Durable 這個(gè)建站產(chǎn)品AI + 建站|Durable,融資 1400 萬(wàn)美金,30秒創(chuàng)建一個(gè)網(wǎng)站并成為自己的老板,它提供了創(chuàng)建網(wǎng)站所需要的一打子工具,包括網(wǎng)站構(gòu)建器、CRM、發(fā)票軟件、人工智能助手等。用戶只需要提供品牌名稱(chēng)、所屬行業(yè)、開(kāi)展業(yè)務(wù)的地點(diǎn)和網(wǎng)站語(yǔ)言,Durable 就會(huì)基于用戶提供的信息快速創(chuàng)建一個(gè)網(wǎng)站首頁(yè)。

用 Durable 創(chuàng)建網(wǎng)站

2. AI 時(shí)代的用戶體驗(yàn)設(shè)計(jì)

在 ChatGPT 還沒(méi)有風(fēng)靡的時(shí)候,數(shù)字產(chǎn)品的用戶體驗(yàn)風(fēng)格普遍為以 GUI (圖形用戶界面)為主,通過(guò)圖形、按鈕、菜單等標(biāo)準(zhǔn)化元素,使用戶可以通過(guò)鍵盤(pán)、觸摸等方式與終端設(shè)備交互。Windows 操作系統(tǒng)、MacOS 、Photoshop等軟件都已 GUI 的用戶界面為主。

GUI 的界面設(shè)計(jì)在近 20 多年的發(fā)展過(guò)程中,由于功能場(chǎng)景的不斷增加, GUI 界面需要兼容復(fù)雜的、多樣化的用戶需求。功能強(qiáng)大的同時(shí),設(shè)計(jì)成本變得很高,用戶的學(xué)習(xí)成本也隨之提升。尤其是在 TOB 領(lǐng)域的設(shè)計(jì)中,功能的龐大讓整個(gè)頁(yè)面擁有多重窗口、四五級(jí)以上的導(dǎo)航,即使設(shè)計(jì)師努力提供簡(jiǎn)單易用的頁(yè)面,也很難降低用戶的學(xué)習(xí)難度。

隨著 GPT4 的推出,CUI (對(duì)話式用戶界面)的界面體驗(yàn)正在逐漸應(yīng)用廣泛。CUI 采用了更加直觀和自然的語(yǔ)言交互的方式,通過(guò)自然語(yǔ)言、語(yǔ)音等方式進(jìn)行對(duì)話,可以有上下文記憶和智能化的回應(yīng),典型如 Siri 、Amazon Alexa 、 Google Assistant。

CUI 的出現(xiàn),用自然語(yǔ)言的對(duì)話方式,可以讓用戶更直觀的與數(shù)字產(chǎn)品進(jìn)行交互,避免用戶記憶繁瑣的操作路徑,讓 AI 為自己找到最快的解決方案。

但是否所有應(yīng)用都需要用 CUI 重構(gòu)一遍?我們認(rèn)為不會(huì),不同的應(yīng)用特性會(huì)導(dǎo)致不同的設(shè)計(jì)方向,這給了設(shè)計(jì)師進(jìn)一步延展的空間。

  • 對(duì)于 TOC 的產(chǎn)品:針對(duì)用戶目的明確、功能較為簡(jiǎn)單的產(chǎn)品, CUI 會(huì)對(duì)其的交互體驗(yàn)有著革命性的影響,比如攜程、美團(tuán)這種需求明確的產(chǎn)品,用戶的目標(biāo)是為了找到最合適的商品完成購(gòu)買(mǎi),這個(gè)過(guò)程可以通過(guò) CUI × AIGC 的方式進(jìn)行進(jìn)一步重構(gòu);但針對(duì)用戶目的不明確,且產(chǎn)品體驗(yàn)過(guò)程較為舒適、不需思考的產(chǎn)品,如抖音、快手,CUI 不一定是最讓用戶喜愛(ài)的交互界面,或許需要探索二者結(jié)合的最佳方式
  • 對(duì)于 TOB 的產(chǎn)品:用戶目的明確,功能多樣且復(fù)雜,我們認(rèn)為 GUI 的設(shè)計(jì)界面很難被摒棄,導(dǎo)航式的地圖仍然需要提供給用戶完成有目的查找。同時(shí)對(duì)話式的命令也可以滿足用戶無(wú)目的的詢問(wèn),或許 CUI 可以基于現(xiàn)有層級(jí)分明的界面,進(jìn)行關(guān)鍵流程的解答和提效。

五、不忘初心,回歸用戶

用戶體驗(yàn)的研究已經(jīng)不斷發(fā)展和完善,使設(shè)計(jì)變得易于理解和包容。相比于視覺(jué)設(shè)計(jì)的精美程度,許多設(shè)計(jì)師更重視可用性,這帶來(lái)了更簡(jiǎn)單且可行的設(shè)計(jì)風(fēng)格。盡管過(guò)去幾年行業(yè)發(fā)生了變化,該設(shè)計(jì)原則仍然被踐行。

2019 年至 2023 年“用戶體驗(yàn)可訪問(wèn)性”的 Google 趨勢(shì)圖

上面的谷歌趨勢(shì)圖顯示了無(wú)障礙設(shè)計(jì)漸漸成為了真正的工業(yè)需求??稍L問(wèn)性技術(shù)的范圍從顏色對(duì)比、可讀字體、可識(shí)別的動(dòng)作元素,一直到追蹤不同用戶的反饋,應(yīng)用到產(chǎn)品功能中去。

1. 無(wú)障礙設(shè)計(jì)

由于當(dāng)前需要為所有年齡段的人甚至身體有障礙的用戶進(jìn)行設(shè)計(jì),因此無(wú)障礙性也受到了大力推動(dòng)。公司希望從所有不同的人群中獲利,并且也在各個(gè)方面推動(dòng)包容性。隨著越來(lái)越多的人走向數(shù)字化,設(shè)計(jì)師幾乎必須專(zhuān)注于無(wú)障礙設(shè)計(jì),更多針對(duì)無(wú)障礙設(shè)計(jì)的課程和訓(xùn)練營(yíng)也面向設(shè)計(jì)師開(kāi)放。

2. 個(gè)性化

除了可訪問(wèn)性之外,個(gè)性化才是真正讓人們鎖定應(yīng)用程序或網(wǎng)站的原因。或許你以前在 YouTube 上看過(guò)這條小信息 :

YouTube 評(píng)估你喜歡哪種內(nèi)容以便提供更好的推薦

即使是一個(gè)已發(fā)布功能,如果用戶反饋不佳,也很容易面臨撤回的情況,這直接體現(xiàn)了用戶體驗(yàn)設(shè)計(jì)師在未來(lái)產(chǎn)品和服務(wù)方面的領(lǐng)先地位。

Perplexity AI CEO Aravind 曾分享過(guò)對(duì)于用戶體驗(yàn)的理解,基本原則是“用戶永遠(yuǎn)不會(huì)錯(cuò)”。Perplexity 發(fā)現(xiàn)只有極少數(shù)人知道將好奇心轉(zhuǎn)化為清晰、準(zhǔn)確的問(wèn)題,從而導(dǎo)致結(jié)果不準(zhǔn)確,甚至幻覺(jué)的出現(xiàn)。(歡迎閱讀我們研究 Perplexity 的深度文章:AI+搜索|關(guān)于搜索的想象,和目前估值最高的生成式搜索引擎 Perplexity。)

一種解決思路是總結(jié) prompt 的提問(wèn)方法,讓用戶能主動(dòng)學(xué)習(xí);另一種解決思路是所以在對(duì)話式交互界面上,幫助用戶提一個(gè)好的問(wèn)題。Perplexity 選擇了第二種,增加了提出問(wèn)題之后的更多問(wèn)題衍生?!脚_(tái)永遠(yuǎn)要為用戶多想一步、多做一步。

Perplexity 界面

總得來(lái)說(shuō),設(shè)計(jì)趨勢(shì)會(huì)隨著工業(yè)化進(jìn)程的推進(jìn),而演進(jìn)為更前沿的風(fēng)格,也會(huì)有更多工具幫助設(shè)計(jì)師開(kāi)放腦洞,快速得到心中所想。但無(wú)論社會(huì)如何進(jìn)步,以用戶體驗(yàn)為中心的話題永遠(yuǎn)不會(huì)終結(jié)。

參考材料

https://blog.prototypr.io/ux-ui-design-trends-going-into-2024-ca43a839b541

作者:Grace,Vela

來(lái)源公眾號(hào):深思SenseAI;關(guān)注全球 AI 前沿,走進(jìn)科技創(chuàng)業(yè)公司,提供產(chǎn)業(yè)多維深思。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @深思SenseAI 授權(quán)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!