出自UXGuide.net

工具栏：设计规范

Toolbars: Guidelines

目录 1 呈现 2 控件与命令 3 组织与顺序 4 隐藏菜单栏 5 交互 6 图标 7 标准菜单和分割按钮 7.1 主工具栏 7.2 辅助工具栏 8 调色板窗口 9 自定义 10 使用省略号

呈现

• 根据命令的数量和其用途选择合适的工具栏样式。关于如何选择的指导，参见之前的<a href="#StyleTable">工具栏样式表</a>。避免占用过多程序工作区域空间的工具栏配置。
• 将工具栏放在紧靠内容区域的上方，工具栏和地址栏下方，如果有的话。
• 如果屏幕空间紧张，可以通过下列方式节约空间：
  • 省略熟知的图标和不常用的命令上的标签。
  • 仅使用局部工具栏，而非占用整个窗口宽度。
  • 通过菜单按钮或分割按钮来组合相关的命令。
  • 使用溢出 V 形按钮来显示不太常用的命令。
  • 仅显示适用于当前上下文的命令。

Windows Internet Explorer 工具栏通过省略那些人们熟知的图标的标签、使用局部工具栏、以及为不太常用的命令使用溢出 V 形按钮来节约屏幕空间。

• 对于无标签图标工具栏模式，默认应使用不超过两行的工具栏配置。如果超过两行可能会有用的话，应使其可以定制。一开始就使用超过两行的工具栏可能会吓倒用户，并占用程序工作区内太多空间。

错误：

拥有超过两行工具栏的默认配置导致严重的视觉混乱。

• 禁用不适用于当前上下文的单个工具栏按钮，不要将其移除。这将保持工具栏内容的稳定，使其易于寻找。
• 如果直接单击工具栏上的某个按钮会产生错误的话，则将其禁用。这对于维持直接感非常必要。
• 对于无标签图标工具栏模式，如果在当前上下文中不适用，则应移除整个工具栏。仅在适用的模式下显示它们。

在这个示例中，Debug 工具栏仅在程序运行时显示。

• 以左齐方式显示工具栏按钮。如果有帮助图标的话，则右齐。

除了帮助以外，所有的工具栏按钮都是左齐的。

• 不要动态更改工具栏按钮的标签。这么做会令人费解或出人意料。不过，你可以更改图标以反映当前状态。

在这个示例中，图标发生改变以指明默认按钮。

控件与命令

• 最好是包含最常用的命令。
  • 对于主工具栏，应当提供全面完整的命令。主工具栏不必像菜单样那么面面俱到，但也应当提供所有无法立即在其他地方找到的命令。主工具无须包含以下命令：
    • 直接在 UI 上的命令。
    • 通常通过快捷菜单访问的命令。
    • 标准的、人们熟知的命令，如剪切、复制和粘贴。
  • 对于辅助工具栏来说，应当提供最常用的命令。工具栏命令只是菜单栏命令的一个子集，因此无须什么都提供。主要集中在快捷方便的命令访问，其它则可略过。
• 最好是使用直接控件。以下列优先顺序使用工具栏按钮：
  • 图标按钮。直接且占据空间最小。
  • 带标签图标按钮。直接，但占据较大空间。
  • 分割按钮。对于最常用的命令来说是直接的，但也能处理命令的变体。
  • 菜单按钮。不直接，但可呈现大量命令。
• 最好是即时命令。对于那些可以立即执行也可以要求额外输入以提高灵活性的命令来说：
  • 对于主工具栏来说，应使用较为灵活的命令版本（比如“打印...”）。
  • 对于辅助工具栏来说，应当在工具栏中使用直接版本（比如“打印”），而在菜单栏中使用灵活版本（比如“打印...”）。
• 为常用命令提供标签，尤其当其图标不那么被人们熟知时。

可以接受：

更好：

Windows 传真和扫描工具栏的命令不多，所以更好的这版给最重要的命令加上了标签。

• 不要将已经直接出现在工具栏上的命令再放到工具栏菜单中。

错误：

在这个示例中，“打印”已经直接出现在工具栏上，因此不必再出现在菜单中。

组织与顺序

• 应将工具栏中的命令组织为一个个相关的分组。
• 将最常用的组放在最前面。在组内，命令则根据其逻辑顺序放置。总体上来说，命令应当以逻辑顺序摆放，使其易于查找，当然最常使用的命令仍应当出现在最前面。这么做带来的效率最高，尤其当工具栏显示不完整时。
• 仅当各个分组的命令之间界限不够明确时才使用分组分隔条。这么做可以使分组更加明确，命令更易于查找。

Windows Mail 中的分组工具栏示例

• 避免将破坏性命令放在经常使用的命令旁边。可以调整顺序或者使用分组来将它们分开。另外，考虑不要将破坏性命令放在工具栏中，而是放在菜单栏或快捷菜单中。

可以接受：

更好：

在更好的示例中，删除命令与打印命令被隔开了。

• 使用溢出 V 形按钮来表示没有显示完所有的命令。但仅当屏幕空间不足以显示所有命令的情况下再使用溢出方式。

错误：

溢出 V 形按钮表明没有显示出所有的命令，但如果采用更好的布局的话，则可以显示更多命令。

• 确保最常用的命令在较小的窗口尺寸下能够直接从工具栏上访问（这即是说不包括溢出部分）。必要的话，重新调整命令的顺序，将不太常用的命令放到菜单按钮或分割按钮中，甚至是完全从工具栏上移去。如果这还有问题，应当重新考虑你对工具栏样式的选择。

隐藏菜单栏

工具栏与菜单栏通常能够配合得很好，它们可以发挥各自的优势而不会相互影响。

• 如果你的工具栏设计使得菜单栏显得多余的话，就将菜单栏隐藏。
• 隐藏菜单栏而不是将其完全删除。因为对于使用键盘的用户来说，菜单栏的可用性更强。
• 为了还原菜单栏，应在“视图”（用于主工具栏）或“工具”（用于辅助工具栏）菜单分类中提供带复选标记的“菜单栏”选项。更多信息，参见标准菜单与分割按钮。
• 当用户按下 Alt 键时显示菜单按，并将焦点放在第一个菜单分类上。

交互

• 当鼠标悬停时，显示按钮的功能可见性（affordance）以指明该图标是可以点击的。当达到工具提示等待时间后，则显示工具提示或信息提示。

该示例给出了多种显示状态。

• 当单击左键时：
  • 对于命令按钮来说，以正常方式进行控件交互。
  • 对于模式按钮来说，控件的显示应当反映当前选中的模式。如果该模式也会影响鼠标的交互行为，则应同时更改鼠标指针。

在这个示例中，鼠标指针被改变，以显示鼠标的交互模式。

• • 对于属性按钮和下拉列表来说，控件的显示应当反映出当前选中对象的状态，如果有的话。当用户操作时，应更新控件状态并将这些更改应用于选中的对象。如果没有选中任何对象，则什么也不做。
• 当双击左键时，应执行与单击左键相同的操作。
  • 例外：在一些罕见的情况下，工具栏按钮可能以模式方式使用更为有效。在这种情况下，使用双击进行模式切换。

在这个示例中，双击格式刷命令会进入特别的模式：所有后续单击都会应用格式。用户可以单击左键退出该模式。

• 当右击时：
  • 对于可以自定义的工具栏，应显示用于自定义工具栏的快捷菜单。应在右击的鼠标键按下时显示菜单，而非鼠标键抬起时。
  • 对于其他工具栏，则什么也不做。

图标

• 为工具栏上除下拉列表外的所有控件提供图标。

下拉列表不需要图标，但其他所有工具栏控件都需要。

• 确保图标在工具栏背景上清晰可见。应当始终在实际环境以及高对比度模式下评估工具栏图标。
• 选择能够清晰表达其用途的图标设计，尤其是那些最常用的命令。设计良好的工具栏中的图标应当是自描述的，因为用户无法通过工具提示来快速找到需要的命令。不过，如果那些不太常用的命令的图标不是自描述的话，工具栏仍然是好用的。
• 选择易于识别和区分的图标，尤其是那些最常用的命令。确保图标具有独特的形状和色彩。这么做使用户能够更快地找到命令，即使他们不记得图标的符号。
• 确保工具栏图标符合 Aero 风格图标设计规范。
• 尽量使用标准菜单图标。这能确保这些图标易于识别且符合 Aero 风格图标设计规范。

更多信息和示例，参见图标。

标准菜单和分割按钮

如果你在工具栏中使用了菜单按钮和分割按钮，应尽可能尝试使用下列标准菜单结构及其相关命令。与菜单栏不同，工具栏按钮没有访问键。

主工具栏

这些命令与标准菜单栏中的完全相同，因此应当仅在主工具栏中使用。该列表按顺序给出了按钮标签（和类型）、分隔条、快捷键及省略号。注意，用于显示和隐藏菜单栏的命令在 View（视图）菜单中。

文件

新建 Ctrl+N

打开... Ctrl+O

关闭

<分隔条>

保存 Ctrl+S

另存为...

<分隔条>

发送至

<分隔条>

打印... Ctrl+P

打印预览

页面设计

<分隔条>

退出 Alt+F4（该快捷键通常不会给出）

编辑（菜单按钮）

撤销 Ctrl+Z

重做 Ctrl+Y

<分隔条>

剪切 Ctrl+X

复制 Ctrl+C

粘贴 Ctrl+V

<分隔条>

全选 Ctrl+A

<分隔条>

删除 Del（该快捷键通常不会给出）

重命名...

<分隔条>

查找... Ctrl+F

查找下一个 F3（该命令通常不会给出）

替换... Ctrl+H

转到... Ctrl+G

打印（分割按钮）

打印... Ctrl+P

打印预览

<分隔条>

页面设置

视图（菜单按钮）

菜单栏（如果可见则为选中）

详细信息窗格（如果可见则为选中）

预览窗格（如果可见则为选中）

状态栏（如果可见则为选中）

<分隔条>

缩放

放大 Ctrl++

缩小 Ctrl+-

<分隔条>

文本大小（选中项具有小圆点）

最大

较大

中等

较小

最小

<分隔条>

全屏 F11

刷新 F5

工具（菜单按钮）

...

<分隔条>

选项

帮助（分割按钮，使用帮助图标）

<程序名称> 帮助 F1

<分隔条>

关于 <程序名称>

辅助工具栏

这些命令用于对标准菜单栏进行补充。该列表按顺序给出了按钮标签（和类型）、分隔条、快捷键及省略号。注意，用于显示和隐藏菜单栏的命令在 Tools（工具）菜单中。

打印（分割按钮）

打印... Ctrl+P

打印预览

<separator>

页面设置

工具（菜单按钮）

菜单栏（如果可见则为选中）

详细信息窗格（如果可见则为选中）

预览窗格（如果可见则为选中）

状态栏（如果可见则为选中）

<分隔条>

打印...（如果其他地方没有的话）

查找...

<separator>

全屏 F11

刷新 F5

<separator>

缩放

放大 Ctrl++

缩小 Ctrl+-

<分隔条>

文本大小（选中项具有小圆点）

最大

较大

中等

较小

最小

<分隔条>

选项

组织（菜单按钮）

新建文件夹 Ctrl+N

<separator>

剪切 Ctrl+X

复制 Ctrl+C

粘贴 Ctrl+V

<separator>

全选 Ctrl+A

<separator>

删除 Del（该快捷键通常不会给出）

重命名

<separator>

选项

页面（菜单按钮）

新窗口 Ctrl+N

<分隔条>

缩放

放大 Ctrl++

缩小 Ctrl+-

<分隔条>

文本大小（选中项具有小圆点）

最大

较大

中等

较小

最小

辅助工具栏的分类名称与标准菜单分类名称不同，因为它的范围更广。例如，“组织”分类用于替代“编辑”，因为它包含与编辑无关的命令。要在菜单栏和工具栏之间保持统一的话，如果不会产生误导的话，应当使用标准菜单分类名称。

错误：

在这个示例中，工具栏应当使用“编辑”而不是“组织”以保持统一，因为它包含标准的“编辑”菜单命令。

调色板窗口

• 调色板窗口的标题栏较小，以尽可能减小对屏幕空间的占用。应在标题栏上放置关闭按钮。
• 标题栏文本应为显示该调色板窗口的命令名称。
• 应使用不带句末标点的句子大写样式。
• 提供包含窗口管理命令的快捷菜单。当用户右击标题栏时显示该快捷菜单。

在这个示例中，用户可以在标题栏上右击以显示快捷菜单。

• 只要可能且有用，就应当使调色板窗口的大小可以改变。当鼠标移至窗口边框时，鼠标指针应变为调整大小指针形状以指明该窗口的大小是可以改变的。
• 当调色板窗口再次显示时，应当以与上次访问相同的状态显示。当关闭时，保存窗口的大小和位置。当再次显示时，恢复已保存的窗口大小和位置。而且，考虑基于特定的用户，跨越各程序实例保留这些属性。

自定义

• 为包含两行或更多行的工具栏提供自定义功能。只有无标签图标样式需要自定义。包含少量命令的简单工具栏则无须自定义。
• 提供好的默认配置。用户应当无须为了通常情况而自定义其工具栏。不要依赖用户会把糟糕的初始配置自定义为他们自己希望的方式。应当假设绝大多数用户不会自定义其工具栏。
• 提供包含下列命令的快捷菜单：
  • 一个复选框列表，以显示所有可用的工具栏
  • 锁定/解除锁定工具栏
  • 自定义...
• 默认锁定可自定义的工具栏，以避免意外更改。
• 对于自定义命令，应显示选项对话框以提供选择要显示哪些工具栏以及每个工具栏上的命令的功能。

在这个示例中，Visual Studio 提供了一个选项对话框来自定义其工具栏。

• 在自定义选项对话框中提供重置命令以恢复到原始的工具栏配置。
• 提供使用拖放操作来以下列方式自定义工具栏的功能：
  • 设置工具栏的顺序和位置。
  • 设置工具栏的长度，任何长度不足以显示其内容的工具栏应当带有溢出 V 形按钮。
  • 如果支持的话，将工具栏变为浮动调色板窗口等等。

当显示自定义选项对话框时：

• • 设置工具栏内容。
  • 设置工具栏内容的顺序。

这使用户能够更加直接有效地进行更改。

• 基于特定的用户保存所有工具栏的自定义方式。

使用省略号

虽然工具栏命令是用于立即操作的，但有时仍会需要更多信息来完成操作。应使用省略号来表明某命令在生效前需要更多信息。如果有省略号的话，应放在工具提示和标签的末尾。

在这个示例中，Print... 命令显示了 Print 对话框以收集更多信息。

如果某命令无法立即生效，则并不需要省略号。因此，像共享设置并不具有省略号，尽管它需要额外的信息，这是因为该命令可能无法立即生效。

Sharing Settings（共享设置）命令不具有省略号，因为它无法立即生效。

由于工具栏是始终显示的，屏幕空间非常宝贵，因此省略号不应频繁使用。

注：对于由工具栏显示的菜单，应遵守菜单省略号设计规范。