模式 导航抽屉

导航抽屉

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

导航抽屉和屏幕等高,抽屉后面的内容依然可见,但会被蒙上一层半透明黑色的遮罩。

导航抽屉的关键线和指标参照了列表

静止海拔

16dp

导航抽屉类型

固定展示
连续展示
小型变体
临时展示

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

排版

  1. 名称:Roboto Medium,14sp,#FFFFFF
  2. 邮箱地址:Roboto Regular,14sp,#FFFFFF
  3. 列表项:Roboto Medium,14sp,87% #000000
  4. 组标题:Roboto Medium,14sp,54% #000000。与 16dp 的关键线对齐。

关键线和边距

图标的左右边距:16dp

图标色值:54% #000000

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

导航宽度:屏幕宽度减去操作栏高度。再上图中,导航抽屉距离屏幕右侧 56dp

最大宽度:手机上的最大宽度为 280dp,平板上是 320dp。这个数值是根据定义的单位增量乘以 5 得出的(手机上标准的增量为 56dp,平板为 64dp)

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

垂直间距

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

为每个分组列表的顶部和底部添加 8dp 的内边距。如果分组顶部带有组标题则可以不加,因为组标题已经包含了边距。

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

海拔

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

Android 上的导航抽屉

选中状态

被选中的列表项会将颜色改为应用的主色调(或 #000000 100%),来指示出已被选中。此外,触控涟漪也会高亮选中项的所在行。

如果触控波纹/高亮与应用主色调没有充足的对比度,可以使用主色调中更暗的色调。

选中列表项

触控涟漪/高亮

触控涟漪/高亮

触控涟漪/高亮

触控涟漪/高亮

触控涟漪/高亮

分割线

导航抽屉中的分隔线都是全出血,并且在分隔线的上下都有 8dp 的内边距。

分隔线示例

8dp 的垂直间距

滚动

导航抽屉的滚动方向与视图相同。

滚动前的导航抽屉

滚动中的导航抽屉

设置和支持

设置和支持通常放置在滚动列表的底部,与其他的列表项放在一起。它们可以称为「帮助」「反馈」或「帮助 & 反馈」,取决于你提供怎样的服务。

设置和支持放置在滚动列表的底部

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

固定展示

推荐在桌面端默认使用


固定展示的导航抽屉会一直显示在左侧边缘,与内容或背景在同一海拔,并且不能被关闭。

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

1、导航抽屉宽度
2、内容宽度
3、内容边距

固定导航栏的类型

界面的结构和行为决定了要使用何种类型的固定导航抽屉: The structure and behavior of the overall interface determines which type of permanent navigation drawer to use:

  • 全高的导航抽屉:使用从左到右的等级体系,并专注于内容展示的应用
  • 被应用栏截断的导航抽屉:需要平衡整个屏幕,并专注于生产力的应用
  • 浮动导航抽屉:等级更少的应用

固定导航示例 - 全高的

固定导航示例 - 被截断的

固定导航示例 - 浮动抽屉

固定导航示例 - 卡片内的浮动抽屉

连续展示

连续展示的导航抽屉可以被打开或关闭,抽屉的海拔与内容相同。默认情况下是抽屉是关闭的,可以通过轻触菜单按钮来打开,打开后会一直展示,直到被用户关闭。抽屉会在各个操作间和各个环节间保持同一状态。

当页面网格之外的抽屉被打开时,被迫使内容改变尺寸来适应更小的视图。

切换导航抽屉适用于所有比手机尺寸更大的设备。

关闭的连续抽屉示例

打开的连续抽屉示例

不推荐把连续展示的导航抽屉用在有多层等级的应用,它们需要使用向上按钮来做导航。

小型变体

这种变体中,连续展示的导航抽屉改变了宽度,成为了小型抽屉,与内容在同一海拔上,并且被应用栏截断。展开时,就变成了标准的连续展示的导航抽屉。

推荐用于:
需要从内容旁边快速访问应用的其他部分

小型抽屉示例

打开的连续抽屉示例

临时展示

临时展示的导航抽屉可以被打开或关闭。默认情况下抽屉是关闭的,打开后会出现在所有内容的前面,当选中某个项目后会自动关闭。

推荐用于:
平板

规定用于:
手机

手机上关闭的临时抽屉

手机上打开的临时抽屉

可以把小型变体做为临时导航抽屉的关闭状态

平板上关闭的临时抽屉

平板上打开的临时抽屉

桌面上关闭的临时抽屉

桌面上打开的临时抽屉