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 项目的形式。 每个项目可以被激活,不激活,盘旋,聚焦和按下。

不能同时激活两个项目

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏月色的自留地

AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

1456
来自专栏一个会写诗的程序员的博客

程序的基本概念

程序的基本概念 1.1. 程序和编程语言 程序(Program)告诉计算机应如何完成一个计算任务,这里的计算可以是数学运算,比如解方程,也可以是符号运算,比...

682
来自专栏web前端教室

先行者成员提问--JavaScript的缩进

今天在群里有个同学问,说他给github上的一个项目写了个插件,然后对方说他的插件的空格缩进不对,他就想问问几个空格缩进才对? 先说下我的观点,我是4个空格,并...

1816
来自专栏小白安全

反射跨站脚本(XSS)示例

如何利用它? 原来的要求如下: ? 应用程序的回应非常清楚。用户ID为空(空)。我们没有为它指定一个值。 ? 我们有XSS。有效负载未被应用...

3197
来自专栏黄Java的地盘

基于React与Redux的留言墙的实现

由于某事业群需要留言墙用于年会,同时需要调用大象公众号服务器接口,所以在今年年初开发了留言墙用于活动现场交流。

761
来自专栏Java架构

今咱们来聊聊JVM 堆外内存泄露的BUG是如何查找的前言内存泄露Bug现场查找线索总结

1674
来自专栏Coco的专栏

【前端性能】Web 动画帧率(FPS)计算

1843
来自专栏Python自动化测试

CSV文件在网络爬虫中的应用

在上一个文章中详细的介绍了CSV文件内容的读取和写入,那么在本次文章中结合网络爬虫的技术,把数据获取到写入到CSV的文件中,其实利用爬虫的技术...

1314
来自专栏AhDung

【C#】组件发布:MessageTip,轻快型消息提示窗

原文和网盘demo我就不更新了,项目已开源到如下几处,有兴趣的朋友请关注,欢迎fork/push/pull:

552
来自专栏玉树芝兰

如何用Python读取开放数据?

当你开始接触丰富多彩的开放数据集时,CSV、JSON和XML等格式名词就会奔涌而来。如何用Python高效地读取它们,为后续的整理和分析做准备呢?本文为你一步步...

592

扫码关注云+社区