AI Suggestions 是一个 AI 驱动的自动补全与建议 UX 模式,属于 thedaviddias/ux-patterns-for-developers 项目。它的核心目标是在保持用户控制权的同时,为团队提供一种可靠方式来呈现 AI 生成的下一步操作、补全内容或推荐结果。
用途 该模式最适用于需要内联提示补全(inline prompt completion)的场景。相比相邻模式,它应当在不隐藏用户继续操作所需的状态、规则或恢复路径的前提下减少摩擦。
适用场景
- 内联提示补全
- 推荐下一步操作
- 编辑器与表单中的 AI 辅助
不适用场景
- 当标准非 AI 工作流更清晰、更可靠时,应避免添加 AI 专属 UI。
- 除非用户确实能从中受益,否则不要暴露高级控制项。
- 不要仅靠精致的视觉来掩盖模型的不确定性。
实现流程
- 在复制示例前,先确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的结构与示例入手,然后选择最小可行的变体。
- 在叠加视觉打磨之前,先应用无障碍、性能和交互护栏。
- 使用测试指导,在键盘、屏幕阅读器、响应式和失败场景下验证行为。
无障碍护栏 键盘交互:
- 验证 AI 建议可以仅用键盘完成操作。
- 当模式打开、更新或显示额外 UI 时,保持焦点顺序合乎逻辑。
- 保持可见的焦点状态,且在高倍缩放下仍可读。
屏幕阅读器支持:
- 优先使用语义元素,仅在语义不足时添加 ARIA。
- 在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化。
- 在有用时,用 aria-describedby 或结构化标题连接标签、提示和状态文本。
视觉无障碍:
- 不要仅依赖颜色来传达严重程度、完成或选中状态。
性能护栏
- 将网络延迟、token 用量和长响应的客户端渲染作为整体预算,而非彼此独立的关注点。
- 在能提升首次价值时间时对流式或分块内容进行优化,但要稳定布局,避免阅读时抖动。
- 跟踪长提示、模型切换和重试等昂贵状态,以便基于证据调优体验。
常见错误
-
隐藏系统状态 问题:用户无法判断模型是在等待、流式输出、重试还是已完成。 修复:暴露清晰的请求生命周期状态,并让它们保持在受影响内容附近可见。
-
把失败当作普通表单错误 问题:AI 失败包括安全拦截、上下文限制、模型不可用和部分输出,而不仅仅是请求失败。 修复:区分不同失败模式,并为每种模式提供匹配的恢复操作。
-
忽视 token 与延迟预算 问题:当响应变慢、变短或变贵却没有解释时,体验会显得不可预测。 修复:从一开始就把 token、延迟和提供商约束设计进界面。
相关模式
- https://uxpatterns.dev/patterns/ai-intelligence/model-selector
- https://uxpatterns.dev/patterns/ai-intelligence/prompt-input
- https://uxpatterns.dev/patterns/forms/autocomplete
完整实现细节、示例和测试说明见 references/pattern.md。 模式页面:https://uxpatterns.dev/patterns/ai-intelligence/ai-suggestions