Material Design（四）--部分组件的学习

组件之底部导航栏以及底部列表

底部导航栏

• 底部导航可以快速切换应用的顶级视图

• 底部导航栏主要用于移动端，在较大的显示器上，例如桌面显示器，可以通过侧边栏导航实现类似的效果

  

用法

• 有 3-5 个同等重要的顶级视图（避免在底部导航栏中放置超过 5 个入口，紧挨的触控范围很容易操作误操作）

• 目标视图需要从应用的任何地方直接访问（只有一两个目标页面时请使用Tabs）

  尽量不要同时使用底部导航和选项卡（Tabs），同时使用会让用户感到困惑

  

样式

图标和文本

• 底部导航栏的导航操作是基于图标，因此图标应当能够反应内容

• 根据以下条件来为每个导航项设置样式：

  • 当视图被激活时，同时显示该视图的图标和文本标签

  • 当只有三个入口时，显示所有图标和文本标签

  • 如果有四五个入口，未激活的视图则仅显示图标

颜色

• 对激活的导航使用主体色，激活状态下导航颜色要统一，避免颜色过多

  

• 有背景色的导航栏上，导航颜色选择白色或黑色，避免颜色之间相互干扰，可读性降低

  

文本标签

• 文本标签是对导航项图标的简短说明

• 误区：

  • 避免使用长文本

  • 避免使文本换行

  • 避免截断文本

  • 避免为了使文本在单行显示而缩小文本

  

规格

等宽的底部导航栏

• 导航项的宽度 = 视图的宽度 / 导航项的数量

• 最大宽度：168dp

• 最小宽度：80dp

• 高度：56dp

• 图标：24 x 24dp

• 内容对齐：文本和图标水平居中

• 内边距：图标上边距 6dp（激活状态），8dp（未激活状态）

• 文本下边距 10dp

• 文本的左右边距 12dp

• 文本标签：Roboto Regular 14sp（激活状态），Roboto Regular 12sp（未激活状态）

可变的底部导航栏

对比	激活	未激活
最大宽度	168dp	96dp
最小宽度	96dp	56dp
图标	24x24dp	24x24dp
内容对齐	文本和图标水平居中对齐	图标水平居中对齐（文本不显示）
图标上下边距	6dp	16dp
文本边距	下：10dp	\
文本标签	Roboto Regular 14sp	\

海拔

• 因为 Snackbar 的海拔为6dp，底部导航的海拔 8dp，所以底部导航在前面

• 底部 Sheet、抽屉导航和键盘会显示在底部导航栏的前面，会临时遮住它

  

底部列表

底部列表主要分为两种：模态的底部列表以及持续的底部列表

持续的底部列表

• 持续的底部列表显示应用本身的内容，用来补充说明主要视图

• 即使没有使用持续的底部列表也会显示，它的静止海拔与应用一致，并且与内容融为一体

用法

• 在特定的面板上引入新的内容

• 显示与主内容同等重要的内容

手机

• 手机上的持续的底部列表在横屏和竖屏时均保持和屏幕等宽

  

平板／桌面

• 持续的底部列表是与屏幕等宽还是内嵌显示，取决于它们所包含的内容的宽度、整体 UI、基本内容和设计风格

  

• 在桌面端，持续的底部列表可能会变成其他的界面或元素

  

模态的底部列表

• 模态的底部列表是菜单与简单对话框的备选方案，它可以显示其他应用的深层链接内容

• 模态的底部列表显示在其他 UI 元素的前面，且必须关闭后才能与后面的内容进行交互，当一个模态化底部卡片滑入屏幕，屏幕的其他地方变暗，视觉焦点位于列表上

用法

• 用操作列表或网格来替代菜单或简单对话框

• 当菜单没有明显的入口时，可以作为上下文菜单

• 优先考虑所包含的元素可见性

• 模态的底部列表可以展示较长的菜单项名称、带有次要文本的菜单项以及含图标的菜单项

  • 显示菜单项时，完全展开的模态的底部列表应该与应用栏底部至少保持 8dp 的距离

深层链接

• 可以直接显示单词的解释而无需打开词典应用

  

• 用户可以不切换应用就查看其他应用的内容（下图右侧应用的底部列表显示来自左侧应用的内容）

  

• 深层链接不允许用户在层次结构中向上导航：它们可以仅停留在初始层级、或更深的层级、或返回到初始层级

  

手机

• 模态的底部列表主要用在手机端，在横屏和竖屏时均保持和屏幕等宽

• 模态的底部列表刚出现时不应覆盖应用栏（Sheet 的高度取决于所包含的内容数量是错误的🙅）

  

• 显示长列表时，模态的底部列表可以内部滚动并展开，超过16:9的关键线

  

平板／桌面

底部列表替代方案	优点
菜单	保证了选项出现在用户点击的位置附近
简单对话框	打断用户当前的心流
试图内的扩展面板	不会像菜单和对话框那样打断用户
直接显示所有选项	不需要任何操作就可以直接访问
打开新的浏览器窗口	灵活的尺寸和独立的布局

• 菜单通常会出现在靠近触发点的位置，因此不建议将菜单项放入底部列表中

  

• 在大屏幕上使用模态的底部列表时，需要根据空间来调整布局

  • 平板上含有网格列表的底部列表

    

  • 平板上含有长列表的底部列表

    

行为

• 底部列表可以通过向下滑动来关闭，或者轻触应用栏上的❌图标，在 Android 上轻触系统的返回键也可以关闭

• 点击列表以外的区域也可以关闭模态的底部列表

  • 向下滑动底部列表来关闭

    

  • 点击底部列表以外的区域来关闭

    

  • 如果有应用栏，点击❌来关闭

    

规格

以下规格适用于手机应用

字体和颜色

• 文本：Roboto Regular 16sp，#000 87%

• 标题（可选）：Roboto Regular 16sp，#000 54%

• 默认底部列表背景色：#FFF

• 半透明遮罩：#000 20%

列表式底部列表

• 屏幕左右边距：16dp

• 上下边距：8dp

• 列表项高度：48dp

• 列表图标：24x24dp，垂直居中对齐

• 图标和文本间隔：32dp 水平间距

  

带头部的列表式底部列表

• 屏幕左右边距：16dp

• 顶部列表的下边距：7dp

• 分隔线：1dp

• 第二个列表的上边距：8dp

• 列表项高度：48dp

• 列表图标：24x24dp，垂直居中对齐

• 图标和文本间隔：32dp 水平间距

• 列表标题高度：56dp

  

有图标的网格式底部列表

• 屏幕左右边距：24dp

• 网格垂直间距：16dp

• 网格图标：48x48dp，垂直居中对齐，均匀分布于网格

• 网格列表标签：16dp 高，与图标居中对齐

• 网格下边距：24dp

  

一些说明

• 底部列表的最小高度取决于内容的高度

  

• 底部列表刚出现的高度不应当超过 16:9 的关键线

  

更多组件学习链接🔗点我哦🦸‍♀️

～～～今天的学习了Material Design两个组件，Material Design的四次分享就结束啦，深入学习就到周末去做了，加油呀⛽️