Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚

差不多翻译完iOS组建后，回来翻译MD～

Navigation drawer（抽屉式导航／汉堡导航）

Material Design链接：Navigation drawer

Navigation drawer可以访问 app 中的目的地。

Navigation drawer

用法

Navigation drawer 提供对目的地和 app 功能的访问，如切换帐户。 它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。

推荐将 Navigation drawer 用于：

·具有五个或更多一级页面的 app

·具有两个或更多级导航层次结构的 app

·快速导航不相关的目的地

超过5个一级页面时使用

不要将 navigation drawer 与其他一级导航（如 bottom navigation bar）同时使用

原则

·可识别的

Navigation drawer 的放置和列表式内容明确将其标识为导航。

·有组织的

Navigation drawer 根据用户的重要性对目的地进行排序，首先常用的放置在最前面，再将与之相关的放在一起。

·与环境相关的

Navigation drawer 可以显示或隐藏以适应不同的 app 布局。

类型

Standard drawer（标准抽屉）

Standard navigation drawers 允许用户同时访问 drawer 目的地和 app 内容。 它们通常与 app 内容共面并影响屏幕的布局网格。

Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。 在手机上，使用 modal drawers 代替。

Modal navigation drawers

使用遮罩来阻止用户与 app 内容的其余部分进行交互。 它们高于大多数 app 元素，不会影响屏幕的布局网格。

主要用于屏幕空间有限的移动设备。 它们可以在平板电脑和台式机上被 standard drawer 所取代。

Bottom navigation drawers

是与 bottom app bar 一起使用的特殊类型的 modal drawer 。

为了点击 bottom app bar 的菜单图标后提高可达性，它们从屏幕底部打开而不是从侧面打开。

分解

Navigation drawers 包含嵌入在 sheet 内的 list。 可以使用 headers 和 dividers 来增强，以组织更长的 lists。

Sheet

Navigation drawer 的内容包含在侧面或底部 sheet 中。 从侧面打开的 navigation drawer 被放置在屏幕的左侧以用于从左到右的阅读顺序，放置在屏幕的右侧以用于从右到左的阅读顺序。

导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5％

只有当 app 阅读顺序是从右到左时，navigation drawer才从右侧出现

Destinations（目的地）

Navigation drawer 中的 destinations 采取可执行列表项的形式。 每个项目都使用文本标签和可选的图标来描述其目的地。

目的地标签

文本标签应该清晰且足够短，以免被 sheet 切断。

可以只有文本标签无图标

保持文本标签简短，但是长度实在太长时就截断

不要换行不要缩小

目的地icon（可选）

Icon 可以对标签作为目的地的进行补充。 使用时，应始终放置在文本之前。 App 内组件和内容应参考这些图标。

使用惯用且可识别的icon，并且不要用相同的icon代表不同一级目的地

二级目的地可用相同的icon，特别是在一个collection里时；不要有些目的地有图标有些没有

Dividers (optional)

Horizontal dividers 可用于分隔列表中的各组导航目的地。 它们延伸穿过 drawer 的整个宽度。

用与容器相同长度的dividers将组分开；不要将每个目的地都分开

Header（标题）

Navigation drawer 的 header 区域是一个灵活的空间，可用于品牌表达（如 app 名称或 logo），切换账户等。

如果优先考虑进行帐户切换，则可以将帐户切换器放置在导航抽屉的 header 区域

如果 navigation drawer 占了页面的整个垂直高度，则可以在 header 区域放置品牌元素或产品名称

如果 navigation drawer 被 top app bar 截断，请勿在 header 中放置品牌元素或产品名称。 在这种情况下， top app bar 是该内容的更合适的地方。

Scrim（遮罩，仅用于modal 和 bottom）

Modal navigation drawers 使用遮罩来阻止用户与 app 其余部分的交互。 遮罩直接放置在drawer的 sheet 的下方，可以轻敲或点击以关闭 drawer 。

Standard drawer

用法

Standard navigation drawers 允许同时与屏幕内容和 drawer 互动。 它们可以在平板电脑和台式机上使用，但由于屏幕尺寸有限，它们不适合手机。

备选方案

Modal drawer：在响应式布局网格中，600dp宽的地方为最小断点处，standard drawer 应该用 modal drawer 替换。

Permanently visible drawer：当用户需要经常切换目的地（并且屏幕尺寸允许）时，可以使用 permanently visible drawer。

Dismissible drawer：如果用户可能将注意力集中在屏幕内容上，并且需要更加低频访问其导航目的地时，则可以使用 dismissible drawer。

行为

滚动

Navigation drawers 可以垂直滚动，独立于屏幕内容和 UI 的其余部分。 如果导航目的地列表长于 drawer 的高度，则 drawer 的内容可以在 drawer 内滚动。

可见性

Standard navigation drawer 的可见性取决于屏幕大小，app 布局和使用频率。

Dismissible standard drawers 可用于内容优先（如照片库）的布局或用户不太可能经常切换目的地的 app，且应该使用可见的 navigation menu icon 来打开和关闭抽屉。

Permanently visible standard drawers 允许在不相关的目的地之间快速旋转。 此时需要一个 menu icon 进行控制，因为这种 drawers 不能被用户关闭。

通过点击 top app bar(1)中的 navigation menu icon 可打开和关闭 standard dismissible navigation drawer。standard dismissible navigation drawer会保持打开状态，直到再次点击menu icon (2)

Permanent navigation drawer

海拔

Standard navigation drawer 可以使用以下其中一个海拔位置：

·与 top app bar 相同的高度（全高）

·比 top app bar 更低的高度（裁剪）

与 top app bar 相同的高度

比 top app bar 更低的高度

Modal drawer

用法

Modal navigation drawers 会通过遮罩阻止用户与 app 内容的其余部分进行交互。 Modal navigation drawers 高于 app 的大部分 UI，并且不会影响屏幕的布局网格。

Modal navigation drawers 主要用于屏幕空间有限的移动设备，在平板电脑和台式机上可以用 standard drawers 来取代。

行为

打开与关闭

Modal navigation drawers 总是由 drawer 外的可见处打开，例如 top app bar 中的 navigation menu icon 。

Modal drawers 可以通过以下方式被关闭：

·选择一个 drawer 项目

·点击遮罩

·朝 drawer 的锚定边缘滑动（例如，从右向左滑动从左边出现的 navigation drawer）

Modal drawers一般由 navigation menu icon 开启

可以通过点击遮罩活着左滑关闭

滚动

如果 navigation destinations 的 list 长于 drawer 的高度，则 list 可以在 drawer 中垂直滚动。

Bottom drawer

用法

Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。他们只用于 bottom app bars。

点击 bottom app bar 中的 navigation menu icon 即可打开这些 drawers。 Bottom drawers 仅用于移动设备。

行为

移动端打开（纵向）

与其他 modal bottom sheets 一样， bottom navigation drawer 的初始垂直位置基于其内容和屏幕高度，但最初不能在高于屏幕高度的50％以上打开。

·如果抽屉内容低于屏幕高度的50％，则 drawer 全部打开

·如果 drawer 内容大于屏幕高度的50％，请先将其打开至50％，然后允许用户将 drawer 向上拖动至其全高或屏幕高度（以先到者为准）

调整 bottom navigation drawer 的打开位置，以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。

移动端打开（横向）

在移动端的横向方向上，较高的 bottom navigation drawers 会自动打开到全屏模式。

滚动

Bottom navigation drawers 一旦打开至全屏高度，就可以在内部滚动。

当最初打开到屏幕高度的50％时，在显示其他项目之前，必须将 drawer 拖到屏幕高度。 在滚动时，drawer 的标题变成了一个高的 top app bar，并具有很好的可供性。

全屏时才能内部滚动

Content hierarchy（内容层级）

由于 bottom navigation drawer 内容项的数量一开始并不全部可见，因此 drawer 的内容应按以下顺序排列：

·首先列出最有可能被用户频繁访问的项目

·如果使用帐户切换器，请将其放在 drawer 的顶部

状态

Navigation drawer 中的目的地采用 list 项目的形式。 每个项目可以被激活，不激活，盘旋，聚焦和按下。

不能同时激活两个项目