组件 Snackbar 和 Toast

Snackbar 和 Toast

Snackbar 通过屏幕底部的消息提供有关操作的简短反馈。

Snackbar 包含一行与已执行操作直接相关的文本。它可以包含一个文本操作按钮,但不包含图标。

Toast(仅限 Android)主要用于系统消息。它也显示在屏幕底部,但通常不可交互,也无法通过滑动关闭。

用法

同一时间只能显示一个 Snackbar。每个 Snackbar 最多可包含一个操作,且不应是“关闭”或“取消”。

行为

Snackbar 从屏幕底部边缘以动画形式向上滑出。

Snackbar 规格说明
  • 操作按钮:Roboto Medium 14sp,全大写文本
  • 移动端高度:48dp(单行),80dp(多行)
  • 桌面端 Snackbar 高度:48dp
Material Design 中的 Snackbar 提供操作反馈

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

同一时间屏幕上只应显示一个 Snackbar。

位置

Snackbar 出现在屏幕上大多数元素之上,其海拔高度与浮动操作按钮相同。但海拔高度低于对话框、底部面板和导航抽屉。

行为

出现时,Snackbar 从屏幕底部边缘以动画形式向上滑出。显示时不会阻止用户与界面的其他部分交互。

它们可通过滑出屏幕、超时,或在用户与其他内容交互时(例如唤出新界面或活动)而消失。

非常简短的文本

Snackbar 应包含一行与已执行操作直接相关的文本。它可以包含一个文本操作按钮,但不能包含图标。

Material Design Snackbar 文本的正确示例

推荐做法

Material Design Snackbar 文本的错误示例

不推荐做法

短暂显示

Snackbar 会在短暂显示后自动消失。出于可用性考虑,不应将访问核心功能的唯一入口置于 Snackbar 中。Snackbar 不应持续显示或堆叠,因为它们位于屏幕上其他元素之上。

在 Android 上,若 Snackbar 显示时出现不相关的对话框或弹窗,其超时计时会在窗口重新获得焦点时重置,从而确保用户有足够的预期时间阅读内容。

Material Design Snackbar 短暂显示的正确示例

推荐做法

Material Design Snackbar 短暂显示的错误示例

不推荐做法

0-1 个操作,且非“关闭”或“取消”

若存在操作按钮,请遵循对话框的间距与可见性规则。若有两个或更多操作,请使用对话框而非 Snackbar(即使其中一个是关闭操作)。如果 Snackbar 中描述的操作重要到需要阻止用户使用界面,则应使用对话框。

Material Design Snackbar 操作按钮的正确示例

推荐做法

Material Design Snackbar 操作按钮的错误示例

不推荐做法

不要遮挡浮动操作按钮

出现 Snackbar 时,应将浮动操作按钮垂直上移,以适应 Snackbar 的高度。

推荐做法

不推荐做法

连续显示 Snackbar

始终只显示一个 Snackbar。当第一个 Snackbar 仍显示时触发第二个,第一个会先向下收起,然后第二个再向上滑出。

两个内容不同的连续 Snackbar。

两个内容相同的连续 Snackbar。

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

移动端规格

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

移动端 Snackbar

Material Design 移动端 Snackbar

移动端 Snackbar

移动端 Snackbar 动效

Material Design 横屏状态下的移动端 Snackbar

横屏状态下的移动端 Snackbar

Material Design 移动端 Snackbar 规格

移动端 Snackbar 规格详述

平板/桌面端规格

  • 单行 Snackbar 高度:48dp
  • 最小宽度:288dp
  • 最大宽度:568dp
  • 2dp 圆角
  • 文本:Roboto Regular 14sp
  • 操作按钮:Roboto Medium 14sp,全大写文本
  • 默认背景色:#323232 100%
  • 对齐方式:居中对齐,或距屏幕左侧及底部边缘 24dp 的左对齐。
Material Design 中居中对齐的平板/桌面端 Snackbar

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

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

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

Material Design 中左对齐的平板/桌面端 Snackbar

左对齐的平板/桌面端 Snackbar

Material Design 中左对齐的平板/桌面端 Snackbar

左对齐的平板/桌面端 Snackbar

Material Design 平板/桌面端 Snackbar 规格

平板/桌面端 Snackbar 规格详述

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

平板/桌面端 Snackbar 动效