模式 侧边抽屉栏

侧边抽屉栏

侧边抽屉栏从左侧滑入,包含了应用的导航目标。

侧边抽屉栏和屏幕等高,抽屉后面的内容依然可见,但会被一层半透明的黑色遮罩覆盖。

侧边抽屉栏遵循列表的关键线和度量标准。

静止海拔高度

16dp

侧边抽屉栏类型

固定显示
常驻
迷你版
临时显示

Material Design 侧边抽屉栏包含应用的导航目标

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

Material Design 侧边抽屉栏的排版

排版

  1. 名称:Roboto Medium,14sp,#FFFFFF
  2. 邮箱地址:Roboto Regular,14sp,#FFFFFF
  3. 列表项:Roboto Medium,14sp,87% #000000
  4. 副标题:Roboto Medium,14sp,54% #000000。与 16dp 的基准线对齐。
Material Design 侧边抽屉栏的关键线和边距

关键线和边距

图标和屏幕左右两边边距:16dp

图标颜色值:54% #000000

带图标或头像的内容的左边距:72dp

侧边抽屉栏宽度:等于屏幕宽度减去应用栏高度。在上面的例子中,侧边抽屉栏距离屏幕右侧 56dp。

最大宽度:侧边抽屉栏最大宽度在手机上为 280dp,在平板上为 320dp。这个数值是由标准增量乘以 5 得出的(标准增量在手机上为 56dp,在平板上为 64dp)。

手机上的水平间距为 16dp,平板上为 24dp。

Material Design 侧边抽屉栏的垂直间距

垂直间距

  1. 状态栏:24dp
  2. 副标题:56dp
  3. 内容区域之间的间距:8dp
  4. 副标题和列表项:48dp

为每个列表组的顶部和底部添加 8dp 的内边距。一个例外是:列表组顶部是副标题时可不加,因为副标题自身已包含内边距。

内容 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

海拔高度

侧边抽屉栏和屏幕等高(包含状态栏),静止海拔高度是 16dp。抽屉后面的内容依然可见,但会被一层半透明的黑色遮罩覆盖。

Material Design 中的侧边抽屉栏

Android 上的侧边抽屉栏

选中状态

被选中的列表项会将其颜色改为应用的主色(或 #000000 100%),以示选中状态。此外,触摸涟漪也会高亮出选中项所在的行。

如果触摸涟漪/高亮和应用的主色之间没有足够的对比度,请使用主色中更暗的色调。

Material Design 侧边抽屉栏的被选中列表项

被选中的列表项

Material Design 侧边抽屉栏的触摸涟漪/高亮

触摸涟漪/高亮

Material Design 侧边抽屉栏的触摸涟漪/高亮

触摸涟漪/高亮

Material Design 侧边抽屉栏的触摸涟漪/高亮

触摸涟漪/高亮

Material Design 侧边抽屉栏的触摸涟漪/高亮

触摸涟漪/高亮

Material Design 侧边抽屉栏的触摸涟漪/高亮

触摸涟漪/高亮

分隔线

侧边抽屉栏中所有的分隔线都是边缘到边缘的,每个分隔线的上方和下方都有 8dp 的内边距。

Material Design 侧边抽屉栏的分隔线示例

分隔线示例

Material Design 侧边抽屉栏的 8dp 的垂直间距

8dp 的垂直间距

滚动

侧边抽屉栏的滚动方式和视图的滚动方式相同。

Material Design 中的滚动前的侧边抽屉栏

滚动前的侧边抽屉栏

Material Design 中的滚动中的侧边抽屉栏

滚动中的侧边抽屉栏

设置和支持

在滚动时,设置和支持始终位于列表底部,与其他列表内容对齐。它们指的是“帮助”、“反馈”或“帮助和反馈”,取决于你的产品提供什么。

Material Design 侧边抽屉栏滚动时,设置和支持始终位于列表底部

滚动时,设置和支持始终位于列表底部。

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

固定显示

建议的桌面端默认值

固定显示的侧边抽屉栏始终可见,并固定在左边缘,和内容或背景处于同一海拔高度。它们不能被关闭。

使用以下最小值来计算固定的阈值:

1. 侧边抽屉栏宽度
2. 内容宽度
3. 内容边距

Material Design 中的固定侧边抽屉栏始终可见

固定显示的侧边抽屉栏类型

整个界面的结构和行为决定了要使用何种固定显示的侧边抽屉栏:

  • 全高侧边抽屉栏:应用使用从左到右的层次结构,并专注于内容展示
  • 被应用栏截断的侧边抽屉栏:应用需要平衡整个屏幕,并专注于生产力
  • 浮动侧边抽屉栏:应用需要更少的层次结构
Material Design 中的全高固定侧边抽屉栏示例

固定显示的、全高的侧边抽屉栏示例

Material Design 中的固定、截断侧边抽屉栏示例

固定显示的、被截断的侧边抽屉栏示例

Material Design 的固定显示浮动侧边抽屉栏示例

固定显示的、浮动侧边抽屉栏示例

Material Design 卡片中的固定显示浮动侧边抽屉栏示例

卡片中的固定显示的、浮动的侧边抽屉栏示例

常驻

常驻的侧边抽屉栏可以在打开和关闭之间切换。抽屉的海拔高度和内容相同。它默认关闭,点击菜单图标后会打开,打开后一直显示,直到被用户关闭。抽屉会在各个操作和各个会话之间保持同一状态。

当位于页面网格之外的抽屉被打开时,抽屉会强制其他内容改变大小,来适应更小的视图。

常驻的侧边抽屉栏适用于所有比手机尺寸大的设备。

Material Design 中的关闭的侧边抽屉栏示例

关闭的常驻侧边抽屉栏示例

Material Design 中的打开的侧边抽屉栏示例

打开的常驻侧边抽屉栏示例

对于需要使用向上箭头进行导航的多层次应用,不建议使用常驻的侧边抽屉栏。

Material Design 不建议使用常驻的侧边抽屉栏

不推荐做法

迷你版

在这种变体中,常驻的侧边抽屉栏改变了宽度。它的静止状态是一个小型抽屉,和内容处于同一海拔高度,且被应用栏截断。展开时,它会变成标准的常驻侧边抽屉栏。

推荐用于:
需要在内容旁边快速选择不同分区

Material Design 中的迷你版侧边抽屉栏示例

迷你版侧边抽屉栏的示例

Material Design 中的常驻侧边抽屉栏示例

打开的常驻侧边抽屉栏示例

临时显示

临时显示的侧边抽屉栏可以切换打开和关闭状态。默认情况下关闭,侧边抽屉栏会在所有其他内容之上暂时打开,直到选择了某个部分后会自动关闭。

推荐用于:
平板

必须用于:
手机

手机上关闭的 Material Design 临时侧边抽屉栏示例

手机上的关闭的临时侧边抽屉栏示例

手机上打开的 Material Design 临时侧边抽屉栏示例

手机上打开的临时侧边抽屉栏示例

也可以把迷你版作为临时侧边抽屉栏的关闭状态。

平板上关闭的 Material Design 临时侧边抽屉栏示例

平板上关闭的临时侧边抽屉栏示例

平板上打开的 Material Design 临时侧边抽屉栏示例

平板上打开的临时侧边抽屉栏示例

桌面端关闭的 Material Design 临时侧边抽屉栏示例

桌面端关闭的临时侧边抽屉栏示例

桌面端打开的 Material Design 临时侧边抽屉栏示例

桌面端打开的临时侧边抽屉栏示例