用途:Command Palette 模式帮助团队在单一键盘优先界面中查找并运行命令、目标位置和最近项目,最适用于编辑器与工作区命令。适用场景包括编辑器与工作区命令、设置与偏好快捷方式、面向高级用户的对象或页面导航。
避免使用:产品界面仍较小时,应使用更简单的可见导航或单页流程;团队无法良好支撑状态复杂度时,避免高级交互模式;在普通路径尚未完善前,不要引入隐藏的高级用户行为。
实施流程:先确认模式与问题及约束匹配,再复制示例;从 references/pattern.md 中的结构与示例入手,选择最小可行变体;在叠加视觉打磨前先应用无障碍、性能和交互护栏;使用测试指南验证键盘、屏幕阅读器、响应式及失败场景下的行为。
无障碍护栏:键盘交互需确保仅用键盘即可完成命令面板操作,打开、更新或显示额外 UI 时保持焦点顺序合理,并保留在高倍缩放下仍可读的可见焦点状态。屏幕阅读器支持应优先使用语义元素,仅在语义不足时添加 ARIA;在正确位置以恰当礼貌程度播报错误、加载或完成等状态变化;必要时用 aria-describedby 或结构化标题连接标签、提示和状态文本。视觉无障碍方面,不要仅靠颜色传达严重程度、完成或选中状态。
常见错误:只设计顺利路径,导致加载、空和失败状态出现时体验不佳,应在默认状态旁明确完整生命周期;让交互与内容脱节,应使信息架构贴近交互模型;把无障碍当作最后一步,应在首次实现时就融入语义、焦点行为和播报。
相关模式:https://uxpatterns.dev/patterns/content-management/modal、https://uxpatterns.dev/patterns/forms/search-field、https://uxpatterns.dev/patterns/navigation/navigation-menu。完整实现细节、示例和测试说明见 references/pattern.md。模式页面:https://uxpatterns.dev/patterns/advanced/command-palette。