AI 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 - 后台处理、轮询状态

ai-loading-ux

Original

Translation

AI Loading UX

AI加载用户体验（AI Loading UX）

Decision Framework

决策框架

Core Principles

核心原则

1. The Elevator Mirror Effect

1. 电梯镜子效应

2. Progressive Disclosure

2. 渐进式披露

3. More Transparency ≠ Better UX

3. 并非透明度越高，用户体验越好

4. Signal Completion Clearly

4. 清晰标记完成状态

Pattern Quick Reference

模式快速参考

Reasoning Display (Chain-of-Thought)

推理展示（思维链）

Progress Steps

进度步骤

Streaming States

流式状态

Status Indicators

状态指示器

Implementation Checklist

实施检查清单

Product Comparisons (Reference)

产品对比（参考）

Usage

使用说明