跳到正文

命令面板

Command Palette

初级通用

命令面板(Command Palette)是让用户通过输入关键词,快速找到并执行应用内操作的入口。它解决功能分散、菜单层级深时找操作费时的问题,例如在项目后台输入“新建任务”直接发起创建。

你可能会说:「我想让用户按个快捷键,输入几个字就能找到功能并直接执行,不用一层层翻菜单。」

动手看看

星河计划 / 任务
⌘ K
本周任务
完善注册流程
搜索命令:新建任务
新建任务在星河计划中创建空白任务
从模板新建任务使用预设流程创建任务
导出项目报告
邀请团队成员
切换当前选中命令,再执行
任务创建页
任务标题
命令已执行,直接进入创建流程。
搜索关键词
当前选中命令
执行所选命令

这是项目后台里找操作的快捷入口。先切换搜索关键词,看候选项怎样缩小;也可以悬停候选项,或用 Tab 聚焦它们。

输入意图后,导出报告和邀请成员都被过滤掉了,不必再翻菜单找“新建”。

要点

  1. 1

    把分散操作汇到一个入口

    你可以把“新建任务”“打开设置”“切换项目”等操作放进同一个面板。用户不用先判断它们藏在哪个页面,而是先打开面板,再按自己的目标找操作。

  2. 2

    输入关键词后匹配可执行项

    面板会根据输入缩小候选范围,选中某一项后执行操作或跳转页面。因为用户搜的是想做的事,所以名称最好写成“导出报表”这样的动作,而不只是“报表”。

  3. 3

    让键盘操作形成完整路径

    常见流程是用快捷键打开、输入关键词、用方向键选择,再按回车执行。我们也可以保留可见的打开入口,让不知道快捷键的人能用鼠标进入;执行后,焦点要回到合理的位置。

容易混淆的地方

命令面板和导航菜单都能通向功能,但菜单持续展示产品结构,适合让用户浏览;命令面板通常临时打开,适合用户已经知道自己想做什么时快速定位。它也不等于全站搜索:搜索主要返回内容,命令面板的候选项则可以直接触发操作。一个面板可以同时提供两者,但结果类型要让用户看得出来。

什么时候用

适合用

  • 做项目管理后台时,功能散在多个模块,用户常要快速创建任务、切换项目或打开设置。
  • 做编辑器或设计工具时,熟练用户会反复调用同一批操作,希望少离开键盘。
  • 做 AI 工作台时,用户需要从任何页面快速发起新对话、打开历史会话或切换工作区。

不适合用

  • 网站只有几个主要页面,用户需要一眼看清去处;直接用顶部导航栏或导航菜单更合适。
  • 用户主要想查找文章、商品等内容,而不是执行操作;用搜索入口展示内容结果更直接。
  • 页面只有一个“保存修改”操作,用户就在表单旁边;放一个清楚的按钮比另开命令面板省事。

练一练

你在做一个项目后台:用户常从不同页面发起“新建任务”、切换项目和打开设置,同时也需要浏览项目列表。哪种方案最贴合这些需求?

让 AI 帮你做

请为这个项目后台实现命令面板:提供可见入口和键盘快捷键,支持输入关键词筛选“新建任务”“切换项目”“打开设置”;结果区分操作与页面,支持方向键选择、回车执行和退出后恢复焦点。保留现有导航,不用面板替代项目浏览。

接下来学什么