跳到主要内容

UI 组件 · 提醒

横幅公告

Announcement Banner

也叫:公告栏、顶部公告、通知横条、公告横幅、Announcement Bar、Notice Bar

贴在网站最顶部(导航栏上方)的一条通栏窄横条,放全站都要看到的公告:新功能上线、限时优惠、系统维护,通常可以关闭。

点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

在网站顶部导航栏上方加一条横幅公告:通栏宽度、高 40px、品牌色 #3B5BFF 底、白字,内容居中:「🎉 新版编辑器已上线,支持多人实时协作」,后面跟一个带下划线的「了解更多 →」链接;最右侧一个 32px 的 ✕ 关闭按钮(aria-label="关闭公告")。点击关闭后把公告 ID 存进 localStorage,同一条公告不再显示;公告内容和上下线时间从配置里读,过期自动隐藏。横幅不吸顶,页面滚动时跟着滚走,导航栏照常吸顶。手机上文字太长时单行省略,点击展开完整内容。再准备一个维护公告样式:黄色底、深色字、左侧感叹号图标,不可关闭。

发给

01判断

你的内容是这样吗?

对照两列,确认横幅公告是不是你要找的。

符合这些情况,用横幅公告

  • 全站都要知道的新功能上线、版本更新、限时优惠活动
  • 计划内的系统维护、服务故障这类会影响所有用户的通知
  • 试用即将到期、账单逾期这类在每一页都要提醒的账号状态

是这些情况,换成别的

  • 只和当前页面或某块内容有关的状态(表单有错、邮箱未验证)

  • 落地页第一屏的大标题和号召按钮

  • 刚刚完成一个操作的反馈

    改用轻提示

拿不准?上传页面截图,页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用,其实会给用户添麻烦。

  1. 01

    顶部叠了三四条公告,把导航栏和正文都挤到了屏幕下半截

    下面的线框画的就是这种情况,红色虚线框是出问题的地方。

  2. 02

    关掉以后每刷新一次又冒出来,或者根本没有关闭按钮

  3. 03

    活动早就结束了,公告还挂在网站顶部

反例示意,对应第 01 条

03识别

怎么认出它

先看整体结构,再对照几个一眼能认出的特征。

结构

由一条通栏的窄横条组成,里面是可选的图标、一句公告文字、一个链接或按钮和右侧的关闭按钮,位于导航栏上方或紧贴在下方。

组成部分点一下,在上面的线框里标出来

识别特征

  1. 1网页最顶端、导航栏上方一条通栏的彩色细长横条
  2. 2横条里只有一句话和一个「了解更多 →」链接,文字居中
  3. 3最右侧有一个小小的 ✕ 关闭按钮

04解释

详细解释

横幅公告是一条横跨整个屏幕、只有 3648px 高的窄条,放在导航栏上面(或紧贴在下面),每个页面都能看到。内容是一句话加一个链接或按钮:「🎉 新版编辑器上线了,看看有什么变化 →」「年中大促全场 8 折,还剩 2 天」「今晚 22:0024:00 系统维护,期间无法下单」,右侧一个 ✕ 关闭按钮。营销类的用品牌色底,维护、故障类的用黄色或红色底;手机上常做成文字横向滚动的通知栏(NoticeBar)。

它和 警告提示 的区别在范围:警告提示放在某个页面、某块内容里,说的是这里的状态(「邮箱未验证」「表单有 3 处错误」);横幅公告是全站级的,和当前页面的内容无关,在哪一页都一样。它也不是 首屏横幅:两者英文都叫 Banner,但首屏横幅是落地页第一屏的大标题、大图和按钮,占满一屏;横幅公告只有一行高。和 通知提醒框 也不同:通知是从角落弹出、过几秒自动消失的新消息;横幅公告固定在页面顶部,直到用户关掉或者活动结束。

同一时间只放一条,一行文字说完,最多一个链接。关闭后要记住(存在本地或账号设置里),不要每刷新一次就冒出来;活动结束自动下线。它会把整页往下推,吸顶时要和导航栏一起算高度,别盖住导航。颜色醒目,但文字和底色的对比度要够;关闭按钮要有 aria-label。

开发者信息
术语 ID
component-banner
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器(标签、ARIA role、常见组件库 class)。

  • .ant-alert-banner
  • .arco-alert-banner
  • .semi-banner
  • .van-notice-bar
  • .adm-notice-bar
  • .nut-noticebar
  • .t-notice-bar
类名关键词

类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • announcement-bar
  • announcement-banner
  • announcement
  • notice-bar
  • noticebar
  • top-banner
  • site-banner
  • promo-banner
  • promo-bar
  • alert-banner
组件名

React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。

  • AnnouncementBar
  • AnnouncementBanner
  • NoticeBar
  • TopBanner
  • PromoBanner
  • SiteBanner
结构特征

根据元素的排列和样式算出来的特征,只用来加分,单独不判定。

  • 吸顶
优先级
3 · 同一层有多条命中时,优先级高的胜出
版本
v2 · 更新于 2026/09/30