言焦焦

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

 

目录

1、Noticebar的定义

2、Noticebar与Snackbar的区别:

  • ① 位置
  • ② 停留时间
  • ③ 数量

3、展示样式

 

一、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

 

转载请注明:学UI网 » Noticebar ? Snackbar傻傻分不清楚

登录收藏
 
你可能喜欢的:
如何在UI设计中使用格式塔原则如何在UI设计中使用格式塔原则
AI聊天机器人设计指南AI聊天机器人设计指南
栅格系统大全【干货下载】栅格系统大全【干货下载】
如何系统性提升中后台产品体验如何系统性提升中后台产品体验
「专辑」提升渐变质感技法(持续更新)「专辑」提升渐变质感技法(持续更新)
一个案例掌握LOGO标准化制图!一个案例掌握LOGO标准化制图!
【原创】设计规范如何更新迭代【原创】设计规范如何更新迭代
关于适配这件小事的前世今生关于适配这件小事的前世今生
超全面!动效设计标准与规范超全面!动效设计标准与规范
如何从0到1建立设计规范如何从0到1建立设计规范