Material Design 组件图鉴 —— Menus

Menus display a list of choices on a transient sheet of material.

每一行只有一个选项。

种类:

  • 简易菜单 - Simple menus(移动端)
  • 瀑布状菜单 - Cascading menus(桌面端)

用法

当菜单出现的时候菜单应当显示在所有元素之上,高过所有其他元素。

移动端的简易菜单会遮盖出发点,而瀑布状菜单不会,它会在触发带点下方出现。

菜单最少要有两个选项。

菜单 labels 足够简短,足够抽象,足够准确。

不可用 菜单内容或许会随当前页面状态变为不可用。

上下文简易菜单

根据触发物的性质或状态改变菜单内的选项。

  • 与当前上下文无关的选项可能会被直接去掉。
  • 有关但因为某些原因而不可用会被置灰。

只有一项的菜单

如因为上下文或其他因素影响,允许菜单只有一个选项。

菜单是可以滚动的


菜单选项

必须单行显示

菜单里的每项只占一行,空间不够用可以换行不可节字。

菜单项也可以包含:

  • icon 与文字,如快捷键帮助提示
  • Checkbox 等等 List controls 里面可以带有的东西。
  • 一般来说 Lists 里面就不要用 menu 了,优先使用 bottom sheet。

菜单顺序

内容固定的菜单以使用频率来安排项目顺序。

内容动态的菜单或可以将最近一次使用的选项移动到第一位。

菜单嵌套

瀑布状菜单会有菜单嵌套的情况出现。 不要使用太多嵌套,会难以使用。

不可用

某些常规项在不可用的时候也不要移除,而是置灰表示为不可用状态。


行为

位置

Menus 出现的时候会处于比所有其他元素都高的位置。

出现的时候会完全遮盖触发元素,而菜单中当前选中的项目会在 menu 的第一位。

Simple menu 不会让选项重复出现。

退出

Menu 项目被选中的同时就会退出菜单,除非存在多选项。


简易菜单

打开简易菜单后,当前选中的项目会有高亮效果,切当前选中项目会与 list item 位置水平对齐。

高亮且对齐。

但如果取对齐会导致菜单超出屏幕显示范围的话那就可以不对齐。

Menu 的宽度由文字决定,而在移动端上 Menu 的宽度总是 56dp 的倍数。

在手机上,简易菜单的与屏幕的边缘会有 16dp 的距离,而在平板端通常会有 24dp 的距离。

不可删节文字,一定要显示所有的文字,不行就换行。

如果 menu 是可以滚动的话,一定要显示出滚动条。


尺寸

菜单的第一项与最后一项与顶部/底部的间距增加 8dp

菜单使用文字大小

  • 一般:16sp/15px
  • 高密度:14sp/13px

移动端尺寸

  • 高度:48dp
  • 左边距:16dp
  • 距离底部:20dp
  • 宽度:56dp 的倍数(移动端)

桌面端尺寸

高度:32px 左边距:24px 字号:14px 宽度:64px 的倍数

瀑布状菜单(桌面)

高边距:16px 左边距:24px 高度:32px icon 右边距:32px 下级菜单左边距:64px 字体:15px