日本一区二区三区在线播放-国产视频一-美女黄网站成人免费视频-奇米中文字幕-日本少妇xxxxx-九九精品99-国产人碰人摸人爱视频-欧美亚洲网站-国产艳妇av在线-在线av网站-久久a久久-可以免费看黄色的网站-国产视频一二-在线播放视频高清在线观看-男人的天堂av网站-久久一二三区-欧美日韩综合一区二区

首頁

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

濤濤 行業(yè)趨勢(shì)

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

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

杰睿 行業(yè)趨勢(shì)

 

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

1. 人格化視覺符號(hào)貫穿

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

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

文案摒棄生硬的功能說明,轉(zhuǎn)而用口語化、情感化的表達(dá)貼近用戶需求。比如加密錢包界面的 “Interacting with crypto has never been so simple”(與加密貨幣交互從未如此簡(jiǎn)單),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)制營(yíng)銷帶來的反感,體現(xiàn)了對(duì)用戶自主決策的尊重,提升了用戶的情感舒適度。
 
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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è)趨勢(shì)

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

具體來說,合成數(shù)據(jù)生成市場(chǎng)規(guī)模預(yù)計(jì)將以31.1% 的復(fù)合年增長(zhǎng)率增長(zhǎng)[1]。這意味著它不僅在增長(zhǎng),而且每年都在加速增長(zhǎng)。到 2030 年,這個(gè)市場(chǎng)的價(jià)值可能達(dá)到驚人的 23.4 億美元。簡(jiǎn)而言之,合成數(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ì)和測(cè)試的一種方式。

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

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

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

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

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

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

無論如何,合成用戶確實(shí)缺乏人類參與者在用戶體驗(yàn)研究中所能展現(xiàn)的真實(shí)人類情感的深度和不可預(yù)測(cè)的行為。但了解合成用戶的優(yōu)勢(shì),挖掘其潛力,終將是一個(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)勢(shì)。根據(jù)項(xiàng)目的性質(zhì),與真實(shí)人類用戶進(jìn)行用戶體驗(yàn)研究通常既耗時(shí)又費(fèi)錢,有時(shí)甚至?xí)龅綄擂蔚膶?duì)話。然而,模擬用戶消除了這些障礙,讓我們能夠以更低的成本進(jìn)行快速測(cè)試。

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

在這種情況下,擁有合成用戶可以幫助他們?cè)跁r(shí)間和預(yù)算限制至關(guān)重要的競(jìng)爭(zhēng)激烈的市場(chǎng)中快速迭代。

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

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

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

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

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

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

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

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

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

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

簡(jiǎn)而言之,合成用戶可以幫助繞過與真實(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è)一家公司想要通過模擬治療對(duì)話與合成用戶測(cè)試他們的心理健康應(yīng)用程序,那么他們這樣做真的能獲得可靠的見解嗎?

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

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

AI 生成的角色可能缺乏洞察力的一個(gè)關(guān)鍵領(lǐng)域并非態(tài)度研究,而是行為研究。AI 根本無法體驗(yàn)真實(shí)的情緒,例如喜悅、沮喪、疲憊等等。然而,我們知道,通過觀察真實(shí)用戶的行為,我們可以找出這些線索,并針對(duì)他們的痛點(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)練的人工智能模型,肯定難以模擬不同新興市場(chǎng)的精準(zhǔn)用戶體驗(yàn)行為。因此,真實(shí)用戶在處理文化和其他具有深層含義的問題時(shí),往往更有洞察力。

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

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

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

AI 模型缺乏對(duì)現(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)記為用戶測(cè)試,或?qū)⒒谶@些數(shù)據(jù)集的用戶體驗(yàn)發(fā)現(xiàn)作為研究呈現(xiàn),可能會(huì)引發(fā)倫理擔(dān)憂。這些做法可能會(huì)誤導(dǎo)利益相關(guān)者,使其對(duì)洞察的真實(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ì)爭(zhēng)論合成用戶是否比使用真實(shí)用戶更好或更差,而是扮演魔鬼代言人并為兩者辯護(hù)。

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

場(chǎng)景:

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

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

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

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

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

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

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

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

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

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

4. 始終保持道德透明度

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

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ì)

簡(jiǎn)要想法

  • 本文探討了人工智能設(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ì)在于原型設(shè)計(jì)和布局生成。得益于全新的 AI 工具,設(shè)計(jì)成果不再需要從零開始構(gòu)建。您可以在幾分鐘內(nèi)生成可用的布局,從而加速“暢想”階段,并使團(tuán)隊(duì)能夠快速探索、溝通和完善創(chuàng)意。

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

話雖如此,對(duì)于需要托管平臺(tái)的企業(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)入市場(chǎng),評(píng)估它們的差異至關(guān)重要,這不僅體現(xiàn)在輸出結(jié)果上,還體現(xiàn)在它們?nèi)绾闻c實(shí)際工作流程集成。下面的比較重點(diǎn)介紹了這些工具在不同團(tuán)隊(duì)(從個(gè)人設(shè)計(jì)師到規(guī)?;a(chǎn)品組織)中的可用性關(guān)鍵特性。

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

今年早些時(shí)候,我和我的團(tuán)隊(duì)測(cè)試了幾款新興的AI設(shè)計(jì)工具——UX PilotVercel v0Lovable——以了解它們?cè)诮Y(jié)構(gòu)化設(shè)計(jì)環(huán)境中的實(shí)際價(jià)值。我們發(fā)現(xiàn)它們出奇地容易上手,界面直觀,設(shè)計(jì)師可以在幾小時(shí)內(nèi)上手。然而,我們的測(cè)試揭示了兩種截然不同的方法,以及一個(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à)值,但我們的測(cè)試也印證了對(duì)比圖表的結(jié)論:與現(xiàn)有設(shè)計(jì)工作流程的集成仍然是關(guān)鍵挑戰(zhàn)。這些工具擅長(zhǎng)生成起點(diǎn),但需要大量的手動(dòng)工作才能與我們的生產(chǎn)系統(tǒng)保持一致,因此我們主要測(cè)試了概念驗(yàn)證,并將其擱置一旁。

59% 的開發(fā)者使用 AI 完成代碼生成等核心開發(fā)任務(wù),而只有 31% 的設(shè)計(jì)師在素材生成等核心設(shè)計(jì)工作中使用 AI。AI 的代碼生成能力也很可能正在發(fā)揮作用——68% 的開發(fā)者表示他們使用提示來生成代碼,82% 的開發(fā)者表示他們對(duì)最終結(jié)果感到滿意。簡(jiǎn)而言之,開發(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)的集成障礙。與我們之前測(cè)試的第三方工具不同,F(xiàn)igma 的方法直接利用現(xiàn)有模式和團(tuán)隊(duì)工作流程。Make 可以在您現(xiàn)有的 Figma 環(huán)境中將提示轉(zhuǎn)換為功能原型。

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

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

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

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

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

盡管 AI 設(shè)計(jì)工具優(yōu)勢(shì)顯著,但它們?nèi)匀恍枰罅康娜斯ね度氩拍芘c實(shí)際產(chǎn)品工作流程保持一致。對(duì)于在結(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 功能等平臺(tái)原生工具通過在現(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è)知識(shí)。即使集成路徑有所改進(jìn),設(shè)計(jì)判斷和系統(tǒng)性思維仍然不可替代。

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

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

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

從小處著手,低風(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ì)周期意味著更少的流失,從而帶來更完善的測(cè)試和更具彈性的產(chǎn)品。關(guān)鍵在于結(jié)合傳統(tǒng)工作流程來評(píng)估結(jié)果,并利用這些洞察來指導(dǎo)更智能、更廣泛的應(yīng)用。

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

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

你可能會(huì)說:

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

人工智能在創(chuàng)意自由輕松有序的指導(dǎo)下表現(xiàn)最佳。過多的詳細(xì)、一體化的指令會(huì)干擾結(jié)果。相反,應(yīng)該將請(qǐ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 副本。

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

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

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

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

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

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

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

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

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

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

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

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

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

總體情況

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

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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è)趨勢(shì)

這不僅僅是又一篇“人工智能正在改變一切”的文章。它探討的是當(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)定義為對(duì)復(fù)雜性的控制。我們構(gòu)建了流暢、分層的工作流程,相信簡(jiǎn)潔源于結(jié)構(gòu)。但 OpenAI 的新設(shè)計(jì)語言卻悄然扼殺了這一理念。

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

長(zhǎng)表單和靜態(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)”,就能取代十屏的表單。界面消失了,但意圖依然存在。

對(duì)話式用戶體驗(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í)消亡

對(duì)話式界面不會(huì)給侵入式橫幅廣告或強(qiáng)行推銷留下任何空間。用戶體驗(yàn)團(tuán)隊(duì)和市場(chǎng)營(yíng)銷團(tuán)隊(duì)之間爭(zhēng)奪廣告空間每個(gè)像素的舊有斗爭(zhēng)終于結(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è)工具:簡(jiǎn)單不再是一種風(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í)。我們?cè)?jīng)擁有的自由——色彩、字體、富有表現(xiàn)力的布局——都消失了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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

高端網(wǎng)站設(shè)計(jì)·蘭亭妙微審美積累|金融理財(cái)系統(tǒng)設(shè)計(jì)

杰睿 行業(yè)趨勢(shì)

imgi_1152_884144175213739.64afa9675a9cd.jpg

imgi_1154_c14fc5175213739.64afa9675b6c0.jpg

imgi_1156_ca29b9175213739.64afa96755745.jpg

imgi_1164_8842b3175213739.64afa9675f1c5.jpg

imgi_1167_c8f0d8175213739.64afa9675d90c.jpg

imgi_1170_cd37c8175213739.64afa96758e10.jpg

imgi_1173_411444175213739.64afa96757384.jpg

這組界面屬于金融投資類暗黑風(fēng)格設(shè)計(jì),特征鮮明且專業(yè)度高:
視覺風(fēng)格:以深灰 / 黑色為基底,通過橙色、綠色等亮色突出核心數(shù)據(jù)(如收益、資產(chǎn)余額)與交互按鈕,營(yíng)造出 “專業(yè)、理性” 的金融氛圍;界面元素簡(jiǎn)潔利落,模塊化布局清晰劃分投資賬戶、收益統(tǒng)計(jì)、資產(chǎn)分布等功能區(qū)域。
功能邏輯:聚焦 “投資全流程管理”,從資產(chǎn)充值、投資計(jì)劃、收益跟蹤到資產(chǎn)配置,全鏈路覆蓋;通過圖表(折線圖、環(huán)形圖)、數(shù)據(jù)卡片直觀呈現(xiàn)投資收益、資產(chǎn)波動(dòng)、代幣占比等關(guān)鍵信息,助力用戶快速?zèng)Q策。
行業(yè)適配性:這種設(shè)計(jì)高度契合加密貨幣、金融投資類平臺(tái)的屬性,既通過深色風(fēng)格傳遞 “穩(wěn)重、可信” 的品牌形象,又以精準(zhǔn)的數(shù)據(jù)可視化和清晰的操作路徑,滿足投資者對(duì) “資產(chǎn)透明化、操作便捷化” 的核心需求,是金融科技領(lǐng)域界面設(shè)計(jì)的優(yōu)質(zhì)范例。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)可視化·蘭亭妙微審美積累|智能設(shè)備設(shè)計(jì)

杰睿 行業(yè)趨勢(shì)

2ef8752068f587e2629cf2cf607e8211.jpg

6f44400306c9a66ab0d8002b3e17cf0a.jpg

8f8c2c7ed962ddb05a6a6cd6eb411878.jpg

dd60dfa2996cca8c36c3b499d742a3e2.jpg

一、視覺表現(xiàn)

深色(黑、深藍(lán))為基底,搭配高飽和度的亮色(紅、藍(lán)、紫)突出關(guān)鍵數(shù)據(jù)與交互區(qū)域,營(yíng)造強(qiáng)烈的科技感與未來感;大量運(yùn)用3D 場(chǎng)景建模(城市、建筑、地形)和動(dòng)態(tài)數(shù)據(jù)可視化(流線圖、熱力圖、立體圖表),讓界面充滿沉浸式的科幻氛圍,仿佛置身于未來指揮中心。

二、功能邏輯

聚焦多維度數(shù)據(jù)的集中監(jiān)控與管理,涵蓋無人機(jī)狀態(tài)、衛(wèi)星定位、城市建筑、能源消耗等專業(yè)領(lǐng)域;通過模塊化布局 + 分層信息架構(gòu),將復(fù)雜的設(shè)備狀態(tài)、地理信息、能耗數(shù)據(jù)等分類呈現(xiàn),既滿足專業(yè)場(chǎng)景對(duì) “全局掌控” 的需求,又通過直觀的視覺設(shè)計(jì)降低信息理解門檻。

三、風(fēng)格價(jià)值

這種設(shè)計(jì)風(fēng)格高度適配智能監(jiān)控、智慧城市、能源管理等前沿領(lǐng)域,既通過科幻感的視覺語言傳遞 “技術(shù)前沿性”,又以精準(zhǔn)的功能布局實(shí)現(xiàn) “專業(yè)數(shù)據(jù)的高效管理”,是將未來感與實(shí)用性深度融合的典型設(shè)計(jì)范式,為用戶打造出 “身臨其境的智能操控體驗(yàn)”。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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

14 個(gè)邏輯驅(qū)動(dòng)的 UI 設(shè)計(jì)技巧,助您改善任何界面

杰睿 行業(yè)趨勢(shì)

UI 設(shè)計(jì)技巧前后示例

設(shè)計(jì)用戶界面絕非易事。布局、間距、字體和顏色的選擇數(shù)不勝數(shù),很容易讓人不知所措。而當(dāng)你考慮可用性、可訪問性和用戶心理等因素時(shí),挑戰(zhàn)只會(huì)越來越大。

但好消息是,UI 設(shè)計(jì)其實(shí)沒那么復(fù)雜。從事產(chǎn)品設(shè)計(jì)師二十多年,我發(fā)現(xiàn)我的大部分視覺和交互設(shè)計(jì)決策都遵循一套清晰的邏輯準(zhǔn)則。這些準(zhǔn)則并非源于藝術(shù)天賦或直覺,而是直截了當(dāng)?shù)闹笇?dǎo)原則。

當(dāng)然,創(chuàng)意天賦固然有用,但很多讓界面直觀、包容、賞心悅目的元素絕對(duì)是可以學(xué)習(xí)的。擁有結(jié)構(gòu)化的方法能讓你做出明智、一致的設(shè)計(jì)選擇。如果沒有它,你基本上只能依靠反復(fù)試驗(yàn)來讓事情“看起來正確”。

最好的學(xué)習(xí)方法是什么?實(shí)踐出真知。那就讓我們開始運(yùn)用一些 UI 設(shè)計(jì)技巧吧。所有設(shè)計(jì)技巧都來自我的《實(shí)用 UI 設(shè)計(jì)》一書

修復(fù)示例界面的 UI 設(shè)計(jì)技巧

以下設(shè)計(jì)是一個(gè)社區(qū)博客平臺(tái)的個(gè)人資料頁面。第一個(gè)示例是原始設(shè)計(jì)。第二個(gè)示例是快速應(yīng)用一些邏輯驅(qū)動(dòng)的 UI 設(shè)計(jì)技巧的結(jié)果。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
社區(qū)博客平臺(tái)示例的前后 UI 設(shè)計(jì)技巧

即使你沒有太多的 UI 設(shè)計(jì)經(jīng)驗(yàn),你大概也能看出最初的設(shè)計(jì)感覺不太“對(duì)勁”。這是因?yàn)樗S多設(shè)計(jì)缺陷,可能會(huì)對(duì)可用性產(chǎn)生負(fù)面影響。你可能已經(jīng)發(fā)現(xiàn)了其中一些。

現(xiàn)在,讓我們逐步了解改進(jìn)原始設(shè)計(jì)的過程,并使用這些 UI 設(shè)計(jì)技巧逐步解決每個(gè)問題:

  1. 根據(jù)元素之間的密切關(guān)系來劃分空間
  2. 確保界面元素具有 3:1 的對(duì)比度
  3. 使用單個(gè)主按鈕執(zhí)行最重要的操作
  4. 確保按鈕具有足夠的目標(biāo)尺寸
  5. 確保重要內(nèi)容可見
  6. 減少大文本的字母間距
  7. 不要僅僅依靠顏色作為指標(biāo)
  8. 盡量避免使用多重比對(duì)
  9. 確保文本的對(duì)比度為 4.5:1
  10. 考慮移除容器以簡(jiǎn)化界面
  11. 僅使用常規(guī)和粗體字體
  12. 保持一致
  13. 不要將極簡(jiǎn)主義與簡(jiǎn)單混淆
  14. 平衡圖標(biāo)和文本對(duì)

1. 根據(jù)元素之間的密切關(guān)系來劃分空間

界面元素之間的間距大小應(yīng)取決于元素之間的關(guān)聯(lián)程度。關(guān)聯(lián)程度越高的元素通常應(yīng)該靠得更近,以顯示它們的關(guān)聯(lián)性。不相關(guān)的元素之間應(yīng)留出更多空間來分隔。

以這種方式使用間距是將信息拆分成更小組別的最有效方法之一。如果你將每個(gè)組想象成一個(gè)矩形,你會(huì)開始注意到界面是由許多大矩形內(nèi)嵌的小矩形組成的。首先在最內(nèi)層的矩形上應(yīng)用較小的間距,然后向外逐漸增加矩形之間的間距。

確定界面元素之間的理想間距可能是一項(xiàng)令人沮喪且耗時(shí)的任務(wù)。有無數(shù)種選項(xiàng)可供選擇。與其一次一個(gè)像素地反復(fù)嘗試,不如創(chuàng)建一組簡(jiǎn)單的預(yù)定義間距選項(xiàng),以便更快地做出決策。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
預(yù)定義間距選項(xiàng)

設(shè)置簡(jiǎn)單 T 恤尺寸的間距選項(xiàng),以 8 點(diǎn)為增量。這也稱為使用 8 點(diǎn)網(wǎng)格,因?yàn)樗薪缑嬖刈罱K都會(huì)與一系列以 8 點(diǎn)為間隔的垂直和水平輔助線對(duì)齊。對(duì)于更詳細(xì)的界面,您可以使用 4 點(diǎn)為增量,以便更好地控制。

與排版比例尺類似,間距選項(xiàng)應(yīng)該隨著元素尺寸的增大而相應(yīng)增大。這可以確保間距與較大的界面元素成比例。

在我們的示例中,無論矩形之間的關(guān)聯(lián)程度如何,它們之間都只使用了預(yù)定義的超?。?pt)和小(16pt)間距選項(xiàng)。這會(huì)導(dǎo)致設(shè)計(jì)看起來雜亂、擠壓,難以理解。根據(jù)元素之間的關(guān)聯(lián)程度增加間距有助于清晰地區(qū)分和分組內(nèi)容。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
突出顯示間距的 UI 設(shè)計(jì)示例

以下是應(yīng)用預(yù)定義間距選項(xiàng)之前和之后的示例。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
應(yīng)用了預(yù)定義間距選項(xiàng)的 UI 設(shè)計(jì)技巧示例

2. 確保界面元素具有 3:1 的對(duì)比度

對(duì)比度是衡量?jī)煞N顏色之間感知亮度差異的指標(biāo)。它以 1:1 到 21:1 之間的比例表示。例如,黑色背景上的黑色文本對(duì)比度最低,為 1:1;而白色背景上的黑色文本對(duì)比度最高,為 21:1。有很多工具和Figma 插件可以幫助你測(cè)量色彩對(duì)比度,我最喜歡的是Web AIM 在線對(duì)比度檢查工具Figma Contrast 插件。

為了確保視障人士能夠清晰地查看界面細(xì)節(jié),請(qǐng)至少滿足Web 內(nèi)容無障礙指南 (WCAG) 2.1 AA 級(jí)色彩對(duì)比度要求。這意味著用戶界面元素(例如表單字段和按鈕)的對(duì)比度至少需要達(dá)到 3:1。

在我們的示例中,圖標(biāo)和按鈕的對(duì)比度太低。低對(duì)比度按鈕的風(fēng)險(xiǎn)在于,視力較差的用戶可能無法識(shí)別它們是按鈕,因?yàn)樗麄兛床磺灏粹o的形狀。為按鈕添加對(duì)比度足夠的邊框,可以提高可訪問性。此外,按鈕的淺灰色背景填充也被移除,這樣人們就不會(huì)誤認(rèn)為它們處于禁用狀態(tài)或非活動(dòng)狀態(tài)。圖標(biāo)的低對(duì)比度問題可以通過使用深灰色輕松解決。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
應(yīng)用了足夠 3:1 對(duì)比度的 UI 設(shè)計(jì)技巧示例

3. 使用單個(gè)主按鈕執(zhí)行最重要的操作

對(duì)于大多數(shù)網(wǎng)站或應(yīng)用項(xiàng)目,您需要設(shè)置三個(gè)按鈕權(quán)重來指示操作的重要性:主要、次要和第三級(jí)。根據(jù)界面的復(fù)雜程度,您可能還需要較小或較大的按鈕尺寸。

以下按鈕樣式熟悉易用,并且具有清晰的視覺層次,不依賴于單一的顏色。它們并非設(shè)計(jì)按鈕樣式的唯一方法,但卻是一種安全的選擇。了解更多按鈕設(shè)計(jì)技巧,避免常見錯(cuò)誤。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
推薦的 UI 設(shè)計(jì)按鈕樣式

主按鈕的目的是突出顯示界面上最重要的操作。這有助于人們了解下一步該做什么才能完成他們的任務(wù)。

使用主按鈕的指南:

  • 如果界面上沒有最重要的操作,請(qǐng)對(duì)這些操作使用二級(jí)或三級(jí)按鈕。
  • 避免在屏幕上使用多個(gè)主要按鈕。它們會(huì)爭(zhēng)奪注意力,并導(dǎo)致用戶對(duì)下一步操作感到困惑。

在我們的例子中,我們假設(shè)“關(guān)注”操作是最重要的,并將其作為主要按鈕。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
具有單個(gè)主按鈕的 UI 設(shè)計(jì)技巧示例

4. 確保按鈕具有足夠的目標(biāo)尺寸

與大目標(biāo)相比,小目標(biāo)更難點(diǎn)擊或觸摸。對(duì)于運(yùn)動(dòng)控制能力受損的人,或者單手用拇指握住手機(jī)的人來說尤其如此。

嘗試并遵循以下準(zhǔn)則,以確保按鈕(和其他交互元素)具有足夠的目標(biāo)尺寸:

  • 按鈕尺寸至少為 48pt x 48pt。這與 8pt 網(wǎng)格對(duì)齊,并且略大于 WCAG 建議的 44pt x 44pt。
  • 將常用按鈕放大,以提高效率并避免錯(cuò)過它們。
  • 按鈕之間至少間隔 8pt,以防止人們誤按錯(cuò)誤的按鈕。

在我們的示例中,兩個(gè)按鈕的目標(biāo)尺寸已經(jīng)足夠,但仍有足夠的空間來加寬按鈕。由于還有空間,您可以加寬按鈕以增加其目標(biāo)尺寸。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,其中按鈕具有足夠的目標(biāo)尺寸

5. 確保重要內(nèi)容清晰可見

人們不會(huì)使用他們看不到的東西。將內(nèi)容隱藏在交互式菜單后面是保持界面簡(jiǎn)潔簡(jiǎn)潔的便捷方法,但這存在風(fēng)險(xiǎn),因?yàn)橛行┤丝赡軙?huì)忽略這些內(nèi)容。如果空間允許,請(qǐng)盡量確保重要的內(nèi)容和操作在需要時(shí)清晰可見。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,其中圖標(biāo)后面的隱藏操作可見

在我們的示例中,操作隱藏在交互式菜單中,以幫助簡(jiǎn)化設(shè)計(jì)。雖然看起來簡(jiǎn)潔明了,但有些人可能會(huì)忽略這些操作。由于需要留出空間來顯示“分享”和“收藏”這兩個(gè)操作,因此請(qǐng)將它們顯示出來,以確保用戶不會(huì)錯(cuò)過。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,其中圖標(biāo)后面的隱藏操作可見

6. 減少大文本的字母間距

讓大標(biāo)題看起來更好的一個(gè)小技巧是減少字母間距(字母之間的距離)。減少字母間距的程度取決于字體和大小,但通常情況下,文本越大,字母間距的減少幅度就越大。

這是因?yàn)樵S多字體的設(shè)計(jì)初衷是供長(zhǎng)篇正文在小字號(hào)下閱讀。它們被稱為“正文型”字體,字母間距較大,以便在小字號(hào)下更易辨認(rèn)。對(duì)于“展示型”字體,您可能不需要減小字母間距,因?yàn)樗鼈兊脑O(shè)計(jì)初衷是供大字號(hào)下閱讀,并且通常字母間距較小。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:減少大文本的字母間距

在我們的例子中,人名的字母間距減小了,以提高美觀度。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:減少大文本的字母間距

7. 不要僅僅依賴顏色作為指標(biāo)

不要僅僅依靠顏色來傳達(dá)含義或區(qū)分視覺元素,因?yàn)橐暳Φ拖禄蛏さ娜丝赡軣o法看到指示符。請(qǐng)使用其他視覺提示來區(qū)分界面元素。

在我們的示例中,有兩個(gè)地方可能會(huì)令人困惑。讓我們把它們解釋得更清楚一些。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例添加除顏色之外的其他視覺指示器

如果您查看文章列表上方的 3 個(gè)標(biāo)簽頁,可能不太容易看出“文章”是被選中的標(biāo)簽頁。這是因?yàn)闃?biāo)簽頁的顏色略有不同,以指示被選中。在選中的標(biāo)簽頁上添加下劃線有助于使其更清晰。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
帶有下劃線的 Tabs 組件可以清楚地指示所選的選項(xiàng)卡

同樣,在底部導(dǎo)航中,我們采用了微妙的顏色變化來區(qū)分所選圖標(biāo)和其他圖標(biāo)。為了更加明顯,所選圖標(biāo)被填充了顏色。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
底部導(dǎo)航組件帶有填充圖標(biāo),表示已被選中

8. 盡量避免使用多重比對(duì)

使用的對(duì)齊類型越多(左對(duì)齊、右對(duì)齊或居中),界面看起來就越復(fù)雜、越混亂。我們的眼睛在移動(dòng)時(shí)會(huì)被迫更加費(fèi)力地跟隨每種對(duì)齊方式。當(dāng)界面中的一個(gè)小組件或部分使用多種不同的對(duì)齊方式時(shí),這一點(diǎn)尤為突出。

堅(jiān)持單一對(duì)齊方式(或盡可能少的對(duì)齊方式)有助于簡(jiǎn)化界面,使其看起來更整潔。

在我們的示例中,標(biāo)簽頁居中對(duì)齊,而頁面上的大多數(shù)其他元素則左對(duì)齊。這種混合對(duì)齊方式增加了不必要的復(fù)雜性,導(dǎo)致認(rèn)知負(fù)荷(使用界面所需的腦力)略有增加。將標(biāo)簽頁左對(duì)齊有助于保持界面整潔。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:對(duì)元素應(yīng)用一致的左對(duì)齊以避免多種不同的對(duì)齊方式

9. 確保文本對(duì)比度為 4.5:1

為了幫助確保有視力障礙的人能夠清晰地閱讀文本,它需要滿足以下 WCAG 2.1 AA 級(jí)對(duì)比度要求:

  • 小文本(18px 及以下)需要至少 4.5:1 的對(duì)比度。
  • 大文本(粗體字重 18px 以上或常規(guī)字重 24px 以上)需要至少 3:1 的對(duì)比度。

在我們的示例中,未選中選項(xiàng)卡上的小文本對(duì)比度不足。使用較深的灰色可以提供足夠的對(duì)比度。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:將文本對(duì)比度提高到至少 4.5:1,以確保其可訪問性

10.考慮移除容器以簡(jiǎn)化界面

將信息分解成更小的相關(guān)元素組有助于構(gòu)建和組織界面,讓人們更快、更容易地理解和記憶。

您可以使用以下方法對(duì)相關(guān)元素進(jìn)行分組:

  1. 將相關(guān)元素放在同一容器中
  2. 空間相關(guān)元素緊密相連
  3. 使相關(guān)元素看起來相似
  4. 將相關(guān)元素對(duì)齊成一條連續(xù)的線

使用容器是分組界面元素最有效的視覺提示,但它可能會(huì)造成不必要的混亂。尋找機(jī)會(huì)使用其他分組方法,它們通常更巧妙,有助于簡(jiǎn)化設(shè)計(jì)。

在我們的示例中,每篇文章周圍的容器是不必要的,因?yàn)橐呀?jīng)使用了多種其他分組方法。移除容器還可以為內(nèi)容騰出更多空間。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:刪除不必要的容器以簡(jiǎn)化設(shè)計(jì)

11. 僅使用常規(guī)和粗體字體

雖然某種字體有很多種粗細(xì),但這并不意味著你需要在 UI 設(shè)計(jì)中全部使用它們。使用過多不同的粗細(xì)會(huì)給界面帶來干擾和混亂,也會(huì)使統(tǒng)一使用每種粗細(xì)變得更加困難。

僅使用常規(guī)和粗體字重,保持設(shè)計(jì)系統(tǒng)簡(jiǎn)潔明了。某些字體提供半粗體選項(xiàng),如果粗體字重過重,可以使用半粗體代替。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
字體粗細(xì)列表,除常規(guī)和粗體外,其他所有字體均被劃掉

快速使用提示:

  • 使用粗體字體來強(qiáng)調(diào)標(biāo)題。
  • 對(duì)于其他較小的文本,請(qǐng)使用常規(guī)字體粗細(xì)。
  • 如果您決定使用非常細(xì)或粗的字體,請(qǐng)將它們保留用于標(biāo)題和較大的文本,因?yàn)樗鼈冊(cè)谳^小的尺寸下可能難以閱讀。

在我們的示例中,文章詳情使用了三種不同的字體粗細(xì)。即使“超細(xì)”和“細(xì)”字體粗細(xì)的對(duì)比度高于所需的 4.5:1,但某些用戶仍然可能難以閱讀這些字符。將字體粗細(xì)增加到“常規(guī)”有助于提高可讀性并簡(jiǎn)化設(shè)計(jì)。文章標(biāo)題使用“半粗體”有助于使其脫穎而出。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,字體粗細(xì)從 3 種減少到 2 種

僅使用兩種字體粗細(xì)即可得到以下設(shè)計(jì)。我們正在應(yīng)用 UI 設(shè)計(jì)技巧,目前進(jìn)展順利,但仍有一些問題需要解決。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,其中多種不同字體粗細(xì)僅減少到常規(guī)和粗體

12.保持一致

UI 設(shè)計(jì)的一致性意味著相似的元素在外觀和工作方式上具有相似性。無論是在您的產(chǎn)品內(nèi)部,還是與其他成熟產(chǎn)品相比,這都應(yīng)該如此。這種可預(yù)測(cè)的功能可以提高可用性并減少錯(cuò)誤,因?yàn)槿藗儫o需不斷學(xué)習(xí)其工作原理。

在我們的示例中,每篇文章的照片都有尖角,與按鈕和圖標(biāo)的柔和圓角不匹配。將照片的角弄圓有助于創(chuàng)建更一致的視覺語言。你可能認(rèn)為這樣的小細(xì)節(jié)不會(huì)帶來太大的變化,但它們加在一起,就能讓設(shè)計(jì)看起來“恰到好處”。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,文章照片和按鈕的角落應(yīng)用一致的邊框半徑

13. 不要混淆極簡(jiǎn)主義和簡(jiǎn)單性

極簡(jiǎn)并不意味著簡(jiǎn)單。設(shè)計(jì)師傾向于極簡(jiǎn)界面,因?yàn)樗鼈兛雌饋砻烙^簡(jiǎn)潔。極簡(jiǎn)界面的元素和樣式較少,但理解和使用起來并不一定簡(jiǎn)單。

極簡(jiǎn)界面通常會(huì)顯得模糊或令人困惑,因?yàn)樗鼈內(nèi)狈α己每捎眯运璧年P(guān)鍵細(xì)節(jié)。簡(jiǎn)化不僅僅是減少。刪除或隱藏太多內(nèi)容可能會(huì)損害可用性。你需要確保沒有刪除關(guān)鍵信息或細(xì)節(jié)。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
底部導(dǎo)航中的圖標(biāo)添加了文本標(biāo)簽

在我們的示例中,底部導(dǎo)航圖標(biāo)看起來簡(jiǎn)潔明了,但它們的含義清晰嗎?可能并非每個(gè)人都清楚。在圖標(biāo)上添加文本標(biāo)簽有助于確保人們能夠理解它們的含義,尤其是那些使用屏幕閱讀器(一種使用語音或盲文向盲人描述界面的軟件)的用戶。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例,其中將文本標(biāo)簽添加到底部導(dǎo)航中的圖標(biāo)

14. 平衡圖標(biāo)和文字

當(dāng)將圖標(biāo)與文本配對(duì)時(shí),請(qǐng)嘗試確保它們具有相似的視覺突出性,以獲得更加平衡和有凝聚力的外觀。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
通過加深文本來平衡底部導(dǎo)航組件中圖標(biāo)和文本對(duì)的重量

在我們的示例中,底部導(dǎo)航欄中的圖標(biāo)和文字略微不平衡。圖標(biāo)和文字顏色相同,但圖標(biāo)更粗更大,使其更加突出。將文字加深可以增強(qiáng)其突出度,使其與圖標(biāo)保持平衡。將文字對(duì)比度提高到至少 4.5:1 也能確保視力不佳的用戶也能輕松閱讀。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
UI 設(shè)計(jì)技巧示例:通過加深文本來平衡底部導(dǎo)航組件中圖標(biāo)和文本對(duì)的重量

我們做到了!

僅憑一些簡(jiǎn)單的 UI 設(shè)計(jì)技巧,我們就能夠識(shí)別并解決示例界面中的一系列問題。當(dāng)然,您可以根據(jù)需要進(jìn)一步調(diào)整視覺風(fēng)格,使其更貼合特定的品牌個(gè)性。不過,在本例中,我們專注于確?;驹瓌t的正確性。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
社區(qū)博客平臺(tái)示例的前后 UI 設(shè)計(jì)技巧

我希望你開始明白,UI 設(shè)計(jì)并不需要讓人感到不知所措。雖然它有時(shí)看起來像是一門只有天賦異稟的人才能掌握的神秘藝術(shù),但許多優(yōu)秀的界面設(shè)計(jì)都植根于清晰、合乎邏輯的指導(dǎo)原則,就像你在這里學(xué)到的那些一樣。

依靠客觀指導(dǎo)而非主觀意見,可以更輕松(也更快速)地設(shè)計(jì)出直觀、易用且視覺精美的界面。你越是練習(xí)這些 UI 設(shè)計(jì)技巧,它們就越能自然而然地融入你的設(shè)計(jì)流程。以它們?yōu)榛A(chǔ),勇于探索、實(shí)驗(yàn),并在此基礎(chǔ)上進(jìn)一步激發(fā)你的創(chuàng)造力。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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)設(shè)計(jì)公司·蘭亭妙微審美積累|醫(yī)療系統(tǒng)設(shè)計(jì)

杰睿 行業(yè)趨勢(shì)

0c8079c01faeab2a405872b33cc97c53.jpg

1e33a0208347303f207c0858fc2460ce.jpg

8c2a520d7277d82ed8b2a45a934a78e8.jpg

41d96ffaeb7674343f61fda5aad9b9d5.jpg

366cb1caaf10e88223385e7079dc9dbd.jpg

9253d19fef7f969194e2f1b723a8f2cc.jpg

aa367e8085b49852aec95a543a8804a2.jpg

c377670d1f9fbdeea5a4cdb45e6f8098.jpg

一、醫(yī)療專業(yè)風(fēng)

  • 視覺設(shè)計(jì):以深色背景為主,搭配高對(duì)比度的醫(yī)療影像或數(shù)據(jù)可視化元素(如 CT/MRI 影像、生命體征圖表),界面元素簡(jiǎn)潔且功能性強(qiáng),多采用扁平化圖標(biāo)和專業(yè)工具型布局。
  • 設(shè)計(jì)邏輯:聚焦醫(yī)療專業(yè)場(chǎng)景(如影像診斷、醫(yī)護(hù)決策),通過多視圖對(duì)比、精準(zhǔn)標(biāo)注工具、模塊化數(shù)據(jù)面板,滿足醫(yī)護(hù)人員對(duì)醫(yī)療信息的深度分析與快速?zèng)Q策需求,突出專業(yè)、高效的使用體驗(yàn)。

二、健康交互風(fēng)

  • 視覺設(shè)計(jì):以淺色或清新色調(diào)為主(部分融入科技感配色),采用卡片式、模塊化布局,結(jié)合 3D 人體模型、簡(jiǎn)約數(shù)據(jù)可視化和親和力強(qiáng)的交互元素(如按鈕、進(jìn)度條)。
  • 設(shè)計(jì)邏輯:面向患者或健康管理用戶,通過具象化的人體模型、直觀的健康數(shù)據(jù)圖表、流程化的交互設(shè)計(jì)(如病情關(guān)聯(lián)、健身計(jì)劃生成),降低專業(yè)信息的理解門檻,打造友好、易用的健康管理或健身指導(dǎo)體驗(yàn),兼顧信息整合與用戶交互的流暢性。
 
兩類設(shè)計(jì)均通過簡(jiǎn)約視覺 + 專業(yè)數(shù)據(jù)可視化 + 場(chǎng)景化元素的組合,在各自垂直領(lǐng)域?qū)崿F(xiàn)了 “降低專業(yè)信息理解成本” 的目標(biāo),既保證了界面的現(xiàn)代審美

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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

軟件開發(fā)公司最容易忽視的設(shè)計(jì)環(huán)節(jié),蘭亭妙微幫你補(bǔ)齊短板!

杰睿 行業(yè)趨勢(shì)

在數(shù)字化時(shí)代,高端網(wǎng)站設(shè)計(jì)早已超越“好看”的范疇。用戶不僅期待視覺美感,更希望每一次操作都順暢自然、每一次瀏覽都能理解品牌價(jià)值。蘭亭妙微通過多年實(shí)踐,形成了一套完整的方法論,將功能設(shè)計(jì)與品牌塑造深度融合,讓高端網(wǎng)站真正實(shí)現(xiàn)“審美與價(jià)值共生”。

一、以用戶決策為核心的功能設(shè)計(jì)

高端網(wǎng)站的功能設(shè)計(jì)不僅是滿足業(yè)務(wù)需求,更是引導(dǎo)用戶完成操作、理解信息的過程:
行為路徑分析:通過數(shù)據(jù)研究用戶的訪問路徑、點(diǎn)擊習(xí)慣和關(guān)注焦點(diǎn),為界面布局和功能優(yōu)先級(jí)提供科學(xué)依據(jù)。 • 關(guān)鍵操作優(yōu)化:優(yōu)化導(dǎo)航、按鈕、表單和流程,使用戶完成主要任務(wù)更加便捷,減少摩擦點(diǎn)。 • 信息可視化:對(duì)于數(shù)據(jù)密集型內(nèi)容,使用圖表、模塊化布局和動(dòng)態(tài)交互,將復(fù)雜信息直觀呈現(xiàn),讓用戶快速理解。
這種以決策為導(dǎo)向的功能設(shè)計(jì),讓網(wǎng)站不僅“可用”,更能提升用戶體驗(yàn)和業(yè)務(wù)轉(zhuǎn)化效率。

二、品牌表達(dá)與界面邏輯融合

高端網(wǎng)站不僅要好用,更要體現(xiàn)品牌調(diào)性和專業(yè)形象:
統(tǒng)一視覺體系:標(biāo)準(zhǔn)化色彩、字體、間距和圖標(biāo),讓品牌在不同頁面和終端保持一致性。 • 場(chǎng)景化交互:針對(duì)不同用戶角色設(shè)計(jì)操作路徑,使品牌在實(shí)際使用中自然呈現(xiàn)。 • 沉浸式體驗(yàn):通過動(dòng)效、數(shù)據(jù)反饋和交互節(jié)奏,讓用戶在操作中感受到品牌的專業(yè)性與溫度。
界面不僅承載信息,更成為品牌價(jià)值的直接體現(xiàn),實(shí)現(xiàn)功能與品牌的自然共生。

三、數(shù)據(jù)與智能驅(qū)動(dòng)的持續(xù)優(yōu)化

高端網(wǎng)站設(shè)計(jì)不是一次性成果,而是數(shù)據(jù)驅(qū)動(dòng)的迭代過程
用戶行為監(jiān)測(cè):通過點(diǎn)擊熱力圖、停留時(shí)間和操作路徑等數(shù)據(jù),獲得真實(shí)使用反饋。 • 體驗(yàn)優(yōu)化迭代:根據(jù)數(shù)據(jù)調(diào)整界面布局、交互邏輯和信息呈現(xiàn),使功能和品牌體驗(yàn)持續(xù)契合用戶需求。 • 智能輔助設(shè)計(jì):借助AI或智能推薦模塊,實(shí)現(xiàn)內(nèi)容展示和功能優(yōu)先級(jí)的動(dòng)態(tài)優(yōu)化,讓網(wǎng)站隨用戶使用“成長(zhǎng)”。
通過數(shù)據(jù)和智能工具,設(shè)計(jì)不僅美觀,更能持續(xù)支撐品牌價(jià)值和用戶目標(biāo)。

四、跨團(tuán)隊(duì)協(xié)作保障落地

實(shí)現(xiàn)功能與品牌共生離不開團(tuán)隊(duì)的協(xié)作:
設(shè)計(jì)團(tuán)隊(duì)負(fù)責(zé)界面、交互和信息架構(gòu); • 開發(fā)團(tuán)隊(duì)確保技術(shù)落地、性能優(yōu)化和多端兼容; • 產(chǎn)品或項(xiàng)目經(jīng)理統(tǒng)籌全流程,保證設(shè)計(jì)、功能和品牌目標(biāo)閉環(huán)一致。
協(xié)作機(jī)制讓高端網(wǎng)站從設(shè)計(jì)理念到落地實(shí)施,形成完整閉環(huán),實(shí)現(xiàn)真正的高端體驗(yàn)。

 
蘭亭妙微的實(shí)踐證明,高端網(wǎng)站設(shè)計(jì)不僅關(guān)乎視覺美感,更是功能、用戶體驗(yàn)和品牌價(jià)值的有機(jī)結(jié)合。 通過用戶導(dǎo)向的功能設(shè)計(jì)、品牌融入的界面邏輯、數(shù)據(jù)驅(qū)動(dòng)的持續(xù)優(yōu)化以及跨團(tuán)隊(duì)協(xié)作,高端網(wǎng)站不僅好看,更好用、更可信,讓每一次用戶互動(dòng)都成為品牌價(jià)值的傳遞。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.vcbhc.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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è)人資料

存檔

旬邑县| 兴文县| 阿克苏市| 江口县| 阜康市| 壶关县| 宣化县| 潜山县| 峨边| 青海省| 大冶市| 慈溪市| 牡丹江市| 富民县| 鄂托克旗| 隆安县| 驻马店市| 柳林县| 丹东市| 合川市| 资源县| 遂溪县| 临湘市| 烟台市| 耒阳市| 贵定县| 乳源| 桂东县| 金寨县| 贵定县| 林西县| 封开县| 策勒县| 九龙城区| 萝北县| 桐庐县| 泾阳县| 陵水| 汽车| 车险| 东丰县|