99久久精品国产高清一区二区|91色综合|久久久久97国产|亚洲精品WWW久久久久久|99热这里只有成人精品国产|亚洲国产欧美目韩成人综合|国产一区二区三区精品视频|久久久久国产精品麻豆|亚洲综合精品香蕉久久网97|日韩一区国产二区欧美三区|中文字幕一区婷婷久久|亚洲精品中文字幕久久久久下载

首頁

10 分鐘掌握柵格系統(tǒng):8 個(gè)經(jīng)典案例速通

藍(lán)藍(lán)設(shè)計(jì)的小編 行業(yè)趨勢

柵格系統(tǒng)可預(yù)設(shè)不同屏幕尺寸的斷點(diǎn)(如移動(dòng)端、平板、桌面端),通過列數(shù)增減、模塊重排實(shí)現(xiàn)自適應(yīng)布局。無需為每個(gè)終端單獨(dú)設(shè)計(jì)一套布局,就能保證在不同設(shè)備上的顯示效果協(xié)調(diào),降低跨終端設(shè)計(jì)的復(fù)雜度。
在現(xiàn)代設(shè)計(jì)中,柵格系統(tǒng)作為一種重要的布局方案,能夠有效提升設(shè)計(jì)的秩序感。對于 UI 設(shè)計(jì)領(lǐng)域,柵格系統(tǒng)也廣泛用于跨屏幕的響應(yīng)式設(shè)計(jì),幫助設(shè)計(jì)師打造更好的多端體驗(yàn)。本文將簡要介紹柵格系統(tǒng)的基本概念和搭建方法,并提供 8 個(gè)實(shí)際應(yīng)用案例,讓大家快速通關(guān)柵格系統(tǒng)。

一、什么是柵格系統(tǒng)?

柵格系統(tǒng)是一種將頁面劃分為多個(gè)列和行的布局結(jié)構(gòu),
柵格系統(tǒng)的核心優(yōu)點(diǎn)是規(guī)范布局、提升效率、優(yōu)化體驗(yàn),具體可分為以下 4 點(diǎn):

1. 統(tǒng)一視覺秩序,增強(qiáng)設(shè)計(jì)一致性

柵格通過設(shè)定固定列數(shù)、間距、邊距等規(guī)則,讓頁面中不同模塊(文字、圖片、卡片)的排列有統(tǒng)一基準(zhǔn)。無論是單頁面內(nèi)的元素分布,還是多頁面、多終端(PC / 移動(dòng)端)的設(shè)計(jì)銜接,都能保持風(fēng)格統(tǒng)一,避免布局雜亂,提升品牌視覺辨識度。

2. 提升設(shè)計(jì)與開發(fā)效率

設(shè)計(jì)端無需反復(fù)糾結(jié)元素位置和間距,可直接基于柵格框架快速排版,減少無效調(diào)整;開發(fā)端能通過柵格的固定參數(shù)(如列寬、響應(yīng)式斷點(diǎn))編寫統(tǒng)一代碼,降低適配成本,還能實(shí)現(xiàn)設(shè)計(jì)稿與開發(fā)還原的精準(zhǔn)對齊,減少溝通返工。

3. 優(yōu)化用戶閱讀與瀏覽體驗(yàn)

柵格劃分的規(guī)整布局符合用戶視覺流動(dòng)習(xí)慣,讓信息呈現(xiàn)更有層次感和邏輯性。用戶能快速捕捉核心內(nèi)容,避免因布局混亂導(dǎo)致的閱讀疲勞,尤其在多信息、多模塊的復(fù)雜頁面(如官網(wǎng)、電商首頁)中,體驗(yàn)提升更明顯。

4. 適配靈活,支持多終端響應(yīng)式設(shè)計(jì)

在數(shù)字設(shè)計(jì)中的“柵格”相比平面設(shè)計(jì)的“網(wǎng)格”更靈活一些,常常只制定縱向的分割規(guī)則。因?yàn)閿?shù)字界面的高度不像紙張等實(shí)體媒介,不需要嚴(yán)格確定縱向高度。
下圖中就是最常見的一個(gè)數(shù)字界面柵格結(jié)構(gòu),包括:
  • 列(Column)
  • 水槽(Gutter)
  • 邊距(Margin)
  • 柵格總寬(Container)
  • 容器盒子(Col-n)

在實(shí)際使用時(shí),盡量讓內(nèi)容(容器盒子)在橫向占滿(N)列和(N-1)列水槽。比如上圖中的左側(cè)的容器盒子占據(jù)了 2 列和 1 列水槽,右側(cè)的容器盒子占據(jù)了 3 列和 2 列水槽。注意,盡量不要讓列和水槽數(shù)量相等,而是要讓水槽數(shù)量比列少一個(gè),這樣可以讓內(nèi)容之間留出更自然的間隙。

二、如何搭建和使用柵格系統(tǒng)?

目前市面上主流的界面設(shè)計(jì)工具都支持柵格功能,我用的是摹客DT,搭建柵格系統(tǒng)的步驟如下:

1)創(chuàng)建新項(xiàng)目

打開
摹客DT
(https://www.mockplus.cn/dt?hmsr=2409wenbjzz),使用快捷鍵 A 添加初始容器,并選擇合適的尺寸。
 

2)設(shè)置柵格

在右側(cè)屬性面板中,
找到并展開“布局網(wǎng)格”模塊,激活“顯示布局”選項(xiàng)即可打開
柵格
功能
。設(shè)置面板中“間距”即水槽值,在類型中可以按需選擇拉伸(列寬自動(dòng))還是居中(手動(dòng)設(shè)定列寬)。

3)使用柵格

直接在編輯窗口繪制設(shè)計(jì)內(nèi)容,元素靠近列時(shí)會(huì)有自動(dòng)吸附效果。合理地安排界面中的元素、文字等,讓他們恰好覆蓋整數(shù)倍的列,就能保證設(shè)計(jì)最大化利用了柵格的優(yōu)點(diǎn)。

三、柵格系統(tǒng)在產(chǎn)品設(shè)計(jì)中的8個(gè)應(yīng)用案例

1)Material Design
Material Design的柵格布局是一種響應(yīng)式設(shè)計(jì)系統(tǒng),旨在確保用戶界面在不同設(shè)備和屏幕尺寸上的一致性和靈活性。它主要基于12列的柵格系統(tǒng),允許設(shè)計(jì)師和開發(fā)者在布局中有效地組織內(nèi)容。

Material Design的柵格布局是響應(yīng)式的,能夠根據(jù)設(shè)備的屏幕大小和方向自動(dòng)調(diào)整。設(shè)計(jì)師可以利用五個(gè)斷點(diǎn)(xs, sm, md, lg, xl)來定義在不同屏幕尺寸下的列數(shù)和布局方式,從而實(shí)現(xiàn)靈活的設(shè)計(jì)。
2)智能化
響應(yīng)式設(shè)計(jì)
利用柵格系統(tǒng)可以構(gòu)建優(yōu)秀的智能響應(yīng)式設(shè)計(jì),使得網(wǎng)頁在不同設(shè)備上保持一致性和組織性。通過合理的布局和元素對齊,設(shè)計(jì)師能夠提升用戶體驗(yàn)和界面美觀性。

在上圖這個(gè)案例中,設(shè)計(jì)師利用柵格系統(tǒng)完成網(wǎng)頁(Web)設(shè)計(jì)后,可以輕松地借助柵格的特性和“摹客DT”中的自動(dòng)布局能力,自動(dòng)得到平板(Tablet)端和手機(jī)(Mobile)端的設(shè)計(jì)效果,極大地提升設(shè)計(jì)效率。
3)8點(diǎn)網(wǎng)格設(shè)計(jì)
8 點(diǎn)網(wǎng)格系統(tǒng)是設(shè)計(jì)界常用的標(biāo)準(zhǔn),適用于各種屏幕尺寸。設(shè)計(jì)師通過使用 8 的倍數(shù)來定義元素的間距和尺寸,確保在不同設(shè)備上實(shí)現(xiàn)視覺一致性。這種方法特別適合移動(dòng)端設(shè)計(jì),能夠提高布局的效率和準(zhǔn)確性。

在上圖的案例中,設(shè)計(jì)師盡可能使用 8 的倍數(shù)來定義所有的設(shè)計(jì)參數(shù),包括按鈕的長寬尺寸、按鈕的內(nèi)邊距(Download距離按鈕頂部的內(nèi)邊距)、按鈕和按鈕的間距等。8 點(diǎn)網(wǎng)格可以進(jìn)一步降低設(shè)計(jì)師的決策難度,提升設(shè)計(jì)效率。
4)
Bootstrap
柵格系統(tǒng)
Bootstrap 框架提供了一個(gè)強(qiáng)大的柵格系統(tǒng),支持多種屏幕設(shè)備的響應(yīng)式設(shè)計(jì)。通過預(yù)定義的類,開發(fā)者可以快速構(gòu)建布局,確保在不同設(shè)備上的良好表現(xiàn)。

而在 Bootstrap 3 中,整個(gè)柵格系統(tǒng)一開始就是對移動(dòng)設(shè)備友好的,整個(gè)框架的內(nèi)核中內(nèi)置了整套柵格機(jī)制的支持。也就是說,使用 Bootstrap 可以獲得最佳的移動(dòng)端柵格效果。
5)文字基線網(wǎng)格系統(tǒng)
基線網(wǎng)格系統(tǒng)通過密集的水平行提供文本對齊和間距準(zhǔn)則,確保文本在設(shè)計(jì)中的一致性。這種方法在排版設(shè)計(jì)中尤為重要,能夠提升閱讀體驗(yàn)和視覺美感。

在上方的示例中,每8px行在紅色和白色之間交替。將文字的所有行高設(shè)置為基本單位(8x或4px)的倍數(shù),可以讓文本和基線網(wǎng)格完美對齊。
 
6)B端用戶界面
 
在B端界面設(shè)計(jì)中,柵格系統(tǒng)用于布局和對齊界面元素,確保用戶界面的整潔和可用性。設(shè)計(jì)師可以利用柵格系統(tǒng)來創(chuàng)建直觀的導(dǎo)航和交互體驗(yàn),提升用戶滿意度。由于B端界面中通常有固定的左側(cè)邊欄,此時(shí)可以利用混合柵格的策略,讓界面中僅內(nèi)容的部分符合柵格要求,固定的左邊欄不參與柵格布局。
 
在上方的示例中,登錄界面和B端的左側(cè)功能頁面都是固定的內(nèi)容,無需參與柵格布局。此時(shí),可以將布局的重點(diǎn)集中在內(nèi)容區(qū)域,形成混合柵格的結(jié)構(gòu),保證最佳的頁面響應(yīng)體驗(yàn)。
7)Ant Design
作為國內(nèi)流行前端設(shè)計(jì)框架,Ant Design在柵格上的定義也是非常經(jīng)典的。Ant Design 采用 24 柵格體系。以上下布局的結(jié)構(gòu)為例,對內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置,如下圖所示。頁面中柵格的 Gutter 設(shè)定了定值,即瀏覽器在一定范圍擴(kuò)大或縮小,柵格的 Column 寬度會(huì)隨之?dāng)U大或縮小,但 Gutter 的寬度值固定不變。

對開發(fā)者而言柵格是實(shí)現(xiàn)動(dòng)態(tài)布局的手段,而設(shè)計(jì)師對于柵格的理解源自平面設(shè)計(jì)中的柵格。在具體落地中視角的不同就容易造成偏差,最終影響還原度,繼而增加溝通成本。
8)Arco Design
Arco Design的柵格布局是一種靈活且高效的設(shè)計(jì)系統(tǒng),主要用于字節(jié)跳動(dòng)的中后臺產(chǎn)品。其設(shè)計(jì)理念基于24柵格系統(tǒng),能夠有效地組織和展示信息,確保頁面布局的一致性和邏輯性。

Arco Design的這套柵格布局不僅提升了設(shè)計(jì)的效率和美觀度,還通過模塊化和響應(yīng)式設(shè)計(jì)增強(qiáng)了產(chǎn)品的適應(yīng)性。設(shè)計(jì)師和開發(fā)者可以通過這一系統(tǒng)更好地協(xié)作,實(shí)現(xiàn)高質(zhì)量的產(chǎn)品設(shè)計(jì)。

小結(jié)

在這篇文章中,我們深入探討了柵格系統(tǒng)的基本概念、搭建方法以及實(shí)際應(yīng)用案例。通過這8個(gè)應(yīng)用案例,我們不僅展示了柵格系統(tǒng)在設(shè)計(jì)和布局中的重要性,還揭示了如何在真實(shí)設(shè)計(jì)和開發(fā)中去使用柵格系統(tǒng),并提升工作效率和視覺美感。
實(shí)踐出真知,柵格系統(tǒng)的靈活性和適應(yīng)性使其成為設(shè)計(jì)師和開發(fā)者不可或缺的工具。無論是在網(wǎng)頁設(shè)計(jì)、平面設(shè)計(jì),還是在產(chǎn)品開發(fā)中,掌握柵格系統(tǒng)都將為你的工作提供堅(jiān)實(shí)基礎(chǔ)。通過本篇文章,相信你已經(jīng)更深入地理解了柵格系統(tǒng)的價(jià)值,愿你在項(xiàng)目中大膽應(yīng)用這些知識,將知識轉(zhuǎn)化為項(xiàng)目成果,在實(shí)戰(zhàn)中去體會(huì)柵格系統(tǒng)的獨(dú)特優(yōu)勢吧!
 

UI 設(shè)計(jì)五大核心趨勢:技術(shù)驅(qū)動(dòng)與體驗(yàn)升級的雙重革新

高勁 行業(yè)趨勢

作為擁有 10 年前端開發(fā)與 UI 設(shè)計(jì)經(jīng)驗(yàn)、交付過 1500 + 項(xiàng)目的 “雙料” 從業(yè)者,我見證了 UI 設(shè)計(jì)從單純的界面美化,逐步演進(jìn)為技術(shù)、體驗(yàn)與理念深度融合的綜合領(lǐng)域。步入 2025 年,行業(yè)迎來了多個(gè)關(guān)鍵趨勢的集中爆發(fā),這些趨勢不僅重塑了設(shè)計(jì)流程,更重新定義了用戶與產(chǎn)品的交互關(guān)系。以下將從五大核心趨勢切入,拆解其背后的技術(shù)...

審美積累 | 淺色清新的APP設(shè)計(jì)(2)

杰睿 行業(yè)趨勢

編組 2.png

編組 3.png

編組 4.png

編組.png

這組設(shè)計(jì)呈現(xiàn)出清新柔和的 “輕擬態(tài) + 治愈系”UI 風(fēng)格,可從以下維度分析:
  • 色彩與質(zhì)感:以淺藍(lán)、薄荷綠、暖白等低飽和度色系為主,搭配柔和漸變與透明玻璃質(zhì)感,營造出純凈、舒適的視覺體驗(yàn)。例如界面元素常采用毛玻璃效果,讓色彩過渡自然且富有層次感,像淡藍(lán)與淺橙的漸變波形、薄荷綠的數(shù)據(jù)圖表,既傳遞出科技感,又充滿治愈感。
  • 形態(tài)與細(xì)節(jié):大量運(yùn)用圓潤的邊角、柔和的曲線造型,弱化尖銳感,增強(qiáng)親和力。界面元素如按鈕、卡片多為圓角設(shè)計(jì),搭配細(xì)膩的光影效果,讓整體風(fēng)格既精致又親切,尤其適合健康、生活、數(shù)據(jù)類應(yīng)用,傳遞出 “溫和、可靠” 的產(chǎn)品氣質(zhì)。
  • 排版與信息層級:采用極簡排版邏輯,通過字體大小、字重和留白區(qū)分信息優(yōu)先級,確保內(nèi)容清晰易讀。同時(shí)借助輕量化的圖標(biāo)、柔和的分隔線,讓界面簡潔不雜亂,用戶能快速捕捉核心信息,如數(shù)據(jù)圖表的趨勢、功能模塊的入口。
  • 場景適配性:從生活服務(wù)類界面到數(shù)據(jù)可視化場景,都保持了風(fēng)格的統(tǒng)一性。例如健康類界面用柔和色彩傳遞關(guān)懷感,數(shù)據(jù)類界面用輕擬態(tài)設(shè)計(jì)平衡專業(yè)與友好,適配多領(lǐng)域需求的同時(shí),強(qiáng)化了品牌視覺的一致性。
這種風(fēng)格是 “輕擬態(tài)設(shè)計(jì)” 與 “治愈系美學(xué)” 的融合,以柔和色彩、圓潤形態(tài)、透明質(zhì)感構(gòu)建出既現(xiàn)代又暖心的 UI 語言,能有效拉近產(chǎn)品與用戶的距離,尤其適合注重體驗(yàn)感與親和力的應(yīng)用場景。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

審美積累 | 深色APP界面設(shè)計(jì)(2)

杰睿 行業(yè)趨勢

編組 2.png

編組 3.png

編組 4.png

編組 5.png

編組.png

這些設(shè)計(jì)簡直是 “在暗黑宇宙里開了科技感的掛,連顏值和實(shí)力都卷到了天花板”~
整體以深灰、黑色為基底,通過霓虹紫、藍(lán)、橙紅或金屬金色等亮色點(diǎn)綴,營造出強(qiáng)烈的科技感與高級感。同時(shí)融合玻璃態(tài)、金屬質(zhì)感、光影疊加等效果,讓界面兼具立體感與精致度,如懸浮卡片的光影、透明邊緣設(shè)計(jì),增強(qiáng)了視覺張力。
排版上采用極簡無襯線字體,通過字號、字重差異清晰區(qū)分信息層級,搭配大量留白(暗色調(diào)下的 “負(fù)空間”)和區(qū)塊化布局,既梳理了功能邏輯,又提升了可讀性與操作效率。
在多端適配中保持設(shè)計(jì)語言統(tǒng)一,從手機(jī)到平板、桌面端,色彩系統(tǒng)、組件樣式、交互邏輯連貫一致。且針對社交、數(shù)據(jù)分析、AI 工具等不同場景,在視覺風(fēng)格上做細(xì)微調(diào)整,如 AI 工具界面用卡通機(jī)器人傳遞趣味,大數(shù)據(jù)界面用極簡圖標(biāo)呈現(xiàn)復(fù)雜數(shù)據(jù),兼顧美觀與實(shí)用。
這種 “暗黑科技風(fēng)” 與 “現(xiàn)代極簡風(fēng)” 的融合,適合科技、社交、數(shù)據(jù)類產(chǎn)品,既傳遞 “高端、專業(yè)、創(chuàng)新” 的品牌形象,又通過人性化交互保障體驗(yàn)流暢性。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

蘭亭妙微審美分享 | 深色APP設(shè)計(jì)怎么做(1)

杰睿 行業(yè)趨勢

編組 2.png

編組 3.png

編組 4.png

編組 5.png

編組.png

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

多語言適配設(shè)計(jì):讓全球化產(chǎn)品突破 “語言壁壘”

濤濤 行業(yè)趨勢

隨著全球化浪潮席卷各行各業(yè),越來越多產(chǎn)品試圖走出本土市場,卻常常在 “語言適配” 這一關(guān)鍵環(huán)節(jié)遭遇滑鐵盧:中文界面里清晰緊湊的按鈕,到了俄文版本中變成滿是省略號的 “殘缺文案”;阿拉伯語 APP 的布局完全錯(cuò)亂,用戶找不到核心的 “提交” 功能;英文版本的日期格式 “MM/DD/YYYY”,讓歐洲用戶誤以為是 “日 / 月 / 年”…… 這些 “翻車” 案例背后,本質(zhì)是對 “國際化(i18n)” 與 “本地化(l10n)” 的認(rèn)知偏差,以及對語種差異的設(shè)計(jì)忽視。

蘭亭妙微審美積累|總結(jié)三個(gè)情感化設(shè)計(jì)細(xì)節(jié)

杰睿 行業(yè)趨勢

 

imgi_70_technology-00-c0d4b6a9-8323-41de-b429-c41f578eddc7.png

imgi_134_c6b715be-3c27-461b-b92d-aefa342d0732.png

imgi_193_6a0e9654-48e9-4f73-b2eb-1e7fc6977f04.png

imgi_211_8f198f8c-3db9-4c64-b303-39f163e048b4.png

imgi_315_223a39b5-41de-4ac8-b3f9-7b05ef8638bf.png

imgi_490_b97cedd4-5e80-45cc-a5c7-f5aeac74ec23.png

在同質(zhì)化嚴(yán)重的市場中,情感化設(shè)計(jì)能讓產(chǎn)品從功能層面上升到情感層面,形成獨(dú)特的競爭優(yōu)勢。通過滿足用戶的情感需求,產(chǎn)品可在眾多同類產(chǎn)品中脫穎而出,吸引更多用戶選擇并推薦給他人。

1. 人格化視覺符號貫穿

幾乎每個(gè)界面都運(yùn)用了擬人化的角色、IP 或視覺符號,如 Headspace 的橙色笑臉、加密錢包界面的卡通角色、Lovable 的愛心符號等。這些符號賦予產(chǎn)品 “人格感”,打破技術(shù)或功能的冰冷感,讓用戶產(chǎn)生 “產(chǎn)品有溫度、可交流” 的情感連接,例如 Headspace 的 IP 反復(fù)出現(xiàn),強(qiáng)化了 “冥想是愉悅且有人陪伴的過程” 的認(rèn)知。

2. 共情式文案與場景化表達(dá)

文案摒棄生硬的功能說明,轉(zhuǎn)而用口語化、情感化的表達(dá)貼近用戶需求。比如加密錢包界面的 “Interacting with crypto has never been so simple”(與加密貨幣交互從未如此簡單),Headspace 的 “Don’t leave your best self behind”(別讓最好的自己掉隊(duì)),都從用戶視角出發(fā),喚起情感共鳴,讓用戶感知到 “產(chǎn)品理解我的需求,為我解決問題”。

3. 交互的即時(shí)反饋與選擇包容性

界面在交互設(shè)計(jì)中注重給用戶 “被回應(yīng)” 的情感滿足,同時(shí)尊重用戶決策。例如勾選框的動(dòng)效、按鈕的微交互(如 Gemini 界面的卡片 hover 反饋),讓每一步操作都有即時(shí)反饋,減少用戶的操作焦慮;而 Headspace 優(yōu)惠彈窗提供 “Get 40% off” 和 “Skip” 兩個(gè)選項(xiàng),避免強(qiáng)制營銷帶來的反感,體現(xiàn)了對用戶自主決策的尊重,提升了用戶的情感舒適度。
 
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

合成用戶:用戶體驗(yàn)研究中“人工智能生成的用戶”有一席之地嗎?

杰睿 行業(yè)趨勢

如今,合成用戶在用戶體驗(yàn)研究中被廣泛使用已是司空見慣。畢竟,隨著人工智能的興起,合成數(shù)據(jù)生成正在成為獲取洞察的新常態(tài)。

具體來說,合成數(shù)據(jù)生成市場規(guī)模預(yù)計(jì)將以31.1% 的復(fù)合年增長率增長[1]。這意味著它不僅在增長,而且每年都在加速增長。到 2030 年,這個(gè)市場的價(jià)值可能達(dá)到驚人的 23.4 億美元。簡而言之,合成數(shù)據(jù)正變得如此龐大,企業(yè)無法忽視。

當(dāng)然,合成用戶,或 AI 生成的人物角色,只是合成數(shù)據(jù)生成的一種應(yīng)用。合成數(shù)據(jù)的范疇要廣泛得多。它涵蓋了從虛假用戶到虛假行為、交互,甚至是 AI 模型訓(xùn)練所用的虛假數(shù)據(jù)集等各種內(nèi)容。具體來說,在用戶體驗(yàn)研究中,合成用戶是為了模仿真實(shí)用戶的行為而創(chuàng)建的,這是利用合成數(shù)據(jù)進(jìn)行設(shè)計(jì)和測試的一種方式。

這是企業(yè)無法忽視的。例如,一家大型電商公司如果過度依賴與人工智能生成的人物角色的互動(dòng),很容易就會(huì)將其用戶體驗(yàn)研究預(yù)算削減 30%。

是的,他們或許會(huì)因在經(jīng)濟(jì)意義上徹底革新行業(yè)而獲得贊譽(yù)[2]。但代價(jià)是什么呢?有些人甚至走得更遠(yuǎn)——馬克·里森稱贊合成數(shù)據(jù)改變了研究領(lǐng)域的格局。他強(qiáng)調(diào),一些新的研究表明,人工智能生成的消費(fèi)者數(shù)據(jù)與真實(shí)調(diào)查的結(jié)果“相似度高達(dá)90%左右” 。[3]

即使取得了這樣的成功,公司最終仍會(huì)遭遇客戶投訴,投訴內(nèi)容包括設(shè)計(jì)不佳和需求未得到滿足。這是因?yàn)楹铣蓴?shù)據(jù)有其局限性和風(fēng)險(xiǎn)。

是的——AI驅(qū)動(dòng)的用戶是基于真實(shí)用戶數(shù)據(jù)的合成角色,它們模擬用戶與功能的交互,提供初步洞察。然而,在AI角色中表現(xiàn)良好的功能在真實(shí)用戶中仍可能失敗,因?yàn)锳I驅(qū)動(dòng)的反饋缺乏情感深度和不可預(yù)測性,因此現(xiàn)實(shí)世界的驗(yàn)證至關(guān)重要。因此,如果僅僅依賴AI生成的洞察,用戶參與度下降,并需要進(jìn)行成本高昂的重新設(shè)計(jì),也就不足為奇了。

這就引出了一個(gè)關(guān)鍵問題:人工智能生成的角色真的能在用戶體驗(yàn)研究中取代人類的直覺嗎?或者我們是否會(huì)因?yàn)檫^度依賴合成數(shù)據(jù)而危及創(chuàng)新?

本文將深入探討這些問題,探討在用戶體驗(yàn)設(shè)計(jì)和研究中使用合成用戶的機(jī)會(huì)和局限性。

此外,設(shè)計(jì)師將更清楚地了解何時(shí)以及如何在用戶體驗(yàn)研究中有效地整合合成用戶。

什么是合成用戶?

根據(jù)Neilsen/Norman Group 的說法,他們將合成用戶定義為“試圖模仿用戶群的人工智能生成的資料,提供未研究真實(shí)用戶而產(chǎn)生的人工研究結(jié)果”。

UX 研究使用模擬用戶來獲取用戶洞察,測試界面、工作流程和設(shè)計(jì)元素,而無需依賴人類參與者。正如我們所見,人工智能正在持續(xù)革新各行各業(yè),UX 研究也不例外。

目前,67% 的科技企業(yè)在其開發(fā)工作流程中使用合成數(shù)據(jù),而 2019 年這一比例僅為 23% [4]。許多此類公司越來越多地使用合成用戶來加速測試并研究全球市場的用戶行為,從而節(jié)省時(shí)間和成本。然而,這種對人工智能生成人物角色的日益依賴,引發(fā)了關(guān)于合成用戶研究的準(zhǔn)確性、倫理道德和有效性的關(guān)鍵問題(本文稍后將對此進(jìn)行探討)。

但首先,讓我們更多地了解合成用戶。

它們究竟是如何被創(chuàng)造出來的?這些虛擬用戶通常是使用人工智能模型構(gòu)建的,這些模型基于大量真實(shí)用戶交互、行為模式和決策過程的數(shù)據(jù)集進(jìn)行訓(xùn)練。基本上,這些數(shù)據(jù)來自整個(gè)互聯(lián)網(wǎng)!

傳統(tǒng)的 UX 角色基于對真實(shí)用戶群的定性和定量研究,而合成用戶則完全由數(shù)據(jù)驅(qū)動(dòng),并通過 AI 或訓(xùn)練有素的 LLM 生成。

我們深知,傳統(tǒng)用戶畫像需要基于市場調(diào)研手動(dòng)創(chuàng)建和驗(yàn)證。而合成用戶則可以根據(jù)人工智能生成的洞察動(dòng)態(tài)調(diào)整其設(shè)置。因此,企業(yè)對使用合成用戶的前景充滿興趣,因?yàn)樗灰暈橐环N可擴(kuò)展且經(jīng)濟(jì)高效的替代方案。

無論如何,合成用戶確實(shí)缺乏人類參與者在用戶體驗(yàn)研究中所能展現(xiàn)的真實(shí)人類情感的深度和不可預(yù)測的行為。但了解合成用戶的優(yōu)勢,挖掘其潛力,終將是一個(gè)明智的選擇。

合成用戶確實(shí)為用戶體驗(yàn)研究帶來了好處

模擬用戶可能會(huì)在設(shè)計(jì)領(lǐng)域引發(fā)負(fù)面情緒,但不可否認(rèn)的是,它有時(shí)在用戶體驗(yàn)研究中是一個(gè)有價(jià)值的工具。將模擬用戶納入用戶體驗(yàn)研究可以帶來以下一些好處:

優(yōu)點(diǎn)1-成本和時(shí)間效率

這是我們最需要的優(yōu)勢。根據(jù)項(xiàng)目的性質(zhì),與真實(shí)人類用戶進(jìn)行用戶體驗(yàn)研究通常既耗時(shí)又費(fèi)錢,有時(shí)甚至?xí)龅綄擂蔚膶υ?。然而,模擬用戶消除了這些障礙,讓我們能夠以更低的成本進(jìn)行快速測試。

站在一家金融科技初創(chuàng)公司的角度,他們正在開發(fā)一款新的移動(dòng)銀行應(yīng)用。與其花費(fèi)數(shù)周時(shí)間進(jìn)行用戶訪談,不如在數(shù)小時(shí)內(nèi)生成數(shù)千名模擬用戶。

在這種情況下,擁有合成用戶可以幫助他們在時(shí)間和預(yù)算限制至關(guān)重要的競爭激烈的市場中快速迭代。

優(yōu)點(diǎn)2:可擴(kuò)展性和多樣性

如果您想立即獲取廣泛的用戶群體信息,那么合成用戶數(shù)據(jù)將助您一臂之力。對于那些渴望探索各種文化和可訪問性考量因素的用戶體驗(yàn)團(tuán)隊(duì)來說,將合成用戶納入研究范圍將大有裨益。

想象一下一家全球電子商務(wù)公司,當(dāng)他們可以生成合成用戶來在不同國家測試他們的網(wǎng)站,從而深入了解語言偏好和瀏覽習(xí)慣時(shí),他們會(huì)擁有多大的優(yōu)勢。

合成用戶無需訪問現(xiàn)實(shí)世界的用戶池即可模擬不同的背景。

優(yōu)點(diǎn)3:探索邊緣情況和極端場景

我們必須面對現(xiàn)實(shí)——有些用戶體驗(yàn)挑戰(zhàn)會(huì)涉及??罕見、極端甚至危險(xiǎn)的情況,這些情況很難在真實(shí)用戶身上復(fù)制。正因如此,AI 生成的用戶數(shù)據(jù)可以幫助用戶體驗(yàn)研究人員識別標(biāo)準(zhǔn)用戶測試中可能無法發(fā)現(xiàn)的痛點(diǎn)。

假設(shè)一家網(wǎng)絡(luò)安全公司想測試用戶如何應(yīng)對網(wǎng)絡(luò)釣魚攻擊。這種情況通常比較敏感,也比較極端。不過,公司可以創(chuàng)建不同技術(shù)水平的用戶,了解他們?nèi)绾螒?yīng)對此類情況。

優(yōu)點(diǎn)#4-隱私考慮

在收集真實(shí)用戶數(shù)據(jù)時(shí),用戶體驗(yàn)團(tuán)隊(duì)可能會(huì)擔(dān)心隱私問題。然而,一旦消除了對真實(shí)用戶數(shù)據(jù)的需求,合成用戶數(shù)據(jù)可以幫助遵守隱私法規(guī),同時(shí)仍然能夠獲得寶貴的用戶洞察。

站在醫(yī)療保健公司的角度來理解這一點(diǎn),他們希望優(yōu)化患者門戶網(wǎng)站,但又不想處理敏感的醫(yī)療記錄。通過使用合成用戶,他們可以測試門戶網(wǎng)站中的不同功能,同時(shí)避免隱私問題。

簡而言之,合成用戶可以幫助繞過與真實(shí)用戶數(shù)據(jù)收集相關(guān)的監(jiān)管問題。

盡管我想分享合成用戶所提供的積極因素并讓它們聽起來像是唯一的答案,但我也想提出有關(guān)其局限性的關(guān)鍵問題。

使用合成用戶的局限性和風(fēng)險(xiǎn)

合成用戶可能有其優(yōu)點(diǎn),但他們也常常伴隨著某些缺點(diǎn),這會(huì)影響用戶體驗(yàn)研究的質(zhì)量和可靠性。

人工智能無法表現(xiàn)出真正的人類情感。

假設(shè)一家公司想要通過模擬治療對話與合成用戶測試他們的心理健康應(yīng)用程序,那么他們這樣做真的能獲得可靠的見解嗎?

在某種程度上,人工智能生成的個(gè)人資料只能提供概括性的意見。但它們往往缺乏更深層次的含義,無法真正幫助設(shè)計(jì)師對真實(shí)用戶產(chǎn)生影響。

合成對話無法捕捉人類所擁有的情感深度和不可預(yù)測性。由于無法展現(xiàn)人類的全部情感,合成用戶的發(fā)現(xiàn)往往具有誤導(dǎo)性。

AI 生成的角色可能缺乏洞察力的一個(gè)關(guān)鍵領(lǐng)域并非態(tài)度研究,而是行為研究。AI 根本無法體驗(yàn)真實(shí)的情緒,例如喜悅、沮喪、疲憊等等。然而,我們知道,通過觀察真實(shí)用戶的行為,我們可以找出這些線索,并針對他們的痛點(diǎn)制定解決方案。

更有趣的是,合成用戶甚至難以復(fù)制研究人員在人類行為中自然觀察到的某些非理性決策或自發(fā)行為。因此,合成用戶只能提供表面層面的洞察。

人工智能有點(diǎn)偏見!

還記得我之前在文章中說過,人工智能模型依賴于現(xiàn)有數(shù)據(jù)集(也就是互聯(lián)網(wǎng))嗎?這意味著它們會(huì)引入某些偏見,強(qiáng)化刻板印象,而不是挑戰(zhàn)它們。

例如,人工智能模型從其訓(xùn)練數(shù)據(jù)中繼承了性別偏見和普遍刻板印象等偏見,這可能會(huì)導(dǎo)致錯(cuò)誤的假設(shè)和發(fā)現(xiàn)。

這基本上意味著,一個(gè)主要根據(jù)西方互聯(lián)網(wǎng)習(xí)慣訓(xùn)練的人工智能模型,肯定難以模擬不同新興市場的精準(zhǔn)用戶體驗(yàn)行為。因此,真實(shí)用戶在處理文化和其他具有深層含義的問題時(shí),往往更有洞察力。

人工智能無需上下文即可輕松做出反應(yīng)

假設(shè)一家專注于智能家居自動(dòng)化的公司想要了解燈光調(diào)節(jié)和用戶偏好。如果他們使用模擬用戶而非真實(shí)用戶,就很容易忽略與家居舒適度相關(guān)的文化和心理差異。

這從應(yīng)用的角度描述了這個(gè)問題。眾所周知,人工智能生成的反饋無法刻畫情感和不可預(yù)測性因素,這也意味著它缺乏現(xiàn)實(shí)世界的經(jīng)驗(yàn)。

AI 模型缺乏對現(xiàn)實(shí)世界的直覺,這常常導(dǎo)致用戶體驗(yàn)洞察不完整。如果實(shí)體過度依賴 AI 生成的反饋,這可能會(huì)很危險(xiǎn)。

另外,你可能已經(jīng)注意到了這一點(diǎn),但合成用戶或人工智能通常只想“取悅”研究人員——這種現(xiàn)象被稱為諂媚——這并不能很好地代表人類的行為。好好想想吧!

依靠人工智能進(jìn)行用戶體驗(yàn)實(shí)踐真的合乎道德嗎?

使用合成人物角色并將結(jié)果標(biāo)記為用戶測試,或?qū)⒒谶@些數(shù)據(jù)集的用戶體驗(yàn)發(fā)現(xiàn)作為研究呈現(xiàn),可能會(huì)引發(fā)倫理擔(dān)憂。這些做法可能會(huì)誤導(dǎo)利益相關(guān)者,使其對洞察的真實(shí)性和可靠性產(chǎn)生誤解。最重要的是,應(yīng)該披露這些洞察的使用情況,尤其是在做出廣泛的用戶體驗(yàn)決策時(shí),以確保透明度并避免誤導(dǎo)性陳述。

Delve AI 就是一個(gè)很好的例子。他們公開討論了合成人物角色在其研究中的創(chuàng)建和應(yīng)用,闡明了他們的方法論以及 AI 生成的數(shù)據(jù)在其過程中的作用。[5]

這表明,通過采用這種透明的做法,組織可以在堅(jiān)持道德標(biāo)準(zhǔn)的同時(shí),解決將合成數(shù)據(jù)集成到用戶體驗(yàn)研究中的復(fù)雜性。

合成用戶與真實(shí)用戶:如果這兩者正面交鋒,誰會(huì)勝出?

所以事情是這樣的:我不會(huì)爭論合成用戶是否比使用真實(shí)用戶更好或更差,而是扮演魔鬼代言人并為兩者辯護(hù)。

根據(jù)我的研究和測試,我發(fā)現(xiàn)有趣的是,兩者都在用戶體驗(yàn)設(shè)計(jì)中占有一席之地,以下是一些您會(huì)感興趣的用例和場景:

場景:

  1. 早期構(gòu)思和假設(shè)檢驗(yàn)
    合成用戶:
     ?高成本效益和可擴(kuò)展性
    真實(shí)用戶: ?耗時(shí)且成本高昂
  2. 針對常見 UX 模式的可用性測試
    合成用戶:
     ?提供更快的反饋循環(huán)
    真實(shí)用戶: ?需要真實(shí)用戶進(jìn)行驗(yàn)證
  3. 測試極端或罕見的用例
    合成用戶:
     ?AI 可以模擬異常值
    真實(shí)用戶: ?很難找到不同的參與者
  4. 情緒反應(yīng)和滿意度研究
    合成用戶:
     ?AI 缺乏人類情感
    真實(shí)用戶: ?真實(shí)用戶提供真實(shí)的反應(yīng)
  5. 可訪問性測試
    合成用戶:
     ?可以模擬殘疾
    真實(shí)用戶: ?真實(shí)用戶提供更深入的見解
  6. 文化背景和社會(huì)規(guī)范
    合成用戶:
     ?AI 難以理解細(xì)微差別
    真實(shí)用戶: ?真實(shí)用戶提供真實(shí)的觀點(diǎn)
  7. 為現(xiàn)有產(chǎn)品制作新功能
    原型 合成用戶:
     ?快速迭代周期
    真實(shí)用戶: ?提供對功能采用障礙的洞察
  8. 測試設(shè)計(jì)決策的倫理含義
    合成用戶:
     ?AI 可能缺乏道德推理
    真實(shí)用戶: ?真實(shí)用戶提供現(xiàn)實(shí)世界的倫理問題視角

結(jié)合綜合用戶研究和真實(shí)用戶研究值得嗎?

從上表可以看出,沒有明顯的贏家。事實(shí)上,兩者各有利弊,這使得討論變得有趣。

在用戶體驗(yàn)設(shè)計(jì)和研究中,有一個(gè)地方可以讓合成用戶和真實(shí)用戶共同努力,實(shí)現(xiàn)更優(yōu)化的解決方案。

我建議使用合成用戶主要是為了早期構(gòu)思和假設(shè)檢驗(yàn),因?yàn)檫@既經(jīng)濟(jì)又不費(fèi)時(shí)。

為了驗(yàn)證,在任何重大產(chǎn)品發(fā)布之前,都要使用真實(shí)用戶進(jìn)行驗(yàn)證。最后,為了獲得真實(shí)世界的洞察,真實(shí)用戶是關(guān)鍵,但這并不妨礙您使用改進(jìn)的 AI 生成模型來提供更好的真實(shí)世界洞察。事實(shí)上,關(guān)鍵在于始終掌握最新的 AI 模型。

在用戶體驗(yàn)中集成合成用戶的最佳實(shí)踐

在結(jié)束本文之前,我將介紹一些將合成用戶融入用戶體驗(yàn)工作流程的實(shí)踐。我將提供一些可操作的步驟,供您日后用作未來項(xiàng)目的核對清單。

1. 使用合成用戶作為補(bǔ)充,而不是替代

需要明確的是——在研究和測試中,合成用戶絕不會(huì)取代真實(shí)用戶。相反,這些角色應(yīng)該增強(qiáng)你的真實(shí)用戶研究。務(wù)必將人工智能生成的洞察與真實(shí)世界的測試相結(jié)合,才能取得顯著的效果。

絕不能將 AI 生成的洞察僅應(yīng)用于整個(gè) UX 流程。但你不應(yīng)忽視,它對 UX 工作流程中的特定任務(wù)也有其優(yōu)勢。例如,使用合成人物角色進(jìn)行早期原型的 A/B 測試,可以幫助提供寶貴的洞察,并幫助做出高效的決策。

2. 通過真實(shí)用戶測試驗(yàn)證人工智能的發(fā)現(xiàn)。

我之前提到過這一點(diǎn),但請記住,您做出的任何“重大”用戶體驗(yàn)決策都應(yīng)在實(shí)施前通過人工測試進(jìn)行驗(yàn)證。

永遠(yuǎn)不要完全相信人工智能生成的洞察,因?yàn)檫@可能會(huì)在未來給你帶來麻煩。務(wù)必使用真實(shí)的用戶反饋進(jìn)行交叉驗(yàn)證。

3. 利用真實(shí)數(shù)據(jù)改進(jìn)人工智能模型

請記住,人工智能可能存在某些偏見,這可能會(huì)影響我們研究和測試的質(zhì)量。因此,請持續(xù)關(guān)注基于實(shí)際用戶行為數(shù)據(jù)的改進(jìn)型人工智能模型,這有助于提高準(zhǔn)確性。

不要依賴 ChatGPT 等通用工具,而是探索專門用于生成用于 UX 研究和測試的合成角色的工具,例如Synthetic Users、UXtweakTonic.aiMOSTLY AI。

4. 始終保持道德透明度

這通常很容易被忽略,但務(wù)必保持透明,說明在研究中何時(shí)以及如何使用合成用戶。我建議在必要時(shí)披露此類信息。這有助于你在實(shí)施重大用戶體驗(yàn)決策之前,堅(jiān)守道德立場并解決問題。

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

您的團(tuán)隊(duì)準(zhǔn)備好進(jìn)行人工智能增強(qiáng)設(shè)計(jì)了嗎?

杰睿 行業(yè)趨勢

簡要想法

  • 本文探討了人工智能設(shè)計(jì)工具如何在不破壞既定團(tuán)隊(duì)流程的情況下加速線框圖和原型設(shè)計(jì)等早期工作流程。
  • 它強(qiáng)調(diào)了將人工智能巧妙地融入?yún)f(xié)作環(huán)境的重要性,并以 Lovable 和 Figma Make 等工具作為案例研究。
  • 文章認(rèn)為,團(tuán)隊(duì)?wèi)?yīng)該從小處著手,培養(yǎng)提示技能,并將人工智能視為動(dòng)力助推器,而不是完全的設(shè)計(jì)替代品。

AI 不再只是設(shè)計(jì)中的未來附加組件,它正成為現(xiàn)代團(tuán)隊(duì)工作方式的重要組成部分。本文探討了如何將 AI 引入結(jié)構(gòu)化設(shè)計(jì)環(huán)境,在這種環(huán)境中,協(xié)作、系統(tǒng)和代碼質(zhì)量至關(guān)重要。從快速跟蹤線框圖和原型,到引導(dǎo)用戶選擇 Lovable 和 Figma Make 等工具,本文清晰地展現(xiàn)了 AI 在當(dāng)今真正增值的地方,以及如何為未來構(gòu)建流暢性。

AI 設(shè)計(jì)已不再新鮮——它正迅速成為現(xiàn)代設(shè)計(jì)師工作方式的關(guān)鍵組成部分。在本文中,我將探討當(dāng)今的工具如何提供真正的價(jià)值,它們?nèi)绾稳谌氍F(xiàn)有的工作流程,以及如何開始構(gòu)建 AI 增強(qiáng)型實(shí)踐。

重點(diǎn)不僅僅在于單獨(dú)的工作流程或華麗的演示——而在于如何將人工智能巧妙地引入結(jié)構(gòu)化環(huán)境,特別是在更廣泛的組織中已經(jīng)存在協(xié)作、設(shè)計(jì)系統(tǒng)和開發(fā)流程的地方。

快速通道:人工智能已實(shí)現(xiàn)的功能

言歸正傳:目前最明顯的優(yōu)勢在于原型設(shè)計(jì)和布局生成。得益于全新的 AI 工具,設(shè)計(jì)成果不再需要從零開始構(gòu)建。您可以在幾分鐘內(nèi)生成可用的布局,從而加速“暢想”階段,并使團(tuán)隊(duì)能夠快速探索、溝通和完善創(chuàng)意。

雖然手繪草圖和灰度線框圖仍然有其用武之地,尤其是在頭腦風(fēng)暴或高度定制的概念設(shè)計(jì)中,但如今的人工智能工具能夠提供可點(diǎn)擊、可測試的輸出,讓它們感覺就像數(shù)字產(chǎn)品的真實(shí)原型一樣。我經(jīng)常用我的草圖來引導(dǎo)新的人工智能線程來實(shí)現(xiàn)目標(biāo)。這些輸出高度可定制,并支持快速迭代,使其成為早期探索、反饋和團(tuán)隊(duì)協(xié)調(diào)的寶貴工具。

話雖如此,對于需要托管平臺的企業(yè)來說,當(dāng)今 AI 工具的輸出本身還無法直接投入生產(chǎn)。它們?yōu)檫M(jìn)一步的改進(jìn)和開發(fā)提供了堅(jiān)實(shí)的基礎(chǔ),但仍需要具備可訪問性并與業(yè)務(wù)系統(tǒng)保持一致。我將在本文中逐一闡述這些問題,并提出如何從當(dāng)今的 AI 設(shè)計(jì)技術(shù)中獲取價(jià)值,以及在不久的將來可以期待什么。

了解人工智能設(shè)計(jì)格局

隨著越來越多的 AI 設(shè)計(jì)工具進(jìn)入市場,評估它們的差異至關(guān)重要,這不僅體現(xiàn)在輸出結(jié)果上,還體現(xiàn)在它們?nèi)绾闻c實(shí)際工作流程集成。下面的比較重點(diǎn)介紹了這些工具在不同團(tuán)隊(duì)(從個(gè)人設(shè)計(jì)師到規(guī)模化產(chǎn)品組織)中的可用性關(guān)鍵特性。

人工智能輔助設(shè)計(jì)工具:從早期測試到發(fā)現(xiàn)商業(yè)價(jià)值

今年早些時(shí)候,我和我的團(tuán)隊(duì)測試了幾款新興的AI設(shè)計(jì)工具——UX Pilot、Vercel v0Lovable——以了解它們在結(jié)構(gòu)化設(shè)計(jì)環(huán)境中的實(shí)際價(jià)值。我們發(fā)現(xiàn)它們出奇地容易上手,界面直觀,設(shè)計(jì)師可以在幾小時(shí)內(nèi)上手。然而,我們的測試揭示了兩種截然不同的方法,以及一個(gè)關(guān)鍵的行業(yè)差距。

  • UX Pilot專注于通過 Figma 集成進(jìn)行基于提示的 UI 生成,輸出設(shè)計(jì)人員可以在熟悉的工作流程中進(jìn)行迭代的 HTML/CSS。
  • Vercel v0采用代碼優(yōu)先的方法,可以直接生成 React/Tailwind,但以設(shè)計(jì)為中心的團(tuán)隊(duì)需要在 Figma 中手動(dòng)重新創(chuàng)建。Lovable 則提供了一個(gè)強(qiáng)大的中間地帶,可以將提示轉(zhuǎn)換為完整的 React 應(yīng)用程序,同時(shí)保留了導(dǎo)出功能以便進(jìn)行設(shè)計(jì)交接。
  • v0 和 Lovable 都展現(xiàn)了快速原型設(shè)計(jì)的價(jià)值,但我們的測試也印證了對比圖表的結(jié)論:與現(xiàn)有設(shè)計(jì)工作流程的集成仍然是關(guān)鍵挑戰(zhàn)。這些工具擅長生成起點(diǎn),但需要大量的手動(dòng)工作才能與我們的生產(chǎn)系統(tǒng)保持一致,因此我們主要測試了概念驗(yàn)證,并將其擱置一旁。

59% 的開發(fā)者使用 AI 完成代碼生成等核心開發(fā)任務(wù),而只有 31% 的設(shè)計(jì)師在素材生成等核心設(shè)計(jì)工作中使用 AI。AI 的代碼生成能力也很可能正在發(fā)揮作用——68% 的開發(fā)者表示他們使用提示來生成代碼,82% 的開發(fā)者表示他們對最終結(jié)果感到滿意。簡而言之,開發(fā)者越來越普遍地發(fā)現(xiàn) AI 在日常工作中發(fā)揮著重要作用,而設(shè)計(jì)師仍在努力確定這些工具如何以及是否最適合他們的流程。

— Figma(4 月)2025 年 AI 報(bào)告:來自設(shè)計(jì)師和開發(fā)人員的觀點(diǎn)。

然后 Figma 改變了一切。

2025 年 5 月,F(xiàn)igma 推出了Make,這項(xiàng)原生 AI 功能可以繞過我們之前發(fā)現(xiàn)的集成障礙。與我們之前測試的第三方工具不同,F(xiàn)igma 的方法直接利用現(xiàn)有模式和團(tuán)隊(duì)工作流程。Make 可以在您現(xiàn)有的 Figma 環(huán)境中將提示轉(zhuǎn)換為功能原型。

這一轉(zhuǎn)變驗(yàn)證了我們的測試結(jié)果:最成功的人工智能應(yīng)用不是來自最復(fù)雜的獨(dú)立工具,而是來自在現(xiàn)有設(shè)計(jì)操作中發(fā)揮作用的解決方案。

對于設(shè)計(jì)師來說,自然而然的選擇似乎是留在 Figma 中,由 Anthropic 提供支持。我之所以喜歡 Anthropic,是因?yàn)樗纳虡I(yè)敏銳度使其成為一種創(chuàng)意資源——它能夠在關(guān)鍵之處創(chuàng)造價(jià)值:早期創(chuàng)意的生成,快速地在布局中表達(dá),用于概念驗(yàn)證/問題解決。

在我的工作流程中,我發(fā)現(xiàn)它可以成為一種非常順暢的加速器——只需在平臺上操作,易于學(xué)習(xí)。雖然這項(xiàng)技術(shù)還很新,我還沒有完善我的提示技巧,但早期測試對我來說非常有希望。我估計(jì)設(shè)計(jì)師們會(huì)持續(xù)采用它,而 Figma 可能是扭轉(zhuǎn)設(shè)計(jì)師不再使用 AI 工具這一趨勢的關(guān)鍵。

對于評估這些工具的企業(yè)團(tuán)隊(duì)來說,區(qū)分獨(dú)立功能和運(yùn)營集成至關(guān)重要。雖然 UX Pilot 和 v0 等早期工具對于特定用例仍然很有價(jià)值,但圍繞設(shè)計(jì)系統(tǒng)進(jìn)行的平臺整合表明,架構(gòu)成熟度(而非工具復(fù)雜度)將決定 AI 應(yīng)用的成功。

當(dāng)前的限制:仍然存在摩擦

盡管 AI 設(shè)計(jì)工具優(yōu)勢顯著,但它們?nèi)匀恍枰罅康娜斯ね度氩拍芘c實(shí)際產(chǎn)品工作流程保持一致。對于在結(jié)構(gòu)化設(shè)計(jì)系統(tǒng)、標(biāo)記化庫或受管控的組件集內(nèi)運(yùn)作的團(tuán)隊(duì)而言,AI 輸出可能需要重建或重構(gòu),才能在生產(chǎn)環(huán)境中進(jìn)行擴(kuò)展。

常見問題可能包括:

  • 與您的設(shè)計(jì)系統(tǒng)不一致的視覺風(fēng)格。
  • 過多的內(nèi)聯(lián)樣式和不必要的嵌套。
  • 需要更換的通用占位符組件。
  • 生成相關(guān)屏幕或流程時(shí)不一致。
  • 無障礙設(shè)施實(shí)施不足。
  • 將輸出與現(xiàn)有代碼庫集成的挑戰(zhàn)。

雖然 Figma 的 AI 功能等平臺原生工具通過在現(xiàn)有設(shè)計(jì)系統(tǒng)內(nèi)工作減少了一些集成摩擦,但細(xì)化、可訪問性和生產(chǎn)準(zhǔn)備的基本挑戰(zhàn)仍然存在。

此外,要獲得最佳結(jié)果,需要開發(fā)有效的提示技能,并使其可重復(fù)使用——本質(zhì)上是學(xué)習(xí)每個(gè)人工智能工具響應(yīng)最佳的“語言”。

底線:人工智能可以完成初步布局,但精細(xì)化、合理的結(jié)構(gòu)和緊密的集成仍然需要人類的專業(yè)知識。即使集成路徑有所改進(jìn),設(shè)計(jì)判斷和系統(tǒng)性思維仍然不可替代。

重新思考人工智能在設(shè)計(jì)生命周期中的作用

與其指望 AI 工具能夠提供完美、可立即投入生產(chǎn)的成果(尤其是在企業(yè)級領(lǐng)域),不如將其視為動(dòng)力的加速器——能夠開啟思考、布局和協(xié)作的早期階段。無論是通過第三方集成還是平臺原生功能,其核心價(jià)值始終如一。

當(dāng)前的局限性并不會(huì)使人工智能失效——除非我們重新定義它目前最有價(jià)值的地方。如果在現(xiàn)有的設(shè)計(jì)實(shí)踐中運(yùn)用得當(dāng),它的價(jià)值將會(huì)成倍增長。

從小處著手,低風(fēng)險(xiǎn)

在結(jié)構(gòu)化系統(tǒng)和沖刺周期內(nèi)工作的設(shè)計(jì)團(tuán)隊(duì)可以在不中斷核心流程的情況下開始集成 AI。一個(gè)切實(shí)可行的切入點(diǎn)是先在早期交付成果(例如線框圖、布局基礎(chǔ)或初始原型)上進(jìn)行低風(fēng)險(xiǎn)試點(diǎn)。

通過這種方式,AI 并非取代設(shè)計(jì)師,而是增強(qiáng)了他們的能力。通過加速基礎(chǔ)結(jié)構(gòu)的創(chuàng)建,AI 可以騰出時(shí)間進(jìn)行更高層次的思考。更少的設(shè)計(jì)周期意味著更少的流失,從而帶來更完善的測試和更具彈性的產(chǎn)品。關(guān)鍵在于結(jié)合傳統(tǒng)工作流程來評估結(jié)果,并利用這些洞察來指導(dǎo)更智能、更廣泛的應(yīng)用。

補(bǔ)充:提示如何發(fā)揮作用(以及為什么它是一項(xiàng)技能)

提示 AI 布局工具并不意味著要寫出一句完美的句子——而是一個(gè)迭代的設(shè)計(jì)對話。你可以從廣泛的內(nèi)容入手,然后通過一系列提示逐步完善布局,就像指導(dǎo)初級設(shè)計(jì)師一樣。

你可能會(huì)說:

→“創(chuàng)建一個(gè)包含英雄頁面和產(chǎn)品卡片的營銷主頁。”
→“使英雄頁面全寬。”
→“添加推薦部分。”
→“嘗試側(cè)邊欄布局。”

人工智能在創(chuàng)意自由輕松有序的指導(dǎo)下表現(xiàn)最佳。過多的詳細(xì)、一體化的指令會(huì)干擾結(jié)果。相反,應(yīng)該將請求分解成更小、可操作的步驟,直到達(dá)到預(yù)期結(jié)果。

現(xiàn)在許多工具都支持多模式輸入,擴(kuò)展了您可以輸入到 AI 中的內(nèi)容:

  • URL:“使其類似于 example.com”。
  • Figma:參考您已建立的設(shè)計(jì)。
  • 上傳參考圖像:使用草圖或線框。
  • 圖像資產(chǎn):提供您可能想要包含的 PNG 或 SVG。
  • 結(jié)構(gòu)化文本:為其提供降價(jià)、產(chǎn)品描述或 UI 副本。

平臺優(yōu)勢:像 Figma Make 這樣的平臺原生工具操作方式有所不同——它們可以直接從 Figma 文件中讀取你現(xiàn)有的視覺樣式和模式。這意味著提示功能更多地是在你既定的視覺環(huán)境中完善設(shè)計(jì)決策,而不是從零開始。

無論您使用的是獨(dú)立工具還是平臺原生功能,提示仍然是一項(xiàng)核心設(shè)計(jì)能力。與任何技能一樣,它隨著實(shí)踐而提升——并且它已經(jīng)塑造了我們與這些新工具的協(xié)作方式。將提示融入到團(tuán)隊(duì)的工作流程中,將有助于他們提升技能,迎接下一波 AI 輔助設(shè)計(jì)技術(shù)浪潮。

清單:如何評估用于設(shè)計(jì)的人工智能工具

如果您正在嘗試使用 AI 工具,以下實(shí)用標(biāo)準(zhǔn)可以幫助您構(gòu)建評估:

  • 從提示到布局的速度有多快?
  • 它與您的設(shè)計(jì)系統(tǒng)(標(biāo)記、間距、組件)的映射程度如何?
  • 生成的代碼是否可供工程使用?
  • 它是否遵循可訪問性最佳實(shí)踐?
  • 提示能否通過迭代改進(jìn)獲得一致的結(jié)果?
  • 它是否接受有用的外部上下文(URL、Figma、markdown)?
  • 它可以在真正的沖刺或故事中進(jìn)行測試而不需要很大的開銷嗎?

未來 6-24 個(gè)月我們可能會(huì)看到什么

2025 年,形勢的變化速度遠(yuǎn)超我們許多人的預(yù)期,一些預(yù)測已經(jīng)成為現(xiàn)實(shí)。與其試圖預(yù)測確切的時(shí)間線,不如看看實(shí)際正在發(fā)生的事情,以及這些事情對當(dāng)今決策團(tuán)隊(duì)可能意味著什么。

多種集成方法正在涌現(xiàn)

我們看到人工智能工具與設(shè)計(jì)工作流程連接的方式多種多樣,每種方式都有其優(yōu)缺點(diǎn):

Figma 的 Make 原生支持其平臺生態(tài)系統(tǒng)。像 Figma 的 MCP 服務(wù)器這樣的基于協(xié)議的連接則提供了一種不同的方法——你的編碼工具可以通過標(biāo)準(zhǔn)化接口與你的設(shè)計(jì)文件進(jìn)行交互。

團(tuán)隊(duì)最終可能會(huì)混合使用多種方法,而不是只選擇一種方法。問題在于哪種方法更適合您的特定限制和工作流程需求。

這對規(guī)劃意味著什么

如果您正在評估 AI 設(shè)計(jì)工具,那么技術(shù)能力可能不如它們與您現(xiàn)有運(yùn)營的契合度更重要。我的感覺是,擁有組織良好的設(shè)計(jì)基礎(chǔ)的團(tuán)隊(duì)可能具有優(yōu)勢,但最實(shí)用的方法仍然是從小處著手,并建立組織流暢性,正如我在本文前面所建議的那樣。

總體情況

  • 原生平臺 AI(如 Figma Make)和基于協(xié)議的集成(如 MCP)代表不同的方法。
  • 對于工作流集成,每種方法都有不同的權(quán)衡。
  • 無論出現(xiàn)什么工具,從小處著手仍然切實(shí)可行。

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

傳統(tǒng)用戶體驗(yàn)的消亡:我們不再為屏幕而設(shè)計(jì),而是為意圖而設(shè)計(jì)

杰睿 行業(yè)趨勢

這不僅僅是又一篇“人工智能正在改變一切”的文章。它探討的是當(dāng)設(shè)計(jì)本身演變時(shí)會(huì)發(fā)生什么——當(dāng)用戶體驗(yàn)從塑造視覺效果轉(zhuǎn)變?yōu)樗茉煲饬x時(shí)。

告別迷思:像素完美時(shí)代已經(jīng)結(jié)束

多年來,我們將優(yōu)秀的用戶體驗(yàn)定義為對復(fù)雜性的控制。我們構(gòu)建了流暢、分層的工作流程,相信簡潔源于結(jié)構(gòu)。但 OpenAI 的新設(shè)計(jì)語言卻悄然扼殺了這一理念。

以下是已經(jīng)消失的內(nèi)容及其重要性:

長表單和靜態(tài)頁面已經(jīng)過時(shí)

ChatGPT 應(yīng)用現(xiàn)在可以通過模型上下文協(xié)議 (MCP)執(zhí)行現(xiàn)實(shí)世界的操作——將過去無休止的網(wǎng)絡(luò)流程自動(dòng)化。只需說一句“我想設(shè)置家庭互聯(lián)網(wǎng)”,就能取代十屏的表單。界面消失了,但意圖依然存在。

對話式用戶體驗(yàn)中不應(yīng)存在復(fù)雜的導(dǎo)航

用戶不會(huì)瀏覽食品雜貨貨架;他們只會(huì)說:“把晚餐需要的所有東西都買來。” 應(yīng)用程序的職責(zé)是提供清晰、可靠的摘要,而不是目錄。但這帶來了一個(gè)令人著迷的挑戰(zhàn):如果用戶只看到他們想要的東西,他們?nèi)绾伟l(fā)現(xiàn)自己并不知道想要的東西?這就是新的用戶體驗(yàn)前沿的起點(diǎn)。

廣告在信任開始之時(shí)消亡

對話式界面不會(huì)給侵入式橫幅廣告或強(qiáng)行推銷留下任何空間。用戶體驗(yàn)團(tuán)隊(duì)和市場營銷團(tuán)隊(duì)之間爭奪廣告空間每個(gè)像素的舊有斗爭終于結(jié)束了。如今,設(shè)計(jì)的貨幣是信任,而不是注意力。

我們不再只是精心設(shè)計(jì)旅程,而是設(shè)計(jì)意圖的轉(zhuǎn)化器——傾聽、理解并行動(dòng)的體驗(yàn)。

新的畫布:語境成為界面

如果屏幕消失了,設(shè)計(jì)師還能創(chuàng)造什么呢?

答案是:上下文。

在這個(gè)新領(lǐng)域中,用戶體驗(yàn)設(shè)計(jì)不再關(guān)注事物的外觀,而是關(guān)注系統(tǒng)如何思考。

從像素到協(xié)議:每個(gè)工具都是一個(gè)小“合同”,定義模型可以做什么以及如何響應(yīng)。

一個(gè)目的,一個(gè)工具:簡單不再是一種風(fēng)格,而是一種結(jié)構(gòu)規(guī)則。

元數(shù)據(jù)作為含義:我們描述動(dòng)作的方式告訴模型何時(shí)以及如何使用它。清晰度成為設(shè)計(jì)的核心。

我們不再設(shè)計(jì)屏幕。我們正在設(shè)計(jì)人類意圖和機(jī)器行為之間的推理層。

當(dāng)控制力消失時(shí):在系統(tǒng)規(guī)則內(nèi)進(jìn)行設(shè)計(jì)

這或許是最難以接受的事實(shí)。我們曾經(jīng)擁有的自由——色彩、字體、富有表現(xiàn)力的布局——都消失了。

• 字體和顏色均由系統(tǒng)定義:無自定義樣式、無漸變、無視覺干擾。所有應(yīng)用均保持清晰一致。

• 所有體驗(yàn)現(xiàn)在都變成了“內(nèi)聯(lián)卡片”:小巧、專注,嵌入聊天流程。用戶體驗(yàn)不再只是視覺敘事,而是認(rèn)知效率。

• 即使全屏視圖也能順應(yīng)對話:用戶可以打開地圖、編輯數(shù)據(jù)或設(shè)計(jì)某些內(nèi)容,同時(shí)仍可繼續(xù)對話。對話永遠(yuǎn)不會(huì)消失。

是的,它確實(shí)有限制性。但它也是一種解放。因?yàn)楫?dāng)設(shè)計(jì)擺脫了裝飾,剩下的就是意圖。

新角色:信任與意圖的構(gòu)建者

這并不是設(shè)計(jì)的消亡,而是設(shè)計(jì)真正變得智能的時(shí)刻。

我們現(xiàn)在的工作是讓體驗(yàn)變得誠實(shí)清晰,并且與人類的目的相一致。

新一代用戶體驗(yàn)專業(yè)人士必須:

• 以信任、透明道德約束進(jìn)行設(shè)計(jì)。

• 通過精確的元數(shù)據(jù)和上下文線索指導(dǎo)模型。

• 保持連續(xù)性, 確保用戶在對話過程中不會(huì)丟失上下文。

我們不再是屏幕的建筑師,而是意義的建筑師

設(shè)計(jì)已經(jīng)不再停留在表面,而是存在于人類意圖與機(jī)器推理之間。

如果我們做得對——這將是我們創(chuàng)造的最人性化的設(shè)計(jì)形式。

 

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.jzvac.com 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

日歷

鏈接

個(gè)人資料

存檔