组件 Snackbars & toasts

Snackbars & toasts

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

Snackbars 包含和执行的操作直接相关的单行文本。它们可能包含一个文本操作,但不含图标。

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

用法

同一时间只能有一个 snackbar 处于显示状态。每一个 snackbar 都可能包含单个操作,但不会是 “Dismiss” 或 “Cancel” 。

行为

Snackbars 从屏幕底部边缘以动画的形式出现。

Snackbar 规格

  • 操作按钮:Roboto Medium 14sp,使用大写文本
  • 移动端高度:48dp(单行),80dp(多行)
  • 桌面端高度:48dp

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

同一时间只能有一个 snackbar 显示在屏幕上。

位置

Snackbars 出现在大部分元素的上方,并且它们的海拔高度和浮动操作按钮相同。但是,它们的海拔高度低于对话框、底部卡片和抽屉栏导航。

行为

snackbar 会以动画的形式从屏幕底部边缘出现。当它们出现时,它们不会阻挠用户的输入。

它们会在被滑动时消失,或者一段时间后自动消失,或者用户在 snackbar 之外的地方进行了交互时消失(例如打开新的视图或操作)。

非常短的文本字符串

Snackbar 可以包含和执行的操作直接相关的单行文本。它们可以包含一个文本操作,但不能包含图标。

正确示例

错误示例

短暂显示

Snackbar 一段时间后会自动消失。出于可用性的原因,不应把访问核心用例的唯一途径放在 snackbar 中。因为 snackbar 会显示在其他元素之上,所以不应持续显示或者堆叠显示。

在 Android 设备上,显示着 snackbar 时,当一个不相关的对话框或弹出控件出现时,焦点会聚焦在对话框或弹出控件上,snackbar 的超时时间会在窗口重新获得焦点时重置。这是为了确保用户能在预期时间内阅读完 snackbar 的内容。

正确示例

错误示例

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

如果存在一个操作,请遵循对话框间距和可见性规则。对于两个或更多个操作,请使用对话框,而不是 snackbar,即使其中一个是忽略操作。如果 snackbar 中描述的操作非常重要,需要屏蔽屏幕的使用,那么应该使用对话框。

正确示例

错误示例

不要覆盖到浮动操作按钮上

出现 snackbar 的同时垂直移动浮动操作按钮,以便使 snackbar 不会覆盖住浮动操作按钮。

正确示例

错误示例

连续的 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%

移动端的 snackbar

移动端的 snackbar

移动端的 snackbar 动画

横屏状态下的移动端 snackbar

移动端的 snackbar 的规格

平板/桌面端

  • 单行 snackbar 高度:48dp
  • 最小宽度:288dp
  • 最大宽度:568dp
  • 2dp 圆角半径
  • 文本:Roboto Regular 14sp
  • 操作按钮:Roboto Medium 14sp,全部使用大写字母
  • 默认背景色:#323232 100%
  • 对齐方式:居中对齐,或距离屏幕左侧和底部边缘 24dp 左对齐。

一个居中对齐的平板/桌面端 snackbar

一个居中对齐的平板/桌面端 snackbar

一个左对齐的平板/桌面端 snackbar

一个左对齐的平板/桌面端的 snackbar

平板/桌面端的 snackbar 规格

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

平板/桌面端的 snackbar 动画