Noticebar ? Snackbar傻傻分不清楚 / 木子杰软件教程

前言：前段时间整理设计规范时，注意到一个控件长得很像Snackbar，但又不能草率地将它归类于Snackbar。翻了一些资料后给出的答案是Noticebar，即通告栏。那么它跟Snackbar到底有什么不同，我们应该如何正确使用它？这次就这个疑问来简单的分析一下。

一、Noticebar的定义

NoticeBar（通告栏）：通常位于导航栏下方，一般用作系统提醒、活动提醒等通知。 重要级别低于Modal高于 Toast。

一些分享文章里把通告栏归类于Snackbar，这么做其实也并没有什么不对。

MD规范里对Snackbar的定义是：一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。通过以上描述可以看出Noticebar与Snackbar非常相似，但事实上他们仍然有一些不同。

二、Noticebar与Snackbar的区别

1、位置

① NoticeBar：通常位于顶部，有时位于页面中部。

② Snackbar：通常位于页面底部。

2、停留时间

Noticebar：① 需要手动点或者处理完毕该条消息后才会消失。（例：天猫&飞猪）

② 点击后依旧显示，直至活动内容到期后才会消失。（例：摩拜单车&小黄车的活动通知）

③ 始终存在无法消失。（例：淘票票）

上图：淘票票的通告栏内容较为重要，所以这里选择始终停留强制用户知晓信息以得到用户的谅解，直到信息中的问题解决后才会消失。跟现实生活中的公告牌是同理（例如：商店玻璃门上挂着的“休息中”）

Snackbar：

① 手指滑动页面消失；
② 超时后自动消失。

个人认为，Noticebar与Snackbar最大的区别就是他们在页面停留时间的长短：Noticebar的存在其目的是以醒目的方式让用户去注意，但又不打扰用户使用其他功能，所以通常情况下不会主动消失，直至用户处理完这条消息后才会消失。更有甚者，例如淘票票的Noticebar始终出现在页面顶部不会消失。而Snackbar和Toast都会自动消失，只是时间长短的不同而已。

3、数量不同

① Noticebar：根据优先级别的不同可堆叠展示多个。（左图：微信）

② Snackbar：只能展示一个。（右图：饿了么）

三、Noticebar的展现样式

两种展示样式：

① 静态：多数Noticebar采用的方式，高度随文字内容的多少而定。通常以鲜明的背景色吸引用户的注意力。

② 滚动：当文字超长除了折行之外还可以使用滚动播放的方式展现。另外，动态的方式可以有效地吸引用户的注意力。

结论：我们可以把Noticebar 看作是Snackbar的衍生体，他们同样都是在不干扰用户进行其他操作的临时视图，不同的是Noticebar根据提示信息的级别高低可以点击消失也可以让提示信息始终存在。而Snackbar可以通过滑动页面消失或者自动消失。在使用时可以根据文案内容的级别高低来判断是使用NoticeBar还是Snackbar。

参考链接：

一个UI设计语言 https://rn.mobile.ant.design/components/notice-bar-cn/

这个控件可能叫：Notice Bar/通告栏 https://zhuanlan.zhihu.com/p/35992383

海盐社（公众号）

作者：洋洋Leony

Noticebar ? Snackbar傻傻分不清楚

目录

一、Noticebar的定义

二、Noticebar与Snackbar的区别

三、Noticebar的展现样式

相关推荐