设计一个高级用户会爱上的 ⌘K 命令面板
为什么 2025 年每个正经产品都上了命令面板——以及决定成败的交互细节:键盘规则、过滤、空态与焦点管理。
约 6 分钟
键盘是新的导航
Linear、Vercel、GitHub、Figma——高级用户长期驻留的产品都有 ⌘K 面板,因为它把三次点击加一次页面加载压缩成三次按键。这是对你高阶用户群体杠杆最高的组件,也是最容易做错一点点就全毁的组件。
决定成败的五条规则
- 键盘第一,鼠标第二。方向键循环、Enter 执行、Escape 关闭——而且打开时选中项必须“已经可见”,不要等用户先按一次方向键。
- 边打字边过滤,但绝不抢焦点。焦点始终在输入框;列表更新;选中项重置到第一个匹配。
- 空态是功能。“没有 'x' 的结果”加上一个建议动作,胜过一片空白。
- 打开必须即时。遮罩 150-250ms 淡入带轻微缩放——再慢就成了“弹窗”,不是“工具”。
- 焦点管理也是安全:打开时焦点进输入框,关闭时回到触发按钮。
面板里放什么
三层,按此排序:导航(跳转到任何地方)、动作(创建/切换/发布),最后才是搜索。如果你的第一项是搜索框套搜索框,那你做的是弹窗不是面板。每行配图标、标签,以及最关键的——右侧按键提示:展示“G 再 D”等于免费教高阶用户下一层。
玻璃质感在这里格外重要:面板悬浮在用户正在做的事之上,厚重的实心盒子会打断心智地图。模糊 + 半透明保住上下文。
用 ⌘K 发布,在更新日志里宣布,然后盯使用数据——命令面板是那种高阶用户会立刻用起来、且效果可测量的稀有功能。
✦Live Activity Feed(实时动态流)天然搭档:让“刚发生了什么”和“能做什么”并排出现。