组件 底部面板

底部面板

底部面板是从屏幕底部边缘向上滑出的一个面板,它用于向用户展示额外的内容。

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

固定显示的底部面板和应用是一个整体,用于显示应用所支持的内容。

交互

底部面板必须由用户主动操作来触发显示。

海拔高度

模态底部面板:海拔高度高于应用
固定显示的底部面板:与应用具有相同的海拔高度

备选方案

简单对话框
菜单

Material Design 中的底部面板,用于展示额外内容

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

底部面板有两种主要类型:

  • 模态底部面板可以被菜单或简单的对话框替代。它也可以用于显示来自其他应用的深层链接。它主要用于手机端。
  • 固定显示的底部面板和应用是一个整体,用于显示应用所支持的内容。

通过海拔高度可区分模态底部面板与固定显示的底部面板。模态底部面板的海拔高度高于应用内容;而固定显示的底部面板与应用处于同一海拔高度,并与应用内容集成在一起。

在大屏设备中,有足够空间的情况下,使用其他组件,如简单对话框菜单代替底部面板会更合适。

Material Design 中的模态底部面板滑入效果

模态底部面板从应用内容的上方滑入。

Material Design 的固定底部面板布局元素

固定显示的底部面板是应用布局的组成部分。

固定显示的底部面板 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

用法

  1. 在特定的面板上引入新的内容
  2. 显示与主内容具有相同重要性的内容
Material Design 的底部面板引入使 FAB 垂直移动

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

Material Design 中的固定底部面板,保留地图位置信息

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

Material Design 中的播放控件固定在底部面板上方

无论用户在主视图中如何导航,播放控件都会显示在固定显示的底部面板上方。

手机端

手机端的固定显示的底部面板,在横屏和竖屏时均保持和屏幕等宽。

平板 / 桌面

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

Material Design 中的全宽固定显示底部面板

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

Material Design 中平板上的内嵌式固定显示底部面板

平板上,内嵌式的固定显示的底部面板

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

Material Design 中的底部面板内容移动到新卡片上

在桌面端,原本放在固定显示底部面板中的内容,可能会移动到新的材质薄片上。在大屏设备上,把这些内容放在界面左侧的材质薄片中往往更合适。

模态底部面板 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

Material Design 的模态底部面板操作项列表
Material Design 中的模态底部面板与操作项

用法

模态底部面板可以:

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

模态底部面板可以显示较长的菜单项名称、带有副文本的菜单项以及含图标的菜单项。

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

Material Design 中的底部面板与菜单项关联
Material Design 中底部面板里带副文本的菜单项

深层链接

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

Material Design 中的底部面板词汇解释
Material Design 中的底部面板显示来自其他 app 的内容

通过深层链接,底部面板可以显示来自其他应用的内容。这些链接能够:

  • 允许用户在另一个 app 内浏览更深层级的内容
  • 返回到最开始的地方

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

此外,深层链接可以将用户从底部面板完全导航到另一个视图。

要从底部面板的深层链接向上导航,需要提供一个明确的链接,通过菜单打开应用。深层链接的底部面板中的操作可能会打开其他应用,例如使用 “添加联系人” 操作。

Material Design 中的模态底部面板应显示关闭按钮
Material Design 中的返回箭头导航

手机端

模态底部面板主要在手机端使用,无论是横屏还是竖屏时,它们都与屏幕等宽。

Material Design 中的模态底部面板,不与应用栏重叠,可用点击或滑动关闭
Material Design 中的模态底部面板支持内部滚动
Material Design 中底部面板高度应根据内容数量调整
Material Design 中的模态底部面板,避免与应用栏重叠

平板 / 桌面

在大屏幕上,可考虑使用其他组件替代模态底部面板。因为其出现位置可能距离用户的点击或触摸点较远,容易分散用户注意力。

因为桌面设备的空间充裕,所以它可以有多种方案来替代模态化的底部面板。

底部面板替代方案

优点

菜单

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

简单对话框

直接打断用户的当前操作

同一视图中的内联扩展

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

将所有选项直接显示出来

不需要点击按钮就能进行访问

打开一个新的浏览器窗口

灵活的尺寸和布局的独立性

Material Design 中的菜单选项应靠近触发元素

在大屏幕上使用模态化的底部面板时,需要根据空间大小进行适当的布局。

Material Design 中的平板网格列表底部面板
Material Design 中的平板长列表底部面板

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

关闭底部面板的方式可以是向下滑动、点击关闭控件(例如应用栏中的 X)、或者触摸系统后退按钮(Android)。

模态化底部面板也可以通过触摸底部面板外的区域来关闭。

Material Design 中的底部面板滑动关闭

向下滑动底部面板来关闭

Material Design 中触摸底部面板外部区域关闭

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

Material Design 中的关闭按钮 X

点击 X 关闭

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

以下规格适用于手机端。

字体和颜色

  • 文本:Roboto Regular 16sp, #000 87%
  • 标题(可选):Roboto Regular 16sp, #000 54%
  • 默认底部面板背景色:#FFF
  • 透明遮罩层填充色:#000 20%

列表样式的底部面板

屏幕左右边距:16dp
顶部和底部边距:8dp
列表项高度:48dp
列表图标:24x24dp,垂直居中对齐
图标与文字之间的水平间距:32dp

Material Design 中的手机列表底部面板尺寸

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

Material Design 中的手机列表底部面板

手机端的列表样式的底部面板

带标题的列表样式底部面板

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

Material Design 中的底部列表尺寸标注

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

Material Design 中的有表头的底部列表

带标题的列表底部面板

带图标的网格样式的底部面板

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

Material Design 网格样式底部面板的操作项标注

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

Material Design 风格的底部面板,含跳转操作项

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

带标题的网格样式的底部面板

屏幕左右边距:24dp
列表行下方间距:8dp
分隔线:1dp
分隔线上方和下方间距:8dp
列表图标:48x48dp,垂直居中对齐
网格列表标签高度:16dp,图标下方居中
列表标题高度:56dp

Material Design 中的带头部的网格样式底部面板尺寸标注

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

Material Design 的头部网格样式底部面板尺寸标注

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

底部面板从屏幕的底部向上滑出,并覆盖屏幕的一部分。

底部面板的初始高度与它包含的列表项(或网格行)的高度相关。底部面板的高度取决于内容多少,但初始高度不应超过 16:9。底部面板可以向上滑动以填满屏幕高度,此时内容在底部面板内滚动。

Material Design 底部面板初始高度应小于16:9

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

Material Design 中底部面板的高度与列表高度相关

底部面板的最小高度和它包含的列表的高度相关联。

桌面和平板应用的规格

桌面端与平板设备上的底部面板需遵循以下最小与最大宽度规范。

底部面板的宽度由整个界面的结构决定,它通常基于增量单位。在页面网格上,底部面板的最大宽度和页面网格及其包含的内容相关联。

例如,在 960dp 的屏幕上,如果使用应用栏的高度(64dp)作为增量单位,则总共会有 15 个增量单位宽。应该最少使用一个增量单位将底部面板与屏幕边缘分开,底部面板本身应至少有 6 个增量单位宽度。

屏幕宽度

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

面板的最小宽度(增量单位)

960dp

1 个增量单位

6 个增量单位

1280dp

2 个增量单位

8 个增量单位

1440dp

3 个增量单位

9 个增量单位

Material Design 中的桌面屏幕尺寸断点

各种桌面屏幕尺寸的断点