组件 底部列表

底部列表

底部列表从屏幕的底部滑入来展示更多内容。

模态的底部列表主要用于手机端,也可以显示来自其他应用的深层链接内容。

固定的底部列表和主视图融为一体,显示应用所支持的内容。

交互

底部列表仅显示用户发起的结果。

海拔

模态的底部列表:比应用整体更高
持续的底部列表:与应用在同一高度

替代方案

简单对话框
菜单

用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

底部列表主要分为两种:

  • 模态的底部列表 可以被菜单或简单对话框替代。它主要用于手机端,也可以显示来自其他应用的深层链接内容。它主要用于手机端。
  • 持续的底部列表显示应用本身的内容。

从海拔可以认出持续的底部列表。模态的底部列表的静止海拔高于应用的内容;持续的底部列表的静止海拔与内容一致,并与内容融为一体。

在更大屏幕上,空间的限制会更少,可以使用其他的界面和组件来替代。例如简单对话框菜单会比列表更合适。

模态的底部列表从屏幕底部滑入,出现在内容的前面。

持续的底部列表与应用的布局融为一体。

持续的底部列表 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

持续的底部列表显示应用本身的内容,用来补充说明主要视图。即使没有使用持续的底部列表也会显示,它的静止海拔与应用一致,并且与内容融为一体。

用法

  1. 在特定的面板上引入新的内容
  2. 显示与主内容同等重要的内容

将持续的底部列表引入到有浮动操作按钮(FAB)的布局中,可能导致 FAB 需要垂直移动。

持续的底部列表可以在看到地图的同时,也看到地点详情。

无论用户在主视图中如何浏览,播放控制器会始终显示在持续的底部列表上。

手机

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

平板/桌面

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

平板上全宽的持续的底部列表

平板上内嵌的持续的底部列表

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

在桌面端,持续的底部列表的内容可能会移动到新的卡片上。在更大的屏幕中,相比于列表,将内容显示在左侧的卡片会更适合。

模态的底部列表 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

模态的底部列表是菜单与简单对话框的备选方案,它可以显示其他应用的深层链接内容。模态的底部列表显示在其他 UI 元素的前面,且必须关闭后才能与后面的内容进行交互。当一个模态化底部卡片滑入屏幕,屏幕的其他地方变暗,视觉焦点位于列表上。

包含操作列表的模态的底部列表

包含操作网格的模态的底部列表

用法

模态的底部列表可以:

  1. 用操作列表或网格来替代菜单或简单对话框。
  2. 当菜单没有明显的入口时,可以作为上下文菜单。
  3. 优先考虑所包含的元素可见性。

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

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

底部列表可以将图标与菜单项关联。

含次要文本的菜单项

深层链接

模态的底部列表可以展示其他应用的深层链接的内容或者操作,拓展了应用的范围。

深层链接的模态的底部列表上可以直接显示单词的解释而无需打开词典应用。

右侧应用的底部列表显示来自左侧应用的内容。这就让用户可以不切换应用就查看其他应用的内容。

底部列表可以包含其他应用的深层链接,这些链接可以是:

  • 让用户可以直接进入其他应用的深层页面
  • 去到用户刚进入的页面

然而,这些深层链接不允许用户在层次结构中向上导航:它们可以仅停留在初始层级、或更深的层级、或返回到初始层级。

此外,深层链接还可以将用户从底部列表导航到全新的视图中。

要从底部列表的深层链接向上导航,需要提供一个明确的链接,通过菜单打开应用。底部列表中的深层链接可能会打开父级应用,例如使用「添加联系人」操作。

当模态的底部列表完全展开时,应当在应用栏上显示关闭按钮

当导航到应用的下一级内容时,应该显示一个返回箭头

手机

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

模态的底部列表刚出现时不应覆盖应用栏。允许用户点击/滑动来关闭。

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

Sheet 的高度取决于所包含的内容数量。

模态的底部列表在刚出现时不应覆盖应用栏。保留一定的外部空间来让用户点击关闭。

平板/桌面

考虑使用其他方案来替代大屏幕上的模态的底部列表。因为底部列表可能会出现在距离用户点击区域很远的位置,来会阅读会分散用户的注意力。

桌面端的限制更少,所以可以使用多种替代方案来替换模态的底部列表。

底部列表替代方案

优点

菜单

保证了选项出现在用户点击的位置附近

简单对话框

打断用户当前的心流

试图内的扩展面板

不会像菜单和对话框那样打断用户

直接显示所有选项

不需要任何操作就可以直接访问

打开新的浏览器窗口

灵活的尺寸和独立的布局

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

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

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

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

行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

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

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

向下滑动底部列表来关闭

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

点击「X」来关闭(如果有应用栏)

规格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

以下规格适用于手机应用。

字体和颜色

  • 文本: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 的关键线。可以向上滑动底部列表来让齐充满整个屏幕,其中的内容可以列表内滚动。

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

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

桌面和平板应用的规格

桌面和平板上的底部列表使用这些最大和最小宽度。

底部列表的宽度由整个界面的结构决定,它通常基于增量。在页面网格上,底部列表的最大宽度取决于页面网格以及其中的内容。

例如,在 960dp 的屏幕上,如果使用应用栏的高度(64dp)作为增量,则总共会有 15 个增量宽。底部列表本身至少有 6 个增量,距离屏幕应当至少有 1 个增量。

屏幕宽度

距离屏幕边缘的最小值(增量)

列表的最小宽度(增量)

960dp

1 增量

6 增量

1280dp

2 增量

8 增量

1440dp

3 增量

9 增量

各种桌面屏幕尺寸的断点