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