2025-8-15 杰睿 設(shè)計(jì)管理與成長(zhǎng)
隨著人工智能越來(lái)越多地融入網(wǎng)站和應(yīng)用程序體驗(yàn)，區(qū)分哪些地方已經(jīng)實(shí)施了人工智能，哪些地方尚未實(shí)施人工智能，變得至關(guān)重要。
最初，大多數(shù)產(chǎn)品將人工智能作為聊天機(jī)器人引入，用戶可以通過(guò)聊天機(jī)器人發(fā)起并促進(jìn)與人工智能的交互。現(xiàn)在，產(chǎn)品正在將人工智能融入儀表盤(pán)、任務(wù)和搜索功能。用戶不再主動(dòng)體驗(yàn)人工智能——人工智能體驗(yàn)已經(jīng)預(yù)先存在。
由于用戶不再控制何時(shí)觸發(fā)人工智能的使用，因此需要讓用戶了解何時(shí)向他們展示人工智能功能或內(nèi)容，以確定其有效性和質(zhì)量。不僅如此，《歐盟人工智能法案》（2026年生效）將強(qiáng)制要求用戶在與人工智能系統(tǒng)進(jìn)行通信或互動(dòng)時(shí)必須知曉。
這就是設(shè)計(jì)系統(tǒng)的用武之地——實(shí)施專(zhuān)門(mén)的視覺(jué)處理，以始終如一地將人工智能內(nèi)容和特征與非人工智能內(nèi)容和特征分開(kāi)。
遺憾的是，目前只有少數(shù)開(kāi)源設(shè)計(jì)系統(tǒng)明確地包含 AI 組件和模式。我希望很快會(huì)有更多系統(tǒng)加入，但目前為止，只有 GitLab 的 Pajamas、IBM 的 Carbon 和 Twilio 的 Paste 在其指南中承認(rèn)了 AI。
注意：我使用Figma 的設(shè)計(jì)系統(tǒng)來(lái)對(duì) AI 組件和模式進(jìn)行基準(zhǔn)測(cè)試。我沒(méi)有納入僅包含 AI 聊天機(jī)器人或?qū)υ捲O(shè)計(jì)文檔的設(shè)計(jì)系統(tǒng)，因?yàn)檫@是一種更標(biāo)準(zhǔn)的交互模式；這包括亞馬遜的 Cloudscape和Salesforce 的 Lightning。
讓我們比較和對(duì)比這些設(shè)計(jì)系統(tǒng) AI 組件和模式，看看它們可以在哪些方面進(jìn)行優(yōu)化以提高可用性。
Pajamas目前不包含明確的組件或模式，但它確實(shí)包含一些關(guān)于 AI 與人類(lèi)交互的有趣文檔。該文檔首先建議通過(guò)識(shí)別哪些自動(dòng)化操作是合乎道德且有益的（例如，高風(fēng)險(xiǎn)任務(wù) vs. 低風(fēng)險(xiǎn)任務(wù)），來(lái)了解 AI 的使用是否真的能給用戶帶來(lái)好處。
接下來(lái)，它建議透明地說(shuō)明 AI 的使用地點(diǎn)——Pajamas 通過(guò)其“GitLab Duo”實(shí)現(xiàn)了這一點(diǎn)，這是 AI 特性、能力和局限性的指標(biāo)。
由于“GitLab Duo”用于 AI 功能和交互（而不是任何 AI 內(nèi)容），Pajamas 還建議使用“<動(dòng)詞> by AI”（即“由 AI 總結(jié)”）標(biāo)記 AI 生成的內(nèi)容，并發(fā)送一條消息鼓勵(lì)用戶檢查 AI 內(nèi)容。
GitLab 也在開(kāi)發(fā)一個(gè)框架來(lái)實(shí)踐他們的指導(dǎo)方針；目前還在開(kāi)發(fā)中，但大致的工作內(nèi)容可以在GitLab 的 AI UX 模式中查看。他們的目標(biāo)是發(fā)布一個(gè)帶有文檔的 AI 模式庫(kù)——這正是我們所需要的（拜托！）。
GitLab 對(duì)其 AI UX 模式的愿景分為 4 個(gè)維度，以幫助選擇正確的 AI 模式：模式、方法、交互性和任務(wù)。
例如，他們?cè)缙趯?duì)人工智能模式的探索包括低保真模型，展示了如何將人工智能與圖表或內(nèi)聯(lián)解釋集成到界面中。這些模式清晰地標(biāo)記了人工智能的用途，有助于建立用戶對(duì)人工智能系統(tǒng)的理解和信任。
目前，GitLab 的文檔還停留在概念階段，僅概括了他們希望未來(lái) AI UX 體驗(yàn)的樣子。但它提供了一個(gè)堅(jiān)實(shí)的框架，大多數(shù)設(shè)計(jì)系統(tǒng)都可以采用——無(wú)論哪個(gè)行業(yè)或產(chǎn)品。
我希望他們能盡快發(fā)布更多關(guān)于其AI用戶體驗(yàn)?zāi)Ｊ降纳钊胄畔ⅰＮ艺J(rèn)為這對(duì)其他開(kāi)發(fā)AI文檔的設(shè)計(jì)系統(tǒng)來(lái)說(shuō)，將是一筆寶貴的開(kāi)源資產(chǎn)。
在眾多開(kāi)源設(shè)計(jì)系統(tǒng)中，Carbon擁有最豐富的 AI 使用文檔。它包含一個(gè) AI 專(zhuān)用版塊“Carbon for AI”，涵蓋組件、模式和指南，幫助用戶識(shí)別 AI 生成的內(nèi)容，并了解 AI 在產(chǎn)品中的應(yīng)用方式。
Carbon for AI 建立在現(xiàn)有 Carbon 組件之上，添加了藍(lán)色光暈和漸變效果來(lái)突出顯示 AI 實(shí)例。目前為止，已有 12 個(gè)包含 AI 變體的組件，例如模態(tài)框、數(shù)據(jù)表和文本輸入。
盡管組件的 AI 變體具有獨(dú)特的視覺(jué)處理，但在上下文中，很難區(qū)分哪個(gè)組件當(dāng)前處于活動(dòng)狀態(tài)（因?yàn)樗鼈兛雌饋?lái)都是活動(dòng)的）。
在下面的表單中，AI 用于自動(dòng)填充大部分輸入字段，因此這些字段使用了 AI 變體。即使在默認(rèn)狀態(tài)下，AI 變體也會(huì)呈現(xiàn)藍(lán)色漸變和邊框，這導(dǎo)致難以直觀地識(shí)別哪個(gè)組件處于活動(dòng)狀態(tài)。
用戶可以覆蓋 AI 的輸入，這會(huì)將組件的 AI 變量替換為默認(rèn)變量。這將觸發(fā)“恢復(fù)為 AI 輸入”操作，以替換輸入字段中的 AI 標(biāo)簽，從而允許用戶控制手動(dòng)或自動(dòng)表單響應(yīng)。
除了 AI 變體之外，它還包含一個(gè)明確的 AI 標(biāo)簽，可以顯示一個(gè)彈窗，解釋特定場(chǎng)景下 AI 的細(xì)節(jié)（Carbon 將此模式稱為“AI 可解釋性”）。用戶可以選擇 AI 標(biāo)簽，彈窗就會(huì)出現(xiàn)在按鈕下方。
看到像 Carbon 一樣完善的 AI 模式和組件設(shè)計(jì)系統(tǒng)文檔，真是令人興奮。他們不僅提供了 AI 通用用法的文檔，還提供了實(shí)際可用的組件和模式。
但由于組件的AI變體使得在上下文中使用時(shí)難以區(qū)分哪個(gè)組件處于活動(dòng)狀態(tài)，我認(rèn)為存在可用性和可訪問(wèn)性問(wèn)題。AI變體的顏色使用過(guò)于引人注目，而且看起來(lái)像Carbon的焦點(diǎn)狀態(tài)（這可能會(huì)影響依賴焦點(diǎn)狀態(tài)的低視力用戶）。
最后，Paste在“體驗(yàn)”版塊下提供了一個(gè)“人工智能”板塊。Paste 提供了關(guān)于在用戶體驗(yàn)中使用人工智能的通用文檔，以及一些可用的組件。
在設(shè)計(jì)AI功能時(shí)，Paste建議允許用戶將AI結(jié)果與自身體驗(yàn)進(jìn)行比較，并處理潛在的錯(cuò)誤和風(fēng)險(xiǎn)。為了減少這些錯(cuò)誤，Paste提倡賦予用戶審查和撤消輸出、控制數(shù)據(jù)源以及向AI系統(tǒng)提供反饋的能力。
Paste 還建議在設(shè)計(jì)新的 AI 功能時(shí)問(wèn)自己：“如果它做同樣的事情但不使用 AI，我將如何設(shè)計(jì)這個(gè)功能？”用戶使用產(chǎn)品不僅僅是為了與人工智能互動(dòng)——他們還試圖盡可能高效地完成任務(wù)并實(shí)現(xiàn)目標(biāo)。
Paste 包含一個(gè)包含 5 個(gè)組件的 AI UI 套件：人工智能圖標(biāo)、徽章、按鈕、進(jìn)度條和骨架加載器。它還包含一些專(zhuān)為 AI 聊天體驗(yàn)打造的組件，例如 AI 聊天日志。
Paste 文檔中最有幫助的是他們提供的示例，包括路標(biāo)、生成功能和聊天功能。
對(duì)于指示牌，Paste 建議使用帶有人工智能圖標(biāo)的裝飾性徽章來(lái)指示某個(gè)功能正在使用人工智能，例如人工智能推薦或預(yù)測(cè)。指示牌是非交互式的，但類(lèi)似于按鈕，因此看起來(lái)可以點(diǎn)擊。
生成功能會(huì)向用戶提供提示，幫助他們使用 AI 功能，例如“總結(jié)數(shù)據(jù)”或“推薦下一步”。當(dāng)您選擇生成功能時(shí)，下面會(huì)出現(xiàn)一個(gè)彈出窗口，向用戶提供說(shuō)明以及它正在使用的 AI 模型。
最后，聊天內(nèi)容是當(dāng)今已知的人工智能聊天機(jī)器人的典型特征，并包含對(duì)其對(duì)話原則的引用，以發(fā)展人工智能的個(gè)性。
Paste 確實(shí)即將推出另一種加載模式，但我們還需拭目以待。這種模式將為用戶提供一種控制和預(yù)測(cè) AI 輸出的方式；這包括停止輸出以及根據(jù) AI 輸出所需的時(shí)間來(lái)調(diào)整狀態(tài)。
我很高興看到一些文檔和實(shí)際示例的結(jié)合。雖然其中一個(gè)示例是聊天機(jī)器人，但 AI UI 套件中的其他組件也展示了如何在界面中透明地展示 AI 的使用方法。
Paste 正在尋求對(duì)其 AI UI 工具包的反饋——他們有一個(gè)開(kāi)放的Github 討論，您可以在其中提交請(qǐng)求。
令人驚訝的是，很少有設(shè)計(jì)系統(tǒng)發(fā)布關(guān)于組件和模式的文檔來(lái)處理AI驅(qū)動(dòng)的內(nèi)容和功能（至少是公開(kāi)的）。例如，谷歌和微軟都是AI行業(yè)的領(lǐng)導(dǎo)者，但開(kāi)源的Material和Fluent設(shè)計(jì)系統(tǒng)卻不包含AI模式。
由于這些 AI 領(lǐng)導(dǎo)者正在將 AI 融入到與更廣泛用戶群體互動(dòng)的常見(jiàn)產(chǎn)品（例如 Gemini 和 Copilot），他們正在構(gòu)建其他產(chǎn)品也需要效仿的用戶心智模型。即使是Adobe 旗下的 Spectrum，雖然已將 AI 融入其眾多產(chǎn)品（例如 Adobe Firefly），但在涉及內(nèi)容和人物寫(xiě)作時(shí)，也只用了短短的宣傳語(yǔ)來(lái)提及機(jī)器學(xué)習(xí)和 AI。
也許他們的AI模式還在開(kāi)發(fā)中？或者他們還在等待時(shí)機(jī)成熟？
無(wú)論如何，向用戶展示 AI 功能和生成的內(nèi)容至關(guān)重要，這樣他們才能更好地理解所展示的內(nèi)容，并建立對(duì)產(chǎn)品的信任。我期待更多超越閃光圖標(biāo)和聊天機(jī)器人的設(shè)計(jì)系統(tǒng)模式。
蘭亭妙微(m.lzhte.cn )是一家專(zhuān)注而深入的界面設(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn