Material Design——Navigation drawer

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~

Material Design链接:Material Design——Navigation drawer

导航抽屉可以访问您应用中的目的地。

一、用法

导航抽屉提供对目的地和应用功能的访问,例如切换帐户。 它们可以永久在屏幕上,也可以通过导航菜单图标进行控制。

导航抽屉推荐用于:

· 具有五个或更多顶级目标的应用

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

· 在不相关的目的地之间快速导航

将导航抽屉用于五个或更多主要目的地。
避免将导航抽屉与其他主要导航组件一起使用,例如底部导航栏。

△ 原则

· 可识别 导航抽屉的放置和列表式内容清楚地将它们标识为导航

· 有组织性的 导航抽屉根据用户重要性订购目的地,首先是频繁的目的地,而将相关的目的地组合在一

· 上下文的 可以显示或隐藏导航抽屉以适应不同的应用布局

△ 类型

· 标准抽屉

标准导航抽屉允许用户同时访问抽屉目的地和应用内容,它们通常与应用内容同时存在并影响屏幕的布局网格。

标准抽屉可以通过点击导航菜单图标永久可见或打开和关闭, 它们只能用于平板电脑和台式机, 在移动设备上,使用模态抽屉代替。

1.Modal drawer(模态导航抽屉)

模态导航抽屉使用一个模态侧边栏来阻止与应用内容的其余部分进行交互, 它们高于大多数app元素,在其他界面的最上方,不会影响屏幕的布局网格。

它们主要用于移动设备,屏幕空间有限,它们可以由平板电脑和台式机上的标准抽屉代替。

2.底部抽屉

底部导航抽屉是一种特殊类型的模态抽屉,可与底部应用栏一起使用。

为了从底部应用栏的菜单图标增加可达性,它们从屏幕底部升起而不是侧面打开。


二、分析

导航抽屉包含嵌入工作表中的列表, 它们可以通过标题和分隔符进行增强,以组织更长的列表。

1.Container;2.Header (optional);3.Divider (optional);4.Active text overlay;5.Active text;6.Inactive text;7.Subtitle;8.Scrim (modal only)

△ 列表

导航抽屉的内容包含在侧面或底部工作表中, 若从右到左浏览,从侧面打开的导航抽屉放置在屏幕左侧。

导航抽屉页可以从屏幕左侧打开,用于从左到右的语言(1),或者与底部应用栏(2)配对时从屏幕的底部打开, 缩小至62.5%。
除非式从右到左浏览,否则请勿从屏幕右侧打开导航抽屉。

△ 目的地

导航抽屉中的目标采用可操作列表项的形式,每个项目使用文本标签和可选图标描述其目的地。

· 目的地标签

文本标签应清晰且足够短,以免被纸张切断。

导航抽屉可以使用没有图标的文本标签。
保持文本标签简洁,但如果它们超出容器宽度,则截断它们。
左:不要包装标签文本;右:不要缩小文本大小以使文本标签适合单行。

· 目的地图标(可选)

图标可以补充标签作为目的地的指标, 使用时,应始终将它们放在文本之前, 其他应用程序组件和内容应引用这些图标。

Right:选中时选用识别度高的提示标签;Wrong:不要使用相同的图标来表示不同的主要目的地。
Caution:辅助目标可以用相同的图标表示,特别是如果它们是集合的一部分(1);Wrong:不要将图标应用于某些目的地而不是其他目的地, 图标应该用于所有目的地,要么不使用。

△ 分隔线(可选)

水平分隔线可用于分隔列表中的导航目的地组,它们延伸到抽屉的整个宽度。

Right:使用全宽分隔符(1)分隔目标组(2)·;Wrong:不要使用分隔线来分隔各个目的地。

△ 标题(可选)

导航抽屉的标题区域是一个灵活的空间,可用于品牌表达(例如应用程序标题或徽标),帐户切换等。

如果优先考虑访问帐户切换,则可以将帐户切换器放置在导航抽屉的标题区域中。
如果导航抽屉是页面的完整垂直高度,则可以在标题区域中放置品牌元素或产品名称。
如果导航抽屉被顶部应用栏剪切,请勿在标题中放置品牌元素或产品名称。,在这种情况下,顶级应用栏是该内容的更合适的位置。

△ Scrim(仅限模态和底部)

模态导航抽屉使用稀松布来阻止与应用程序其余部分的交互。 稀松布直接放在抽屉的纸张下面,可以轻敲或点击以取消抽屉。

适用于模态侧导航抽屉(1)和底部导航抽屉(2)的Scrim。


三、标准抽屉

△ 用法

标准导航抽屉允许同时与屏幕内容和抽屉互动, 它们可以在平板电脑和台式机上使用,但由于屏幕尺寸有限,它们不适合移动设备。

可选择的:

· 模态抽屉  在响应式布局网格中,在规定的最小断点宽度至少为600dp时,应使用模态抽屉替换标准抽屉

· 永久可见的抽屉  当用户需要经常切换目的地(并允许屏幕尺寸)时,可以使用永久可见的抽屉

· 允许的抽屉  当用户可能专注于屏幕内容并且需要较少访问其导航目的地时,可以使用可禁用的抽屉

△ 行为

· 滚动

导航抽屉可以垂直滚动,独立于屏幕的其他内容和UI, 如果导航目的地列表长于抽屉的高度,则抽屉的内容可以在抽屉中滚动。

· 能见度

标准导航抽屉的可见性取决于屏幕大小,应用布局和使用频率。

1.允许的标准抽屉可用于优先考虑内容的布局(例如照片库)或用户不太可能经常切换目的地的应用, 他们应该使用可见的导航菜单图标来打开和关闭抽屉。

2.永久可见的标准抽屉允许在不相关的目的地之间快速转动, 它们需要用于控制的菜单图标,因为它们不能被用户取消。

通过点击顶部应用栏(1)中的导航菜单图标打开和关闭标准的可允许导航抽屉,并保持打开状态,直到再次点击菜单图标(2)。
桌面上的永久导航抽屉。

△ 海拔

标准导航抽屉可以使用以下高程位置之一:

1.与顶部应用栏相同的高度(全高)

2.在低于顶部应用栏的高度(剪裁)

· 全高

全高导航抽屉与顶部应用栏位于同一高度。

· 修剪

剪切的导航抽屉与在顶部应用栏下方滚动的内容处于同一高度。


四、模态抽屉

△ 用法

模态导航抽屉使用scrim与应用内容的其余部分进行交互,它们高于应用程序UI的大部分,并且不会影响屏幕的布局网格。

它们主要用于屏幕空间有限的移动设备,可以用平板电脑和台式机上的标准抽屉代替。

A modal drawer on mobile

△ 行为

· 打开和关闭

模态导航抽屉总是通过抽屉外的控件来打开,例如顶部应用栏中的导航菜单图标。

模态抽屉可以通过以下行为关闭:

1.选择抽屉按钮

2.点击抽屉之外屏幕的其他部位

3.向抽屉的固定边缘滑动(例如,从左向右滑动左侧导航抽屉)


62/5000总是通过导航菜单图标(1)打开模态抽屉。
可以通过轻敲scrim(1)或将抽屉滑向左边华东来关闭抽屉。

· 滑动

如果导航目的地列表长于抽屉的高度,则列表可以在抽屉中垂直滚动。


五、底部抽屉

△ 用法

底部导航抽屉是模态抽屉,固定在屏幕底部而不是左边或右边, 它们仅用于底部应用栏。

点击底部应用栏中的导航菜单图标即可打开这些抽屉。,它们仅用于移动设备。

底部导航抽屉

△ 行为

在移动设备上打开(纵向)

与其他模态底部工作表一样,底部导航抽屉的初始垂直位置基于其内容和屏幕高度。 它们最初无法打开超过屏幕高度的50%。

1.如果抽屉内容低于屏幕高度的50%,请始终将抽屉打开至最大高度

2.如果抽屉内容大于屏幕高度的50%,最初将它们打开至50%,然后允许用户将抽屉向上拖动到其全高或屏幕高度(以先到者为准)

Right:打开底部导航抽屉,其中只包含几个项目的全高(A);Wrong:不要将抽屉的高度超出其内容。
调整底部导航抽屉的打开位置,以便视图中的最后一个列表项被屏幕底部剪切,这可以通知用户有更多要查看的项目。

· 在移动设备上开放(横向)

在移动横向方向,较高的底部导航抽屉自动打开到全屏模式。

底部抽屉以横向方式在移动设备上打开全屏模式。
在横向模式下,请勿将底部抽屉打开至屏幕高度的一半。

· 滚动

底部导航抽屉一旦打开到全屏高度,就可以在内部滚动。

当最初打开到屏幕高度的50%时,必须将抽屉拖到屏幕高度,然后才能显示其他项目。 在滚动时,抽屉的标题变成了一个高架的应用程序栏,并且可以关闭。

Right:在全高时允许底部抽屉的内容滚动;Wrong:当底部抽屉的内容不在全屏高度时,请勿滚动它。

· 内容层次结构

由于底部导航抽屉内容项的数量最初并非全部可见,因此抽屉的内容应按如下顺序排列:

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

2.如果使用了帐户切换器,请将其放在抽屉的顶部


六、状态

导航抽屉中的目的地采用列表项的形式。 每个项目都可以激活,不活动,悬停,聚焦和按下。

1. Activated

当前屏幕或其父节点用激活状态表示, 一次只能激活导航抽屉中的一个项目, 此状态应与未激活的项目具有强烈的视觉对比。

2. Inactive

未激活状态是导航抽屉中项目的默认状态。

3. Focus

4. Pressed

5. Hover

一次只能激活一个抽屉项目。
不要一次激活多个抽屉项目。



END.THANKS FOR YOUR READING~

如有不当,还请多多指教~

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