PATH 03/LESSON 05/18 分钟
设计可控制的产品界面
把系统状态、证据、确认和恢复交还给用户。
课程全目录 · 选择章节
本课学习目标
- • 状态 — 当前进行到哪里
- • 理由 — 展示证据而非思维链
- • 控制 — 暂停、确认或取消
- • 恢复 — 重试或改变路径
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
Agent 界面需要同时回答三个问题：系统正在做什么、为什么这样做、用户现在可以做什么。
来源、工具状态和确认范围应该靠近相关结果，而不是藏在单独的调试页面里。
02 / 心智模型
状态
当前进行到哪里
理由
展示证据而非思维链
控制
暂停、确认或取消
恢复
重试或改变路径
03 / 代码骨架
TYPESCRIPT / CONCEPT
<TaskPanel
status={run.status}
evidence={run.citations}
pendingAction={run.confirmation}
onConfirm={confirm}
onCancel={cancel}
/>这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
用户看见一段正确答案，却不知道依据来自哪篇文档，也不知道“继续”按钮会不会发送消息。技术上有答案，体验上仍缺少控制感。
- 01
让状态可见
检索中、验证中、等待确认和失败应有不同反馈。不要用持续旋转的加载符掩盖具体阶段。
- 02
让证据可回看
在结论旁放来源标题、版本和可展开片段。无来源的推断要标出不确定性。
- 03
让动作可撤销或确认
写入前展示具体影响和预览；执行后明确状态。失败时提供重试、编辑或退出，而不是困在死路里。
05 / 动手做
用自己的产物检验理解
为证据助手画三张屏幕草图：检索中、显示答案与证据、等待发送确认。标出每张屏幕的主动作。
完成时检查
- 答案能回到具体来源
- 确认按钮说明实际后果
- 失败状态有可执行的下一步
自动保存在当前浏览器，不会同步到账户。
06 / 检查点