工具栏

工具栏提供了对常用命令和功能的方便访问,并且位于窗口顶部的框架中,位于标题栏的下方或与标题栏集成。例如,在页面中,工具栏包括人们在查看、创建和协作文档时最常使用的命令。

工具栏设计 | Apple Human Interface Guideline - 图1
有关开发人员指导,请参见 NSToolbar。

工具栏项目

工具栏中的元素称为工具栏项,由图像按钮或特定的系统控件组成,这些控件经过优化,可用于工具栏。
工具栏设计 | Apple Human Interface Guideline - 图2
Image buttons

工具栏设计 | Apple Human Interface Guideline - 图3
System controls

为人们最常做的事情提供工具栏项目。工具栏的目的是为应用程序或当前窗口中的常见任务提供快捷方式。
包括图像按钮或系统控件,但不包括两者。工具栏包含相同类型的元素时,最容易理解。

仅使用特定于工具栏的系统控件样式。工具栏中只能使用以下系统控件样式。因为它们被设计成与工具栏的外观紧密集成,所以不应该在窗口的主要内容区域使用它们。

Control Style Control API Style API
Push button
image.png
Textured and rounded NSButton NSTexturedRoundedBezelStyle
Segmented control
image.png
Textured and rounded NSSegmentedControl NSSegmentStyleTexturedRounded
Segmented control Separated NSSegmentedControl NSSegmentStyleSeparated
Pop-up button
image.png
Textured and rounded NSPopUpButton with pullsDown set to false NSTexturedRoundedBezelStyle
Pull-down button
image.png
Textured and rounded NSPopUpButton with pullsDown set to true NSTexturedRoundedBezelStyle
Search field
image.png
N/A NSSearchField N/A

为每个工具栏项目提供一个简短的描述性标签。当用户将工具栏配置为显示图标和文本或仅显示文本时,会看到这些标签。最好的标签由一个或两个描述点击项目结果的单词组成。使用标题样式大写和无结尾标点符号。尽可能使用动词和动词短语,如查看、插入和共享。
有关开发人员指导,请参见 NSToolbarItem。

Appearance

确保每个工具栏项的含义清晰。人们不应该需要实验或等待工具提示来弄清楚一个项目是做什么的。提供一个简单、可识别的图标和一个简短的描述性标签。

推荐工具栏项目中系统提供的图标,因为它们很熟悉。因为系统图标是模板图像,它们会自动接收适当的着色,并对用户交互和活力做出反应。查看系统图标。

比工具栏项目中的文本更推荐图标。在可定制的工具栏中,当用户选择显示工具栏项时,标签会显示在工具栏项下方。看到标签文本上方的控制文本是重复的。

如果必须在控件中显示文本,请确保其清晰简洁。描述对象、设置或状态时,使用名词或名词短语。描述动作时,使用动词或动词短语。使用标题样式大写。

准确反映在两种状态之间切换的控件的当前状态。有时,工具栏项会打开和关闭应用程序状态。这种类型的项目必须清楚地向用户传达其状态。您可以通过更改项目的配色方案和标签来实现这一点。例如,邮件包括一个工具栏项目,可以在线和离线切换您的帐户。联机时,项目会显示一个蓝色图标和一个 “脱机” 标签。脱机时,项目会显示一个灰色图标和一个上线标签。

当内容在工具栏下方流动时,请考虑使用半透明。半透明创造了一种深度和语境感。当放置在滚动视图上方或将窗口配置为全尺寸内容视图时,工具栏会自动采用半透明。有关开发人员指导,请参见 NSFullSizeContentViewWindowMask。有关相关设计指南,请参见半透明。

避免为工具栏项提供持久的选定外观。单击工具栏项会立即执行操作-例如打开新窗口、切换到其他视图、显示菜单或插入 (或删除) 一个对象 — 所以暗示状态也有变化是没有意义的。这种情况的例外是分段控件,该控件在控件的上下文中显示持久的选定外观,例如 Finder 窗口工具栏中的视图控件。

Layout

工具栏项目的布局需要支持人们在应用程序中完成主要任务
通常,对于应具有最高可见性的命令,使用工具栏的前导端。“高可见性” 在不同的应用程序中可能意味着不同的东西。在一些应用中,使用频率应该决定可见性。在其他应用程序中,按重要性对项目进行排名更有意义。
工具栏设计 | Apple Human Interface Guideline - 图9

如果可能,将相关工具栏项目分组
在某些情况下,您可以定义工具栏项的逻辑组,例如一个组用于文档操作任务,另一个组用于文本操作任务。创建组时,请根据重要性或使用频率安排其项目。使用相同的标准自行安排组。Keynote 中的工具栏包括几个基于功能的组,包括一个用于表示级功能,一个用于播放功能,一个用于对象插入。

Visibility

允许显示或隐藏工具栏。
用户可能希望隐藏工具栏以尽量减少干扰或显示更多内容。确保在视图菜单中提供隐藏和显示工具栏的命令。

考虑在全屏模式下自动隐藏工具栏,以增加对内容的关注。
尽管人们通常依赖工具栏的存在,但如果不需要完成聚焦任务,您可以将其隐藏在全屏窗口中。例如,预览将工具栏隐藏在全屏窗口中,因为人们更有可能查看内容而不是注释内容。如果您将工具栏隐藏在全屏窗口中,请在指针移动到屏幕顶部时显示它 (以及菜单栏)。

Customization

工具栏通常是可定制的。
在可定制的工具栏中,用户可以决定哪些项目出现在工具栏中,并且在许多情况下选择是将项目显示为图标、文本还是图标和文本组合。一些工具栏允许用户选择是显示大的还是小的工具栏项目。应用程序通常让人们完全隐藏工具栏,以增加对内容的关注。
工具栏设计 | Apple Human Interface Guideline - 图10

通常,让用户自定义工具栏。人们有不同的工作流程,理想情况下应该能够定制工具栏的内容和外观,以支持他们各自的工作风格。

提供有用的默认工具栏项。
由于不是每个人都自定义工具栏,您的默认项目应该是大多数人认为有用的命令。他们还应该向新用户介绍您的应用程序的主要功能。如果允许自定义,请将 “自定义工具栏” 菜单项添加到 “视图” 菜单中。请参见视图菜单。

Behavior

不要在工具栏中添加特定于应用程序的上下文菜单。
工具栏已经有一个上下文菜单,可以在整个系统中一致地用于自定义。此外,标题栏通常允许人们通过控制单击来重命名文档或显示其路径。如果您需要一组作用于选择的命令,请在窗口的内容区域添加右键菜单,或者在工具栏中添加操作弹出按钮。有关相关指导,请参阅上下文菜单和动作弹出按钮。

考虑让人们在窗口处于非活动状态时单击无损工具栏项目。
通常,单击非活动窗口的工具栏会将窗口带到前面。在某些情况下,让用户调用工具栏项而不将窗口放在前面,这样他们就可以专注于不同窗口中的任务,这可能是有用的。“标准字体” 面板的工具栏以这种方式运行。

考虑向工具栏项添加弹簧加载支持。在压力敏感系统上,例如带有力触触控板的系统,弹簧加载允许用户通过在按钮或分段控制段上拖动项目来激活按钮或分段控制段,并强制单击-按得更用力-而不丢弃项目。然后,用户可以继续拖动项目,可能是为了执行其他操作。例如,在日历中,可以在工具栏中的日、周、月或年段上拖动事件。强制单击某段切换日历视图,而不释放事件。然后,可以将事件放置在新日历视图中的所需位置。
Kapture 2020-06-02 at 20.42.36.gif