组件 菜单

菜单

菜单临时展示了一列选项。

用户通过按钮、操作或其他控件来打开菜单。菜单上显示了一列选项,每行一个。

在特定的情境下,菜单项可能被禁用。情境菜单会根据应用的当前状态,来动态调整菜单项是否可用。

类型

简单菜单(手机和平板)
层叠菜单(桌面)

海拔

菜单会出现在应用内其他元素的前面。

行为

可滚动

替代方案

简单对话框

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

用户通过按钮、操作或其他控件来打开菜单,菜单是临时的,它至少包含两个菜单项。

每个菜单项都由一个独立的选项或操作组成,它可以影响应用、视图、或视图中的选定元素。

菜单不能作为应用的主要导航方式。

应用栏中的更多按钮会触发弹出菜单

弹出菜单中包含五个菜单项:「Refresh」「Settings」「Send feedback」「Help」和「Signout」

菜单标签

触发菜单的按钮或操作的标签应当可以简洁明了的反映出菜单内容。菜单栏中通常使用一个词来作为标签,例如「文件」「格式」「编辑」和「视图」。其他地方可能会有稍长的标签。

禁用的菜单项

菜单展示了一组连贯的条目。菜单项可以根据应用的当前状态来启用或禁用。

标题「View」准确的描述了菜单项的共同特征。

标题「Stuff」不是描述性的,用户无法预知将会在该菜单中找到哪些菜单项。

情境菜单

情境菜单会根据应用的当前状态,来动态调整菜单项是否可用。

  • 与当前情境无关的菜单项可以被移除
  • 与情境相关的但需要满足特定条件才能使用的菜单项可以被禁用。例如,「复制」需要在选中文本后才启用。

单个菜单项状态

一些应用的状态可能会导致情境菜单中只有一个菜单项。例如,在网页上的选中文本时,Android 只显示「复制」操作,因为用户不能剪切或粘贴文本。

情境菜单

菜单可以滚动

如果菜单的高度不足以显示所有的菜单项,可以在菜单内进行滚动。例如在手机横屏状态下查看菜单。

内部滚动菜单

层叠菜单(仅限桌面)

对于多级的菜单,根据与屏幕边缘的距离,水平或垂直的放置菜单。

开发者注释:层叠菜单组件的实现可能因平台而异。根据平台的标准来实现,以便得到相关的改进。

桌面的层叠菜单

桌面的层叠下拉菜单

文本框下拉菜单

应用栏弹出菜单

菜单项 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

单行显示

每个菜单项都只能使用单行文本(一个词组或短语)来描述被选中时执行的操作。

菜单项还可以包含:

  • 图标和帮助文本,比如快捷键。
  • 像对号之类的控件来表示多选状态,请参考列表控件

菜单排序

静态菜单中,应当把常用的菜单项放置在顶部。

动态菜单可以有其他的行为,例如把最近使用的字体放在顶部。菜单项的顺序会根据用户行为来调整。

菜单嵌套

菜单项可以显示嵌套的子菜单。最好只嵌套一层,因为多级菜单的导航会比较困难。

菜单项示例

禁用操作

有条件限制的菜单项应当被禁用,而不是移除,让用户知道操作的存在,但有使用条件。

例如,当没有任何修改时,「重做」是禁用状态的。在选中文本前,「剪切」和「拷贝」是禁用的。

禁用菜单项示例

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

位置

菜单会出现在应用内其他 UI 元素前面。

菜单会出现在应用内其他 UI 元素前面

菜单会覆盖住触发项,这样当前已选的菜单项就可以显示在触发项的前面。

当前已选的菜单项显示在触发项的前面

不要重复显示已选的菜单项。

不要重复显示已选中的菜单项。

不要把菜单放置在触发项的下方,这样会让菜单脱离情境。

菜单应当放置在触发项的前面。

关闭菜单

轻触菜单之外的区域或者触发按钮(如果可见)可以关闭菜单。

选中某个菜单项后也应当关闭菜单,除非菜单项允许多选,例如可以使用对号来标示。

简单菜单 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

手机或平板

在列表中使用简单菜单来展示特定列表项的选项。

垂直对齐

在靠近屏幕边缘的位置触发时,菜单会垂直调整位置,使所有的菜单项都可见。

消除歧义:与简单菜单相反,简单对话框可以呈现与列表项相关的额外的信息,或是与主要任务相关的导航或正向操作。尽管两者都可以显示相同的内容,但考虑到对用户情境的干扰,简单菜单会比简单对话框更好。

选择条目

选中条目后会立即提交选项并关闭菜单。

取消选择

轻触菜单之外的区域或是按下系统后退键都会取消操作并关闭菜单。

简单菜单示例

当简单菜单打开时,当前已选项会尝试在底部的触发项的正前方,并且会高亮显示。

当前已选项显示在触发项的正前方

前已选项显示在触发项的正前方

不要直接把菜单的第一项放置在触发项的正前方。

不要忽视当前已选项,直接把菜单的第一项放置在触发项的正前方。

在靠近屏幕边缘的位置触发时,菜单会垂直调整位置,使所有的菜单项都可见。

当前已选项通常在触发项的正前方,但这样的话会导致菜单超出屏幕,因此在垂直方向上调整了菜单的位置。

简单菜单出现在触发项的正前方,而不是下方。

简单菜单出现在触发项的正前方

简单菜单不会出现在触发项的下方

菜单宽度取决于文本长度,在移动设备上为 56dp 的倍数。

简单菜单通常和屏幕的左右边缘保持 16dp(手机)或 24dp(平板)的距离。

简单菜单有 16dp 的外边距。

单位宽度为 56dp。

手机上的最小宽度 = 2 * 56dp = 112dp

简单菜单左右均有 16dp 的外边距。

单位宽度为 56dp。

手机上的最大宽度(纵向和横向相同) = 5 * 56dp = 280dp

如果简单菜单中的文本需要换行,请使用简单对话框替代。简单对话框可以有不同高度的行。

如果简单菜单中的文本需要换行,替换为简单对话框

不要在简单菜单中截断文本。替换为简单对话框

当内容可滚动时,菜单会一直显示滚动条。

简单菜单的最大高度应该比视图高度至少低一行,确保留出用于关闭菜单的触控区域。

内容可滚动时默认显示滚动条

没有滚动条,用户无法得知是否有其他菜单项可用。

不要重复显示菜单项。

每个菜单项只展示一次

不要显示重复的菜单项

简单菜单始终与触控项的文本左对齐,且不会根据用户的触控点而水平移动。

简单菜单始终与触控项的文本左对齐

简单菜单不会根据用户的触控点而水平移动

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

本文中的规格适用于多种平台、尺寸和类型的菜单。在菜单顶部和底部添加 8dp 的内边距。

手机

菜单项高度:48dp
菜单项文本左边距:16dp
菜单项文本下边距:20dp

不同宽度

不同宽度的菜单:最小宽度 1.5x,3x,6x 和 7x

层叠菜单

桌面的层叠菜单

层叠菜单的标注

层叠菜单顶部内边距:16dp
层叠菜单左侧内边距:24dp
层叠菜单项高度:32dp
菜单项图标右边距:32dp
子菜单项左侧内边距:64dp

字体:15sp Roboto