macOS 工具栏和菜单栏怎么选?
一句话做出判断
工具栏把常用操作放在窗口里。菜单栏把应用程序的完整命令放在屏幕顶端。
常用的文档或选择操作放在工具栏。完整命令、键盘快捷键和较少使用的操作留在菜单栏。
看看每个界面模式会做什么
先试试每个例子,再看它适合处理什么工作。
Unified Title Bar Toolbar
↗ 统一标题栏工具栏
统一标题栏工具栏(Unified Title Bar Toolbar)是放进窗口标题区的命令栏,可由用户自定义,并提供常用的文档或视图操作。
笔记 App 把常用工具放进可拖动的标题栏区域。工具包括侧边栏切换、搜索、共享和格式。
- 什么时候用
- 当常用命令属于当前窗口,而且直接操作和自定义内容有助于下方工作时使用。
- 什么时候不要用
- 不要塞入低频或破坏性命令。依赖选中内容的项目可以留在原位并更新启用或选中状态;应避免不必要的布局位移,并且所有重要命令仍须能在菜单栏找到。
- 代码里的名称
AppKit NSToolbar / SwiftUI toolbar
macOS Menu Bar
↗ macOS 菜单栏
macOS 菜单栏是屏幕最上方的系统区域。当前使用中的 App 会在这里用清晰的菜单列出完整命令。
写作 App 把命令放在可预期的菜单中。菜单包括“文件、编辑、窗口”,提供新建、导出、查找和窗口命令。
- 什么时候用
- 把 App 的完整命令放在这里,包括用户会按菜单名称查找,或用键盘快捷键执行的功能。
- 什么时候不要用
- 不要把菜单栏当成窗口内导航。即使命令也出现在工具栏或上下文菜单中,仍要放在常用菜单中;会根据当前状态变化的命令,则要同步更新可用状态。
- 代码里的名称
AppKit NSMenu / SwiftUI Commands
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 统一标题栏工具栏Unified Title Bar Toolbar | 当常用命令属于当前窗口,而且直接操作和自定义内容有助于下方工作时使用。 | 不要塞入低频或破坏性命令。依赖选中内容的项目可以留在原位并更新启用或选中状态;应避免不必要的布局位移,并且所有重要命令仍须能在菜单栏找到。 | AppKit NSToolbar / SwiftUI toolbar |
| macOS 菜单栏macOS Menu Bar | 把 App 的完整命令放在这里,包括用户会按菜单名称查找,或用键盘快捷键执行的功能。 | 不要把菜单栏当成窗口内导航。即使命令也出现在工具栏或上下文菜单中,仍要放在常用菜单中;会根据当前状态变化的命令,则要同步更新可用状态。 | AppKit NSMenu / SwiftUI Commands |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画,也要能取得相同信息。
- 04
放入真实内容,并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时,可以复制这段需求。
请在 统一标题栏工具栏(Unified Title Bar Toolbar)、macOS 菜单栏(macOS Menu Bar) 中,为真实用户流程选出最合适的界面模式。判断规则:工具栏把常用操作放在窗口里。菜单栏把应用程序的完整命令放在屏幕顶端。。请写下任务、内容量和打断流程的代价,并检查键盘、触控、加载、错误与减少动态效果。说明选择理由,再沿用项目的设计系统,做出最小且无障碍的版本。