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