设计清晰的AI交互组件-3个开源设计系统

本文授权转自：彩虹BOOK（ID： a3020180906 ）

用户需要的不仅仅是一个闪亮的图标和一个聊天机器人来识别AI功能。

随着AI无处不在，用户无法主动控制是否与AI交互，因此必须通过设计让用户清楚的知道自己何时正在接触AI。设计系统需要引入专门的视觉语言，来帮助区分AI和非AI的功能与内容。

目前只有少数开源设计系统在其指南中明确包含了AI组件和模式。本篇文章主要整理我了解到的GitLab-Pajamas、IBM-Carbon和Twilio-Paste，包含AI设计组件的部分，没有将AI聊天机器人和对话设计文档纳入统计范围，因为这种交互方式已经相对标准化。比如Amazon的Cloudscape和Salesforce的Lightning。

1. GitLab’s Pajamas

GitLab广泛应用于软件开发，用户包括NASA, 阿里巴巴，SpaceX等组织用于大型项目管理。其设计系统Pajamas在设计文档中提出了两大关键设计建议：一是判断AI是否真的适合用于当前场景（特别是风险判断），二是确保用户清楚知道何处使用了AI。

它通过名为“GitLab Duo”的视觉标识，向用户传达AI功能的存在及其边界。重点在于伦理性与透明性。

由于 “GitLab Duo” 是用于标识AI功能和交互（而不是AI内容本身），Pajamas还建议用 “由 AI <动词> ” 的格式（例如 “由AI总结”）来标记AI生成的内容，并提示用户检查AI内容的准确性。

GitLab的AI UX模式框架分为四个维度，帮助设计师选择合适的AI模式：

• 模式（Mode）：AI与用户交互的侧重点（聚焦型、辅助型或集成型）

• 方式（Approach）：AI所改进的内容（自动执行任务或增强任务）

• 交互性（Interactivity）：AI如何与用户互动（主动或被动）

• 任务类型（Task）：AI能帮助用户完成的任务类型（分类、生成、预测）

他们对早期AI模式的探索中包括了一些低保真原型，展示了如何将AI集成到图表中。这些模式会清晰地标记AI的使用位置，从而帮助用户理解和信任AI系统。

结论
GitLab的AI UX设计指南偏概念化，但它构建了一个可被广泛采纳的通用框架。他们也在不断实践这些设计指南。目标是发布一个包含文档的AI模式库。期待他们后续发布更完整的设计模式库，对想要构建AI体验的团队，具有很高的参考价值。

2. IBM’s Carbon

Carbon拥有比较完善的AI使用文档。它包含一个专门面向AI的部分——“Carbon for AI”，其中涵盖了组件、设计模式和指南，帮助用户识别AI生成的内容，协助理解产品中AI的使用方式。

Carbon for AI是在现有组件基础上构建的——为了突出AI的存在，它为相关组件添加了蓝色光晕和渐变效果。目前已经有12个组件提供了AI版本，例如弹框、数据表格和文本输入框等。

Carbon for AI’s component list

尽管这些AI版本的组件在视觉上有明确的区别处理，但在实际使用场景中，很难区分哪个组件是当前激活的（因为它们看起来都像是激活状态）。

在下面这个表单中，大多数输入字段是由AI自动填写的，因此使用了AI版本的组件。这些组件即便处于默认状态，也会显示蓝色渐变和边框——这使得用户难以判断当前真正处于激活状态的是哪个字段。

用户在Carbon设计系统中可以手动覆盖AI输入内容，并在需要时选择“恢复为AI输入”。这种双向控制机制增强了用户的掌控感和信任度，是AI与用户协作中非常重要的设计点。

除了AI组件的特殊样式外，Carbon还加入了一个明确的AI标签，该标签可以弹出一个对话气泡（popover），解释该场景中AI的具体使用细节（Carbon将这种模式称为 “AI可解释性”）。用户点击AI标签后，气泡会出现在按钮下方。

结论
看到像Carbon这样对AI模式和组件定义的如此完善的设计系统时，真的很令人兴奋！他们不仅有关于AI通用用法的文档，还提供了切实可用的组件和模式。

不过缺点是，AI组件在实际使用中难以分辨当前哪个组件处于激活状态。AI组件的颜色处理过于突出，同时又很像Carbon的焦点状态（focus state），这可能会影响那些依赖焦点状态的低视力用户，存在Accessibility风险。

Carbon’s AI-variant vs. focus state of the text field

3. Twilio’s Paste
Twilio是一家提供云通信服务的美国公司，通过将短信、语音、视频等功能集成到应用程序中，客户包括Uber、阿里巴巴等企业。他们的设计体系Paste提供了关于在用户体验中使用AI的通用文档，并附带了一些可用的组件。在设计AI功能时，Paste 建议允许用户将 AI 输出与他们当前的体验进行比较，同时处理潜在的错误和风险。为了减少这些错误，Paste主张赋予用户以下能力：

• 审查和撤销AI输出

• 控制数据来源

• 向AI系统提供反馈

Paste还建议在设计AI功能时问自己一个问题：“如果这个功能不是通过AI实现，我会如何设计它？” 时刻提醒自己：用户使用产品的目的不是为了“体验 AI”，而是为了尽快完成任务，实现目标。

Paste提供了一个包含5个组件的AI UI工具包：

• AI图标

• 徽章（badge）

• 按钮

• 进度条

• 骨架加载器（skeleton loader）

此外，它还包括专为AI聊天体验设计的组件，比如AI聊天日志（chat log）。

Paste文档中最实用的部分是他们提供的示例，涵盖：

• 签名标记（signposting）

关于signposting，Paste建议使用装饰性徽章+AI图标来表示某功能是由AI提供的，例如推荐或预测功能。
这种标记虽然不可交互，但看起来像个按钮，因此具有“可点击”的视觉暗示。

Paste’s signposting example using a badge and AI icon

• 生成型功能（Generative Feature）

会为用户提供提示，帮助他们使用AI功能，例如“总结数据”或“帮我创建”。
当你选择该生成型功能时，会在下方弹出一个对话气泡（popover），向用户说明使用方法，并显示所使用的AI模型。

Paste’s generative feature includes a button with a popover

• 聊天功能

与当今常见的AI聊天机器人类似，包含了用户常用提示词，用于塑造AI的个性。

Paste’s AI chat-bot with an empty state and prompts below the text field

结论

Paste正在不断扩展其AI UI模式，未来将加入加载控制等功能。它目前已提供实际示例和组件，通过多种方式来强调透明展示AI功能。

虽然我们现在随处可见微软和谷歌在其产品中越来越多的集成AI功能，但AI设计模式还未体现在他们的设计系统Material和Fluent之中。

谷歌邮箱集成的Gemini AI新功能

所以非常期待看到开源设计系统Material和Fluent的AI模式，设计系统需要尽快完善与AI的交互模式，以帮助用户理解和信任AI功能。

Google Material Design System

在科技浪潮奔涌向前的当下，人工智能正深刻重塑我们的生活与工作。人机之间的关系，也从简单交互迈向深度协作。想知道如何在这一趋势下把握体验设计的新方向吗？2025年10月将在北京举办的IXDC国际体验设计大会聚焦“人机共生：人工智能时代人机协作新范式”，作为全球领先的用户体验创新盛会，它将汇聚前沿理念与实践。一起来关注这场盛会，探索人机协作的无限可能。

文章转载：彩虹BOOK，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/NnbeU9qOAmNrFLOQLy4pSg

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 黄春燕

终审 | 苏 菁

点这里，学习更多设计知识！