Snackbar 是一类具有通知特性的控件类型,他可以针对用户操作行为提供即时反馈,也可以作为系统通知,以引导用户进一步操作。

Snackbar 是一种专属于 Android 系统规范下的控件类型,通常以非模态方式显示于屏幕的底部位置。

SnackBar - 图1

构成元素

Snackbar 主要由以下元素构成:背景容器(A)、文本描述(B)和动作按钮(C)

SnackBar - 图2

描述文本(B)

Snackbar 的描述文本多为对当前任务的描述说明,其文本长度有严格的限制,最长不可超过两行。

SnackBar - 图3

背景容器(A)

Snackbar 的背景容器面板多为深色,同时为了保证前景文本的显示效果,背景容器不可以使用任何的透明度。

SnackBar - 图4

动作按钮(C)

Snackbar 支持添加执行动作的操作按钮,但这个按钮只可以使用和描述文本(B)颜色不同的文字按钮,且按钮个数只能为 1

SnackBar - 图5

位置

Snackbar 只可以出现在页面底部,且不可以同底部导航(Bottom navigation)、悬浮按钮(FAB)等相关控件形成遮挡

SnackBar - 图6

显示规则

Snackbar 触发后的显示规则可总结如下:

  1. Snackbar 被触发时,通常以非模态方式显示于页面底部。
  2. Snackbar 在屏幕驻留时长最少为 4 秒,最多为 10 秒,便会从屏幕上自动消失,其上不可设定关闭属性的操作按钮。

SnackBar - 图7

  1. Snackbar 每次只能显示一条,不能同时显示多条,如果一次触发多条信息,只能逐条显示。

SnackBar - 图8

使用禁忌

我们列举几类 Snackbar 设计中常见的错误案例

错误 1:操作按钮颜色错误

为了更好的引导用户执行操作,Snackbar 描述文本和文本按钮不可使用同一种颜色

SnackBar - 图9

错误 2:按钮类型选用错误

Snackbar 是一种通知属性的控件类型,其设计理念是以弱打扰的方式,引导用户行为,为了减少视觉吸引,Snackbar 上的操作按钮被要求使用文字按钮

SnackBar - 图10

错误 3:Snackbar 信息条数错误

Snackbar 每次只显示一条,不能同时显示多条,如果一次触发多条信息,只能逐条显示。

SnackBar - 图11

错误 4:重叠和遮挡

Snackbar 应出现在页面底部,应避免同底部导航(Bottom navigation)、悬浮按钮(FAB)等组件形成重叠或遮挡

SnackBar - 图12