Material Design 组件图鉴 —— Bottom Sheets

Bottom sheets slide up from the bottom of the screen to reveal more content. 底部列表从屏幕底部滑出以展现更多内容。

使用

主要存在两种类型：

  • Modal bottom sheets 模态化底部列表——是除菜单、对话框以外的另外一种选择。主要用于展示相关的更多操作，例如分享、打开、拷贝。它是模态的，不退出就无法进行其他操作。
  • 等等。
  • Persistent bottom sheets 常驻式底部列表——非模态，展示对应内容或上下文强相关的 in-app 内容或操作，是一种信息展开，或者说信息补充的承载方式。

高度是区分前后两者的重要区别点，前者更高，伴随蒙层出现。后者与 app 内容同高（但仍然以一点点阴影加以区分），不会有蒙层出现。

Persistent bottom sheets

在手机端，Persistent bottom sheets 一般都是满屏，而在平板端和桌面端就可以考虑不满屏。 桌面端的 Persistent bottom sheets 最好是从屏幕左侧滑出。

Modal bottom sheets

模态，顾名思义，出现的时候必定伴随蒙层，不先退出模态就无法进行其他操作。

Modal bottom sheets 的高度通常为 8dp，当出现的时候高过所有其他元素，包括 app bar。一般不像 Persistent bottom sheets 那样带一个 FAB 按钮。

Deep Linking 运行用户在不离开 app 的情况下以 modal bottom sheets 的形式浏览其他 app 的内容。

modal bottom sheets 可以全屏展开，这时候显示的应该是 X 按钮以关闭 modal bottom sheets，不要显示后退按钮。

Modal bottom sheets 的高度由内容决定。但是再高也不能覆盖 app bar。

在平板端和桌面端不推荐使用 Modal bottom sheets，因为 Modal bottom sheets 的形式不适用于大屏幕的交互。 插图里面的几种形式是更常见更科学的选择。

行为

点击蒙层、点击后退按钮或由边缘往下拖拽都可以收起 Bottom sheets。

尺寸

以下标准尺寸用于移动端

  • 标题（可选）：Roboto Regular 16sp #000 54%
  • 文字：Roboto Regular 16sp, #000 87%
  • 背景色：#FFF
  • 蒙层色：#000 20%

列表式尺寸：

  • 左右间距 margin：16dp
  • 顶部底部 margin：8dp
  • 表项高度：48dp
  • 表项 icon：24x24dp，居中对齐
  • 文字与 icon 距离：32dp

带标题栏的列表式 bottom sheets：

  • 分割线：1dp
  • 第二栏与分割线间距：8dp
  • 标题栏高度：56dp

网格式 bottom sheet：

  • 左右间距：24dp
  • 行与行之间的间距：24dp
  • icon：48x48dp
  • 标签文字高度：算上行距 16dp
  • icon 与 标签文字间距：8dp

带标题的网格式 bottom sheet：

  • 标题栏高度：56dp
  • 分割线：1dp
  • 第二栏与分割线距离：8dp

除非内容真的太多，否则初始状态的 bottom sheets 不应该超过 16：9 分界线。

以下是平板端与桌面端的尺寸，一个 incrment 等于 64dp。