随着人工智能越来越多地融入网站和应用程序体验,区分哪些地方已经实施了人工智能,哪些地方尚未实施人工智能,变得至关重要。
最初,大多数产品将人工智能作为聊天机器人引入,用户可以通过聊天机器人发起并促进与人工智能的交互。现在,产品正在将人工智能融入仪表盘、任务和搜索功能。用户不再主动体验人工智能——人工智能体验已经预先存在。
由于用户不再控制何时触发人工智能的使用,因此需要让用户了解何时向他们展示人工智能功能或内容,以确定其有效性和质量。不仅如此,《欧盟人工智能法案》(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 模式库——这正是我们所需要的(拜托!)。
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.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。