阅读时长 8 分钟，深入了解UI组件Snackbar：原理与实践，跟我一样一直没太搞懂各平台怎么归类那个底部弹出的玩意的朋友们食用~

怎么个事

容器颜色不统一、文案格式不对齐

事情的起因呢，是我们的产品界面中，当用户进入未加入的岛/未开启定位时，Snackbar 弹出引导用户操作。通过轻量化的吸引用户的注意力，使操作变得更加便捷；同时，按钮的直观展示也简化了用户的操作步骤。

然而，关于 Snackbar 容器的颜色问题，设计师希望避免使用实色，但目前 Snackbar 的规范尚未明确。此外，组件 Mask 的颜色复用在实际使用场景中可能无法保证文案的可读性。若使用毛玻璃效果，则与与产品品牌风格不符合。Snackbar 容器的颜色急需一个收敛定义。

Mask 的颜色复用在实际使用场景中无法保证文案可读性

除了容器颜色的统一问题，Snackbar 的文案内容也缺乏统一的规范性。

别人是如何食用的？

业务需求：什么场景用

抖音 - 取消收藏

2、功能引导 / 提供便捷入口

当用户完成某个操作后，产品有意引导完成后续操作 / 任务链路暂未走完时，利用Snackbar的可交互性进行 轻量化的引导 / 对未来用户可能的操作提供一个便捷入口，例如，当用户完成收藏操作后，弹出一个Snackbar告知用户操作成功反馈的同时 引导用户加入收藏夹 / 为后续用户将其加入收藏夹提供入口，并提供一个简单的点击按钮，让用户可以方便地继续任务路径。这样不仅可以提高用户的操作效率，还能增加用户对产品的黏性，提高用户的满意度和忠诚度。

视觉设计：外观/布局特征

在调研中，发现市场上有些产品试图通过滥用Snackbar来吸引眼球，既想追求其轻量化特点，又想达到引人注目的效果。（开个玩笑，这种做法颇有些类似于（产品）在路边大声吆喝、卖力推销，尽管看似并未阻挡用户的去路或强行左右其选择，甚至可能引发不满，但它们仍然坚持“叫卖”。《流氓用法》）比如 淘宝双图Snackbar，京东、小红书 banner 式 Snackbar。

根据 Material Design Guideline，建议避免在 Snackbar 添加 Icon ，不过在实际设计中，也不总是遵循这一点，现市面上使用的 Snackbar 几乎都是带图 / Icon 的，纯文字的 Snackbar 略显单调和干涩，相反，在反馈性的 Snackbar 上增加特定的 Icon，更快速地识别和理解反馈的内容，减少认知负担；在引导性的 Snackbar 上增加特定的图同理（抖音引导创建收藏夹，Snackbar的图是用户收藏视频的封面图）。

无论是何种样式形式的 Snackbar ，都要保持核心原则 - 轻量化，设计师需要在文案、图形等元素的使用上尽可能的做好平衡。

到底啥是 Snackbar ？

定义

Snackbars show short updates about app processes at the bottom of the screen

小吃条在屏幕底部显示有关应用程序进程的简短更新

参考 Material Design 对 Snack bar 的定义，可以知道 Snack bar 是一种轻量的弹窗形式，被用来通知用户当前程序正在发生或即将发生的进程，它的内容一定是和用户当前操作相关的。

历史：Snackbar 在 UI 设计中的演变和发展

在早期版本的 Android 操作系统中，开发者主要依赖 Toast 和 Dialog 等组件来向用户提供反馈。Toast 是一种简单的提示信息，它会在屏幕上短暂显示，但不允许用户交互。而 Dialog 则是一种更为复杂的对话框，会打断用户的当前操作，要求用户进行响应。然而，这些组件在提供即时反馈和保持界面连贯性方面存在一定的局限性。

随着 Android 操作系统的不断发展和 Material Design 设计理念的兴起，开发者开始寻求更加轻量级和非阻断性的反馈机制。在这种背景下，Snackbar 组件应运而生。Snackbar 最初作为 Material Design 的一部分被引入，它结合了 Toast 的短暂显示和 Dialog 的交互性，为用户提供了更加灵活和便捷的反馈方式。

对比：Snackbar 和其他弹窗的区别

功能：Snackbar 的核心

• 即时反馈

  当用户执行某项操作后，Snackbar能够即时显示操作结果，如“保存成功”或“操作失败”等。这种即时反馈有助于用户了解当前状态，并作出相应的反应。

• 非阻塞性

  Snackbar不会打断用户的操作流程，且不会影响用户对其他界面元素的交互。

• 可交互性

  除了显示文本信息外，Snackbar还可以包含简单的交互元素，如撤销按钮。用户可以通过点击这些元素来执行进一步的操作，如撤销刚才的操作。

• 自定义性

  设计师可以根据应用的需求和风格，自定义Snackbar的样式、文本内容、显示时长等属性。这使得Snackbar能够与应用的整体设计保持一致，提升用户体验。

• 动画效果

  Snackbar通常带有动画效果，使得其出现和消失更加自然流畅。这不仅增加了界面的趣味性，也有助于吸引用户的注意力。

食用指南（Echo版）

主要参考 Material Design 3 及各类产品，结合实际业务需求场景推导收敛

容器

Leading

非必要元素，可选 Icon 、与内容强相关的图

Button

Button 采用独特色彩 / 样式，以突出其与文案的区别

Text

位置

持续时间

总结一下吧

Snackbar 核心是一个轻量化的弹窗，它既引人注目，又不那么引人注目，在吸睛力的暧昧选择中也是设计师最为头疼的。

京东把 Snackbar 做成 Banner 的样式，作为广告的载体，违背了 Snackbar 的设计初衷，其内容复杂性可能对用户造成干扰，且打破了用户心中已经形成的特定认知和期待。同时 Snackbar 的位置和显示方式通常是为了吸引用户的短暂注意力，而不是展示复杂的广告内容。Snackbar 被用来频繁推送广告、促销信息或其他与用户体验不相关的内容时，可能频繁干扰用户注意力，导致体验下降，甚者影响用户对品牌的忠诚度和信任度。

同理，在引导用户加入岛的问题上，设计为用户操作后才消失，弹出势必已经吸引到了用户的注意，无论这个容器是否为实色。在进入未加入的岛时，告知用户他还没有加入，按钮直接露出引导加入。给到用户认知：我还没有加入这个岛，这个弹出可以马上加入。则 Snackbar 的任务就完成了。要想用户随时可以点关注/加入，应该在页面常驻一个按钮位置，随时可以操作，而不是以Snackbar去作为载体。