组件 Snackbars & toasts

Snackbars & toasts

Snackbars 在屏幕的底部提供有关操作的反馈。

Snackbars包含一行文本,直接关系到用户刚刚操作的结果。并且可能会有一个文本按钮,但没有图标。

Toasts(仅限 Android)主要用于系统消息。它们也显示在屏幕底部,但不能通过滑动关闭。

用法

同时只能展示一个 Snackbar。每个 Snackbar 都可能有一个操作,但这个操作不能是「忽略」或「取消」。

行为

Snackbars 从屏幕底部向上滑出。

Snackbar 规格

  • 操作按钮:14sp Roboto Medium,全大写
  • 手机端高度:48dp(单行),80dp(多行)
  • 桌面端高度:48dp

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

屏幕上同时只能展示一个 Snackbar。

位置

Snackbar 出现在大部分元素的上方,它们的海拔和浮动操作按钮相同,略低于对话框和底部列表以及导航抽屉。

行为

Snackbar 会以动画的形式从屏幕底部向上滑出。出现时不会阻挡用户的输入。

Snackbar 可以被滑出屏幕,或者过段时间后自动消失,也可以当用户进行了其他操作后消失(例如打开新的视图或活动)。

非常短的文本

Snackbar 包含一行文本,直接关联到用户刚刚操作的结果。并且可能会有一个文本按钮,但没有图标。

短暂显示

Snackbar 出现一段时间后会自动消失。出于可用性的原因,Snackbar 不能成为访问核心功能的唯一方式。Snackbar 会显示在其他元素之上,所以不应持续显示或者堆叠。

在 Android 设备上,在 Snackbar 出现时如果有新的对话框和弹窗出现,焦点会聚焦于这些对话框和弹窗上。当用户返回之前的视图时,Snackbar 的超时时间会重置,以确保用户能读完 Snackbar 上的内容。

可包含 0-1 个操作,但不能是忽略或取消

如果有一个操作,请参考对话框的间距和可见性规则。对于两个或以上的操作,请使用对话框替代(即使其中一个是忽略)。如果 Snackbar 的操作非常重要,需要用户完全聚焦时,也应当使用对话框。

不要遮挡浮动操作按钮

当 Snackbar 出现时,垂直移动 FAB 以防被遮挡。

连续多个 Snackbar

始终只能显示一个 Snackbar。如果在前一个 Snackbar 展示期间触发了新的 Snackbar,前一个 Snackbar 应当在后一个出现前开始隐藏。

连续两个不同内容的 Snackbar

连续两个相同内容的 Snackbar

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

手机

  • 单行 Snackbar 高度:48dp
  • 多行 Snackbar 高度:80dp
  • 文本:14sp Roboto Regular
  • 操作按钮:14sp Roboto Medium,全大写
  • 默认背景色:#323232 100%

手机 Snackbar

手机 Snackbar

手机 Snackbar 动画

手机横屏时的 Snackbar

手机 Snackbar 规格

平板/桌面

  • 单行 Snackbar 高度:48dp
  • 最小宽度:288dp
  • 最大宽度:568dp
  • 2dp 圆角
  • 文本:14sp Roboto Regular
  • 操作按钮:14sp Roboto Medium,全大写
  • 默认背景色:#323232 100%
  • 对齐方式:居中对齐,或左对齐并与屏幕的左侧和底部保持 24dp 的间距

居中对齐的平板/桌面端 Snackbar

居中对齐的平板/桌面端 Snackbar

左对齐的平板/桌面端 Snackbar

左对齐的平板/桌面端 Snackbar

平板/桌面端 Snackbar 规格

Snackbar 高度:48dp
Snackbar 左右内边距:24dp
Snackbar 上下内边距:14dp
Snackbar 按钮左边距:48dp

>平板/桌面端 Snackbar 动画