UI 组件 · 提醒
横幅公告
Announcement Banner
也叫:公告栏、顶部公告、通知横条、公告横幅、Announcement Bar、Notice Bar
贴在网站最顶部(导航栏上方)的一条通栏窄横条,放全站都要看到的公告:新功能上线、限时优惠、系统维护,通常可以关闭。
点「标注」看每个部分叫什么,点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发在网站顶部导航栏上方加一条横幅公告:通栏宽度、高 40px、品牌色 #3B5BFF 底、白字,内容居中:「🎉 新版编辑器已上线,支持多人实时协作」,后面跟一个带下划线的「了解更多 →」链接;最右侧一个 32px 的 ✕ 关闭按钮(aria-label="关闭公告")。点击关闭后把公告 ID 存进 localStorage,同一条公告不再显示;公告内容和上下线时间从配置里读,过期自动隐藏。横幅不吸顶,页面滚动时跟着滚走,导航栏照常吸顶。手机上文字太长时单行省略,点击展开完整内容。再准备一个维护公告样式:黄色底、深色字、左侧感叹号图标,不可关闭。
发给
01判断
你的内容是这样吗?
对照两列,确认横幅公告是不是你要找的。
02避坑
常见坏用法
看起来能用,其实会给用户添麻烦。
- 01
顶部叠了三四条公告,把导航栏和正文都挤到了屏幕下半截
下面的线框画的就是这种情况,红色虚线框是出问题的地方。右边的线框画的就是这种情况,红色虚线框是出问题的地方。
- 02
关掉以后每刷新一次又冒出来,或者根本没有关闭按钮
- 03
活动早就结束了,公告还挂在网站顶部
03识别
怎么认出它
先看整体结构,再对照几个一眼能认出的特征。
结构
由一条通栏的窄横条组成,里面是可选的图标、一句公告文字、一个链接或按钮和右侧的关闭按钮,位于导航栏上方或紧贴在下方。
组成部分点一下,在上面的线框里标出来
识别特征
- 1网页最顶端、导航栏上方一条通栏的彩色细长横条
- 2横条里只有一句话和一个「了解更多 →」链接,文字居中
- 3最右侧有一个小小的 ✕ 关闭按钮
04解释
详细解释
横幅公告是一条横跨整个屏幕、只有 3648px 高的窄条,放在导航栏上面(或紧贴在下面),每个页面都能看到。内容是一句话加一个链接或按钮:「🎉 新版编辑器上线了,看看有什么变化 →」「年中大促全场 8 折,还剩 2 天」「今晚 22:0024:00 系统维护,期间无法下单」,右侧一个 ✕ 关闭按钮。营销类的用品牌色底,维护、故障类的用黄色或红色底;手机上常做成文字横向滚动的通知栏(NoticeBar)。
它和 警告提示 的区别在范围:警告提示放在某个页面、某块内容里,说的是这里的状态(「邮箱未验证」「表单有 3 处错误」);横幅公告是全站级的,和当前页面的内容无关,在哪一页都一样。它也不是 首屏横幅:两者英文都叫 Banner,但首屏横幅是落地页第一屏的大标题、大图和按钮,占满一屏;横幅公告只有一行高。和 通知提醒框 也不同:通知是从角落弹出、过几秒自动消失的新消息;横幅公告固定在页面顶部,直到用户关掉或者活动结束。
同一时间只放一条,一行文字说完,最多一个链接。关闭后要记住(存在本地或账号设置里),不要每刷新一次就冒出来;活动结束自动下线。它会把整页往下推,吸顶时要和导航栏一起算高度,别盖住导航。颜色醒目,但文字和底色的对比度要够;关闭按钮要有 aria-label。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 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-barannouncement-bannerannouncementnotice-barnoticebartop-bannersite-bannerpromo-bannerpromo-baralert-banner
- 组件名
React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。
AnnouncementBarAnnouncementBannerNoticeBarTopBannerPromoBannerSiteBanner
- 结构特征
根据元素的排列和样式算出来的特征,只用来加分,单独不判定。
吸顶
- 优先级
- 3 · 同一层有多条命中时,优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30