决策指南 · 02

macOS 工具栏和菜单栏怎么选?

一句话做出判断

工具栏把常用操作放在窗口里。菜单栏把应用程序的完整命令放在屏幕顶端。

常用的文档或选择操作放在工具栏。完整命令、键盘快捷键和较少使用的操作留在菜单栏。

01

看看每个界面模式会做什么

先试试每个例子,再看它适合处理什么工作。

Unified Title Bar Toolbar

统一标题栏工具栏

↗

统一标题栏工具栏(Unified Title Bar Toolbar)是放进窗口标题区的命令栏,可由用户自定义,并提供常用的文档或视图操作。

统一标题栏工具栏Atlas 项目
导航模式可用于正式产品
动效原则可用于正式产品
无障碍可用于正式产品
笔记 App 把常用工具放进可拖动的标题栏区域。工具包括侧边栏切换、搜索、共享和格式。
什么时候用
当常用命令属于当前窗口,而且直接操作和自定义内容有助于下方工作时使用。
什么时候不要用
不要塞入低频或破坏性命令。依赖选中内容的项目可以留在原位并更新启用或选中状态;应避免不必要的布局位移,并且所有重要命令仍须能在菜单栏找到。
代码里的名称
AppKit NSToolbar / SwiftUI toolbar
打开完整指南
macOS Menu Bar

macOS 菜单栏

↗

macOS 菜单栏是屏幕最上方的系统区域。当前使用中的 App 会在这里用清晰的菜单列出完整命令。

原创情境示例macOS 菜单栏
写作 App 把命令放在可预期的菜单中。菜单包括“文件、编辑、窗口”,提供新建、导出、查找和窗口命令。
什么时候用
把 App 的完整命令放在这里,包括用户会按菜单名称查找,或用键盘快捷键执行的功能。
什么时候不要用
不要把菜单栏当成窗口内导航。即使命令也出现在工具栏或上下文菜单中,仍要放在常用菜单中;会根据当前状态变化的命令,则要同步更新可用状态。
代码里的名称
AppKit NSMenu / SwiftUI Commands
打开完整指南
02

快速比较

界面模式最适合不适合代码里的名称
统一标题栏工具栏Unified Title Bar Toolbar 当常用命令属于当前窗口,而且直接操作和自定义内容有助于下方工作时使用。 不要塞入低频或破坏性命令。依赖选中内容的项目可以留在原位并更新启用或选中状态;应避免不必要的布局位移,并且所有重要命令仍须能在菜单栏找到。 AppKit NSToolbar / SwiftUI toolbar
macOS 菜单栏macOS Menu Bar 把 App 的完整命令放在这里,包括用户会按菜单名称查找,或用键盘快捷键执行的功能。 不要把菜单栏当成窗口内导航。即使命令也出现在工具栏或上下文菜单中,仍要放在常用菜单中;会根据当前状态变化的命令,则要同步更新可用状态。 AppKit NSMenu / SwiftUI Commands
03

上线前检查

  1. 01

    先写下用户要完成什么事。

  2. 02

    测试键盘、焦点、触控、缩放、加载、空白与错误状态。

  3. 03

    不用鼠标悬停或动画,也要能取得相同信息。

  4. 04

    放入真实内容,并在小屏幕和大屏幕上测试。

04

可以直接复制的比较需求

团队还不知道该选哪一种界面模式时,可以复制这段需求。

请在 统一标题栏工具栏(Unified Title Bar Toolbar)、macOS 菜单栏(macOS Menu Bar) 中,为真实用户流程选出最合适的界面模式。判断规则:工具栏把常用操作放在窗口里。菜单栏把应用程序的完整命令放在屏幕顶端。。请写下任务、内容量和打断流程的代价,并检查键盘、触控、加载、错误与减少动态效果。说明选择理由,再沿用项目的设计系统,做出最小且无障碍的版本。

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。