AI時代的產(chǎn)品如何做？IBM都在用的3大設(shè)計系統(tǒng)終于公開了！

編者按：UI/UX 設(shè)計師的本職工作之一，是為數(shù)字產(chǎn)品和服務(wù)匹配上合理的界面和交互。那么隨著 AI 在各個領(lǐng)域產(chǎn)品的深入，讓我不由得想問一個問題，那么 AI 時代的 UI 設(shè)計要怎么做？有沒有可靠的設(shè)計系統(tǒng)？是否有設(shè)計師或者設(shè)計團(tuán)隊系統(tǒng)性地思考過這個問題？今天來自 Allie Paschal 的這篇文章，就是你要的答案。有，而且有好幾個，但是，效果如何？看下去，你就知道。

隨著 AI 在網(wǎng)站與 APP 體驗中的整合程度日益加深，明確區(qū)分 AI 與非 AI 功能區(qū)域?qū)兊弥陵P(guān)重要。

更多AI產(chǎn)品設(shè)計干貨：

此前多數(shù)產(chǎn)品通過聊天機(jī)器人（Chat-bot）的形式引入 AI，用戶需主動發(fā)起交互。但是現(xiàn)在情況發(fā)生了很大的變化，當(dāng)前的產(chǎn)品趨勢已將 AI 整合至操作系統(tǒng)內(nèi)部，深入到儀表板、任務(wù)流與搜索功能當(dāng)中，用戶無需主動觸發(fā)，即可接觸 AI 功能。

由于用戶不再掌控 AI 使用和觸發(fā)的時機(jī)，身為設(shè)計者，必須明確告知用戶何時接觸到 AI 生成的內(nèi)容或功能，以便評估有效性與質(zhì)量。歐盟《人工智能法案》（2026年生效）更是強(qiáng)制要求用戶知曉與 AI 系統(tǒng)的交互狀態(tài)。這個時候，設(shè)計系統(tǒng)的價值就開始顯現(xiàn)了——通過專門視覺處理方案持續(xù)區(qū)分 AI 與非 AI 的內(nèi)容。

Google Material設(shè)計系統(tǒng)展示按鈕與分段式按鈕等組件（圖片來源：Material設(shè)計系統(tǒng)文檔）

雖然目前能夠玩轉(zhuǎn) AI 的絕大多數(shù)是大型企業(yè)，但是 AI 注定要廣泛、深入地進(jìn)入各種數(shù)字產(chǎn)品的，對于設(shè)計師和企業(yè)而言，如何有效地將 AI 的功能、狀態(tài)、體驗納入到日常產(chǎn)品設(shè)計當(dāng)中，幾乎是必然要解決的問題。

不幸的是，當(dāng)前僅有少數(shù)開源設(shè)計系統(tǒng)，明確包含 AI 組件與模式。GitLab 的 Pajamas、IBM的 Carbon 與 Twilio 的 Paste 是目前公開文檔中確認(rèn)整合 AI 相關(guān)規(guī)范和呈現(xiàn)的三大設(shè)計系統(tǒng)。需要說明的是，亞馬遜的 Cloudscape 與 Salesforce 的 Lightning 僅包含 AI 聊天機(jī)器人相關(guān)文檔，故未納入到這次的分析和梳理當(dāng)中。

接下來，我對比分析了上面提及的 3 大設(shè)計系統(tǒng)的 AI 組件與模式優(yōu)化潛力：

1、GitLab Pajamas

https://design.gitlab.com/usability/ai-human-interaction

Pajamas 這套系統(tǒng)雖然沒有提供具體的 AI 組件，但它的文檔深度探討了 AI-人類的交互倫理。首先建議通過風(fēng)險分級（高風(fēng)險/低風(fēng)險任務(wù)）評估 AI 自動化是否真正惠及用戶；其次提倡 AI 在使用上應(yīng)該透明化的原則，通過「GitLab Duo」標(biāo)識，明確標(biāo)注 AI 的功能邊界與限制。

GitLab Duo 界面標(biāo)注示例（展示用戶與 AI 的交互節(jié)點(diǎn)）

針對AI生成內(nèi)容，Pajamas建議采用「<動詞> by AI」格式標(biāo)注（如「Summarized by AI」，「由 AI 總結(jié)」），并附加提醒告知用戶去驗證提示內(nèi)容。GitLab 正在開發(fā) AI UX 模式框架，包含四大維度：模式（Mode）、方法（Approach）、交互性（Interactivity）、任務(wù)（Task）。該框架旨在構(gòu)建用戶對AI系統(tǒng)的理解與信任。

• 模式：AI 與人類進(jìn)行交互的重點(diǎn)、支持方式和綜述
• 方法：AI 能夠改進(jìn)什么（自動化或增強(qiáng)任務(wù)）
• 交互性：AI 與人類互動的方式（主動或者被動）
• 任務(wù)：AI 系統(tǒng)能幫助人類具體做什么（分類、生成或者預(yù)測）

他們很早就對 AI 的運(yùn)作模式進(jìn)行了探索，其中包括一些非常明確的低保真模型，如何展示 AI，如何將 AI 的呈現(xiàn)和圖表等 UI 組件結(jié)合起來使用，方便 AI 真正落地應(yīng)用的時候可供遵循。

集成AI標(biāo)記的低保真線形圖（來源：GitLab AI UX愿景）

AI輔助表單填寫示例（來源：GitLab AI UX愿景）

總結(jié)

當(dāng)前 Pajamas 文檔尚處概念階段，因為目前 AI 和已有 UI 的結(jié)合程度還沒那么高，但它通用的框架具備跨行業(yè)的適用性。所以，可以期待它即將發(fā)布的 AI 模式庫，它們將會成為開源設(shè)計系統(tǒng)重要的資源。

2、IBM Carbon

https://carbondesignsystem.com/guidelines/carbon-for-ai/

Carbon的「Carbon for AI」文檔體系最為完善，涵蓋組件、界面模式與設(shè)計指南三大部分。其通過藍(lán)色輝光與漸變特效標(biāo)注 12 個AI組件變體，覆蓋了模態(tài)彈出框（Modal）、數(shù)據(jù)表（Data Table）與文本輸入（Text Input）等常見的重要 UI 組件。

Carbon的12個AI組件列表（含復(fù)選框與文本輸入變體）

實際應(yīng)用中，AI 組件因默認(rèn)狀態(tài)即呈現(xiàn)藍(lán)色漸變與邊框，導(dǎo)致它在狀態(tài)指示功能上有所欠缺，AI 的激活狀態(tài)辨識其實是有點(diǎn)困難的，這個可能是 Carbon 目前的設(shè)計欠缺。

用戶的輸入內(nèi)容覆蓋 AI 輸入的信息之后，組件將切換至標(biāo)準(zhǔn)版本，并顯示「Revert to AI input」操作選項，而在視覺上和 AI 生成的也非常類似。

AI標(biāo)簽彈出框的視覺效果

除了上面的 AI 和用戶輸入內(nèi)容的切換之外，IBM 還提供了一個明確的 AI 標(biāo)簽，用來在特定場景下詳細(xì)解釋 AI 的功能，這個被稱為Carbon的「AI可解釋性」，它會通過彈出框（Popover）來呈現(xiàn)。

總結(jié)

盡管Carbon的AI文檔體系領(lǐng)先，但其組件視覺方案存在可用性與無障礙（Accessibility）隱患，AI 版變體與正常的輸入聚焦?fàn)顟B(tài)（Focus State）視覺相似度太高，可能影響低視力用戶操作。

Carbon文本輸入AI 輸入狀態(tài)與手工輸入聚焦?fàn)顟B(tài)對比

3、Twilio Paste

https://paste.twilio.design/experiences/artificial-intelligence

Paste 在「體驗」板塊下設(shè)有「 AI 」專項文檔。Paste 包含在 UX 中應(yīng)用 AI 的通用文檔，同時提供若干可用的 UI 組件。在設(shè)計 AI 功能時，Paste 建議用戶將AI輸出結(jié)果與現(xiàn)有體驗進(jìn)行對比，并妥善處理潛在錯誤與風(fēng)險。為降低這些風(fēng)險，Paste主張賦予用戶審查與撤銷生成結(jié)果的權(quán)限，以及控制數(shù)據(jù)源的能力，并且提供向AI系統(tǒng)提供反饋的渠道。

Paste在開發(fā)新AI功能時提出核心設(shè)計思想是：「如果實現(xiàn)相同功能無需AI，你會如何設(shè)計這項功能？」用戶使用產(chǎn)品的核心訴求并非與 AI 交互，而是以最高效率完成任務(wù)與目標(biāo)。Paste 提供的 AI UI 套件包含五個組件：AI 圖標(biāo)、徽章、按鈕、進(jìn)度條與界面框架，同時涵蓋 AI 聊天記錄等專屬組件。

Paste文檔最具價值的部分在于它們提供的實際案例，包含標(biāo)識系統(tǒng)（Signposting）、生成式功能（Generative Features）與聊天模塊。針對標(biāo)識系統(tǒng)，Paste建議采用帶 AI 圖標(biāo)的裝飾性圖標(biāo)來標(biāo)注 AI 功能（例如 AI 推薦或預(yù)測功能）。雖然這類標(biāo)識不具備交互性，但其按鈕式外觀可能引發(fā)可點(diǎn)擊誤解。

Twilio的標(biāo)識示例展示帶AI星形圖標(biāo)徽章（圖片來源：Paste標(biāo)識應(yīng)用案例）

生成式功能通過「總結(jié)數(shù)據(jù)」或「推薦下一步」等提示，引導(dǎo)用戶使用 AI 功能。當(dāng)你選擇生成功能時，下方會出現(xiàn)彈出框，詳細(xì)說明所使用的 AI 模型及操作指引。

Twilio生成式功能按鈕與彈出框示例（解釋 AI 模型細(xì)節(jié)與使用方法）

聊天模塊采用當(dāng)前主流的AI聊天機(jī)器人模式，并引用對話原則來塑造AI個性特征。Paste即將推出的加載模式（Loading Pattern）將賦予用戶控制與預(yù)判AI輸出的能力，包括終止輸出與根據(jù)生成時長調(diào)整狀態(tài)顯示。

聊天界面空白狀態(tài)與輸入框下方多提示示例（展示PasteAI聊天界面布局）

總結(jié)

總體評估顯示，Paste 在提供理論文檔的同時，展示真實案例的做法值得肯定。盡管包含典型的對話式生成的案例，它的 AI UI 套件中的其他組件有效演示了界面層 AI 使用透明化的實現(xiàn)方案。Paste 正在公開征集對AI UI套件的改進(jìn)建議，你可在其 Github 討論區(qū)提交需求。

最后的總結(jié)

當(dāng)前公開展示的 AI 驅(qū)動內(nèi)容與功能組件的設(shè)計系統(tǒng)仍然非常罕見。例如 Google 與微軟雖為 AI 行業(yè)領(lǐng)導(dǎo)者，但是它們的開源系統(tǒng) Material Design 與 Fluent Design 設(shè)計系統(tǒng)尚未整合 AI 設(shè)計模式。

考慮到這些企業(yè)正將 AI 整合至 Gemini、Copilot 等產(chǎn)品，它們實際上正在塑造用戶心智模型，其他產(chǎn)品不得不跟進(jìn)適配。即便 Adobe Spectrum 在 Firefly 等多款產(chǎn)品中整合 AI，但是 Adobe 的文檔僅在涉及人物內(nèi)容創(chuàng)作時簡要提及機(jī)器學(xué)習(xí)與 AI。

Paste的 AI 模式可能尚在開發(fā)階段？或許它們在等待最佳實現(xiàn)方案？無論原因為何，向用戶明確標(biāo)識 AI 功能與生成內(nèi)容具有重要價值——既能增強(qiáng)信息理解度，又可建立產(chǎn)品信任度。我們期待出現(xiàn)超越星形圖標(biāo)與聊天機(jī)器人的設(shè)計系統(tǒng)模式。