用途:AI Error States 模式帮助团队在 AI 响应失败时,可靠地解释失败原因,并提供与真实失败模式匹配的恢复路径,尤其适用于速率限制和提供商错误。
适用场景:速率限制与提供商错误、安全或策略拦截、生成过程中的网络与超时失败。
避免使用:当标准非 AI 工作流更清晰可靠时,不要添加 AI 专属 UI;不要暴露用户无法受益的高级控件;不要仅用精美视觉掩盖模型不确定性。
实现流程:先确认模式与问题和约束匹配,再从 references/pattern.md 的解剖与示例出发,选择最小可行变体;在叠加视觉打磨前应用无障碍、性能和交互护栏;用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏:确保仅用键盘即可完成操作,焦点顺序合理,保持可见焦点状态;优先使用语义元素,仅在语义不足时添加 ARIA,在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化,用 aria-describedby 或结构标题连接标签、提示与状态文本;不要仅靠颜色传达严重程度、完成或选中状态。
性能护栏:将网络延迟、token 用量和长响应客户端渲染一起预算;在提升首屏价值时流式或分块输出,但稳定布局避免抖动;跟踪长提示、模型切换和重试等昂贵状态。
常见错误:隐藏系统状态,用户无法判断模型在等待、流式输出、重试还是完成,应暴露清晰请求生命周期状态;把失败当作普通表单错误,AI 失败包括安全拦截、上下文限制、模型可用性和部分输出,应区分失败模式并给出对应恢复操作;忽略 token 与延迟预算,应从一开始就把 token、延迟和提供商约束设计进界面。
相关模式:AI Loading States、Response Feedback、Notification。完整实现细节、示例与测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/ai-intelligence/ai-error-states