实用的人工智能透明度界面设计模式（第二部分）
TL;DR · AI 摘要
文章提供了四种实用的人工智能透明度设计模式，旨在帮助工程师通过设计提升用户对AI系统的信任。
核心要点
- 介绍了四种提高AI系统透明度的设计模式。
- 强调了设计模式对于增强用户体验的重要性。
- 提供了具体的案例来说明这些设计模式的应用效果。
结构提纲
按章节快速跳转。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- AI透明度设计模式
- 可视化决策过程
- 工具：图表、流程图
- 提供反馈机制
- 功能：评分、评论
- 透明度标签
- 用途：告知用户AI驱动的功能
- 用户参与设计
- 方式：共创、测试
金句 / Highlights
值得收藏与分享的关键句。
通过可视化工具展示AI决策过程，可以帮助用户更好地理解AI是如何做出决策的。
透明度标签可以清晰地告诉用户哪些功能是由AI驱动的。
用户参与设计过程可以显著增加他们对AI系统的信任感。
实用的人工智能透明度界面模式（第二部分）——Smashing Magazine
#### 关于作者
Victor Yocco 博士是一名 UX 研究员，也是《设计心理学》（Design for the Mind）一书的作者。该书由 Manning 出版于 2016 年，以及即将出版的《设计自主人工智能体验……》（Designing Agentic AI Experiences …）一书。更多关于 Victor 的信息，请参阅 Victor 的个人页面。
#### 电子邮件通讯
您的（Smashing）电子邮件
受 182,000 多人信赖。
-  _观看用户测试直播_
-  _如何衡量用户体验和设计影响，8 小时视频 + UX 培训_
-  _为 Angular、React 和 Vue 创建自定义 Web 表单。您的后端._
实用的人工智能透明度界面模式（第二部分）
分享到：
- 
- 
- 
- 
为什么传统的加载模式如旋转图标在自主型AI体验中会失败，以及如何通过展示系统的过程、状态和决策来提高透明度并建立用户信任。
在这一系列文章的第一部分中，我们讨论了决策节点审核。我们映射了AI系统的内部工作流程，以确定它做出基于概率的决策的确切时刻。这告诉我们系统何时需要向用户透明化。接下来的问题是，如何分享这些信息。
你已经准备好透明度矩阵了。你知道哪些后台API调用需要可见的状态更新。工程师们也已经接受了技术方面的支持。下一步是设计这些更新的视觉容器。
我们面临一个遗留问题。三十年来，界面设计师一直依赖单一模式来处理延迟：旋转图标。旋转的轮子、跳动的图标、进度条。这些模式传达了一种特定的技术现实。它们告诉用户系统正在获取数据。延迟是由带宽或文件大小引起的。
自主型AI代理引入了一种新的等待时间。当代理暂停二十秒时，它不仅仅是在下载某些东西；它还在思考。它在计算最佳步骤、权衡选项，并生成您请求的内容。
如果我们使用基本的旋转图标来表示这种“思考时间”，用户会感到困惑和焦虑。他们看着循环动画，无法判断系统是否停滞或崩溃。他们不知道代理是否在处理一项非常复杂的任务，还是仅仅失败了。
为了建立用户信任，我们需要将这种等待时间转化为一个安抚用户的时刻。而不仅仅是被动的“某事正在进行中”，我们需要传达一种主动的信息：“这是我在解决您的问题时具体采取的步骤。”
清晰的状态更新写作
我们常常认为透明度是一个视觉设计问题，但实际上它更多关乎文字的选择。简洁明了的解释（微文案）能够建立信任，区分可靠的AI与那些感觉像是出了故障的AI。
我们需要摒弃通用的占位符如“加载”或“处理中”。这些词汇是静态软件时代的产物。相反，我们必须使用一种具体的公式来构建状态更新，该公式反映了系统的自主性。让我们停止使用模糊的词语如“加载”或“处理中”。这些术语属于过去，那时软件简单且静态。相反，我们应该创建清晰的状态更新，明确告诉用户系统实际在做什么，并使系统的操作透明化。
设想一下，您正在部署一种自主型AI，它将在被提示后帮助团队成员整理日历并计划定期会议。
当AI显示“检查可用性”的消息时，如果不确定持续时间，用户往往会感到迷茫，因为这没有提供足够的信息。虽然用户明白AI正在查看日历，但他们不知道是哪位用户的日历，也不清楚在此过程中还涉及了哪些步骤（之前或之后），或者AI是否记得调度请求中的人员和目的。等待最终结果可能会是一种紧张不安的经历，就像在期待一个礼物时，怀疑它可能是个恶作剧一样。
Perplexity AI 提供了一个很好的状态更新示例。图1显示了当用户提问时，界面实时展示了它正在做的事情。您可以看到活动列表随着完成情况不断更新。用户无需猜测AI的工作过程。
图1：Perplexity AI 是一个很好的例子，展示了给用户看AI的状态，包括它用来搜索网络的术语。（图片来源：SaaSUI）（大图预览）
加入我们的[Smashing Workshops](https://www.smashingconf.com/online-workshops/），涵盖前端、设计及用户体验等领域，获得实用成果，参与实时课程，观看视频录制，并享受友好的问答环节。与Brad Frost、Stéph Walter及其他众多讲师一起学习。
自主型更新公式
为了给人们提供有用的状态更新，我们需要将系统正在做的事情与其为什么要做这些事情联系起来。以我们的调度代理为例，系统应该将等待期分解为至少四个清晰且独立的步骤。
- 首先，界面显示“检查您的日历以找到与[姓名]的定期周四会议的时间段”。
- 然后，它更新为：“核对[姓名]的日程安排以确认会议时间”。
- 接下来，它可能会显示：“同步[姓名]的日程安排以确保会议时间定于[日期和时间]”。
- 最后，在完成时，代理可能会告知任务已完成，并请求用户检查电子邮件以确认已与定期会议小组共享的邀请。
这种沟通过程使技术过程与用户的实际生活相联系。
让人工智能的进步易于理解归结为一个三部分结构：一个强大的动词，人工智能正在处理的具体事项（具体项目），以及它必须遵循的任何限制或规则。
设想一个人工智能帮助您预订旅行。一个弱而无用的更新只是：“搜索航班……”
相比之下，更好的更新使用了以下公式：
- 动词：扫描
- 具体项目：汉莎航空和联合航空的价格
- 限制/规则：寻找低于600美元的选项。
这种方法清楚地向用户表明，人工智能理解了他们的请求，并且正在按照设定的边界工作。
图 2：代理型人工智能状态更新的构成。(大图预览)
匹配风险矩阵中的语气
人工智能应该像人一样说话还是像机器人一样行动？正确的答案取决于任务的重要性，我们可以通过决策节点审计中的影响/风险矩阵来确定这一点。
对于简单的低风险任务，友好的对话语气效果最佳。例如，一个调度助手可以说它正在检查您的日历以找到最佳时间。这为用户提供了一种舒适轻松的体验。
然而，高风险的任务需要清晰且机械的准确性。如果人工智能正在管理一笔大的财务转账或复杂的数据库迁移，用户不想面对一个玩味性的界面；他们需要精确的信息。屏幕上显示“认真思考您的资金”可能会引起恐慌。相反，界面应使用简洁的语言，如“验证账户路由号码”。通过根据风险水平调整人工智能的“个性”，我们为用户提供他们在那一刻所需的确切体验。虽然影响/风险矩阵提供了必要的起点，但最终决定适当的人工智能声音和语气的是严格的用户研究。
没有任何一套规则能够预测出适用于所有用户群体或所有情况的确切词语或语气。这就是为什么实际的研究至关重要。您需要：
- [运行 A/B 测试](https://medium.com/@alienoghli/the-essential-guide-to-a-b-testing-a84b853c16e0) 来测试人工智能以不同方式与人交流的不同方法。
- [进行可用性测试](https://uxplanet.org/usability-testing-the-complete-guide-e162898f68db) 来观察用户对系统消息的情感反应。
- [进行访谈](https://ixdf.org/literature/article/how-to-conduct-user-interviews) 来真正了解用户期望的人工智能在开放性方面的表现。
这种研究确保了人工智能的“个性”在特定上下文中对实际使用该系统的人员来说既舒适又合适。
我们现在已经讨论了“做什么”——关键的微文案、清晰的动作词汇以及必要的限制，这些使得人工智能状态更新诚实且信息丰富。但是仅靠文字是不够的。隐藏在糟糕界面中的完美句子仍然会失败。
接下来的挑战是“如何”——设计传递该消息的物理交付系统。可以将状态更新公式视为引擎，而界面模式则是汽车。强大的引擎需要一个可靠且设计良好的底盘来承载它前行。
界面模式：代理型的图书馆
一旦我们有了合适的词语，就需要合适的容器。关键是将消息的权重与模式的可见度匹配起来。一个微不足道的后台任务（比如代理安静地整理您的文件）不需要大声闪烁的横幅。这样的消息最好以微妙的方式传达。一个涉及多步流程的高风险任务（比如转账资金）可能需要一个更坚固的容器，迫使用户关注。
通过创建这些模式的库，我们确保在正确的时间提供适当的透明度级别，将等待的焦虑转变为有信息量的信心时刻。让我们回顾一些常见的关键模式。
活动面包屑：人工智能在后台工作
对于那些人工智能在后台默默处理的低重要性任务，我们需要一种方式来向用户展示它正在工作，同时避免不断打扰他们。我们可以称之为活动面包屑。
想象一下一个电子邮件应用程序，其中人工智能为您起草回复。您不想看到烦人的弹出消息。相反，一个小而微妙的状态指示器可以在应用程序的边框或菜单区域内脉动。
解决方案不能仅仅依赖静态图标。动态面包屑会平滑地过渡到不同的文本更新。它可能会从“阅读邮件”变为“撰写回复”，再变为“检查语气”。如果你想要查看它的进度，它会提供一种安静的保证，表明任务正在执行中，但不会要求你立即关注。
图 3：一个微妙的动态面包屑可以在后台为低优先级任务提供保证，显示 AI 正在工作，而不会要求持续的关注。（大图预览：）
动态待办事项清单
在处理复杂的高风险任务时——比如处理复杂的金融交易或迁移庞大的复杂数据集——我们建议使用 动态待办事项清单（如图 3 所示）。
这种模式为用户提供了一个强大的锚点，提供了关于任务进展的清晰性和信心。与简单的进度条不同，动态待办事项清单列出了 AI 代理将要采取的每一个计划步骤。它清楚地突出显示当前正在进行的步骤，标记之前的步骤已完成，并列出未来的行动项为待办事项。
例如：
- 第一步：验证账户余额 [已完成]。
- 第二步：转换货币 [处理中]。
- 第三步：转账 [待办]。
动态待办事项清单相比传统的进度条具有显著优势，因为它能够巧妙地管理不可预测的时间。如果货币转换（第二步）意外需要多出十秒的时间，用户不会感到突然的焦虑或恐慌。他们可以完全了解系统的具体位置，知道延迟发生在“转换货币”步骤中。因为他们认识到这是一个可能复杂的操作，所以他们自然会更加耐心并信任系统正在进行的工作。
图 4：Devin（AI）向用户展示其已完成的任务以及剩余的任务动态待办事项清单。（图片来源：Devin）（大图预览：）
该模式本身是一个引人注目的 UI 设想，但设计师必须记住，其实现将任务转化为全栈设计需求。与简单的加载标志不同，动态待办事项清单需要一个强大的前端状态管理系统来监听步骤完成事件，这些事件通常由后端 webhook 结构触发。这确保了界面始终反映代理在工作流程中的实时位置。
图 5：动态待办事项清单非常适合展示 AI 的透明度。它清楚地显示了用户 AI 已经完成的步骤、目前正在执行的步骤以及计划接下来要做的步骤。（大图预览：）
思考切换按钮
对于那些有更高信息需求或更高透明度需求的用户来说，简单的总结可能不足以让他们信任系统；他们希望看到系统的原始处理过程。为此，我们设计了 思考切换按钮。
这是一种简单的渐进式披露 UI 控制，类似于箭头或“查看日志”按钮，允许用户展开友好的状态更新为原始终端视图。它显示了 AI 代理的清理逻辑日志，例如：
- 查询 API 端点 /v2/search；
- 响应收到：200 OK；
- 过滤结果，相关性评分 > 0.8。
许多人都永远不会打开这个视图。然而，对于需要深入透明度的用户来说，这个切换按钮的存在本身就是一种信任信号。它使用户确信系统没有隐藏任何东西。
请注意，这种深度透明度伴随着重要的技术风险。即使是对你的最专业用户群体，你也必须在显示前对这些原始日志进行清理和抽象化。这一步骤是不可谈判的，以防止意外暴露专有业务逻辑、内部数据结构名称或安全令牌，这些都可能被利用。这一过程确保了通过诚实而非安全漏洞来建立信任。
这样，你只需介入修复失败的部分，例如亲自预订车辆，同时保留代理已经完成的优质工作。
图 6：在设计代理型 AI 体验的内容时，我们需要更细致地定义已完成任务的比例。(大图预览)
分离工具
当一个 AI 系统没有按预期运行时，明确了解其失败的真实原因至关重要。用户常常错误地将问题归咎于 AI 本身，而这些问题实际上是由于 AI 所依赖的外部服务或工具出现故障导致的。
例如，假设一个虚拟助手试图查看你的日程安排，但与 Google 日历 API 的连接中断了。错误消息不应该让助手看起来像是没有完成任务。
- 不太有帮助：“我无法检查你的日历。”（这暗示助手无能。）
- 更有帮助且诚实：“Google 日历连接未响应。我将在 30 秒后自动重试。”
第一条消息令人沮丧，因为它让人觉得 AI 失败了。第二条消息则更加清晰。它解释说，AI 是有能力的，但由于其无法控制的外部工具出现故障，才导致了问题。这种区分非常重要，因为它可以防止用户对 AI 丧失信心，即使事情出现了问题。
审计追踪：事后信任
实时透明度是短暂的。如果用户离开办公桌，而代理正在工作，他们就会错过动态检查表。他们回到完成的屏幕，如果结果看起来奇怪，他们就没有办法验证工作过程。这就是为什么每个代理型工作流都需要一个持久的审计追踪。
我们需要设计一个“显示工作”的交互。在最终结果屏幕上，提供一个链接或历史记录日志，允许用户回放决策逻辑。
- 查看价格是如何计算出来的；
- 查看搜索来源。
这份收据是最终的安全网。它允许用户检查输出的有效性。即使他们从未点击过，收据的存在也向用户表明系统对其工作负责。
图 7：审计追踪设计模式提供了所需的透明度，以向用户展示结果是如何实现的。(大图预览)
ChatGPT 提供了一个例子，说明现在为用户提供一种简单的方法来审核 AI 使用的信息可能会引起困惑或用户不满。ChatGPT 记住了你的一切，就像一个文件柜悄悄地积累了关于你所说的一切的笔记，然后在未来的对话中使用这些笔记而不告诉你。这被称为记忆。根据开发者 Simon Willison 的说法，在 2025 年 4 月，这些记忆会自动输入到每一个新对话中。
当时 ChatGPT 的记忆问题在于，你无法看到它记住的内容，或者它何时使用这些信息，以及它是如何影响你的回复的。没有日志，没有时间线，也没有简单的语言列表来说明“这是 AI 对你的决定”。
唯一的方法是知道一个特定的提示技巧——本质上是让模型将其自己的隐藏指令引用给你。大多数用户永远不会发现这一点。他们只会注意到，正如 Willison 所指出的那样，ChatGPT 在生成的一张图片背景中放置了一个“半月湾”标志，因为它默默地从之前的对话中交叉引用了用户的地理位置。（图 8）这正是缺乏透明度（轻松审计记忆的能力）伪装成个性化的情况。你需要同时提供这两种功能。
图 8：Willison 要求 ChatGPT 将狗打扮成鹈鹕装，但他并没有要求放置“半月湾”标志。这证明了 ChatGPT 跟踪用户信息而不让用户清楚地访问存储的信息。（图片来源：Simon Willison 的博客）(大图预览)
审计追踪模式是解决 ChatGPT 所展示的记忆审计问题的终极解决方案。它是四个核心设计解决方案之一，这些解决方案共同构成了提高 AI 透明度的选项库。
以下是本文讨论的关键界面模式的快速总结，旨在将 AI 等待时间从焦虑的时刻转变为建立用户信心的机会：
| 模式 | 最佳应用场景 | 用户的焦虑 | 信任信号 | | --- | --- | --- | --- | | 生动的面包屑导航 | 轻量级的后台任务（例如撰写邮件、整理文件）。 | 系统是否卡顿或冻结？ | 我正在活动，但不会打扰您。 | | 动态检查单 | 具有可变时间周期的高风险工作流程（例如财务转账、预订旅行）。 | 是不是卡住了？哪个步骤耗时过长？ | 我有一个计划，并且正在执行步骤2。 | | 思考切换按钮 | 专家工具或复杂的数据分析（例如代码生成、市场研究）。 | 这个系统是在胡言乱语还是使用真实数据？ | 我没有什么可隐瞒的；这是我的原始日志。 | | 审计追踪 | 任何任务完成后的回顾（例如最终报告、已完成预订）。 | 我如何知道这个结果是准确的？ | 这里是验证工作的收据。 |
_表1：四种增强透明度的设计模式_
注意力的现实：当用户忽略界面
即使是最完美的设计的检查单或最清晰的状态消息也可能被许多用户忽略。
当人们处理大量任务时，尤其是专业人士，他们往往会忽略界面。想象一下一个每天要创建五十份报价的保险核保人——他们并不关注进度条。他们点击“生成”，切换标签页回复邮件，直到任务完成才回来。
我在与这些专家的研究中发现，他们会根据最终结果来判断系统。他们对正确答案有一个大致的概念。如果销售人员预计保费在500到600美元之间，而系统返回的是550美元，他们就会立即接受这个结果，建立起信任。
这些专家告诉我，随着时间的推移，当AI继续提供他们认为准确的输出时，使用率会增加，他们将节省比手动报价更多的时间。本质上，系统现在被视为一种高效的加速器，可以加快原本单调但必不可少的任务。
但如果系统返回的是900美元，用户就会停止。输出不符合预期，这是一个他们必须解决的问题。在那一刻，用户切换了标签页，错过了实时弹出的关于高风险附加费的小解释。他们没有看到触发的具体规则。如果这些解释随着进度条消失，用户就无法理解期望与结果之间的差异。他们当然不会再次运行查询只是为了观看动画播放。
他们将手动重新计算报价，实际上将AI的结果视为无用，并开始完全重新构建他们的努力。这种手动重算感觉像是浪费时间，这进一步削弱了他们对工具的信心。一旦发生这种情况，用户不再关心系统为什么选择了900美元；他们专注于验证或否定系统的结果与自己信任的方法是否一致。这种缺乏透明度，尤其是在意见不合的时候，是采用和持续使用的主要障碍。审计追踪允许我们提供持久的透明度，并成为防止AI创造更多工作的机制。
这一点在交付企业级AI工具时尤为重要。如果工具提供的结果不符合预期，你通常很难再获得一次机会。如果用户必须花费十分钟去调查为什么AI给出了那个数字，他们就会停止使用AI。
可预测性、可靠性和理解力是产品的本质
我们不是在制造魔术。魔术依赖于误导和隐藏的机制。我们是在建立同事。
想想一个好的同事，他们会让你了解他们的动态。他们会告诉你他们在做什么，哪些步骤耗时较长，以及遇到困难时的情况。这种坦诚有助于你信任他们。
我们可以将这一点应用到AI上。通过使用我们讨论的实际模式：提供具体更新、展示动态检查单、承认部分胜利并保持审计追踪，我们不再将AI视为一个神秘的黑盒子，只是需要一个漂亮的外壳。相反，我们开始将其视为一个可以依赖和管理的团队成员，这建立了信任并增强了理解力。
使用这些界面想法的主要原因是为了实现真正的透明度，超越解释AI复杂的内部运作。这里所说的透明度是指在用户需要查看时，展示AI的过程和性能。这涉及清楚地传达AI的当前状态、已知的限制以及易于跟随的决策历史。这种开放程度改变了互动方式，从单纯接受AI的行为转变为积极与其合作。它让用户能够理解为何得到某个结果，以及如何最好地介入或引导系统以获得最佳结果。
#### 在线前端与用户体验研讨会
包含实用收获、实时会话、视频录制以及友好的问答环节。
#### 50堂TypeScript课程
涵盖所有TypeScript相关内容，包括代码走查和示例。还有其他印刷书籍。
#### 浏览所有Smashing Magazine主题
- 无障碍性
- 最佳实践
- 商业
- 职业发展
- 检查清单
- CSS
- 数据可视化
- 设计
- 设计模式
- 设计系统
- 电子商务
- Figma
- 免费资源
- HTML
- Illustrator
- 灵感
- JavaScript
- 移动应用
- 性能优化
- 隐私
- React
- 响应式设计
- 总结
- 搜索引擎优化
- 排版
- 工具
- 用户界面
- 可用性
- 用户体验
- Vue
- 壁纸
- 网页设计
- 工作流程
致力于为设计社区提供高质量的内容。
由Vitaly Friedman和Sven Lennartz创立。2006–2026。
Smashing 骄傲地运行在 Netlify、TinaCMS 和 Swell 上。
字体由Latinotype提供。
[](https://smashingmagazine.com/2026/05/practical-interface-patterns-ai-transparency/#top "回到顶部")
[](https://mastodon.social/@smashingmag)