从聊天到监督

一句话理解：Chat UX 围绕“一问一答”，Agent UX 围绕“委派—监督—验收”；界面的核心对象从一条条消息变成了一个个任务，用户的角色从提问者变成了监督者。

很多团队做 Agent 的第一版界面，都是在聊天框上加功能：Agent 的每一步都变成一条消息往下滚，需要审批时插入一张卡片，最终报告也是一条长消息。演示时没问题，真实使用时问题接连出现：

• 站点负责人想知道“这次诊断做到哪一步了”，只能往上翻几十条消息自己拼。
• 需要审批的卡片被后续消息顶上去，Agent 在那里等了一个小时没人发现。
• 关掉页面再回来，看不出哪些事已经做完、哪些还在进行。
• 最终的诊断报告混在对话里，没法直接转发给开发团队或贴进工单。

问题的根源不是某个组件没做好，而是范式错了：聊天界面是为“对话”设计的，而用户在使用 Agent 时，实际上是在 委派并监督一项工作。

两种范式的根本差异

维度	Chat UX	Agent UX
核心对象	消息	任务
时间尺度	秒级，一问一答	分钟到小时，可能跨越多次会话
用户角色	提问者，读答案	委派者、监督者、验收者
用户注意力	全程在场	间歇性在场，大部分时间在做别的事
状态	基本无状态，靠对话历史	有明确状态：计划中、执行中、等待审批、已完成、失败
输出	一段文本	被执行的动作与产物：工单、报告、代码、邮件
成功标准	回答是否有帮助	任务是否真正完成，结果是否被验证
出错代价	答错了，用户不采纳即可	做错了，可能已经发出邮件、改了数据

图 1 把两种范式的界面重心画在一起：

最后一行决定了一切：因为 Agent 会行动，用户需要的不是更好的“回答展示”，而是 可控的信任——能看清它要做什么、正在做什么、做得对不对，并且在需要时能介入。

监督者需要看到什么

Anthropic 在《Building effective agents》中把“透明”列为构建 Agent 的三条核心原则之一，具体做法是明确展示 Agent 的规划步骤。落到界面上，一个可监督的 Agent 至少要回答六个问题：

要素	用户的问题	对应课程
目标	它理解的任务是什么？和我想的一样吗？	本课
计划与进度	它打算怎么做？做到哪一步了？	计划与进度
证据	结论的依据是什么？数据从哪来？	证据与可解释
审批与接管	哪些事需要我点头？我能中途插手吗？	审批与接管
产物	最终交付了什么？我能直接用吗？	以产物为中心
异常	出问题了吗？现在安全吗？我要做什么？	异步任务体验、失败的呈现

把六个要素放回一个完整的 Agent 界面里，就是本模块的全景（图 2）：

一个任务执行页的线框

下面是「SEO 诊断 Agent」任务执行页的线框（图 3），后面几课会逐个区域展开：

这个布局体现了几个原则：

• 任务是一等公民。 左侧是任务列表，不是聊天记录列表；“需要我处理”是默认最重要的筛选。
• 状态一眼可见。 顶部状态、步骤图标、审批条，用户 5 秒内能判断“要不要我做点什么”。
• 过程与产物分栏。 左边看过程，右边看成果，而不是混在一条消息流里。
• 原始记录可达但不打扰。 完整的运行记录（Trace）通过链接进入，默认不展开。
• 对话仍然存在，但退居次要。 用户仍然可以用自然语言补充要求，但对话服务于任务，而不是界面的主体。

注意力：只在关键时刻打扰用户

监督者的注意力是最稀缺的资源。界面设计要把注意力引向三类高价值时刻，其余信息默认折叠：

1. 委派时：确认目标和计划是否正确，这是纠错成本最低的时刻。
2. 关键决策点：高风险操作的审批、Agent 无法判断需要人来选择的分支。
3. 验收时：检查产物和证据，决定是否交付。

与此相对，执行中的每一次工具调用、每一段中间推理，大多数用户并不需要实时看到。把它们全部推到用户眼前，结果不是“更透明”，而是用户很快学会忽略一切，包括真正重要的审批提醒。

图 4 把这三个时刻放在一条任务时间线上：

这背后是一个 信任校准 的问题：界面既要避免用户过度信任（不看就批准），也要避免信任不足（每一步都要亲自复查，那还不如自己做）。微软研究院在 CHI 2019 发表的《Guidelines for Human-AI Interaction》中总结了 18 条 AI 系统设计准则，按“初次使用、交互过程中、出错时、长期使用”四个阶段组织，其中不少条目（例如说明系统能做什么、说明系统为什么这样做、支持高效地纠正）可以直接作为 Agent 界面评审的参考。

自主性等级决定界面形态

同一个 Agent，不同的 自主性等级 对应不同的界面重心：

自主性	界面重心	SEO 诊断例子
只给建议	建议卡片 + 一键采纳	“建议通知负责人，点击生成诊断简报”
确认后执行	计划预览 + 逐项审批	发送简报邮件前必须点击批准
执行后汇报	执行记录 + 撤销入口	已自动发送简报，5 分钟内可撤回
只在例外时通知	任务中心 + 异常提醒	平时自动巡检，只有核心页面流量骤降时通知负责人

随着用户信任增加，同一个用户也可能逐步提高自主性。界面应该支持这种迁移，例如“以后同类简报无需审批”。

常见误区

• “Agent 产品就是更聪明的聊天机器人，界面沿用聊天框就行。” 聊天框适合作为输入方式之一，但承载不了任务状态、审批和产物。
• “越透明越好，把每一步都实时展示出来。” 信息过载会让关键信息被淹没。透明应该是分层的：默认摘要，按需展开。
• “用户会一直盯着看。” 实际上用户委派完就会去做别的事。界面必须让人放心离开，回来时一眼看懂发生了什么。

设计要点

• 界面的核心对象是任务，每个任务有明确的目标、状态、计划、产物。
• 默认视图要能在 5 秒内回答：“要不要我做点什么？”
• 过程与产物分开呈现，原始运行记录可达但默认折叠。
• 把用户注意力集中在委派、关键决策和验收三个时刻。
• 界面形态与自主性等级匹配，并支持用户逐步提高自主性。
• 聊天输入保留为补充指令的方式，而不是界面主体。

练习

选一个你常用的 Agent 产品（例如 Claude Code、Codex 或任意办公 Agent，30–45 分钟）：

1. 用本课的六要素（目标、计划与进度、证据、审批与接管、产物、异常）逐项检查它的界面，每项打分 1–3 分并写出理由。
2. 找出得分最低的一项，画一个改进后的文字线框。
3. 为「SEO 诊断 Agent」画出任务列表页的线框：列出每个任务需要显示的字段，以及默认的排序与筛选方式。

延伸阅读

• Anthropic：Building effective agents
• Microsoft HAX Toolkit：Guidelines for Human-AI Interaction

下一步

六个要素中，用户最先看到的是计划和进度。下一课「计划与进度」讲如何让用户随时知道 Agent 要做什么、做到哪了。