Windows 7 工具栏

注意

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指南原则上仍然适用,但演示和示例并不反映我们 当前的设计指南

工具栏是对命令进行分组以便进行高效访问的一种方法。

带有标记元素的两个工具栏的屏幕截图

一些典型的工具栏。

使用工具栏来代替菜单栏或菜单栏。 工具栏比菜单栏更高效,因为它们是直接 (始终显示而不是在单击鼠标时显示) 、即时 (而不是需要其他输入) ,并且包含 (最常用的命令,而不是) 的综合列表。 与菜单栏相比,工具栏不必是全面或一目了然的,只需快速、方便和高效。

某些工具栏可自定义,允许用户添加或删除工具栏、更改其大小和位置,甚至更改其内容。 某些类型的工具栏可以取消停靠,从而导致调色板窗口。 有关工具栏品种的详细信息,请参阅本文中的 使用模式

注意

菜单命令按钮图标 相关的指南在单独的文章中介绍。

这是正确的用户界面吗?

在决定之前,请考虑以下问题:

  • 窗口是主窗口吗? 工具栏适用于主窗口,但对于辅助窗口来说,工具栏通常很不堪重负。 对于辅助窗口,请改用 命令按钮菜单按钮链接
  • 是否有少量常用命令? 工具栏无法处理菜单栏那样多的命令,因此它们最适合作为有效访问少量常用命令的方法。
  • 大多数命令是否立即执行? 也就是说,它们主要是不需要其他输入的命令吗? 为了提高效率,工具栏需要具有直接直接的感觉。 如果不是,菜单栏更适合需要其他输入的命令。
  • 是否可以直接显示大多数命令? 也就是说,用户只需单击一下即可与他们交互? 虽然某些命令可以使用菜单按钮呈现,但以这种方式呈现大多数命令会降低工具栏的效率,使菜单栏成为更好的选择。
  • 命令是否由图标很好地表示? 工具栏按钮通常由图标而不是文本标签表示 (尽管某些工具栏按钮使用) ,而菜单命令则由其文本表示。 如果命令图标的质量不高且不言而喻,菜单栏可能是更好的选择。

如果程序具有不带菜单栏的工具栏,并且大多数命令可通过菜单按钮和 拆分按钮间接访问,则此工具栏实质上是菜单栏。 请改为应用菜单指南中的 工具栏 菜单模式。

设计概念

良好的菜单栏是所有可用顶级命令的综合目录,而良好的工具栏可快速方便地访问常用命令。 工具栏不会尝试训练用户,只是提高用户的工作效率。 一旦用户了解如何访问工具栏上的命令,他们很少继续从菜单栏访问命令。 出于这些原因,程序的菜单栏及其工具栏不需要直接对应。

工具栏与菜单栏

传统上,工具栏在以下方面不同于菜单栏:

  • 频率。 工具栏仅显示最常用的命令,而菜单栏对程序中所有可用的顶级命令进行编目。

  • 即时。 单击工具栏命令会立即生效,而菜单命令可能需要其他输入。 例如,菜单栏中的“打印”命令首先显示“打印”对话框,而“打印”工具栏按钮会立即将文档的单个副本打印到默认打印机。

    已选择工具栏的打印机按钮的屏幕截图

    在此示例中,单击“打印”工具栏按钮会立即将文档的单个副本打印到默认打印机。

  • 直接。 只需单击一下即可调用工具栏命令,而菜单栏命令需要浏览菜单。

  • 数字和密度。 工具栏所需的屏幕空间与其命令数成正比,并且始终使用该空间,即使命令不是。 因此,工具栏必须有效地使用其空间。 相比之下,菜单栏命令通常对视图隐藏,其分层结构允许任意数量的命令。

  • 大小和演示文稿。 为了在较小的空间中打包许多命令,工具栏通常使用基于图标的命令 (和基于工具提示的标签) ,而菜单栏则使用基于文本的命令 (和可选图标) 。 虽然工具栏按钮可以具有标准文本标签,但这些按钮确实会使用更多的空间。

    带有发送/接收标签的工具栏的屏幕截图

    带标签的工具栏按钮占用的空间至少是未标记按钮的三倍。

  • 一目了然。 设计良好的工具栏需要一些图标,这些图标大多是一目了然的,因为用户无法仅使用工具提示才能有效地找到命令。 但是,如果一些不太常用的命令不言自明,工具栏仍然有效。

    带有熟悉图标的工具栏的屏幕截图

    在此示例中,最常用的图标是一目了然的。

  • 可识别和可区分。 对于常用命令,用户会记住工具栏按钮属性,如位置、形状和颜色。 借助设计良好的工具栏,即使用户不记得确切的图标符号,用户也能快速找到命令。 相比之下,用户会记住常用的菜单栏命令位置,但依赖于命令标签进行选择。

    截图工具选项对话框的屏幕截图

    对于工具栏命令,独特的位置、形状和颜色有助于使图标易于识别和区分。

    菜单栏的屏幕截图,其中选择了“文件”命令

    对于菜单栏命令,用户最终依赖于其标签。

效率

鉴于其特征,工具栏的设计必须主要是为了提高效率。 低效工具栏只是没有任何意义。

如果你只做一件事...

请确保工具栏的设计主要是为了提高效率。 将工具栏聚焦在常用、即时、直接且可快速识别的命令上。

隐藏菜单栏

通常,工具栏与菜单栏协同工作非常出色:良好的工具栏可提供效率,而良好的菜单栏可提供全面性。 同时拥有菜单栏和工具栏,使每个人都可以专注于其优势,而不会妥协。

令人惊讶的是,此模型会分解为简单的程序。 对于只有几个命令的程序,同时拥有菜单栏和工具栏没有意义,因为菜单栏最终成为工具栏的冗余、低效版本。

为了消除这种冗余,Windows Vista 中的许多简单程序侧重于仅通过工具栏提供命令,并默认隐藏菜单栏。 此类程序包括 Windows 资源管理器、Windows Internet Explorer、Windows 媒体播放器和 Windows 照片库。

这是不小的变化。 删除菜单栏会从根本上更改工具栏的性质,因为此类工具栏需要全面且通过以下方式进行更改:

  • 频率。 删除菜单栏意味着不能从窗口或其上下文菜单直接访问的所有命令都必须从工具栏访问,无论其使用频率如何。

  • 即时。 删除菜单栏会使工具栏成为命令的唯一可见接入点,这要求工具栏具有功能齐全的版本。 例如,如果没有菜单栏,工具栏上的“打印”命令必须显示“打印”对话框,而不是立即打印。 (虽然在这种情况下使用拆分按钮是一个很好的折衷方案。有关 标准打印拆分按钮 ,请参阅标准菜单和拆分按钮。)

    工具栏和打印命令选项的屏幕截图

    在此示例中,Windows 照片库中的“打印”工具栏按钮具有显示“打印”对话框的“打印”命令。

  • 直接。 为了节省空间并防止混乱,可能会将不太常用的命令移动到菜单按钮,使其不那么直接。

用于补充菜单栏的工具栏的设计方式与设计用于删除或隐藏菜单栏的工具栏不同。 由于不能假设用户将显示隐藏的菜单栏来执行单个命令,因此隐藏菜单栏应被视为在做出设计决策时完全删除菜单栏。 (如果默认隐藏菜单栏,请不要假定用户会考虑显示菜单栏来查找命令,甚至想出如何显示命令。)

设计工具栏以在没有菜单栏的情况下工作通常涉及一些妥协。 但为了提高效率,不要妥协太多。 如果隐藏菜单栏导致工具栏效率低下,请不要隐藏菜单栏!

键盘辅助功能

从键盘上,访问工具栏与访问菜单栏大不相同。 当用户按 Alt 键并且使用 Esc 键失去输入焦点时,菜单栏将接收输入焦点。 菜单栏具有输入焦点后,它将独立于窗口的其余部分进行导航,处理所有箭头键、开始键、结束键和 Tab 键。 相比之下,当用户按 Tab 键浏览窗口的整个内容时,工具栏会收到输入焦点。 由于工具栏是按 Tab 键顺序排列的最后一个,因此除非用户知道使用 Shift+Tab 向后移动) ,否则它们可能需要花费大量精力才能在繁忙的页面上激活 (。

辅助功能在此处呈现了一个两难境地:虽然工具栏对鼠标用户来说更容易,但键盘用户更不容易访问工具栏。 如果同时存在菜单栏和工具栏,则这不是问题,而是菜单栏被删除或隐藏。

出于辅助功能原因,建议保留菜单栏,而不是完全删除菜单栏,而选择工具栏。 如果必须在删除菜单栏和直接隐藏菜单栏之间进行选择,则更喜欢隐藏菜单栏。

使用模式

工具栏具有多种使用模式:

使用情况 示例
主工具栏
一个不带菜单栏(隐藏或删除)的工具栏。
主工具栏必须平衡对效率和全面性的需求,以便它们最适合于简单程序。
Windows 资源管理器工具栏的屏幕截图
Windows 资源管理器中的主工具栏。
补充工具栏
用于菜单栏的工具栏。
补充工具栏可以专注于效率而不妥协。
工具栏上菜单栏的屏幕截图
Windows 影音制作中的补充工具栏。
工具栏菜单
作为工具栏实现的菜单栏。
工具栏菜单是主要由 菜单按钮 和拆分按钮中的命令组成的工具栏,仅包含几个直接命令(如果有)。
包含图标和命令的菜单栏的屏幕截图
Windows 照片库中的工具栏菜单。
可自定义工具栏
可由用户自定义的工具栏。
可自定义工具栏允许用户添加或删除工具栏、更改其大小和位置,甚至更改其内容。
包含数十个图标的工具栏的屏幕截图
Microsoft Visual Studio 中的可自定义工具栏。
调色板窗口
显示命令数组的无模式对话框。
调色板窗口是非停靠工具栏。
颜色对话框的屏幕截图
字体对话框的屏幕截图
Windows 画图中的调色板窗口。

工具栏具有以下样式:

Style 示例
未标记图标
一行或多行未标记的小图标按钮。
如果要标记的按钮太多或经常使用程序,请使用此样式。 使用此样式时,具有复杂功能的程序可以包含多行,因此,这是唯一需要自定义的样式。 使用此样式,可以标记某些命令按钮(如果它们经常使用)。
带有未标记的小图标的工具栏的屏幕截图
写字板中的未标记图标工具栏。
大型未标记图标
一行大型未标记图标按钮。
将此样式用于具有易于识别图标且通常在小窗口中运行的简单实用工具。
带有未标记的大图标的工具栏的屏幕截图
带有大图标的工具栏的屏幕截图
Windows Live Messenger和 Windows 截图工具中的大型未标记图标工具栏。
标记图标
一行小标记图标。
如果命令很少或程序不常用,请使用此样式。 此样式始终包含一行。
带有标记图标的工具栏的屏幕截图
Windows 资源管理器中的标记图标工具栏。
部分工具栏
一个部分小图标行,用于在不需要完整工具栏时节省空间。
将这种样式用于带有导航按钮、搜索框或选项卡的窗口,以消除窗口顶部不必要的权重。
菜单栏、工具栏和收藏夹栏的屏幕截图
部分工具栏可以与导航按钮、搜索框或选项卡组合使用。
较大的部分工具栏
一个包含大图标的部分行,用于在不需要完整工具栏时节省空间。
将此样式用于具有导航按钮或搜索框的简单实用工具,以消除窗口顶部不必要的权重。
大型部分工具栏的屏幕截图
Windows Defender中较大的分部工具栏。

最后,工具栏控件有多种使用模式:

使用情况 示例
命令图标按钮
单击命令按钮会立即启动操作。
标记图标工具栏的屏幕截图
Windows 传真和扫描中的图标命令按钮示例。
模式图标按钮
单击模式按钮进入所选模式。
垂直工具栏的屏幕截图
Windows 画图中的模式按钮示例。
属性图标按钮
属性按钮的状态反映当前所选对象的状态(如果有)。 单击该按钮会将更改应用到所选对象。
设置图标和所选文本格式的屏幕截图
Microsoft Word 中的属性按钮示例。
带标签的图标按钮
标有图标和文本标签的命令按钮或属性按钮。
这些按钮用于其图标不够一目了然的常用工具栏按钮。 它们还用于具有如此少的按钮,每个按钮都可以有文本标签的工具栏。
显示工具栏的屏幕截图,其中标记了最常用的按钮的图标。
标有其最常用的按钮的工具栏。
菜单按钮
用于显示一小组相关命令的命令按钮。
单个向下指向的三角形表示单击该按钮将显示一个菜单。
工具栏和下拉列表命令列表的屏幕截图
包含一小部分相关命令的菜单按钮。
拆分按钮
用于合并命令变体的命令按钮,尤其是在大部分时间使用其中一个命令时。
拆分打印按钮的屏幕截图
处于正常状态的拆分按钮。
与菜单按钮一样,单个向下三角形表示单击按钮的最右侧会显示一个菜单。
拆分打印按钮命令的屏幕截图
下拉拆分按钮。
在此示例中,拆分按钮用于合并所有与打印相关的命令。 大部分时间都使用即时打印命令,因此用户通常不需要查看其他命令。
与菜单按钮不同,单击按钮的左侧部分会直接对标签执行操作。 拆分按钮在下一个命令可能与最后一个命令相同的情况下有效。 在这种情况下,标签将更改为最后一个命令,就像颜色选取器一样:
桶图标倒漆的屏幕截图
在此示例中,标签更改为最后一个命令。
下拉列表
下拉列表 (用于查看或更改属性的可编辑或只读) 。
字体下拉列表的屏幕截图
在此示例中,下拉列表用于查看和设置字体属性。
工具栏中的下拉列表反映当前所选对象的状态(如果有)。 更改列表会更改所选对象的状态。

准则

呈现

  • 根据命令数及其用法选择合适的工具栏样式。 有关如何选择的指导,请参阅前面的工具栏样式表。 避免使用从程序工作区占用太多空间的工具栏配置。

  • 将工具栏放在内容区域正上方、 菜单栏和地址栏下方(如果存在)。

  • 如果空间是高级空间,请通过以下方式节省空间:

    • 省略已知图标和不常用的命令的标签。
    • 仅使用部分工具栏而不是整个窗口宽度。
    • 使用菜单按钮或拆分按钮合并相关命令。
    • 使用 溢出 V 形 显示不太常用的命令。
    • 仅当命令应用于当前上下文时才显示这些命令。

    未标记工具栏的常见图标的屏幕截图

    Windows Internet Explorer 工具栏通过省略已知图标的标签、使用部分工具栏以及对不太常用命令使用溢出 V 形来节省空间。

  • 对于未标记的图标工具栏模式,请使用不超过两行工具栏的默认配置。 如果两行以上可能有用,请使工具栏可自定义。 从两行以上的行开始可能会使用户不堪重负,并从程序工作区中占用太多空间。

    不正确:

    菜单栏和三行工具栏的屏幕截图

    具有两行以上工具栏的默认配置会导致过多的视觉混乱。

  • 禁用不适用于当前上下文的单个工具栏按钮, 而不是将其删除。 这样做可使工具栏内容稳定且更易于查找。

  • 如果单击单个工具栏按钮将直接导致错误,请禁用它们。 这样做是必要的,以保持直接的感觉。

  • 对于未标记的图标工具栏模式,如果整个工具栏不适用于当前上下文,请将其删除。 仅在适用的模式下显示它们。

    调试工具栏的屏幕截图

    在此示例中,仅在运行程序时显示“调试”工具栏。

  • 显示左对齐的工具栏按钮。 “帮助”图标(如果存在)右对齐。

    工具栏的屏幕截图,帮助图标右对齐

    除“帮助”外,所有工具栏按钮都左对齐。

    例外: Windows 7 样式的工具栏左对齐程序特定的命令,但右对齐标准的已知命令,如“选项”、“视图”和“帮助”。

  • 不要动态更改工具栏按钮标签。 这样做令人困惑和意外。 但是,可以更改图标以反映当前状态。

    桶图标倒漆的屏幕截图

    在此示例中,图标已更改为指示默认命令。

控件和命令

  • 首选最常用的命令。

    • 对于主工具栏,请提供全面的命令。 主工具栏不必像菜单栏那样全面,但它们必须提供在其他位置不容易发现的所有命令。 主工具栏不需要具有用于以下项的命令:
      • 直接位于 UI 本身上的命令。
      • 通常通过上下文菜单访问的命令。
      • 标准的已知命令,如剪切、复制和粘贴。
    • 对于补充工具栏,请提供最常用的命令。 菜单栏命令是工具栏命令的超集,因此无需提供所有内容。 专注于快速、方便的命令访问,并跳过其余部分。
  • 首选直接控件。 按以下优先顺序使用工具栏按钮:

    • 图标按钮。 直接和占用最少的空间。
    • 带标签的图标按钮。 直接,但需要更多空间。
    • “拆分”按钮。 直接用于最常见的命令,但处理命令变体。
    • 菜单按钮。 间接,但提供许多命令。
  • 首选即时命令。 对于可立即执行或具有其他输入的命令,可提高灵活性:

    • 对于主工具栏,请使用命令的灵活版本, (如 Print...) 。
    • 对于补充工具栏,请使用工具栏 ((如打印) )中的即时版本,并使用菜单栏中的灵活版本 (如 Print...) 。
  • 为常用命令提供标签, 尤其是在其图标不是众所周知的图标时。

    可以接受:

    没有标记图标的工具栏的屏幕截图

    良好:

    带有一些标记的图标的工具栏的屏幕截图

    Windows 传真和扫描工具栏中很少有命令,因此更好的版本会标记最重要的命令。

  • 不要将命令放在工具栏菜单中,这些命令也直接位于工具栏上。

    不正确:

    工具栏和菜单上打印命令的屏幕截图

    在此示例中,“打印”直接位于工具栏上,因此不需要位于菜单中。

组织和订单

  • 将工具栏中的命令组织成相关组。

  • 首先放置最常用的组。 在组中,按逻辑顺序放置命令。 总的来说,命令应具有逻辑流,以便于查找,同时仍会首先显示最常用的命令。 这样做最有效,尤其是在发生溢出时。

  • 仅当组之间的命令是弱耦合时,才使用组分隔符。 这样做会使分组变得明显,命令更易于查找。

    显示工具栏的屏幕截图,其中包含使用分组分隔符的井井有条的图标。

    具有组织良好的图标的工具栏的屏幕截图

    Windows 邮件中的分组工具栏示例。

  • 避免在常用命令旁边放置破坏性命令。 使用顺序或分组来获得分隔。 此外,请考虑不要在工具栏中放置破坏性命令,而只放置在菜单栏或上下文菜单中。

    可以接受:

    相邻打印和删除按钮的屏幕截图

    良好:

    分隔的打印和删除按钮的屏幕截图

    在更好的示例中,Delete 命令在物理上与 Print 分离。

  • 使用溢出 V 形指示并非所有命令都可以显示。 但仅当没有足够的空间显示所有命令时,才使用溢出。

    不正确:

    收藏夹栏和隐藏命令的屏幕截图

    溢出 V 形指示并非所有命令都显示,但其中更多命令可能具有更好的布局。

  • 确保可从工具栏 (直接访问最常用的命令,即,不要在小窗口大小的溢出) 访问。 如有必要,请对命令重新排序,将不太常用的命令移动到菜单按钮或拆分按钮,甚至从工具栏中完全删除它们。 如果这仍然存在问题,请重新考虑你选择的工具栏样式。

隐藏菜单栏

通常,工具栏与菜单栏协同工作非常出色,因为两者都允许每个工具栏专注于其优势,而不会妥协。

  • 如果工具栏设计使菜单栏变得多余,则默认隐藏菜单栏。
  • 隐藏菜单栏而不是完全删除它,因为键盘用户更容易访问菜单栏。
  • 若要还原菜单栏,请在主工具栏的“查看 (”中提供“菜单栏复选标记”选项,) 或辅助工具栏的“工具” () 菜单类别。 有关详细信息,请参阅 标准菜单和拆分按钮
  • 当用户按 Alt 键时显示菜单栏,并在第一个菜单类别上设置输入焦点。

交互

  • 悬停时,显示按钮 显示 ,以指示图标可单击。 工具提示超时后,显示工具提示或信息提示。

    描述按钮的信息提示的屏幕截图

    此示例显示了各种显示状态。

  • 单击左键:

    • 对于命令按钮,与控件正常交互。

    • 对于模式按钮,显示控件以反映当前所选模式。 如果模式影响鼠标交互的行为,则还要更改指针。

      形状为画桶的指针的屏幕截图

      在此示例中,指针已更改为显示鼠标交互模式。

    • 对于属性按钮和下拉列表,显示控件以反映当前选定对象的状态(如果有)。 在交互时,更新控件的状态并将更改应用于所选对象。 如果未选择任何内容,则不执行任何操作。

  • 在左侧双击时,执行与左单击相同的操作。

    • 例外: 在极少数情况下,工具栏命令可以更有效地以模式方式使用。 在这种情况下,请使用双击来切换模式。

      显示按钮功能的信息提示的屏幕截图

      在此示例中,双击“格式刷”命令进入一种模式,在该模式下,所有后续单击都会应用该格式。 用户可以通过左键单击离开模式。

  • 右键单击:

    • 对于可自定义工具栏,显示用于自定义工具栏的上下文菜单。 右键单击鼠标向下而不是向上键时显示菜单。
    • 对于其他工具栏,不执行任何操作。

图标

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

    字号下拉列表的屏幕截图

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

    例外: Windows 7 样式的工具栏仅对图标已知的命令使用图标;否则,它们使用不带图标的文本标签。 这样做可以提高标签的清晰度,但需要更多的空间。

  • 确保工具栏图标在工具栏背景色上清晰可见。 始终在上下文和高对比度模式下评估工具栏图标。

  • 选择明确传达其用途的图标设计,尤其是对于最常用的命令。 设计良好的工具栏需要一目了然的图标,因为用户无法使用其工具提示有效地找到命令。 但是,如果一些不太常用命令的图标不言自明,工具栏仍然有效。

  • 选择可识别和可区分的图标,尤其是对于最常用的命令。 确保图标具有独特的形状和颜色。 这样做可帮助用户快速找到命令,即使他们不记得图标符号。

  • 确保工具栏图标符合 Aero 样式图标指南。

有关详细信息和示例,请参阅 图标

标准菜单和拆分按钮

如果在工具栏中使用菜单按钮和拆分按钮,请尽可能尝试使用以下标准菜单结构及其相关命令。 与菜单栏不同,工具栏命令不采用访问键。

主工具栏

这些命令镜像在标准菜单栏中找到的命令,因此它们只应用于主工具栏。 此列表显示按钮标签 (,并使用其顺序和分隔符、快捷键和省略号键入) 。 请注意,用于显示和隐藏菜单栏的命令位于“视图”菜单中。

文件 NewCtrl+N
打开。。。Ctrl+O
关闭
separator<>
SaveCtrl+S
另存为...
separator<>
发送到
separator<>
打印。。。Ctrl+P
打印预览
页面设置
separator<>
ExitAlt+F4 (快捷方式通常不指定)

编辑 (菜单按钮) UndoCtrl+Z
RedoCtrl+Y
separator<>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
separator<>
全选Ctrl+A
separator<>
通常不提供 deleteDel (快捷方式)
重命名...
separator<>
找到。。。Ctrl+F
查找 nextF3 (命令通常未给出)
取代。。。Ctrl+H
转到 (G) 。。。Ctrl+G

打印 (拆分按钮) 打印。。。Ctrl+P
打印预览
页面设置

“查看 (菜单”按钮) 菜单栏 (检查(如果可见) )
“详细信息”窗格 (检查(如果可见) )
预览窗格 (检查(如果可见) )
状态栏 (检查(如果可见) )

缩放
Zoom inCtrl++
放大缩小字体功能 放大缩小字体功能 放大缩小字体功能

所选设置 (文本大小具有项目符号)

最大
较大
中型
较小
最小

全屏F11
RefreshF5

工具 (菜单按钮) ...

选项 “帮助 (拆分”按钮,使用 helpf1) <program name> 帮助图标

关于 <program name>

补充工具栏

这些命令是对标准菜单栏的补充。 此列表显示按钮标签 (和类型) 及其顺序和分隔符、快捷键和省略号。 请注意,用于显示和隐藏菜单栏的命令位于“工具”菜单中。

补充工具栏类别名称与标准菜单类别名称不同,因为它们需要更具包含性。 例如,使用“组织”类别而不是“编辑”类别,因为它包含与编辑无关的命令。 若要保持菜单栏和工具栏之间的一致性,请使用标准菜单类别名称(如果这样做不会产生误导性)。

不正确:

不同命令的相同选项的屏幕截图

在此示例中,工具栏应使用“编辑”而不是“组织”来保持一致性,因为它具有标准的“编辑”菜单命令。

调色板窗口

  • 调色板窗口使用较短的标题栏来最大程度地减少其屏幕空间。 在标题栏上放置“关闭”按钮。

  • 将标题栏文本设置为显示调色板窗口的命令。

  • 使用句子式大写,而不用结束标点。

  • 为窗口管理命令提供上下文菜单。 当用户右键单击标题栏时显示此上下文菜单。

    包含上下文菜单的工具箱的屏幕截图

    在此示例中,用户可以右键单击标题栏以显示上下文菜单。

  • 如果可能且有用,请调整调色板窗口的大小。 指示窗口可调整大小,在窗口框架上方使用调整大小指针。

  • 重新显示调色板窗口时,使用上次访问的相同状态显示它。 关闭时,保存窗口大小和位置。 重新显示时,还原保存的窗口大小和位置。 此外,请考虑根据每个用户在程序实例之间持久化这些属性。

自定义

  • 为包含两行或更多行的工具栏提供自定义。 只有未标记的图标样式需要自定义。 包含少量命令的简单工具栏不需要自定义。

  • 提供良好的默认配置。 用户不必针对常见方案自定义其工具栏。 不要依赖于用户自定义他们的方式来摆脱错误的初始配置。 假设大多数用户不会自定义其工具栏。

  • 提供包含以下命令的上下文菜单:

    • 用于显示可用工具栏的检查框列表
    • 锁定/解锁工具栏
    • “自定义...”
  • 默认情况下锁定可自定义的工具栏,以防止意外更改。

  • 对于“自定义”命令,显示一个选项对话框 ,用于选择显示哪些工具栏以及每个工具栏上的命令。

    自定义对话框和选项的屏幕截图

    在此示例中,Visual Studio 提供了一个用于自定义其工具栏的选项对话框。

  • 提供 Reset 命令以返回到“自定义选项”对话框中的原始工具栏配置。

  • 提供使用以下方式使用拖放自定义工具栏的功能:

    • 设置工具栏顺序和位置。
    • 设置工具栏长度,显示任何过小而无法以溢出 V 形显示其内容的工具栏。
    • 如果支持,请取消停靠工具栏,使其成为调色板窗口,反之亦然。

    显示“自定义选项”对话框时:

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

    这样一来,用户就可以更直接、更高效地进行更改。

  • 按用户保存所有工具栏自定义 项。

使用省略号

虽然工具栏命令用于即时操作,但有时执行操作需要更多信息。 使用省略号指示命令需要更多信息才能生效。 将省略号放在工具提示和标签的末尾(如果有)。

带有省略号的打印工具提示文本的屏幕截图

在此示例中,打印...命令显示“打印”对话框以收集详细信息。

但是,如果命令无法立即生效,则不需要省略号。 因此,例如,共享设置没有省略号,即使它需要其他信息,因为命令不可能立即生效。

工具栏、命令和工具提示的屏幕截图

“共享设置”命令没有省略号,因为它无法立即生效。

由于工具栏不断显示,并且空间是高级的, 因此应不经常使用省略号

注意

对于工具栏显示的菜单,应用 菜单省略号准则

包含间距信息的工具栏的屏幕截图

标准工具栏的建议大小和间距。

标签

常规

  • 使用句式大写。
    • 例外: 对于旧版应用程序,如有必要,可以使用标题样式大写,以避免混合大写样式。

未标记的图标按钮

  • 使用工具提示标记命令。 对于工具提示文本,请使用标签(如果按钮已标记),但包含快捷键(如果有)。

    工具栏、打印机图标和工具提示的屏幕截图

    图标按钮工具提示的示例。

带标签的图标按钮

  • 使用简洁的标签。 如果可能,请使用一个单词,最多使用四个单词。

  • 将标签置于图标右侧。

  • 使用信息提示描述命令。 由于按钮已标记,因此使用工具提示而不是信息提示将是多余的。

    带有信息提示的已标记按钮的屏幕截图

    标记图标按钮信息提示的示例。

  • 如果列表始终具有值,请使用当前值作为标签。

    带有字体选项的工具栏的屏幕截图

    在此示例中,当前所选字体名称充当标签。

  • 如果可编辑的下拉列表没有值,请使用 提示

    列表标签搜索通讯簿的屏幕截图

    在此示例中,提示用于下拉列表的标签。

  • 首选基于动词的菜单按钮名称。 但是,如果谓词为 Create、Show、View 或 Manage,则省略该谓词。 例如, “工具” 和“ 页面 ”菜单按钮没有谓词。
  • 使用清晰准确地描述菜单内容的单个特定字词。 虽然名称不必如此通用,以至于它们描述菜单中的所有内容,但它们应具有足够的可预测性,以便用户不会对他们在菜单中发现的内容感到惊讶。
  • 虽然不是必需的,但如果有用,请提供信息提示说明。
  • 使用以动词、名词或名词短语开头的菜单项名称。
  • 首选基于谓词的菜单名称。 但是,如果谓词为 Create、Show、View 或 Manage,则省略该谓词。 例如,以下命令不使用谓词:
    • 关于
    • 高级
    • 全屏
    • 新建
    • 选项
    • 属性
  • 使用特定谓词。 避免使用无用的泛型谓词,例如 Change 和 Manage。
  • 对应用于单个对象的命令使用单数名词, 否则使用复数名词。
  • 对于互补命令对,请选择明确的互补名称。 示例:添加、删除;显示、隐藏;插入、删除。
  • 根据用户目标和任务(而不是基于技术)选择菜单项名称。
  • 出于上述目的,使用以下菜单项名称:
    • 选项: 显示程序选项。
    • 自定义: 显示专门与机械 UI 配置相关的程序选项。
    • 个性化: 显示常用 个性化 设置的摘要。
    • 偏好: 请勿使用。 请改用“选项”。
    • 性能: 显示对象的属性窗口。
    • 设置: 请勿将 用作菜单标签。 请改用“选项”。
  • 显示子菜单的菜单项的标签上永远不会有省略号。 子菜单箭头指示需要另一个选择。

文档

引用工具栏时:

  • 如果只有一个工具栏,请将其称为工具栏。
  • 如果有多个工具栏,请按名称引用它们,后跟单词工具栏。 请参阅默认打开的main工具栏,其中包含基本任务(如打开和打印文件)的按钮作为标准工具栏。
  • 工具栏是单个非大写字。 (相比之下,菜单栏是两个字。)
  • 按工具栏按钮的工具提示标签引用。 使用确切的标签文本,包括其大写,但不要包含任何省略号。
  • 按标签和单词菜单引用工具栏菜单按钮。 使用确切的标签文本,包括其大写。
  • 通常将工具栏控件称为工具栏按钮。
  • 若要描述用户交互,请单击工具栏按钮和只读下拉列表,输入 可编辑下拉列表。 不要使用选择、选择或选取。
  • 请勿使用级联、下拉、下拉或弹出窗口来描述菜单按钮,编程文档中除外。
  • 将不可用的项称为不可用,而不是灰显、禁用或灰显。 在编程文档中使用 disabled。
  • 如果可能,请使用粗体文本设置标签的格式。 否则,仅在需要时将标签置于引号中以防止混淆。

示例:

  • 在工具栏上的“ 页面 ”菜单上,单击“ 通过电子邮件发送页面”。
  • 在工具栏上的“ 字体 ”框中,输入“Segoe UI”。
  • “格式” 工具栏上,指向“ 显示”,然后单击“ 批注”。