固定显示的底部面板用于展示补充主视图的应用内内容。即使未被用户主动使用,它也保持可见,并与应用内容处于同一海拔高度。

将固定显示的底部面板引入到布局中,可能会导致浮动操作按钮(FAB)在垂直方向上发生位移。

固定显示的底部面板,可以使地图上的位置信息细节保留在屏幕上。

无论用户在主视图中如何导航,播放控件都会显示在固定显示的底部面板上方。
手机端
手机端的固定显示的底部面板,在横屏和竖屏时均保持和屏幕等宽。
平板 / 桌面
固定显示的底部面板是与屏幕等宽还是内嵌显示,取决于它们所包含的内容的宽度,整体 UI,基本内容和设计风格。

平板上,与屏幕等宽的固定显示的底部面板

平板上,内嵌式的固定显示的底部面板
在桌面端,固定显示的底部面板可能会变形为另一种表面或材质薄片。

在桌面端,原本放在固定显示底部面板中的内容,可能会移动到新的材质薄片上。在大屏设备上,把这些内容放在界面左侧的材质薄片中往往更合适。
模态底部面板是菜单与简单对话框的备选方案,它可以显示来自其他应用上的深层链接。它显示在其他 UI 元素上方,且必须将其关闭后才能与底层的内容进行交互。当一个模态底部面板滑入屏幕,屏幕的其他地方变暗,视觉焦点位于底部面板上。

在列表中包含一系列操作项的模态底部面板

在网格中包含一系列操作项的模态底部面板
模态底部面板可以:
模态底部面板可以显示较长的菜单项名称、带有副文本的菜单项以及含图标的菜单项。
显示菜单项时,完全展开的模态底部面板应该与应用栏底部至少保持 8dp 的距离。

底部面板可以将图标与菜单项关联。

含副文本的菜单项
模态底部面板可以用于提供来自其他应用的深层链接,以展示内容或控件,并横跨整个屏幕宽度。

在深层链接的底部面板上,可以直接显示一个单词的解释,用户无需打开词典应用。

右侧应用的底部面板显示来自左侧应用的内容。这允许用户在不离开当前应用的情况下查看来自另一应用的内容。
通过深层链接,底部面板可以显示来自其他应用的内容。这些链接能够:
然而,这些深层链接不允许用户在层次结构中向上导航:它们可以仅停留在初始层级、或更深的层级、或返回到初始层级。
此外,深层链接可以将用户从底部面板完全导航到另一个视图。
要从底部面板的深层链接向上导航,需要提供一个明确的链接,通过菜单打开应用。深层链接的底部面板中的操作可能会打开其他应用,例如使用 “添加联系人” 操作。

推荐做法
当模态底部面板完全展开时,应在应用栏中提供一个 X 关闭按钮。

不推荐做法
当向下导航到内容层次结构的更深层级时,适合显示一个向上箭头。
模态底部面板主要在手机端使用,无论是横屏还是竖屏时,它们都与屏幕等宽。

推荐做法
模态底部面板,初始状态不能和应用栏重叠。允许使用点击/滑动的方式进行关闭。

推荐做法
当显示长列表时,模态底部面板可以在内部进行滚动,并且展开到超过 16:9 的关键线。

不推荐做法
底部面板的高度应由其包含的内容的数量决定。

不推荐做法
模态底部面板,初始状态不能和应用栏重叠。保留一定的空间,让用户可以点击底部面板外面的区域来关闭它。
在大屏幕上,可考虑使用其他组件替代模态底部面板。因为其出现位置可能距离用户的点击或触摸点较远,容易分散用户注意力。
因为桌面设备的空间充裕,所以它可以有多种方案来替代模态化的底部面板。
底部面板替代方案 | 优点 |
菜单 | 保证了选项出现在用户点击的位置附近 |
简单对话框 | 直接打断用户的当前操作 |
同一视图中的内联扩展 | 不会像菜单和对话框那样打断用户操作 |
将所有选项直接显示出来 | 不需要点击按钮就能进行访问 |
打开一个新的浏览器窗口 | 灵活的尺寸和布局的独立性 |

菜单可以使选项和触发它的元素的位置更靠近,不建议将这些菜单项放在底部面板中。
在大屏幕上使用模态化的底部面板时,需要根据空间大小进行适当的布局。

平板上的网格列表底部面板

平板上的长列表底部面板
关闭底部面板的方式可以是向下滑动、点击关闭控件(例如应用栏中的 X)、或者触摸系统后退按钮(Android)。
模态化底部面板也可以通过触摸底部面板外的区域来关闭。

向下滑动底部面板来关闭

点击底部面板以外的区域来关闭

点击 X 关闭
以下规格适用于手机端。
屏幕左右边距:16dp
顶部和底部边距:8dp
列表项高度:48dp
列表图标:24x24dp,垂直居中对齐
图标与文字之间的水平间距:32dp

手机端的列表样式的底部面板的尺寸标注

手机端的列表样式的底部面板
屏幕左右边距:16dp
第一个列表项下方的空间:7dp
分隔线:1dp
第二个列表上方的空间:8dp
列表项高度:48dp
列表图标:24x24dp,垂直居中对齐
图标和文字之间的间距:32dp 水平对齐
列表标题高度:56dp

带标题的列表底部面板尺寸标注

带标题的列表底部面板
网格四周外边距:24dp
网格列表行间距:24dp
网格列表图标:48x48dp,且每一行的间距都相等
网格列表标签高度:16dp,图标下方居中
图标下方外边距:8dp

网格样式的底部面板的尺寸标注,其中包含一组跳转到其他应用的操作项

网格样式的底部面板,其中包含一组跳转到其他应用的操作项
屏幕左右边距:24dp
列表行下方间距:8dp
分隔线:1dp
分隔线上方和下方间距:8dp
列表图标:48x48dp,垂直居中对齐
网格列表标签高度:16dp,图标下方居中
列表标题高度:56dp

含标题的网格样式的底部面板的尺寸标注

含标题的网格样式的底部面板的尺寸标注
底部面板从屏幕的底部向上滑出,并覆盖屏幕的一部分。
底部面板的初始高度与它包含的列表项(或网格行)的高度相关。底部面板的高度取决于内容多少,但初始高度不应超过 16:9。底部面板可以向上滑动以填满屏幕高度,此时内容在底部面板内滚动。

底部面板的初始高度不应超过 16:9。

底部面板的最小高度和它包含的列表的高度相关联。
桌面端与平板设备上的底部面板需遵循以下最小与最大宽度规范。
底部面板的宽度由整个界面的结构决定,它通常基于增量单位。在页面网格上,底部面板的最大宽度和页面网格及其包含的内容相关联。
例如,在 960dp 的屏幕上,如果使用应用栏的高度(64dp)作为增量单位,则总共会有 15 个增量单位宽。应该最少使用一个增量单位将底部面板与屏幕边缘分开,底部面板本身应至少有 6 个增量单位宽度。
屏幕宽度 | 距离屏幕边缘的最小距离(增量单位) | 面板的最小宽度(增量单位) |
960dp | 1 个增量单位 | 6 个增量单位 |
1280dp | 2 个增量单位 | 8 个增量单位 |
1440dp | 3 个增量单位 | 9 个增量单位 |

各种桌面屏幕尺寸的断点