菜单是用户在当前上下文中可选择的命令或选项的竖向列表集合。
下拉菜单在鼠标点击或hover过相关命令时会展示出来。他们通常呈收起状,是一种节约屏幕空间的有效方法。子菜单或级联菜单是从菜单项中,根据需要显示的辅助菜单。它们由菜单项标签末尾的箭头引申展示。菜单项是菜单中的单个命令或选项。
菜单通常在菜单栏中展示,菜单栏是通常位于窗口顶部附近的、带标签的菜单类别集合列表。与此对应,当用户右键单击支持上下文菜单的对象或窗口区域时,上下文菜单就会向下展开。
应用范例
菜单通常有以下几种应用范例:
菜单栏:以下拉菜单形式展示命令和选项。
菜单栏十分常见和易于发现,同时也十分节省屏幕空间。
工具栏菜单:作为工具栏使用的菜单栏。
工具栏菜单主要由菜单按钮和分裂式按钮中的命令组成,直接的命令出现得比较少。
标签页菜单:选项卡中的按钮,点击后会在下拉菜单中显示与选项卡相关的一小组命令或选项。带有菜单的标签页看起来像普通的标签页,只不过它们的底部有一个带下拉箭头的按钮。点击按钮会显示一个下拉菜单。
菜单按钮:菜单按钮点击后,会展示包含一组相关命令下拉菜单。菜单按钮看起来和普通的命令按钮很像,除了内部含有一个向下箭头。点击该按钮,不会执行命令,而是会展示一个下拉菜单。分裂式按钮和菜单按钮也很像,但是分裂式按钮展示的是命令的一系列变体,并且点击按钮的左边部分会直接执行标签上的命令。
上下文菜单:下拉菜单集合了一小组和当前内容有关的命令或选项。当用户右击支持上下文菜单的对象或区域时,上下文菜单会下拉展开。
如果在特定情况下,上下文菜单是呈现最佳的菜单选择,但该解决方案需要适用于所有用户,则可以下拉箭头按钮来触发上下文菜单。
任务面板菜单:一小组与选中对象或任务模式相关的命令。与上下文菜单不同,它们在窗口窗格中自动显示,而不是按需显示。
何时使用该UI部件?
思考以下问题,再做决定:
对于菜单栏
当前是否属于以下情况:
- 当前窗口为主窗口;
- 菜单选项有多个;
- 菜单类别有多个;
- 大多数菜单项目应用于整个项目和主窗口;
- 该菜单对所有用户都生效。
满足以上情况,则可以使用菜单栏。
对于工具栏菜单
当前是否属于以下情况:
- 当前窗口为主窗口;
- 当前窗口有工具栏;
- 菜单类目较少;
- 该菜单对所有用户都生效。
如果是这样,可以考虑使用工具栏菜单,而不是菜单栏。
对于标签页菜单
当前是否属于以下情况:
- 当前窗口为主窗口;
- 当前窗口有标签页,其中每个标签页用于一组专用的任务(而不是使用标签页来显示不同的视图) ;
- 有一组适用于窗口内所有标签页的菜单类目;
- 选项和命令总数有多个,但适用于单个标签页的选项和命令数比较少。
满足以上情况,考虑使用标签页菜单而不是菜单栏。
对于上下文菜单
当前是否属于以下情况:
- 有一小组上下文命令适用于当前选中的对象或窗口区域;
- 这些菜单项有冗余;
- 目标用户熟悉上下文菜单的操作方法。
满足以上情况,可以为需要的对象和窗口区域提供上下文菜单。
对于在浏览器中打开的项目,任务面板菜单是更常见的展现上下文命令的方式。
对于任务面板菜单
当前是否属于以下情况:
- 当前窗口为主窗口;
- 有一小组上下文命令适用于当前选中的对象或窗口区域;
- 菜单类目较少;
- 该菜单对所有用户都生效。
满足以上情况,考虑使用任务面板菜单而不是上下文菜单。
设计思路
高效的菜单能显著提升用户体验:
- 菜单中命令的展现方式要契合程序类型、窗口类型、命令用法以及目标用户。
- 菜单需要良好地组织,在合适的情况下使用标准菜单组织方式。
- 高效使用菜单栏、工具栏以及上下文菜单。
- 高效使用存取键和快捷键。
只需记住一件事:
选择匹配程序类型、窗口类型、命令用法以及目标用户的,命令呈现方式。
设计指南
通用
除了菜单栏之外,所有菜单模式都需要一个下拉箭头以表示下拉菜单的存在。下拉菜单的出现在菜单栏中是不言而喻的,但在其他模式中却不是这样。
不要动态更改菜单项的名称。这样的行为出人意料、令人困惑。例如,不要在选择时将纵向模式选项更改为横向模式。对于模式的更改,使用项目符号和复选标记代替。
例外情况: 可以动态更改基于对象名称的菜单项名称。例如,最近使用的文件或窗口名称列表可以是动态的。
菜单栏
- 尽量将菜单栏的菜单选项的类别控制在三个以下。如果选项数量很少,可以使用视觉上更轻量的替代方案例如工具栏菜单,或者更直接的表达方式,例如命令按钮或者链接。
- 菜单选项类别不要超过十种。菜单类别太多会过于臃肿,并且用户难以使用。
- 如果工具栏或直接命令已经提供了大多数用户所需的几乎所有命令,那么可以考虑隐藏菜单栏。允许用户在工具栏菜单中使用勾选来显示或隐藏菜单栏。
隐藏菜单栏
一般来说,工具栏和菜单栏一起工作效果很好,因为两者都可以毫不妥协地专注于自己的优势。
- 如果工具栏设计使菜单栏显得多余,则默认情况下隐藏菜单栏。
- 隐藏菜单栏而不是完全删除它,因为对于键盘用户来说,菜单栏更容易访问。
- 要恢复菜单栏,在“视图”选项(对应主工具栏)或“工具”选项 (对应辅助工具栏)菜单类别中提供一个“菜单栏”复选标记选项。有关详细信息,请参阅标准菜单和分割按钮。
菜单项目类别
- 菜单项目类别用单个单词表示。使用多个单词描述会和类别之间的间隔产生混淆。
- 对于会生成或打开新文件的菜单类别,使用标准菜单类别名称,例如“文件”、“编辑”、“查看”、“工具”和“帮助”等。这样能让用户更容易预测和找到常用的命令项位置。
- 基于项目的用途以及用户对任务和目标的理解,对其他类别的项目,尽量将命令和选项组织成更有意义、更自然的类别。如果当前项目不合适,不要生硬套用常规菜单的组织方式。
- 如果要采用非标准的菜单类别组织方式,请选择合适的类别名称。更多信息,详见标签一章。
- 倾向于按照任务属性、而不是一般类别,将菜单项目分类。按任务导向分类的菜单类别更易于查找。
避免菜单分类下只有一到两个项目的情况。在合理的情况下,可以使用次级菜单的方式将项目少的类别进行合并展示。
以下情况,可以考虑将同一项目放在多个类别下多次展示:
1.按照逻辑,该项目确实同时属于多个项目类别;
2.有数据显示,用户确实对只出现在单个类别下的该项目查找困难;
3.这样的难以发现的、属于多个类别的项目只有少数一两个。-
不同类别下的不同项目,不要使用同一个名称。例如,在不同的类目下,不要同事都含有名为“选项”的不同项目。
例外情况:选项卡菜单模式可以在每个选项卡菜单中有不同的“选项”和“帮助”菜单项。
菜单内项目的组织和顺序
- 将菜单项组织为七个或更少的密切相关的项目组。正因如此,子菜单算作父菜单中的一个菜单项。
- 同一级别的菜单项目不要超过25个(不包括子菜单)。
- 在菜单中的组之间放置分隔符。分隔符是横跨菜单宽度的单行线。
- 在菜单中,按照逻辑顺序排列组。如果没有逻辑顺序,就将最常用的组放在第一位。
- 在组中,按照逻辑顺序排列项目。如果没有逻辑顺序,则将最常用的项目放在第一位。将数字项(例如缩放百分比)按数字顺序排列。
次级菜单
- 尽可能少使用次级菜单。次级菜单使用起来更困难,而且其中的项目更难被找到。
- 不要将经常会用到的项目放在次级菜单中。这样会降低类似命令的使用效率。当然,如果有类似工具栏的其他更便捷的方式能启动该命令,还是可以将这种常用命令放在次级菜单中的。
-
以下情况可以考虑使用次级菜单:
1.次级菜单能够很好地简化项目过多的父级菜单(超过20个项目的父级菜单),或者作为组中元素,简化超过7个项目的较大分组。
2.次级菜单中的项目不如父菜单中的项目常用。
3.次级菜单含有三个及以上的项目。
4.当有三个及以上的命令都是以相同的单词开头时,可以使用该词作为次级菜单的标签。
- 菜单层级至多不能超过三层。这也就是说,至多可以建立一个主菜单和两层次级菜单。其中两层次级菜单也是很少见的情况。
展示
-
禁用掉而不是直接删除不适用于当前上下文的菜单项目。这样做能保持菜单栏项目的稳定性,更利于用户的查找。但也有以下几种例外情况:
1.针对上下文菜单这一类别的菜单,直接去掉而不是禁用掉不适用于当前上下文的菜单项目。当菜单类别只显示特定模式(如选择了某个对象类型)时,该菜单类别是上下文相关的。有关详细信息,请参阅上下文菜单的相关指南。
2.如果决定什么时候应该禁用菜单项会导致明显的性能问题,请保持菜单项处于活动状态,如果必要的话,设置选择菜单项显示错误消息。
标签页菜单
- 每个标签页菜单下可以含有自己独有的“选项”和“帮助”菜单项。这一点和其他菜单模式相比较尤为明显。每个选项卡用于一组专用的任务,因此跨选项卡菜单的任何冗余选项都不会引起混淆。
上下文菜单
- 只针对特定的上下文命令和选项使用上下文菜单。菜单项目不针对整个程序,只应用于当前选中或点击的对象或窗口区域。
- 不要让命令只在上下文菜单中出现和生效。其他的方式还有类似通过快捷键等。上下文菜单只是执行命令或选择项目的方式之一。比如,“属性”命令就还可以通过菜单栏或Alt+Enter键来启动。
- 为所有能从一小组选项和命令的设置中获益的对象和窗口区域都设置上下文菜单。很多用户都会习惯性地右击鼠标,看看有什么可以执行的上下文菜单命令。
-
考虑对面向所有用户的上下文菜单设置单独的菜单下拉箭头按钮。通常上下文菜单提供的是面向高级用户的命令和选项。但是,当目标用户是全体用户、并且上下文菜单是合适的菜单类型选项时,提供一个菜单下拉箭头按钮。
*
菜单项目的组织和顺序
- 将菜单项目组织为数量在7以下、相互之间具有强烈关联的项目组。
- 尽量避免使用次级菜单。保持上下文菜单的简洁、直接和效率性。
- 上下文菜单内的项目不能超过15个。
- 在菜单内的组之间放置分隔符。分隔符是横跨菜单的一根单线。
-
依照以下顺序展示菜单项:
1.主要命令(常用命令);
2.打开、运行、播放、打印;
3.对象所支持的次要命令;
4.变换类命令;
5.剪切、复制、粘贴;
6.对象设置;
7.对象命令;
8.删除、重命名、属性。
展示
- 使用粗体显示默认选中的命令。如果可行的话,也可以把它作为第一个菜单项。当用户双击或选择一个对象并按回车时,将调用默认命令。
-
如果选项不适用于当前上下文,直接移除而不是禁用。这样能使上下文菜单更契合上下文、更有效率。
例外情况:如果用户对选项的应用有合理的期望,就不要禁用该选项。 - 一定要包含标准的上下文菜单选项,如剪切、复制、粘贴、重命名和删除。
- 互相之间关联的命令设置要完整出现。例如,如果有“返回”选项,则一定有“进入”选项,如果有“剪切”,则一定有“复制”和“粘贴”。
项目符号和复选标记
作为选项的菜单项可以使用项目符号和复选标记。命令则不可以使用。
使用项目符号从一小组相互排斥的选项中选择一个选项。一组中至少应该有两个项目。更多有关信息,请参见单选按钮一章。
使用复选标记开启或关闭独立设置。如果选择和取消选择的状态不是清晰和明确的对立面,那么使用一组项目符号代替。有关更多信息,请参见复选框。
对于混合选中标记状态,显示不带复选标记的菜单项。混合状态用于多个选择,以指示为某些(但不是全部)对象设置了选项,因此每个对象都具有选定或清除的状态。混合状态不用作单个项的第三状态。
在相关的复选标记或项目符号之间放置分隔符。分隔符是横跨菜单宽度的单行。
图标
-
以下情况考虑为菜单项目提供图标:
1.针对最常用的菜单选项;
2.有标准和广为用户所知icon的菜单选项;
3.有能准确描述菜单命令icon的菜单选项。 -
不必对所有菜单项使用图标。晦涩难懂的图标没有帮助,会造成视觉上的混乱,并阻止用户专注于重要的菜单项。
- 确保菜单图标符合 aero 风格的图标准则。
存取键
无一例外为所有菜单项分配存取键。
只要有可能,就根据“标准存取键分配”为常用命令分配存取键。虽然存取键的分配并不可能总是完全一致,但标准的肯定是首选的——尤其是对于经常使用的命令。
对于动态菜单项(例如最近使用的文件) ,按数字分配存取键。
在同一菜单级别中分配唯一的访问键。但可以跨不同的菜单级别重复使用访问键。
设置访问键使之易于寻找:
1.对于经常使用的菜单项,尽量使用标签第一个或第二个单词的首字母。
2.对于不常使用的菜单项,选择标签中与众不同的辅音字母或元音字母。选择宽度较宽的字符,如 w、 m 和大写字母。
尽量选择有特色的辅音或元音,如“退出Exit”中的“ x”。
避免使用会使下划线难以辨别的字符,例如(从问题最大的到问题最小的) :
1.只有一个像素宽的字母,比如 i 和 l。
2.字母有下沉部分,如 g、 j、 p、 q 和 y。
3.下沉字母旁边的字母。
快捷键
- 为最常用的菜单项分配快捷键。不常用的菜单项不需要快捷键,因为也可以通过存取键访问。
- 快捷键访问不应该是执行某个任务的唯一方式。用户也应该能使用鼠标访问任务,或者使用键盘上的Tab键、方向键以及存取键。
- 对于约定俗成的标准快捷键组合,使用默认设置方式。
- 不要为约定俗成的标准快捷键赋予不同的含义。因为大家已经记住了它们的含义,与此的不一致会令人沮丧且容易出错。
- 不要为系统级的应用设置快捷键。只有当程序获得输入焦点时,程序的快捷键才能起作用。
-
整理出所有快捷键组合。这样能帮助用户进行学习和熟悉快捷键用法。
例外情况:不要在上下文菜单中显示快捷键分配。上下文菜单用不显示快捷键,因为它们的存在本身就是为了提升效率。 -
对于非标准情况的快捷键分配:
1.选择没有进行过标准分配的快捷键。不要重新分配标准的快捷键。
2.在整个程序中始终使用同一套非标准快捷键。不要在不同的窗口中快捷键有不同的含义。
3.尽可能选择助记键分配,特别是对于经常使用的命令。
4.对于对小范围对象产生效果的命令,如应用于选定对象的命令,使用功能键作为快捷键。例如,按F2可以重命名选定的项。
5.对于对大范围对象产生效果的命令,如应用于整个文档的命令,使用 Ctrl 组合键。例如,Ctrl + s 保存当前文档。
6.对于扩展或补充标准快捷键操作的命令,使用 Shift 组合键。例如,Alt + Tab 快捷键循环通过打开的主窗口,而 Alt + Shift + Tab 按相反顺序循环。类似地,F1显示帮助,而 Shift + F1显示上下文相关的帮助。
7.不要使用下列字符作为快捷键:@${}[] ~ | ^ ’ < > 。这些字符需要跨语言的不同组合键,或者特定于区域设置。
8.不要使用 Ctrl + Alt 组合键,因为 Windows 在某些语言版本中将这种组合解释为 AltGR 键,它会生成字母数字字符。 - 如果程序有很多快捷键,也要设置允许用户自定义快捷键。这样用户可以重新分配产生冲突的快捷键,也可以从其他产品迁移快捷键组合。大多数程序没有分配足够的快捷键,因此需要设置该功能。
标准菜单
- 为创建或预览文件的程序设置标准的菜单组织方式。这种组织方式会使菜单项的位置可预测且易于寻找。
- 对于其他类型的程序,在合理的情况下使用标准菜单组织方式。根据程序的目的和用户对任务及目标的思考方式,考虑将命令和选项组织成更易于使用、更自然的类别。
标准菜单栏
标准菜单栏的结构如下。下面的列表展示了菜单类别以及项目标签、它们的顺序、存取键和快捷键、还有省略号。
文件操作类
新建 Ctrl+N / 打开... Ctrl+O / 保存后关闭 Ctrl+S / 另存为 / 发送到 / 打印... Ctrl+P / 打印预览 / 页面设置1 2 3... / 退出 Alt+F4(一般不会给出快捷键)
编辑类
撤回 Ctrl+Z / 重做 Ctrl+Y / 剪切 Ctrl+X / 复制 Ctrl+C
/ 粘贴 Ctrl+V / 全选 Ctrl+A / 删除 Del (一般不会给出快捷键) / 查找... Ctrl+F / 查找下一个 F3 (一般不会给出快捷键) / **替换... **Ctrl+H / 转到... Ctrl+G
视图类
工具栏 状态栏
缩放类
放大 Ctrl++ / 缩小 Ctrl+- / 全屏 F11 / 刷新 F5
工具类
...选项
帮助类
帮助 F1 关于
标准工具栏菜单按钮
标准工具栏菜单列表如下。下表展示了菜单类别以及项目标签、它们的顺序、存取键和快捷键、还有省略号。
工具类
全屏 F11 (如果查找也使用了F11,可以重新分配存取键)/ 工具栏(注意,菜单栏命令在这里) / **打印... ** / 查找... / 缩放 / 文本大小 / 选项
整理类
新建文件夹 Ctrl+N / 剪切 Ctrl+X / 复制 Ctrl+C / 粘贴 Ctrl+V / 全选 Ctrl+A / 删除 Del (通常不会给出快捷方式) / 重命名 / 选项
页面控制类
打开新窗口 Ctrl+N / 缩放 / 文本大小
标准上下文菜单
标准上下文菜单内容如下。这个列表显示了菜单项标签、它们带分隔符的顺序、它们的访问键以及省略号。上下文菜单不显示快捷键。
打开 / 运行 / 播放 / 编辑 / 打印... / 剪切 / 复制 / 粘贴 / 删除 / 重命名 / 锁定(复选框) / 属性
省略号的使用
虽然菜单命令用于即时操作,但用户可能需要更多信息来执行操作。通过在标签末尾添加省略号来指示需要额外信息(包括确认)的命令。
正确使用省略号很重要,它表明用户可以在执行操作之前做出进一步的选择,甚至可以彻底取消操作。省略号提供的视觉提示允许用户毫无负担地浏览软件。
但这也并不意味着所有会打开另一个窗口的操作都需要带省略号,只有在执行某个操作需要额外信息时才需要加上省略号。例如,单击“关于”、“高级”、“帮助”、“选项”、“属性”和“设置”命令时必然会显示另一个窗口,但不需要用户提供其他信息,因此它们不需要附加省略号。
在有可能出现歧义的情况下(例如,命令标签没有动词) ,根据最可能的用户操作来决定名称描述。如果简单地查看窗口是一个常见的操作,则不要使用省略号。
标签
-
使用句式大小写规则。
例外: 对于遗留应用程序,如果有必要,可以使用标题风格的大写,以避免混合大小写风格。
菜单类别名称
- 菜单类别名称尽量使用单个名词或动词。一个多单词的标签可能会被误认为是多个单一单词的标签。
-
尽量使用动词作为菜单名称。但是注意,当动词为“创建”、“展示”、“查看”、“管理”的时候,要省略掉。比如,以下菜单类别名称就不能含有动词:
1.表格
2.工具
3.窗口 - 对于非标准的类别名称,使用能够清晰、准确地描述菜单项内容的单个单词。虽然名称不必笼统到描述菜单中的所有内容,但它们应该足够可预测,以便用户不会对他们在菜单中发现的内容感到惊讶。
菜单项目名称
- 菜单项名称以动词、名词或名词短语开头。
-
尽量使用基于动词的菜单名称。但是,如果是以下情况,省略掉动词:
1.该动词是“创建”、“展示”、“查看”或“管理”。例如,以下的命令项就不能含有动词:关于/高级设置/全屏/新建/选项/属性。
2.动词与菜单类别名称相同时,为了避免重复需要省略。例如,在“插入”菜单类别中,使用“文本”、“表”和“图片”代替“插入文本”、“插入表”和“插入图片”。 - 使用准确的动词。避免使用通用的、毫无帮助的动词描述,例如“更改”、“管理”这种动词。
- 对于适用于单个对象的命令使用单数名词,否则的话,使用复数名词。
- 必要时使用修饰词来区分类似的命令。例如: 在上面插入行,在下面插入行。
- 对于成对的互补命令,选择明显对称的名称。例如: 添加、删除; 显示、隐藏; 插入、删除。
-
根据用户目标和任务、而不是技术实现方式,选择菜单项名称。
次级菜单名称
-
在会展示子菜单的菜单项目上,是不能带有省略号的。会有次级菜单的指示箭头表明需要进一步的选择。
说明
在提到菜单时:
- 在显示或隐藏菜单的命令中,将其描述为菜单栏。不要将它们称为经典菜单。
- 使用菜单的标签描述菜单。使用确切的标签文本,包括其大小写,但不包括访问键下划线以及省略号。
- 若要引用菜单类别,请使用“菜单中的...”来描述。如果菜单项的位置在上下文中是清晰的,那么您不需要提及菜单类别。
- 要描述用户与菜单项的交互动作,请使用“点击”,不要加“菜单”或“命令”文字进行描述。不要使用“选择”或者“挑选”。除非在技术文档中,不要将菜单项描述为“菜单项”。
- 要描述如何从菜单选项中删除复选标记,请使用 click 点击 ,不要使用 clear 清除。
- 将上下文菜单称为上下文菜单,而不是快捷菜单。
- 除了在技术文档中,不要使用级联、下拉或弹出来描述菜单。
- 将不可用的菜单项描述为不可用,而不是“暗淡的”、“不能用”或“变灰的”。在编程文档中使用“禁用”描述。
- 如果可能的话,使用粗体文本格式化标签。否则,只有在需要时才将标签用引号引起来,以防混淆。