#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计,借此加深各种组件的应用~
Material Design链接:Material Design——Navigation drawer
导航抽屉可以访问您应用中的目的地。
一、用法
导航抽屉提供对目的地和应用功能的访问,例如切换帐户。 它们可以永久在屏幕上,也可以通过导航菜单图标进行控制。
导航抽屉推荐用于:
· 具有五个或更多顶级目标的应用
· 具有两个或更多级别导航层次结构的应用
· 在不相关的目的地之间快速导航
△ 原则
· 可识别 导航抽屉的放置和列表式内容清楚地将它们标识为导航
· 有组织性的 导航抽屉根据用户重要性订购目的地,首先是频繁的目的地,而将相关的目的地组合在一
· 上下文的 可以显示或隐藏导航抽屉以适应不同的应用布局
△ 类型
· 标准抽屉
标准导航抽屉允许用户同时访问抽屉目的地和应用内容,它们通常与应用内容同时存在并影响屏幕的布局网格。
标准抽屉可以通过点击导航菜单图标永久可见或打开和关闭, 它们只能用于平板电脑和台式机, 在移动设备上,使用模态抽屉代替。
1.Modal drawer(模态导航抽屉)
模态导航抽屉使用一个模态侧边栏来阻止与应用内容的其余部分进行交互, 它们高于大多数app元素,在其他界面的最上方,不会影响屏幕的布局网格。
它们主要用于移动设备,屏幕空间有限,它们可以由平板电脑和台式机上的标准抽屉代替。
2.底部抽屉
底部导航抽屉是一种特殊类型的模态抽屉,可与底部应用栏一起使用。
为了从底部应用栏的菜单图标增加可达性,它们从屏幕底部升起而不是侧面打开。
二、分析
导航抽屉包含嵌入工作表中的列表, 它们可以通过标题和分隔符进行增强,以组织更长的列表。
△ 列表
导航抽屉的内容包含在侧面或底部工作表中, 若从右到左浏览,从侧面打开的导航抽屉放置在屏幕左侧。
△ 目的地
导航抽屉中的目标采用可操作列表项的形式,每个项目使用文本标签和可选图标描述其目的地。
· 目的地标签
文本标签应清晰且足够短,以免被纸张切断。
· 目的地图标(可选)
图标可以补充标签作为目的地的指标, 使用时,应始终将它们放在文本之前, 其他应用程序组件和内容应引用这些图标。
△ 分隔线(可选)
水平分隔线可用于分隔列表中的导航目的地组,它们延伸到抽屉的整个宽度。
△ 标题(可选)
导航抽屉的标题区域是一个灵活的空间,可用于品牌表达(例如应用程序标题或徽标),帐户切换等。
△ Scrim(仅限模态和底部)
模态导航抽屉使用稀松布来阻止与应用程序其余部分的交互。 稀松布直接放在抽屉的纸张下面,可以轻敲或点击以取消抽屉。
三、标准抽屉
△ 用法
标准导航抽屉允许同时与屏幕内容和抽屉互动, 它们可以在平板电脑和台式机上使用,但由于屏幕尺寸有限,它们不适合移动设备。
可选择的:
· 模态抽屉 在响应式布局网格中,在规定的最小断点宽度至少为600dp时,应使用模态抽屉替换标准抽屉
· 永久可见的抽屉 当用户需要经常切换目的地(并允许屏幕尺寸)时,可以使用永久可见的抽屉
· 允许的抽屉 当用户可能专注于屏幕内容并且需要较少访问其导航目的地时,可以使用可禁用的抽屉
△ 行为
· 滚动
导航抽屉可以垂直滚动,独立于屏幕的其他内容和UI, 如果导航目的地列表长于抽屉的高度,则抽屉的内容可以在抽屉中滚动。
· 能见度
标准导航抽屉的可见性取决于屏幕大小,应用布局和使用频率。
1.允许的标准抽屉可用于优先考虑内容的布局(例如照片库)或用户不太可能经常切换目的地的应用, 他们应该使用可见的导航菜单图标来打开和关闭抽屉。
2.永久可见的标准抽屉允许在不相关的目的地之间快速转动, 它们需要用于控制的菜单图标,因为它们不能被用户取消。
△ 海拔
标准导航抽屉可以使用以下高程位置之一:
1.与顶部应用栏相同的高度(全高)
2.在低于顶部应用栏的高度(剪裁)
· 全高
全高导航抽屉与顶部应用栏位于同一高度。
· 修剪
剪切的导航抽屉与在顶部应用栏下方滚动的内容处于同一高度。
四、模态抽屉
△ 用法
模态导航抽屉使用scrim与应用内容的其余部分进行交互,它们高于应用程序UI的大部分,并且不会影响屏幕的布局网格。
它们主要用于屏幕空间有限的移动设备,可以用平板电脑和台式机上的标准抽屉代替。
△ 行为
· 打开和关闭
模态导航抽屉总是通过抽屉外的控件来打开,例如顶部应用栏中的导航菜单图标。
模态抽屉可以通过以下行为关闭:
1.选择抽屉按钮
2.点击抽屉之外屏幕的其他部位
3.向抽屉的固定边缘滑动(例如,从左向右滑动左侧导航抽屉)
· 滑动
如果导航目的地列表长于抽屉的高度,则列表可以在抽屉中垂直滚动。
五、底部抽屉
△ 用法
底部导航抽屉是模态抽屉,固定在屏幕底部而不是左边或右边, 它们仅用于底部应用栏。
点击底部应用栏中的导航菜单图标即可打开这些抽屉。,它们仅用于移动设备。
△ 行为
在移动设备上打开(纵向)
与其他模态底部工作表一样,底部导航抽屉的初始垂直位置基于其内容和屏幕高度。 它们最初无法打开超过屏幕高度的50%。
1.如果抽屉内容低于屏幕高度的50%,请始终将抽屉打开至最大高度
2.如果抽屉内容大于屏幕高度的50%,最初将它们打开至50%,然后允许用户将抽屉向上拖动到其全高或屏幕高度(以先到者为准)
· 在移动设备上开放(横向)
在移动横向方向,较高的底部导航抽屉自动打开到全屏模式。
· 滚动
底部导航抽屉一旦打开到全屏高度,就可以在内部滚动。
当最初打开到屏幕高度的50%时,必须将抽屉拖到屏幕高度,然后才能显示其他项目。 在滚动时,抽屉的标题变成了一个高架的应用程序栏,并且可以关闭。
· 内容层次结构
由于底部导航抽屉内容项的数量最初并非全部可见,因此抽屉的内容应按如下顺序排列:
1.首先列出最有可能被用户频繁访问的项目
2.如果使用了帐户切换器,请将其放在抽屉的顶部
六、状态
导航抽屉中的目的地采用列表项的形式。 每个项目都可以激活,不活动,悬停,聚焦和按下。
1. Activated
当前屏幕或其父节点用激活状态表示, 一次只能激活导航抽屉中的一个项目, 此状态应与未激活的项目具有强烈的视觉对比。
2. Inactive
未激活状态是导航抽屉中项目的默认状态。
3. Focus
4. Pressed
5. Hover
END.THANKS FOR YOUR READING~
如有不当,还请多多指教~