ai-loading-ux

AI 加载体验

展示等待 AI 输出时的进度，让用户了解当前状态的设计模式。

决策框架

首先，确定适用的模式类别：

用户正在等待……	模式类别	关键目标
AI 推理／思考	推理展示	通过透明度建立信任
多步骤任务完成	进度步骤	展示朝目标推进的进度
内容生成／流式输出	流式状态	缩短感知等待时间
后台处理	状态指示器	确认任务正在进行

核心原则

1. 电梯镜效应

等待 AI 时，用户会觉得时间过得更慢。给他们一些可以观看或阅读的内容——动画指示器能缩短感知等待时间，即使实际耗时不变。

2. 渐进式披露

• 默认显示精简指示器（“正在思考……”）
• 提供详情供用户查看，但不强制展示
• 允许感兴趣的用户展开查看；不要给所有人增加负担

3. 透明度越高 ≠ 用户体验越好

用户想要答案，而不是推理过程——但他们希望相信答案经过了充分推理。

4. 明确提示完成状态

用户必须知道处理何时结束。模糊的结束状态会让用户感到沮丧。

模式速查

推理展示（思维链）

适用于 AI 正在“思考”问题的场景。参见 references/reasoning-patterns.md。

最佳做法（Claude 风格）：

• 默认隐藏，按需展开
• 展开后以结构化要点呈现
• 显示计时器或进度指示器
• 明确显示“已完成”状态

反模式：

• 大段流式文本（令人难以应对）
• 滚动速度过快，来不及阅读
• 无法展开查看（让人感觉不透明）
• 没有明确的结束状态

进度步骤

适用于 AI 按顺序完成任务的场景。参见 references/progress-patterns.md。

最佳做法：

• 显示当前步骤和总步骤数
• 以视觉方式标记已完成的步骤
• 显示当前正在进行的操作
• 允许展开查看各步骤的详情

流式状态

适用于内容逐个 token 生成的场景。参见 references/streaming-patterns.md。

最佳做法：

• 使用打字光标或文本动画
• 让 token 平滑出现，避免突兀
• 根据预期内容形态显示骨架屏
• 提供“停止生成”的退出选项

状态指示器

适用于后台任务正在执行的场景。参见 references/status-patterns.md。

最佳做法：

• 动画低调但清晰可见
• 简要描述当前操作
• 不要阻止用户执行其他操作
• 完成时通知用户

实施检查清单

实现任何 AI 加载状态时：

1. 确定模式类别：参照上方的决策框架
2. 选择可见级别：始终显示、可展开或精简显示
3. 加入动效：动画能缩短感知等待时间，但应保持低调
4. 显示进度：已用时间、已完成步骤或已流式输出的内容
5. 提示完成状态：完成时明确改变视觉或状态
6. 提供退出选项：为耗时较长的操作提供停止／取消功能
7. 处理错误：不要让用户一直停留在加载状态
8. 在慢速网络连接下测试：确保能够平稳降级

产品对比（参考）

产品	方式	优势	劣势
Claude	隐藏推理过程，可展开查看，以结构化要点呈现	认知负担低	可能让人感觉不透明
ChatGPT	简短标签，自动折叠	不显突兀	透明度较低
DeepSeek	完整流式展示推理过程	透明度最高	令人难以应对
Gemini	用户滚动查看，使用编号步骤	结构清晰	完成状态不明确

用法

阅读与你的模式类别相关的参考文件：

• references/reasoning-patterns.md - 思维链、思考指示器
• references/progress-patterns.md - 步骤序列、任务完成
• references/streaming-patterns.md - Token 流式传输、内容生成
• references/status-patterns.md - 后台处理、轮询状态