ai-loading-ux
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAI Loading UX
AI加载用户体验（AI Loading UX）
Design patterns for showing users what's happening while waiting for AI output.
为用户展示AI输出生成过程的设计模式。
Decision Framework
决策框架
First, identify which pattern category applies:
| User is waiting for... | Pattern Category | Key Goal |
|---|---|---|
| AI reasoning/thinking | Reasoning Display | Build trust through transparency |
| Multi-step task completion | Progress Steps | Show advancement toward goal |
| Content generation/streaming | Streaming States | Reduce perceived wait time |
| Background processing | Status Indicators | Confirm work is happening |
首先，确定适用的模式类别：
| 用户正在等待... | 模式类别 | 核心目标 |
|---|---|---|
| AI推理/思考 | 推理展示 | 通过透明度建立信任 |
| 多步骤任务完成 | 进度步骤 | 展示向目标推进的过程 |
| 内容生成/流式输出 | 流式状态 | 减少感知等待时间 |
| 后台处理 | 状态指示器 | 确认任务正在进行 |
Core Principles
核心原则
1. The Elevator Mirror Effect
1. 电梯镜子效应
Users waiting for AI feel time pass slower. Give them something to watch/read—animated indicators reduce perceived wait time even when actual time is unchanged.
等待AI响应时，用户会感觉时间过得更慢。为他们提供可观看/阅读的内容——动画指示器即使在实际等待时间不变的情况下，也能减少感知等待时长。
2. Progressive Disclosure
2. 渐进式披露
- Show condensed indicator by default ("Thinking...")
- Make details available but not forced
- Let curious users expand; don't burden everyone
- 默认显示简洁的指示器（“思考中...”）
- 提供详情但不强制展示
- 让有需求的用户可展开查看，不增加所有用户的认知负担
3. More Transparency ≠ Better UX
3. 并非透明度越高，用户体验越好
Balance visibility with cognitive load. Users want answers, not reasoning—but they want to trust the answer came from good reasoning.
平衡可见性与认知负荷。用户想要的是答案，而非推理过程——但他们希望信任答案来自合理的推理。
4. Signal Completion Clearly
4. 清晰标记完成状态
Users must know when processing ends. Ambiguous end states frustrate users.
用户必须知晓处理何时结束。模糊的结束状态会令用户感到沮丧。
Pattern Quick Reference
模式快速参考
Reasoning Display (Chain-of-Thought)
推理展示（思维链）
When AI is "thinking" through a problem. See references/reasoning-patterns.md.
Best approach (Claude-style):
- Hidden by default, expandable on demand
- Structured bullets when expanded
- Time counter or progress indicator
- Clear "done" state
Anti-patterns:
- Wall of streaming text (overwhelming)
- Scrolling too fast to read
- No expand option (feels opaque)
- No clear end state
当AI正在“思考”解决问题时使用。详见references/reasoning-patterns.md。
最佳实践（Claude风格）：
- 默认隐藏，按需可展开
- 展开后显示结构化项目符号
- 时间计数器或进度指示器
- 清晰的“完成”状态
反模式：
- 流式输出的大段文本（信息过载）
- 滚动速度过快无法阅读
- 无展开选项（显得不透明）
- 无清晰的结束状态
Progress Steps
进度步骤
When AI completes sequential tasks. See references/progress-patterns.md.
Best approach:
- Show current step + total steps
- Mark completed steps visually
- Show what's actively happening
- Allow step-level details on expand
当AI完成顺序任务时使用。详见references/progress-patterns.md。
最佳实践：
- 显示当前步骤+总步骤数
- 用视觉标记已完成的步骤
- 展示当前正在执行的操作
- 允许展开查看步骤级详情
Streaming States
流式状态
When content generates token-by-token. See references/streaming-patterns.md.
Best approach:
- Typing cursor or text animation
- Smooth token appearance (not jarring)
- Skeleton for expected content shape
- "Stop generating" escape hatch
当内容逐token生成时使用。详见references/streaming-patterns.md。
最佳实践：
- 打字光标或文本动画
- 平滑的token出现效果（不突兀）
- 预期内容形状的占位骨架
- “停止生成”退出选项
Status Indicators
状态指示器
When background work happens. See references/status-patterns.md.
Best approach:
- Subtle but visible animation
- Brief description of current action
- Don't block user from other actions
- Notify on completion
当后台处理任务时使用。详见references/status-patterns.md。
最佳实践：
- 微妙但可见的动画
- 对当前操作的简短描述
- 不阻碍用户执行其他操作
- 完成时发送通知
Implementation Checklist
实施检查清单
When implementing any AI loading state:
- Identify pattern category from decision framework above
- Choose visibility level: always visible, expandable, or minimal
- Add motion: animation reduces perceived wait (but keep it subtle)
- Show progress: time elapsed, steps completed, or content streamed
- Signal completion: clear visual/state change when done
- Provide escape: stop/cancel for long operations
- Handle errors: don't leave user in permanent loading state
- Test on slow connections: ensure graceful degradation
实施任何AI加载状态时：
- 根据上述决策框架确定模式类别
- 选择可见性级别：始终可见、可展开或极简显示
- 添加动效：动画可减少感知等待时间（但需保持微妙）
- 展示进度：已用时间、完成的步骤数或已流式输出的内容
- 标记完成状态：完成时显示清晰的视觉/状态变化
- 提供退出选项：针对长时间操作的停止/取消功能
- 处理错误：不要让用户一直处于加载状态
- 在慢速网络下测试：确保体验优雅降级
Product Comparisons (Reference)
产品对比（参考）
| Product | Approach | Strength | Weakness |
|---|---|---|---|
| Claude | Hidden reasoning, expandable, structured bullets | Low cognitive load | Can feel opaque |
| ChatGPT | Brief labels, auto-collapse | Unobtrusive | Less transparent |
| DeepSeek | Full streaming reasoning | Maximum transparency | Overwhelming |
| Gemini | User-scrolled, numbered steps | Clear structure | Unclear completion |
| 产品 | 实现方式 | 优势 | 劣势 |
|---|---|---|---|
| Claude | 隐藏推理过程，可展开，结构化项目符号 | 认知负荷低 | 可能显得不够透明 |
| ChatGPT | 简短标签，自动折叠 | 不突兀 | 透明度较低 |
| DeepSeek | 完整流式推理展示 | 透明度最高 | 信息过载 |
| Gemini | 用户滚动式，编号步骤 | 结构清晰 | 完成状态不明确 |
Usage
使用说明
Read the relevant reference file for your pattern category:
- references/reasoning-patterns.md - Chain-of-thought, thinking indicators
- references/progress-patterns.md - Step sequences, task completion
- references/streaming-patterns.md - Token streaming, content generation
- references/status-patterns.md - Background processing, polling states
根据你的模式类别阅读相关参考文档：
- references/reasoning-patterns.md - 思维链、思考指示器
- references/progress-patterns.md - 步骤序列、任务完成
- references/streaming-patterns.md - Token流式输出、内容生成
- references/status-patterns.md - 后台处理、轮询状态