组件 菜单

菜单

菜单在一个临时表面上显示一列选项。

用户单击按钮、操作图标或其他控件可以打开菜单。菜单上显示一系列选项,每行显示一个选项。

如果不适用于特定的页面内容,菜单项可能被禁用。与页面内容相关的菜单将根据当前应用状态动态改变可用的菜单项。

类型

简单菜单(移动端和平板端)
级联菜单(桌面端)

海拔高度

菜单出现在其他应用内元素的上方。

行为

可滚动

替代方案

简单对话框

Material Design 菜单在一个临时表面上显示选项

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

菜单是一个临时表面,由按钮、操作图标、指示器或其他控件触发。它至少包含两个菜单项。

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

菜单不应作为应用中主要的导航方法。

Material Design 中的应用栏操作按钮触发菜单

应用栏中的操作溢出菜单会弹出一个菜单。

Material Design 菜单包含 5 个选项:刷新、设置、反馈、帮助和退出

此操作触发的菜单包含 5 个菜单项:"刷新"、"设置"、"发送反馈"、"帮助" 和 "退出"。

菜单标签

按钮或控件的标签应简明、准确地反映菜单中的菜单项。菜单栏通常使用单个词作为标签,如"文件"、"格式"、"编辑"和"视图"。其他场景可能需要更长的标签。

禁用的菜单项

菜单显示一组一致的菜单项。每个菜单项可以根据应用的当前状态启用或禁用。

Material Design 中的"视图"菜单项统一特性

推荐做法

标题"视图"准确描述了其包含的菜单项的统一特性。

Material Design 中的描述性标题示例

不推荐做法

标题"Stuff"不具有描述性,无法帮助用户预测在"Stuff"菜单中能找到什么菜单项。

上下文菜单

上下文菜单能够根据应用的当前状态动态改变可用的菜单项。

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

单个菜单项状态

某些应用状态可能导致上下文菜单只包含一个菜单项。例如,当选中网页上的文本时,Android 只显示"复制"菜单项,因为用户不能剪切或粘贴文本。

Material Design 中的上下文菜单
Material Design 中的上下文菜单

上下文菜单

菜单可以滚动

如果菜单的高度不足以显示所有菜单项,菜单可以内部滚动。一个典型例子是在手机横屏状态下查看菜单。

Material Design 中的菜单支持内部滚动功能

内部滚动菜单

级联菜单(仅适用于桌面端)

对于级联菜单,根据其与屏幕边缘的距离,垂直和水平地定位菜单。

开发人员注释:此组件的实现可能因平台而异。通过使用标准平台实现,您将收到任何相关的进一步改进。

Material Design 中的桌面级联菜单

桌面端的级联菜单

桌面端的级联下拉菜单

下拉菜单

操作溢出菜单

菜单项 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

单行显示

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

菜单项还可以包括:

  • 图标和帮助文本,比如快捷键。
  • 像复选标记之类的控件来标识多选条目或状态(详见列表控件

菜单排序

带有静态内容的菜单应在菜单顶部放置最常用的菜单项。

带有动态内容的菜单可能具有其他行为,例如在菜单顶部放置之前使用过的字体。顺序可以根据用户的操作而改变。

菜单嵌套

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

Material Design 中的菜单项示例

禁用菜单项

将菜单项禁用而非移除,可以让用户知道在正确的条件下它们是可用的。

例如,当没有内容可以恢复时,"恢复"菜单项是禁用的。在内容被选中之前,"剪切"和"复制"菜单项是禁用的。

Material Design 中的禁用菜单项示例

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

位置

菜单出现在所有其他应用内部 UI 元素的上方。

Material Design 中的应用内菜单示例

菜单出现在所有其他应用内部 UI 元素上方的示例。

菜单显示在触发它的元素的位置,当前选中的菜单项显示在触发它的元素的顶部。

Material Design 中的当前选中菜单项显示在触发元素上方

推荐做法

当前选中的菜单项出现在触发它的元素上方。

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

Material Design:避免显示重复的菜单项

不推荐做法

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

菜单不应放在触发它的元素的下方。

Material Design 菜单应显示在触发元素之上

不推荐做法

菜单应显示在触发它的元素之上。

关闭菜单

触摸菜单外部或触发菜单的元素可以关闭菜单。

选择了一个菜单项后也应关闭菜单。一个例外是当菜单允许选择多个项目时,例如通过使用复选标记。

简单菜单 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

移动端或平板端

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

垂直对齐

当靠近屏幕边缘时,简单菜单垂直对齐,使所有菜单项完全可见。

消除歧义:与简单菜单相反,简单对话框可以呈现与可用列表项相关的附加细节,或提供与主要任务相关的导航或正交操作。尽管它们可以显示相同的内容,但是简单菜单比简单对话框更好,因为简单菜单对用户的当前上下文干扰较小。

选择选项

选择一个选项将立即提交该选项并关闭菜单。

取消选择

触摸菜单外部,或按下系统后退按钮,会取消操作并关闭菜单。

Material Design 中的简单菜单示例

简单菜单示例

当简单菜单打开时,会尝试将当前选定的菜单项与列表项垂直对齐。当前选定的菜单项将高亮显示。

Material Design 中垂直对齐的选中菜单项

推荐做法

当前选择的菜单项在列表项上垂直对齐。

Material Design 中菜单项在列表上垂直对齐

推荐做法

当前选择的菜单项在列表项上垂直对齐。

不要随意地把第一个菜单项置于列表项上。

Material Design 中菜单项随意置于列表项上

不推荐做法

一个菜单项被随意地放在了列表项上,而不管当前选择的菜单项。

当靠近屏幕边缘时,简单菜单会重新定位进行垂直对齐,以使所有菜单项完全可见。

Material Design 中的菜单项垂直重新定位

推荐做法

当前选择的菜单项通常位于列表项之上,但在此情况下,这样做会导致菜单的一部分出现在屏幕外,因此整个菜单被垂直重新定位。

简单菜单出现在触发它的元素上,而不是下面。

Material Design 中的简单菜单显示在触发元素上

推荐做法

简单菜单出现在触发它的元素上。

Material Design:简单菜单不会出现在触发元素下方

不推荐做法

简单菜单不会出现在触发它的元素下面。

菜单宽度取决于字符串长度,在移动设备上定义为 56dp 单位的倍数。

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

Material Design 中菜单宽度随字符串长度变化

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

每个单位的宽度是 56dp。

移动设备上的最小宽度 = 2 * 56dp = 112dp

Material Design 中菜单宽度随字符串长度变化

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

每个单位的宽度是 56dp。

在移动设备上的最大宽度(纵向和横向) = 5 * 56dp = 280dp

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

Material Design 中换行菜单文本使用简单对话框

推荐做法

如果简单菜单中的任意文本产生了换行,请改用简单对话框。

Material Design 中简单对话框不截断文本

不推荐做法

不要在简单菜单中截断文本。请使用简单对话框代替。

在内容可以滚动时,菜单会显示一个持续显示的滚动条。

简单菜单的最大高度应比视图高度低一行或多行。这确保了在简单菜单外面留出一部分可点击区域,用于关闭菜单。

Material Design 中可滚动内容的默认滚动条

推荐做法

默认显示可滚动内容的滚动条。

Material Design 中菜单可能还有更多可用项

不推荐做法

没有滚动条,就不清楚是否有其他菜单项可用。

不要重复显示菜单项。

Material Design 中每个菜单项仅出现一次

推荐做法

每个菜单项只出现一次。

Material Design:避免显示重复元素

不推荐做法

不要重复显示菜单项。

简单菜单始终与列表项文本的开头左对齐,且不会基于触摸位置重新水平定位。

Material Design:简单菜单始终左对齐

推荐做法

简单菜单左对齐,无论触摸位置如何。

Material Design:简单菜单不根据触摸位置重新定位

不推荐做法

简单菜单不根据触摸位置重新定位。

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

规范提供了不同平台上不同大小及不同菜单类型的尺寸标准。在菜单顶部和底部添加 8dp 的内边距。

菜单的字体样式由Material 排版比例决定。

默认情况下,菜单使用:16sp(移动设备上),15px(桌面端)
紧凑型界面上使用:14sp(移动设备上),13px(桌面端)

手机端

Material Design 中不同平台和菜单类型的规格

菜单项高度:48dp
菜单项文本左侧内边距:16dp
菜单项文本底部内边距:20dp
顶部内边距:8dp
底部内边距:8dp
排版:16sp

不同宽度

Material Design 中不同宽度的菜单:1.5x、3x、6x、7x

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

桌面端

Material Design 中的默认桌面菜单

默认的桌面端菜单
菜单项高度:32px
菜单项文本左侧内边距:24px
顶部内边距:8px
底部内边距:8px
排版:15px

Material Design 中的紧凑型桌面端菜单

紧凑型桌面端菜单
菜单项高度:24px
菜单项文本左侧内边距:24px
顶部内边距:4px
底部内边距:4px
排版:13px

级联菜单

Material Design 的桌面级联菜单

桌面端的级联菜单

级联菜单的红线标注

Material Design 中的默认级联菜单

默认级联菜单
级联菜单顶部内边距:16px
级联菜单左侧内边距:24px
级联菜单项高度:32px
菜单项图标右侧内边距:32px
子菜单项左侧内边距:64px
排版:15px
紧凑型级联菜单可以使用 13px 的排版