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

不能同时激活两个项目
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容