命令面板

本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证：面板内命令与可见菜单的一一对应关系、快捷键提示的实际可读性，以及打开/关闭时的焦点管理与键盘可达性。

{
  "states": [
    "closed",
    "open",
    "filtering",
    "executing"
  ],
  "a11y": [
    "容器使用 combobox 并关联一个 listbox，方向键在候选项间移动焦点",
    "打开时焦点进入输入框，Escape 关闭面板并把焦点送回触发处",
    "候选行同时提供可读的命令名称与对应的快捷键文本"
  ],
  "motion": "覆层的出现与消失可以省略动画；减弱动态偏好下直接显示或隐藏"
}

{
  "id": "command-palette",
  "type": "interaction",
  "name": {
    "zh": "命令面板",
    "en": "Command Palette"
  },
  "aliases": [
    "快捷命令面板",
    "Command Bar",
    "Cmd+K 面板"
  ],
  "granularity": "component",
  "intents": [
    "find-option",
    "run-command"
  ],
  "tags": [
    "命令",
    "键盘",
    "搜索",
    "快捷键",
    "覆层"
  ],
  "definition": "通过键盘快捷键唤出的搜索框覆层，用户输入词语即可对命令、可跳转的对象与设置进行模糊匹配并直接执行，是叠加在可见菜单之上的键盘加速通道。",
  "boundary": "命令面板是可见界面之上的加速通道，不能成为触达某个功能的唯一途径：面板里能执行的每条命令，也必须能通过菜单、按钮等可见路径找到，否则可用性会建立在回忆而非识别之上，这正是它与“识别优于回忆”之间的张力。它不同于搜索与筛选——后者在一组内容里缩小结果供浏览比较，命令面板查找并执行的是单个动作。它在形式上借用模态对话框的遮罩与焦点捕获，但目的是调用命令，而不是收集继续流程所需的信息或阻止不可逆错误。",
  "signature": [
    "键盘快捷键从任意界面位置唤出一个居中的输入框覆层",
    "输入词语会按名称模糊匹配命令、对象与设置，并在结果行显示对应的键盘快捷键",
    "选中一项后立即执行或跳转，关闭后焦点回到调用前的元素"
  ],
  "when": [
    "命令、页面或对象的数量多到菜单和导航无法逐一陈列",
    "动作或目标有明确、可用文字描述的名称，用户能大致说出想找什么",
    "用户会重复执行同一批操作，愿意通过键盘建立肌肉记忆"
  ],
  "when_not": [
    "把命令面板做成某个功能的唯一入口，导致不知道命令名称的人无法完成任务",
    "应用中命令稀少、菜单本身已经一目了然",
    "用户主要在浏览和比较一组内容，而不是查找并执行单个动作"
  ],
  "tradeoff": "为记得命令名称的用户提供快速的键盘加速通道，但要求维护一份可搜索的命令索引，并且必须让同样的命令继续在可见菜单中保持可达。",
  "comparison": {
    "focus": "能否凭记忆中的名称直接调用命令",
    "mechanism": "键盘唤出的模糊搜索输入框与候选结果列表",
    "cost": "依赖用户对命令名称的回忆，且需要同时维护面板索引与可见菜单"
  },
  "sources": [
    {
      "id": "apg-combobox",
      "title": "WAI-ARIA APG · Combobox Pattern",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
      "claim": "组合框模式是一个带弹出列表的输入框：输入内容可用于筛选弹出列表中的候选项，方向键把焦点移入弹出列表并在候选项间移动，Enter 确认选择，Escape 关闭弹出层。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
        "status": "available",
        "checkedAt": "2026-09-16T05:45:51.213Z",
        "jobId": "spn2-d4d6992153373f55a317fe7ec6043b6e8772a02b",
        "url": "https://web.archive.org/web/20260916054653/https://www.w3.org/WAI/ARIA/apg/patterns/combobox/",
        "timestamp": "20260916054653"
      }
    },
    {
      "id": "nng-accelerators",
      "title": "NN/g · Accelerators Maximize Efficiency in User Interfaces",
      "url": "https://www.nngroup.com/articles/ui-accelerators/",
      "claim": "加速键（键盘快捷键）是让熟练用户绕开常规菜单路径、更快完成任务的替代方式；应把快捷键就地显示在对应命令旁，方便识别与学习。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/ui-accelerators/",
        "status": "pending",
        "checkedAt": "2026-09-16T05:46:11.257Z",
        "error": "status-request-failed",
        "jobId": "spn2-5469a86990cb2b93f9fc31b61ed24c07d549e802"
      }
    },
    {
      "id": "vscode-command-palette",
      "title": "Visual Studio Code Docs · User Interface — Command Palette",
      "url": "https://code.visualstudio.com/docs/getstarted/userinterface",
      "claim": "命令面板通过 Ctrl/Cmd+Shift+P 唤出，是访问编辑器全部功能的统一入口，可用来运行命令、打开文件、搜索符号，其中包含常用操作对应的键盘快捷键。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://code.visualstudio.com/docs/getstarted/userinterface",
        "status": "pending",
        "checkedAt": "2026-09-16T05:46:35.657Z",
        "error": "status-request-failed",
        "jobId": "spn2-43a6ba7af44b9c8af7642be408ee72f1ec8d07ee"
      }
    }
  ],
  "relations": [
    {
      "target": "recognition",
      "kind": "conflicts_when",
      "condition": "面板成为触达某个功能的唯一途径",
      "reason": "命令面板依赖用户记得命令名称，与“识别优于回忆”的原则方向相反；面板之外必须保留可见、可识别的路径。",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "related",
      "condition": "面板同时提供跳转到对象的搜索框",
      "reason": "搜索与筛选缩小的是一组内容供浏览比较，命令面板查找的是要立即执行的单个动作，目的不同。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "composes_with",
      "condition": "面板以覆盖主内容的模态形式呈现",
      "reason": "命令面板借用模态对话框的遮罩与焦点捕获机制，但用途是调用命令，而非收集必要信息或阻止不可逆错误。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "面板中列出某条命令",
      "instruction": "该命令必须同时能通过菜单、按钮或其他可见路径触达，不能只存在于面板里。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "面板展示一条命令的结果行",
      "instruction": "在结果行显示该命令对应的键盘快捷键，帮助用户逐步学会它。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "面板打开或关闭",
      "instruction": "打开时把焦点移入面板的输入框，关闭后把焦点送回调用前的元素。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "closed",
      "open",
      "filtering",
      "executing"
    ],
    "a11y": [
      "容器使用 combobox 并关联一个 listbox，方向键在候选项间移动焦点",
      "打开时焦点进入输入框，Escape 关闭面板并把焦点送回触发处",
      "候选行同时提供可读的命令名称与对应的快捷键文本"
    ],
    "motion": "覆层的出现与消失可以省略动画；减弱动态偏好下直接显示或隐藏"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证：面板内命令与可见菜单的一一对应关系、快捷键提示的实际可读性，以及打开/关闭时的焦点管理与键盘可达性。",
  "image": {
    "src": "/images/command-palette.webp",
    "alt": "虚构的 FIELDNOTES 应用界面被压暗，居中悬浮一张命令面板卡片，顶部是一行输入框，下方是若干命令行，每行末尾带一个快捷键标签，其中一行高亮显示。"
  },
  "searchTerms": [
    "commands",
    "keyboard",
    "search",
    "shortcuts",
    "overlay"
  ]
}