用途:Model Selector 是一种 AI 模型选择界面模式,帮助团队让用户挑选合适的模型或能力档位,而无需理解厂商内部术语。适用于多模型 AI 工作台、速度与质量权衡场景、按功能分级的 AI 界面。若标准非 AI 流程更清晰可靠,或用户无法从高级控件中受益,则不应引入该模式,也不应仅靠精美视觉掩盖模型不确定性。
主要能力与用法:实现前先确认该模式匹配问题与约束,再参考 references/pattern.md 的解剖结构与示例,选择最小可行变体;先落实无障碍、性能与交互护栏,再做视觉打磨;依据测试指南验证键盘、屏幕阅读器、响应式与失败场景。无障碍方面,需保证仅用键盘即可完成选择,焦点顺序合理、焦点可见且高倍缩放可读;优先使用语义元素,仅在语义不足时补 ARIA,并在正确位置以恰当礼貌程度播报错误、加载或完成状态,用 aria-describedby 或结构标题关联标签、提示与状态,不单靠颜色传达严重程度、完成或选中状态。性能方面,应统一为网络延迟、token 用量与长响应客户端渲染做预算;用流式或分块提升首屏价值,但稳定布局避免阅读抖动;跟踪长提示、模型切换与重试等昂贵状态以便调优。
常见错误:隐藏系统状态会让用户无法判断模型是在等待、流式输出、重试还是已完成,应清晰暴露请求生命周期状态并保持在其影响内容附近;把 AI 失败当作普通表单错误处理不妥,AI 失败包括安全拦截、上下文超限、模型不可用与部分输出,应区分失败模式并给出对应恢复操作;忽视 token 与延迟预算会使体验不可预测,应从设计之初就将 token、延迟与厂商约束纳入界面。
限制:资料未提供具体模型列表、收费、价格、平台或可安装包信息;示例与完整实现细节需查阅 references/pattern.md 及模式页面 https://uxpatterns.dev/patterns/ai-intelligence/model-selector。