言焦焦

前言:前段时间整理设计规范时,注意到一个控件长得很像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傻傻分不清楚

登录收藏
 
你可能喜欢的:
关于黑暗模式的设计,除了IOS13的做法还有这些!关于黑暗模式的设计,除了IOS13的做法还有这些!
数据提升背后的3个问题点数据提升背后的3个问题点
网页栅格系统到底应该怎么用网页栅格系统到底应该怎么用
UI设计组件-按钮UI设计组件-按钮
开发协作-切图类别与规范开发协作-切图类别与规范
如何构建设计语言如何构建设计语言
规范化入门交互设计规范化入门交互设计
设计语言 - 表单/其他表单(含表单附件)设计语言 – 表单/其他表单(含表单附件)
设计语言 - 表单(登录/注册)设计语言 – 表单(登录/注册)
黄金比例工具黄金比例工具