• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 「这个控件叫什么」系列之Notice Bar/通告栏

「这个控件叫什么」系列之Notice Bar/通告栏

作者:龙爪槐守望者 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI控件,反馈,反馈信息,用户反馈,经验分享,通知系统等相关知识,龙爪槐守望者希望在学习及工作中可以帮助到您

@龙爪槐守望者 :经常能看到在很多 App 的 Navigation Bar(iOS 叫导航栏,安卓叫 App Bar /应用栏)下方、列表上方或者页面底部悬浮着一个横幅。这些横幅通过某个事件触发而出现,能常驻显示直到事件结束,并且通常可以操作。翻遍 iOS Human Interface Guidelines 和 Material Design 都找不到这个控件,这个控件可能叫 Notice Bar(通告栏)。

△ 这个控件可能叫 Notice Bar(通告栏)

往期回顾:

  1. 《「这个控件叫什么」系列之小红点+索引导航+分段控件》
  2. 《「这个控件叫什么」系列之加载占位图+页面指示器》
  3. 《「这个控件叫什么」系列之步进器+SWITCH》
  4. 《「这个控件叫什么」系列之TOAST》
  5. 《「这个控件叫什么」系列之虚拟键盘/软键盘/SOFT KEYBOARD》
  6. 《「这个控件叫什么」系列之动作菜单/动作面板》
  7. 《「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡》
  8. 《「这个控件叫什么」系列之输入框/文本框/Text fields》

一、名称来源

Notice Bar 的出现有其必然性,我们知道交互设计中给予用户合适的反馈是非常重要的。比如通常用作轻量反馈的 Toast,出现时间短,不打断用户当前操作;或者强制用户做出选择,才关闭的模态对话框(Modal dialog);还有进度条,必须等到100%才能继续下一步;以及系统推送通知,虽然通知推送的瞬间很醒目,但如果用户不马上处理,收纳到消息中心后被点击的可能性就降低很多了。显然,我们还缺少一种控件,即不打断用户当前的任务,又足够明显能一直引起用户的关注。

△ 反馈矩阵

其实早在 Web 时代,就有这种控件了,通常叫做 Notification Bar 或者 Information Bar。

△ Slack 用 Notification Bar 提醒用户打开桌面通知

△ 上古时代 IE 的 Information Bar

但因为早年间 Android 把通知抽屉(Notification drawer)就叫 Notification Bar(通知栏),如果再以此概念称呼,极易造成混淆。

△ 搜索 Notification Bar(通知栏)出来的都是 Android 的通知抽屉

我发现蚂蚁金服的 Ant design 将其称呼为 Notice Bar(通告栏),之后有赞的 ZanUI 也使用了这个名称,随着越来越多的开发者认可,也许最后这个控件就真的叫 Notice Bar(通告栏)了。

二、如何使用

Notice Bar 一般用于活动提醒或者系统权限申请等吸引用户关注但又不强制用户去处理的场景。

1. 醒目的区分不同类型

如果你的 App 中有用于警告、温馨提示、活动促销等不同的 Notice Bar,可用颜色和图标进行区分,便于用户形成视觉记忆,快速辨识通告类型。

△ 用颜色和图标进行区分

2. 不要附加太多操作

一条 Notice Bar 只描述一个事件,通常点击后提供处理这个事件的页面,最多再提供一个关闭 Notice Bar 的按钮。不要在 Notice Bar上附加太多操作,增加用户选择负担。

△ 要么开启提醒、要么关闭通告栏

3. 多横幅的优先级

如果多个事件触发了不同的 Notice Bar,应当为其定制优先级,防止排序跳动对用户阅读产生干扰。

△ 微信多个 Notice Bar

4. 文字超长处理策略

如果文字超长,除了末尾省略和折行外,还可以使用滚动轮播的方式显示。

△ 滚动轮播的 Notice Bar

三、相关资料

1. 把 Notice Bar 和进度条整合

对大文件或多个小文件进行操作非常耗时,而且很有可能中途失败。百度云 iOS 版把复制进度条做成 Notice Bar,微软 OneDrive 用 Notice Bar 做上传进度,这样文件操作状况能随时了解,出问题能马上解决,而且不影响同时进行的其他任务。

△ 百度网盘、OneDrive

欢迎关注作者的微信公众号:「龙爪槐守望者」

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 超全面!底部动作栏设计总结
  • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
  • 「这个控件叫什么」系列之Notice Bar/通告栏
  • 超全面的分享功能设计总结
  • 「这个控件叫什么」系列之输入框/文本框/Text fields
  • 轻松看懂规范!详解组件控件结构体系之单元控件类
  • 从设计指南说起,详解iOS系统组件分类体系
  • 超实用!Apple 官方的图层命名方法之控制器篇
  • 高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
  • 「这个控件叫什么」系列之动作菜单/动作面板

相关文章

  • 2018-08-23没有美术基础怎么画卡通肖像?来看这个方法!
  • 2018-08-23这5个牢不可破的设计规则,是你打造优秀动效的标准
  • 2018-08-23腾讯干货!虚拟To B支付设计研究之设计思考篇
  • 2018-08-23「这个控件叫什么」系列之步进器+Switch
  • 2018-08-23风骚一点!在网页中玩转霓虹色的正确姿势
  • 2018-08-23进阶之路!一流用户体验设计师的6个共同点
  • 2017-08-06写给入门者的三十条HTML代码编写指南
  • 2017-08-06Table布局的优缺点介绍及为什么不建议使用
  • 2017-08-06清除浮动(clearfix 和 clear)的用法示例介绍
  • 2018-08-23如何提高设计能力?来看腾讯设计师这个方法总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • JPG,GIF及PNG各类型的图片格式详细解说
    • 同样是描边字,为什么你做的总是很土气?
    • 学会CTA 设计方法后,按钮的点击率高了49%!
    • 腾讯99%的付费界面和流程,都是这个团队设计的!
    • Banner设计宝典之可能是最全面的流程分析总结
    • 高手帮你学规范!iOS和Android规范解析之提示框+警告框
    • 推荐28个让你直呼哇塞的Canvas库
    • 分享5个有帮助的CSS选择器丰富你的CSS经验
    • 专业科班方法!帮你学会网格工具这个理性的排版利器
    • 高手帮你学规范!iOS和Android规范解析之底部浮层

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有