用途:为 AI 操作实现可靠的加载状态,传达请求进度、流式就绪程度和中间工作进展,适用于长时间生成、工具调用与检索、首个 token 到达前的流设置等场景。若标准非 AI 工作流更清晰可靠,则避免添加 AI 专属 UI;不要暴露用户无法受益的高级控制,也不要仅用精致视觉掩盖模型不确定性。
主要能力与实施流程:先确认该模式与问题及约束匹配,再参考 references/pattern.md 中的结构与示例,选择最小可行变体;在叠加视觉打磨前先应用无障碍、性能和交互护栏;按测试指南验证键盘、屏幕阅读器、响应式及失败场景下的行为。
无障碍护栏:键盘方面,确认操作可仅用键盘完成,焦点顺序保持逻辑,保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器方面,优先使用语义元素,仅在语义不足时补充 ARIA;在正确位置以恰当礼貌级别播报错误、加载、完成等状态变化;必要时用 aria-describedby 或结构性标题连接标签、提示与状态文本。视觉上不要仅靠颜色传达严重程度、完成或选中状态。
性能护栏:将网络延迟、token 用量与长响应客户端渲染作为整体预算考虑;在提升首值时间时可流式或分块输出,但需稳定布局避免阅读抖动;跟踪长提示、模型切换和重试等昂贵状态,以便用证据调优体验。
常见错误与修复:隐藏系统状态会让用户无法判断模型在等待、流式、重试还是已完成,应暴露清晰的请求生命周期状态并置于受影响内容附近;把失败当作普通表单错误处理会忽略安全拦截、上下文限制、模型不可用和部分输出等模式,应区分失败类型并给出对应恢复操作;忽略 token 与延迟预算会导致响应变慢、变短或变贵且无解释,应从设计之初纳入 token、延迟和提供商约束。相关模式见 https://uxpatterns.dev/patterns/ai-intelligence/streaming-response、https://uxpatterns.dev/patterns/user-feedback/loading-indicator、https://uxpatterns.dev/patterns/user-feedback/skeleton。完整实现细节、示例与测试说明见 references/pattern.md,模式页:https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states。