Windows 7 工具栏

注意

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

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

两个工具栏的屏幕截图,其中包含标有 的元素

一些典型的工具栏。

除了菜单栏之外,还可以使用工具栏或代替菜单栏。 工具栏比菜单栏更高效,因为它们是直接的(始终显示而不是在鼠标单击时显示)、即时(而不是需要其他输入)并包含最常用的命令(而不是全面的列表)。 与菜单栏相比,工具栏不必全面或自我解释,只需快速、方便且高效。

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

注意

单独的文章中提供了与 菜单命令按钮以及 图标 相关的指南。

这是正确的用户界面吗?

若要决定,请考虑以下问题:

  • 窗口是否为主窗口? 工具栏适用于主窗口,但对于辅助窗口来说通常是压倒性的。 对于辅助窗口,请使用 命令按钮菜单按钮,并改为 链接
  • 是否有少量常用命令? 工具栏不能像菜单栏一样多地处理命令,因此它们最能有效地访问少量常用命令。
  • 大部分命令是否是即时的? 也就是说,它们主要是不需要其他输入的命令吗? 要高效,工具栏需要有直接和即时的感觉。 否则,菜单栏更适合需要其他输入的命令。
  • 是否可以直接显示大部分命令? 也就是说,用户只需单击一下即可与其交互? 虽然某些命令可以使用菜单按钮呈现,但以这种方式呈现大多数命令会破坏工具栏的效率,使菜单栏成为更好的选择。
  • 命令是否由图标表示良好? 工具栏按钮通常由图标而不是文本标签表示(尽管某些工具栏按钮同时使用这两个按钮),而菜单命令由其文本表示。 如果命令图标质量不高,并且不是自我解释,菜单栏可能是更好的选择。

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

设计概念

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

工具栏与菜单栏

传统上,工具栏与菜单栏不同,方法如下:

  • 频率。 工具栏仅提供最常用的命令,而菜单栏将目录程序中所有可用的顶级命令。

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

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

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

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

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

    带有发送/接收标签屏幕截图

    标记的工具栏按钮至少需要三倍于未标记的空间。

  • 明显。 设计良好的工具栏需要大部分是自我解释的图标,因为用户不能仅使用工具提示高效地找到命令。 但是,如果一些不太频繁使用的命令不是自我解释的,工具栏仍然有效。

    工具栏的屏幕截图,其中 熟悉的图标

    在此示例中,最常用的图标是自我解释的。

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

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

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

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

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

效率

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

如果你只做一件事...

请确保工具栏主要用于提高效率。 焦点工具栏位于常用、即时、直接和快速识别的命令上。

隐藏菜单栏

通常,工具栏与菜单栏协同工作:良好的工具栏提供效率和良好的菜单栏提供全面性。 菜单栏和工具栏都允许每个菜单栏专注于其优势,而不会造成损害。

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

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

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

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

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

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

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

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

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

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

键盘辅助功能

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

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

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

使用模式

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

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

工具栏具有以下样式:

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

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

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

指引

介绍

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

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

  • 如果空间处于高级阶段,请通过以下方式节省空间:

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

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

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

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

    不正确:

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

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

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

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

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

    调试工具栏屏幕截图

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

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

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

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

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

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

    桶图标倒漆屏幕截图

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

控件和命令

  • 首选最常用的命令。

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

    • 图标按钮。 直接且占用最少的空间。
    • 标记的图标按钮。 直接,但占用更多空间。
    • “拆分”按钮。 直接处理最常见的命令,但处理命令变体。
    • 菜单按钮。 间接的,但提供了许多命令。
  • 首选即时命令。 对于可以立即使用的命令,或者有额外的输入,以便灵活地:

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

    可接受:

    工具栏的 屏幕截图,其中未标记任何图标

    更好:

    工具栏的屏幕截图,其中一些图标标记为

    Windows 传真和扫描工具栏有几个命令,因此更好的版本标签最重要的命令。

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

    不正确:

    工具栏和菜单屏幕截图

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

组织和订单

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

  • 首先放置最常用的组。 在组中,按其逻辑顺序放置命令。 总的来说,命令应具有一个逻辑流,使其易于查找,同时仍首先显示最常用的命令。 这样做最有效,尤其是在存在溢出的情况下。

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

    屏幕截图,其中显示了使用分组分隔符具有井然有序图标的工具栏。

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

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

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

    可接受:

    屏幕截图

    更好:

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

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

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

    不正确:

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

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

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

隐藏菜单栏

通常,工具栏与菜单栏协同工作,因为两者都允许每个工具栏专注于其优势,而不会造成损害。

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

互动

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

    描述按钮屏幕截图

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

  • 在左侧单击:

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

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

      指针的屏幕截图,如油漆桶

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

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

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

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

      显示按钮函数屏幕截图

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

  • 右键单击:

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

图标

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

    字体大小下拉列表屏幕截图

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

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

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

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

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

  • 确保工具栏图标符合航空样式图标准则。

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

标准菜单和拆分按钮

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

主工具栏

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

File NewCtrl+N
打开。。。Ctrl+O
关闭
<分隔符>
SaveCtrl+S
另存为...
<分隔符>
发送到
<分隔符>
打印。。。Ctrl+P
打印预览
页面设置
<分隔符>
ExitAlt+F4(通常未提供快捷方式)

“编辑”(菜单按钮) UndoCtrl+Z
RedoCtrl+Y
<分隔符>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<分隔符>
选择 allCtrl+A
<分隔符>
DeleteDel(通常未提供快捷方式)
重命名。。。
<分隔符>
找到。。。Ctrl+F
查找 nextF3(命令通常未给出)
取代。。。Ctrl+H
转到。。。Ctrl+G

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

视图(菜单按钮) 菜单栏(检查是否可见)
详细信息窗格(检查是否可见)
预览窗格(检查是否可见)
状态栏(检查是否可见)

缩放
放大缩小字体功能 放大缩小字体功能
放大缩小字体功能 放大缩小字体功能

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

最大
较大
中等
较小
最小

全屏F11
RefreshF5

工具(菜单按钮)...

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

关于 <program name>

补充工具栏

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

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

不正确:

针对不同命令屏幕截图

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

调色板窗口

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

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

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

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

    包含上下文菜单屏幕截图

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

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

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

定制

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

  • 提供良好的默认配置。 用户不必为常见方案自定义其工具栏。 不要依赖于用户自定义其退出错误的初始配置。 假设大多数用户不会自定义其工具栏。

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

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

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

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

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

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

  • 通过以下方式提供自定义工具栏的功能:

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

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

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

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

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

使用省略号

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

使用省略号屏幕截图

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

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

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

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

由于工具栏不断显示,空间处于高级阶段,因此 省略号不应使用。

注意

对于工具栏显示的菜单,请应用 菜单省略号指南

使用间距信息屏幕截图

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

标签

常规

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

未标记的图标按钮

  • 使用工具提示标记命令。 对于工具提示文本,请使用标记按钮时标签的内容,但如果有该按钮,请使用快捷键。

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

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

标记的图标按钮

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

  • 将标签置于图标右侧。

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

    带有信息提示屏幕截图

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

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

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

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

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

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

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

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

文档

引用工具栏时:

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

例子:

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