首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

工具栏:从入门到精通

本文翻译自微软 Windows 桌面应用设计指南-工具栏篇。阅读全文大概需要 25 分钟。

由于是微软自家应用的设计规范,所以可能并非全部设计规范都适用于你。推荐重点了解工具栏使用模式、控件样式介绍和设计规范部分。

工具栏(toolbar)主要配合或代替菜单栏(menu bar)使用,因为工具栏可以比菜单栏更有效、直接 (总是显示而不是鼠标点击显示)、立即 (而不是需要额外的输入) 并包含最常用的命令 (而不是全面的列表)。与菜单栏相比,工具栏不需要非常完备,只需快速、方便和高效。

有些工具栏允许用户自定义——添加或删除工具栏,改变它们的大小和位置,甚至改变它们的内容。某些类型的工具栏可以取消停靠,从而变成一个面板。有关工具栏品种的更多信息,请参见本文中的使用模式。

工具栏适合你的产品么?

可以先尝试着考虑以下几个问题:

是用在主窗口吗?

工具栏非常适合主窗口,但是对于辅助窗口显得有些内容过载,在那里可以改用命令按钮(command button)、菜单按钮(menu button)和链接(link)。

是否有数量不多但高频使用的命令(command)?

工具栏不可能承载菜单栏中那么多的命令,所以它们最适合放置少量但经常使用的命令。

大多数命令都是立即生效的吗?也就是大多是不需要额外输入的命令吗?

为了高效,工具栏需要有一种直接和即时的感觉。如果不是,菜单栏更适合需要额外输入的命令。

大多数命令都可以直接呈现吗?也就是用户只需点击一下就可以与他们互动?

虽然有些命令可以使用菜单按钮来显示,但以这种方式显示大多数命令会降低工具栏的效率,菜单栏是更好的选择。

命令是否用图标表示?

工具栏按钮(toolbar button)通常由图标(icon)而不是文本标签(lable)来表示 (有些工具栏按钮同时使用两者),而菜单命令主要由文本表示。如果命令图标质量不高,也不能清晰地表达含义,菜单栏可能是更好的选择。

如果你的程序有一个没有菜单栏的工具栏,并且大多数命令可以通过菜单按钮(menu button)和拆分按钮(split button)间接访问,那么这个工具栏本质上就是一个菜单栏。应该使用菜单指南中的工具栏菜单(Toolbar Menus)模式。

设计理念

一个好的菜单栏是所有可用一级命令的目录,而一个好的工具栏则可以快速方便地访问那些经常使用的命令。工具栏并不试图训练用户,只是让他们更高效。一旦用户了解如何访问工具栏上的命令,就很少再从菜单栏上访问。由于这些原因,一个应用程序的菜单栏和工具栏不需要一一对应。

工具栏与菜单栏

工具栏在以下几方面与菜单栏有所不同:

频率。工具栏仅显示最常用的命令,而菜单栏则列出程序中所有可用的一级命令。

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

单击 “打印工具栏” 按钮会立即将文档的单个副本打印到默认打印机

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

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

尺寸和展示。为了在小空间中打包许多命令,工具栏通常使用基于图标的命令 (带有基于工具提示的标签),而菜单栏使用基于文本的命令 (带有可选图标)。虽然工具栏按钮可以有标准的文本标签,但它们确实使用了更多的空间。标记的工具栏按钮占用的空间至少是未标记的工具栏按钮的三倍。

表意清晰。精心设计的工具栏需要的图标大部分能清晰表达其含义,因为用户不可能只依赖工具提示(tooltip)找命令。不过,也允许一小部分相对没那么常用的命令不能清晰地表达自己的含义,因为这整体上不太会影响到工具栏的可用性,比如在下方这个例子中,保证最常用的图标表意清晰。

可识别和区分。对于经常使用的命令,用户会记住工具栏按钮的特征,如位置、形状和颜色。通过精心设计,用户可以快速找到某个命令,即使他们不记得确切的图标符号。相比之下,用户也会依靠位置记住经常使用的菜单栏命令,但主要还是依靠命令的标签。所以,对于工具栏命令,独特的位置、形状和颜色都有助于使图标可识别和区分。对于菜单栏命令,用户最终取决于他们的标签。

效率

工具栏诞生的目的就是为了提高效率,所以低效的工具栏没有任何意义。

如果你只做一件事,确保工具栏主要是为了提高效率而设计,将工具栏应用在经常使用、立即、直接和能够快速识别的命令上。

隐藏菜单栏

一般来说,工具栏和菜单栏一起配合使用会效果很好。好的工具栏提供效率,好的菜单栏提供全面的功能。同时拥有菜单栏和工具栏可以让它们各自专注于自己的优势。

但对于简单的应用程序并不一定要使用这套组合。对于只有几个命令的程序,同时拥有菜单栏和工具栏并没有意义,因为菜单栏最终只是工具栏的冗余低效版本。

为了消除这种冗余,Windows Vista 中的许多简单程序只通过工具栏提供命令,默认情况下隐藏菜单栏。这些程序包括 Windows 资源管理器、 Windows Internet Explorer 、 Windows 媒体播放器和 Windows 照片库。这是一个不小的变化。删除菜单栏从根本上改变了工具栏的性质,因为这样的工具栏需要更全面,并做出以下改变:

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

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

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

直接性。为了节省空间和防止混乱,不经常使用的命令可以收纳到菜单按钮。

对于和菜单栏配合使用的工具栏和用于移除或隐藏菜单栏时的工具栏,需要不同的设计。因为你不能假设用户会重新显示一个隐藏的菜单栏来执行某个命令,所以在做设计决策时,隐藏菜单栏应该被视为完全删除它。如果默认情况下隐藏菜单栏,不要假设用户会想到显示菜单栏来查找命令,用户甚至不知道如何显示它。

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

键盘辅助功能

通过键盘访问工具栏与访问菜单栏的设计完全不同。

当用户按下 Alt 键时,菜单栏会接收到输入焦点,并且他们会使用 Esc 键失去输入焦点。一旦菜单栏具有输入焦点,它将独立于窗口的其它部分进行导航,运用所有方向键、 Home 、 End 和 Tab 键。相比之下,当用户在窗口中按 Tab 键时,工具栏会接收输入焦点。但因为工具栏是排在顺序的最后一位,所以用户可能需要操作很久才能在一个内容很多的页面上激活工具栏 (除非用户知道使用 Shift + tab 向后移动)。

可访问性在这里是一个两难的问题::虽然工具栏对鼠标用户更容易,但对键盘用户却不太容易访问。如果同时存在菜单栏和工具栏,这不是问题,但如果菜单栏被删除或隐藏则是问题。因此,出于可访问性的原因,优先选择保留菜单栏,而不是完全删除菜单栏使用工具栏。如果必须在删除菜单栏和隐藏菜单栏之间进行选择,请选择隐藏菜单栏。

工具栏使用模式

工具栏有几种使用模式:

主工具栏 Primary toolbars

针对无菜单栏场景所设计的工具栏。主工具栏必须同时平衡效率的需求和全面性,所以它们最适合简单的程序。

Windows 资源管理器中的主工具栏

补充工具栏 Supplemental toolbars

用于与菜单栏配合的工具栏。可以尽情地专注于效率。

Windows Movie Maker 的补充工具栏

工具栏菜单 Toolbar menus

当作工具栏来用的菜单栏(本质是菜单栏)。主要由菜单按钮和拆分按钮组成,可能只有少数几个直接命令 。

Windows 照片库中的工具栏菜单

可定制的工具栏 Customizable toolbars

用户可以自定义的工具栏。允许用户添加或删除工具栏,更改其大小和位置,甚至更改其内容。

Microsoft Visual Studio 的可定制工具栏

面板窗口 Palette windows

显示一组命令的非模态对话框。面板窗口相当于没有停靠(undocked)的工具栏。

Windows Paint 中的面板窗口

工具栏样式

无标签图标 Unlabeled icons

一行或多行不含标签的小图标按钮。如果加标签的按钮较多,或是经常使用的应用程序,请使用此样式。通过这种样式,复杂应用程序可以有多行工具栏,这也是唯一支持自定义工具栏的样式。通过这种样式,可以为经常使用的按钮加标签。

写字板中的无标签图标工具栏

无标签大图标 Large unlabeled icons

单行不含标签的大图标按钮。此样式应用于通常在小窗口中运行且图表中易于识别的简单应用程序中。

Windows Live Messenger 和 Windows 剪切工具的大型无标签图标工具栏

标签图标 Labeled icons

单行含有标签的小图标。如果命令很少或应用程序不经常使用,请使用此样式。这种样式总是会占用一行。

Windows 资源管理器的带标签的图标工具栏

局部工具栏 Partial toolbars

当不需要完整工具栏时,可以使用一行中的局部区域放置小图标,以此节省空间。在带有导航按钮、搜索框或选项卡的窗口中使用此样式,以消除窗口顶部不必要的权重。

部分工具栏可以与导航按钮、搜索框或选项卡结合使用

局部大工具栏 Large partial toolbars

当不需要完整工具栏时,可以使用一行中的局部区域放置大图标,以此节省空间。将此样式用于具有导航按钮或搜索框的简单应用程序,以消除窗口顶部不必要的权重。

Windows Defender 的一个局部大工具栏

控件样式

最后,工具栏中的控件也有几种使用模式:

命令图标按钮 Command icon buttons

单击命令按钮可立即启动操作。

Windows 传真和扫描的图标命令按钮示例

属性图标按钮 Property icon buttons

属性按钮的状态反映了当前选定对象的状态 (如果有)。单击按钮将更改应用于选定对象。

Microsoft Word 中的属性按钮示例

菜单按钮 Menu buttons

用于显示一组相关命令的按钮。单个向下指向的三角形表示单击按钮显示菜单。

带有一组相关命令的菜单按钮

拆分按钮 Split buttons

用于合并一组命令变体的命令按钮,尤其是在大多数时间使用其中一个命令时。

处于正常状态的拆分按钮

像菜单按钮一样,单个向下指向的三角形表示单击按钮的最右边部分显示菜单。

一个下拉的拆分按钮

在本例中,拆分按钮用于合并所有与打印相关的命令。“立即打印” 命令大部分时间都在使用,因此用户通常不需要查看其他命令。

与菜单按钮不同,单击按钮的左侧部分直接在标签上执行操作。在下一个命令可能与最后一个命令相同的情况下,拆分按钮是有效的。在这种情况下,标签将更改为最后一个命令,如使用颜色选择器:

下拉列表 Drop-down lists

用于查看或更改属性的下拉列表 (可编辑或只读)。在此示例中,下拉列表用于查看和设置字体属性。工具栏中的下拉列表反映了当前选定对象的状态 (如果有)。更改列表会更改选定对象的状态。

标签图标按钮 Labeled icon buttons

标有图标和文本标签的命令按钮或属性按钮。这个样式长用于高频使用但图标不能清晰表意的工具栏按钮。或当工具栏中按钮较少时,每个按钮都可以有一个文本标签。

标有最常用按钮的工具栏

模态图标按钮 Mode icon buttons

单击模态按钮进入所选模式。(译者注:模态按钮,即点击之后会一直处于这个功能状态下,例如一直输入文本框,直到退出或切换至其他命令)

Windows 画图中的模态按钮示例

设计指南

展示

根据命令的数量及其使用情况选择合适的工具栏样式。有关如何选择的指南,请参见上一章工具栏样式。避免使用从程序工作区占用太多空间的工具栏配置。

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

如果所需空间很大,通过以下方式节省空间:

省略了众所周知的图标和不太常用的命令的标签。

仅使用部分工具栏而不是整个窗口宽度。

使用菜单按钮或拆分按钮合并相关命令。

使用溢出符号(overflow chevron )显示不太常用的命令。

仅当命令应用于当前上下文时才显示命令。

Windows Internet Explorer 工具栏通过省略常规图标的标签、使用部分工具栏和使用溢出符号来获取不太常用的命令来节省空间

对于无标签图标工具栏,默认配置不超过两行工具栏。如果有必要超过两行,请允许工具栏可自定义。从超过两行,可能会使用户不堪重负,并占用工作区太多空间。

不正确:超过两行工具栏的默认配置会导致太多的视觉混乱

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

如果单击某个工具栏按钮会直接导致错误,请禁用它们。这是保持直觉所必要的。

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

调试工具栏仅在程序运行时显示

左对齐显示工具栏按钮,如果有帮助图标,则右对齐

除了帮助之外,所有工具栏按钮都保持左对齐

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

不要动态更改工具栏按钮的标签,会让用户困惑和意外。但是可以更改图标以反映当前状态。

本示例中更改图标以指示默认命令

控件和命令

优先提供最常用的命令。

对于主工具栏,提供全面的命令。主工具栏不必像菜单栏那样全面,但它们必须提供其他地方不容易发现的所有命令。主工具栏不需要具有以下命令:

直接展示在用户界面上的命令。

通过上下文菜单访问的命令。

标准的、众所周知的命令,如剪切、复制和粘贴。

对于补充工具栏,提供最常用的命令。菜单栏命令是工具栏命令的全集,因此不必提供所有内容。专注于快速方便的命令访问,跳过其余部分。

优先提供直接控件。按以下优先顺序使用工具栏按钮:

图标按钮。直接且占用最小空间。

标签图标按钮。直接但占用更多空间。

拆分按钮。直接用于最常见的命令,且包含更多命令变体。

菜单按钮。间接,但可以提供许多命令。

优先提供立即命令。无论是对于可以立即生效,还是需要额外输入以实现灵活性的命令:

对于主工具栏,请使用命令的灵活版本 。

对于补充工具栏,请使用工具栏中的即时版本 ,并在菜单栏中使用灵活版本。

为经常使用的命令提供标签,特别当用户不太熟悉它们的图标时。

可接受:

更好:

Windows 传真和扫描工具栏命令不太多,所以为最重要的命令增加标签。

如果一个命令已经在工具栏上,就无需再在工具栏菜单中展示。

不正确:

在这个例子中,Print 直接在工具栏上,所以它不需要在菜单中。

组织和顺序

将工具栏中的命令按相关性分组。

首先放置最常用的组。在一个组中,按其逻辑顺序放置命令。总的来说,这些命令应该有一个逻辑流程,以便于找到它们,同时保证最常用的命令最先出现。这样做最有效,尤其是有工具栏展示宽度不够时。

仅当组间的命令弱耦合时才使用组分隔符。这样做可以使分组变得明显,命令也更容易找到。

Windows Mail 的分组工具栏示例

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

可接受的:

更好的:

在更好的例子中,删除命令在物理上与打印分开

使用溢出图标表示并非所有命令都可以显示。但是只有在没有足够的空间显示所有命令时才使用溢出。

不正确:

溢出图标表示不是所有命令都显示,但是这里可以有更好的布局

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

隐藏菜单栏

一般来说,工具栏和菜单栏配合使用会很好,因为两者都可以让每个人都毫不妥协地专注于自己的优势。

如果您的工具栏设计使菜单栏变得多余,则默认情况下隐藏菜单栏。

隐藏菜单栏而不是完全删除菜单栏,因为菜单栏对键盘用户来说更容易访问。

要恢复菜单栏,请在视图 (对于主工具栏) 或工具 (对于辅助工具栏) 菜单类别中提供菜单栏复选标记选项。有关更多信息,请参见标准菜单和拆分按钮。

当用户按下 Alt 键并在第一个菜单类别上设置输入焦点时,显示菜单栏。

交互

在悬停时,显示按钮可供点击,以指示图标可点击。工具提示(tooltips)超时后,显示工具提示或信息提示(infotips)。

各种显示状态

左键单击,

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

对于模态按钮,控件需要反映当前选择的模式。如果模式影响鼠标交互的行为,也可以更改指针。在下图中,将更改指针以显示鼠标交互模式。

对于属性按钮和下拉列表,显示控件以反映当前选定对象的状态 (如果有)。在交互中,更新控件的状态并将更改应用于选定对象。如果没有选择任何内容,则什么也不做。

左键双击时,执行与左键单击相同的操作。

例外:在极少数情况下,可以更有效地使用工具栏命令。在这种情况下,使用双击切换模式。在下图中,双击 “格式刷” 命令进入一种模式,在这种模式下,所有后续单击都应用格式。用户可以通过左键单击离开模式。

右键单击:

对于可自定义的工具栏,显示用于自定义工具栏的上下文菜单。在鼠标向下右键单击时显示菜单,而不是鼠标向上。

对于其他工具栏,什么也不做。

图标

提供除下拉列表以外的所有工具栏控件的图标。下拉列表不需要图标,但所有其他工具栏控件都需要。例外:Windows 7 风格的工具栏仅常见命令使用图标; 否则,它们使用不带图标的文本标签。这样做可以提高标签的清晰度,但需要更多的空间。(译者注:非微软的设计中下拉列表也可能包含图标)

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

选择清楚传达其目的的图标,尤其是最常用的命令。精心设计的工具栏需要表意清晰的图标,因为用户无法使用提示有效地找到命令。不过,如果有一些不太常用的命令的图标表意不够清晰,并不会影响工具栏的正常使用。

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

确保工具栏图标符合 Aero 风格的图标指南。

有关更多信息和示例,请参见Icons。

标准菜单和拆分按钮

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

主工具栏

使用标准菜单或拆分按钮的命令直接映射了标准菜单栏中的命令,因此它们只能用于主工具栏。它们的下拉列表会展示按钮的标签、类型、顺序、分隔符、快捷键和省略号。请注意,用于显示和隐藏菜单栏的命令位于 “视图” 菜单中。

文件 File

新建  Ctrl + N

打开… Ctrl + O

关闭

保存 Ctrl + S

另存为…

发送到打印… Ctrl + P

打印预览页面设置

退出 Alt + F4 (通常不提供快捷方式)

编辑 Edit (菜单按钮)

撤销 Ctrl + Z

重做 Ctrl + Y

剪切 Ctrl + X

复制 Ctrl + C

粘贴 Ctrl + V

全选 Ctrl + A

删除程序 (通常没有给出快捷方式)

重命名…

查找… Ctrl + F

查找下一步 f3 (通常没有给出命令)

替换.… Ctrl + H

转到… Ctrl + G

打印(拆分按钮)

打印… Ctrl + P

打印预览页面设置

视图(菜单按钮)

菜单栏 (检查是否可见)

详细信息窗格 (检查是否可见)

预览窗格 (检查是否可见)

状态栏 (检查是否可见)

缩放 放大 ctrl + +  缩小 ctrl +-

文本大小 (当前选项有标记) 最大 /大/中等/较小/最小

全屏 F11

刷新 F5

工具(菜单按钮)

选项

帮助 (拆分按钮,使用帮助图标)

帮助 f1 关于

补充工具栏

补充工具栏上的命令是标准菜单栏的补充。菜单按钮或拆分按钮的下拉列表中会显示按钮的标签、类型、顺序、分隔符、快捷键和省略号。请注意,用于显示和隐藏菜单栏的命令位于 “工具” 菜单中。

补充工具栏类别名称可以与标准菜单类别名称不同,因为它们需要更加包容。例如,使用 “组织” 而不是 “编辑”,则可以包含与编辑无关的命令。但为了保持菜单栏和工具栏之间的一致性,如果使用标准菜单类别名称不会造成误解,还请使用标准菜单名称。

不正确:

工具栏应该使用编辑而不是组织以保持一致性,因为它具有标准的编辑菜单命令

面板窗口

面板窗口使用较短的标题栏来最小化其屏幕空间。在标题栏上放一个关闭按钮。

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

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

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

用户可以右键单击标题栏以显示上下文菜单

如果有可能和有用,允许调整面板窗口大小。需要给出明确的暗示窗口可调整大小,即在窗口框架上使用调整大小指针。

重新显示面板窗口时,使用与上次访问相同的状态显示该窗口。关闭时,保存窗口大小和位置。重新显示时,恢复保存的窗口大小和位置。此外,请考虑在应用程序中在按用户账号保持这些属性一致。

自定义

为两行或多行工具栏提供自定义。只有无标签图标的工具栏需要自定义。简单的工具栏和很少的命令不需要自定义。

提供良好的默认配置。用户不必为常见场景自定义工具栏。不要依赖于用户定制他们的方法来摆脱糟糕的初始配置,要假设大多数用户不会自定义其工具栏。

提供包含以下命令的情境菜单:

显示可用工具栏的复选框列表

锁定/解锁工具栏

定制...

默认情况下,锁定可自定义的工具栏,以防止意外更改。

对于 “自定义” 命令,显示 “选项” 对话框,该对话框提供了选择显示哪些工具栏以及每个工具栏上的命令的功能。在下图中,Visual Studio 提供了一个选项对话框来自定义其工具栏。

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

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

设置工具栏顺序和位置。

设置工具栏长度,显示任何太小而无法用溢出的雪佛龙显示其内容的工具栏。

如果支持,则取消停靠工具栏以成为调色板窗口,反之亦然。

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

设置工具栏内容。

设置工具栏内容的顺序。

这样做可以让用户更直接、更有效地进行更改。

按用户账号保存所有工具栏的自定义设置。

使用省略号

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

在此示例中,Print.命令将显示一个打印对话框以收集更多信息

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

共享设置命令没有省略号,因为它不能立即生效

因为工具栏属于长期显示,而且空间很重要,所以省略号应该少使用。对于工具栏显示的菜单,应遵循 menu ellipses guidelines。

推荐尺寸和间距

标准工具栏的推荐尺寸和间距

标签

通用

使用句式大写。

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

无标签图标按钮

使用工具提示标记命令。对于工具提示文本,如果按钮可以添加标签,请使用标签,但如果有快捷键,请包括快捷键。

图标按钮工具提示的示例

标签图标按钮

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

将标签放在图标的右侧。

使用信息提示来描述该命令。因为按钮有标签,所以使用信息提示而不是工具提示。

包含标签的图标按钮信息提示的示例

下拉列表

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

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

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

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

菜单按钮和拆分按钮

优先选择基于动词的菜单按钮名称。但是,如果动词是 “创建” 、 “显示” 、 “查看” 或 “管理”,则省略该动词。例如,工具和页面菜单按钮没有动词。

使用一个能清晰准确地描述菜单内容的特定单词。虽然名称无需特别笼统(以至于它们可以描述菜单中的所有内容),但它们应该提供足够可预测性,这样用户就不会对菜单中的内容感到惊讶。

虽然不是必需的,但如果有帮助,请提供信息提示描述。

菜单项

使用以动词、名词或名词短语开头的菜单项名称。

优先选择基于动词的菜单名称。但是,如果动词是 “创建” 、 “显示” 、 “查看” 或 “管理”,则省略该动词。例如,以下命令不使用动词:

关于

高级

全屏

新建

选项

性能

使用特定的动词。避免通用无益的动词,如变更和管理。

对于适用于单个对象的命令使用单数名词,否则使用复数名词。

对于一对互补命令,选择明确互补的名称。示例:添加,删除; 显示,隐藏; 插入,删除。

根据用户目标和任务而不是技术选择菜单项名称。

将以下菜单项名称用于指定目的:

选项 Options:显示程序选项。

自定义 Customize :显示与机械用户界面配置特别相关的程序选项。

个性化 Personalize :显示常用个性化设置的摘要。

偏好 Preferences :不要使用。请改用选项。

属性 Properties :显示对象的属性窗口。

设置 Settings :不要用作菜单标签。请改用选项 Options。

显示子菜单的菜单项的标签上从来没有省略号。子菜单箭头表示需要另一个选择。

术语规范

到提及工具栏时:

如果只有一个工具栏,请称其为工具栏。

如果有多个工具栏,请按名称引用它们,加上后缀「工具栏」。参考主工具栏,其作为标准工具栏默认打开,包含基本的任务按钮,如打开和打印文件。

工具栏是一个小写单词(toolbar),而菜单栏是两个单词(menu bar)。

使用工具提示为工具栏按钮提供参考。使用精确的标签文本,包括其大写,但不包括任何省略号。

使用工具栏的标签和文字菜单为工具栏菜单按钮提供参考。使用精确的标签文本,包括其大写。

通常将工具栏控件称为工具栏按钮(toolbar button)。

如需描述用户交互行为,请针对工具栏按钮和只读下拉列表使用单击(click),为可编辑的下拉列表使用输入(enter)。不要使用选择(choose、select、pick)。

除了在编程文档中,不要使用层叠(casading)、下拉(pull-down、drop-down)或弹出(pop-up)来描述菜单按钮。

将不可用项目称为不可用(unavailable),而不是变暗(dimmed)、禁用(disabled)或变灰(grayed)。在编程文档中使用禁用(disabled)。

在可能的情况下,加粗标签。否则,仅在需要时将标签放在引号中,以防止混淆。

示例:

On the Page menu on the toolbar, click Send page by e-mail.

In the Fonts box on the toolbar, enter "Segoe UI."

On the Formatting toolbar, point to Show, and then click Comments.

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200528A08E6P00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券