文章目录

命令面板先设计三条路径:输入关键词找到命令;用上下键和 Enter 执行;无结果、权限不足或执行失败时能回退。用在线原型设计工具把打开、选择、执行和关闭连起来,评审时才能确认焦点不会丢。

命令面板怎么设计的核心关系与设计交付

先区分命令、关键词和分组

命令是可执行动作,关键词是帮助找到动作的词,分组则解释动作属于文件、对象还是团队。搜索“导出”可以出现导出当前画板、导出全部页面和导出资源,但每项都要显示范围,避免用户只凭同一个动词猜结果。

快捷键是加速提示,不是唯一入口。第一次使用的人仍能通过文字看到动作;平台没有对应按键时不显示一个无法执行的组合。

把无结果和不可用写清楚

无结果时告诉用户搜索范围和可尝试的词,不要只显示空白列表。权限不足时保留命令名称,说明需要什么权限或下一步联系谁;执行失败则保留原输入和重试入口。

同一命令在不同对象或权限下可能不可用。用禁用、隐藏和提示的规则区分原因,避免用户看不到动作却不知道是没有权限、当前对象不支持还是网络异常。

设计完整焦点路径

打开面板后焦点进入搜索输入框,输入时结果列表更新;上下键移动到结果,Enter 执行,Esc 关闭并把焦点还给触发入口。鼠标点击结果不能让键盘用户进入另一条完全不同的路径。

命令较多时,分组标题不应抢走选择焦点;当前项、快捷键和可执行状态要能被读出。设计稿中给每一步写出焦点所在位置和可见反馈,研发才能准确实现。

把命令放进真实上下文

命令面板覆盖在设计文件而不是空白弹窗上,才能看出遮挡、对象范围和关闭后的返回位置。示例可以用“导出当前画板”,但要把它标为原型场景,不暗示 Pixso 已提供完全相同的命令面板。

用三个画板串起默认、无结果和权限不足状态,再检查窄屏、长命令和重复快捷键。最终交付包括文字规则、焦点顺序和错误回退,不只是一个漂亮的搜索框。

命令面板还要处理“同名不同范围”。例如“复制”可能作用于图层、画板或链接,结果行必须显示对象范围和执行后的结果。执行完成后给出轻量反馈,失败时保留面板输入;不要用一个全局 toast 掩盖具体命令。

在移动端没有键盘快捷键时,命令面板可以退化为搜索动作列表,但分组、权限和焦点原则仍保留。把桌面快捷键提示隐藏而不是显示无法按下的组合,避免跨端设计只换尺寸不换交互。

命令面板的组合框和焦点关系可对照WAI-ARIA combobox 模式;具体实现由产品和研发共同决定。