---
title: 横幅提示
slug: 横幅提示
category: 组件
figma_node_id: 1:30
figma_page_name: ＞横幅提示-需要更新
aliases: [Alert, Notice, NoticeBar, 横幅, 提示横条, 通知条, 通栏提示]
last_extracted: 2026-05-19
status: needs_update
---

# 横幅提示

> 跨整行宽度承载即时提示信息的横条容器。如流横幅按位置分"提示条"与"常驻位"两类，按色相分蓝条 / 黄条 / 灰条 / 运营条 / 红条等语义色。提示条主要承载临时通知（如新消息、会议进行中），常驻位承载持久状态（如版本升级、运营活动）。提示条高度 38px，常驻位 40–44px。

> ⚠️ 本页在 Figma 中被标注"需要更新"，内容可能不是最新版本。

## 类型与号型

| 类型 | 位置 | 主要语义 |
|---|---|---|
| 提示条 - 蓝条 | 顶部 / 内联 | 进行中（如会议进行中）、参与人状态 |
| 提示条 - 黄条 | 顶部 / 内联 | 一般提示、待处理事项 |
| 提示条 - 运营条 | 顶部 | 运营活动入口 |
| 常驻位 - 蓝条 | 常驻顶部 | 持续展示的会议状态 / 协作进行中 |
| 常驻位 - 黄条 | 常驻顶部 | 持续展示的提示 / 警示 |
| 常驻位 - 灰条 | 常驻顶部 | 弱提示 / 入口型常驻 |
| 首页 / 二级页 | 应用位置 | 不同页面层级的横幅展示 |

## 尺寸规格

数据来自 Figma layout token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 横幅整页画板 | 1280 × 1400px | `layout_T40HVU`（出现两次：移动 & 桌面） |
| 单条提示条 | 375 × 38px | `layout_WGUWNK / J3JOPH / Q5QCNR / YNFNVA / LVZ7X0` |
| 单条常驻位（编组 8） | 375 × 40.5px | `layout_SXG880 / K4TP8I` |
| 常驻位编组（桌面） | 272 × 44px | `layout_4WT1N7 / 0CZVG9 / NVIUVY / KUE9GM` |
| 常驻位编组（桌面顶部小） | 272 × 32px | `layout_JJEOLJ / CYN8TV / VV6M9L / D08HZ0` |
| 常驻位中型 | 273 × 36px | `layout_II3GV1 / X1CL4P` |
| 章节大标题"提示条 / 常驻位" | 72 × 24px，24px Medium | `style_VQP799` |
| 行内说明文字 | 12px Medium / Regular，行高 12px | `style_0DVFL9` + ts1 / ts2 |

### 关键内部间距（来自 ruler 标注，宽度 35×29.24px 的方块标尺值）

| 间距值 | 出现位置 |
|---|---|
| 16px | 左 / 右内边距（标尺标在容器边） |
| 8px | icon 与文字间距 |
| 12px | 紧密图标内边距 |
| 24px | 容器整体高度对应间距标尺 |

## 状态

横幅提示的状态由内容类型驱动：

| 状态 | 含义 |
|---|---|
| 默认 | 横幅展示，可关闭 |
| hover | 桌面端鼠标悬停反馈（灰条"hover 关闭 icon"） |
| 关闭后 | 横幅消失，常驻位除外 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 主背景 | `#FFFFFF` = `White` | 整页画板底色 |
| 主文字 | `#11141A` | 标题与正文主色 |
| 强调文字（ts1） | `#11141A` | 横幅语义关键词，如"蓝条 / 黄条 / 灰条" |
| 副文字（ts2） | `#5C6373` | 说明文字 |
| 标尺暖色高亮 | `rgba(255, 85, 0, 0.3)` | 演示标尺色（非组件本体色） |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 页头装饰渐变 |

> 横幅实际语义色（蓝条 / 黄条 / 灰条 / 运营条）依赖具体编组的填充色 token，本页主要以 ruler / 文字标注呈现，**具体语义色对照详见 [标签](标签.md) 与 [色彩](../基础/色彩.md)** 的功能色定义。
> 蓝条对应 `Brandblue60 #165DFF`；黄条对应 `Yellow60`；红 / 警示对应 `Vermilion60 #FF5040`；灰条对应 `C-Coolgray*` 系列。

## 间距与排布

来自 Figma 各横幅 layout 与 ruler 标尺（原文摘录排布说明）：

> **蓝条**：左对齐展示。包括：icon、参与人与数量、关闭 icon（或会议进行时间）。
> **黄条**：左对齐展示。包括：icon、参与人与数量、关闭 icon；居中展示包括：文字按钮、文字提示。
> **运营条**：左对齐展示。包括：文案、关闭 icon。
> **灰条**：左对齐展示。包括：文字、进入 icon、hover 关闭 icon。

- **左对齐布局**：icon + 文字 + 操作（关闭 / 进入），从左到右紧凑排布
- **居中布局**（黄条变体）：文字按钮或文字提示水平居中
- **关闭 icon**：右侧 16×16 区域内
- **进入 icon**：灰条右侧的"进入"指向（默认显示，关闭 icon 仅 hover 时显示）

## 文案规则

- 横幅文案保持单行，长度不超过容器宽度
- 蓝条 / 黄条文案应包含明确动作或信息（如"XX 人正在协作"、"版本已升级"）
- 运营条文案承担入口角色，应含动词（如"立即查看"、"前往参与"）
- 灰条用于弱提示，文案中性即可
- 文案中关键词用粗体 ts1（`#11141A`），辅文字用 ts2 灰色（`#5C6373`）

## 交互行为

- **关闭**：右上角关闭 icon，点击后横幅消失
- **进入**：灰条等带"进入 icon"的横幅，整行可点击跳转
- **hover 切换**：灰条默认显示"进入 icon"，hover 时切换为"关闭 icon"
- **常驻位**：常驻位除非主动关闭或场景结束，否则一直显示
- **多条堆叠**：理论上同一区域不应叠加多个横幅，需按优先级择一展示

## 示例

![横幅提示-提示条总览](../图片/组件/横幅提示/tiptiaooverview.png)
![横幅提示-常驻位总览](../图片/组件/横幅提示/chang-zhu-weioverview.png)
![横幅提示-蓝条](../图片/组件/横幅提示/lan-tiao.png)
![横幅提示-黄条](../图片/组件/横幅提示/huang-tiao.png)
![横幅提示-灰条](../图片/组件/横幅提示/hui-tiao.png)
![横幅提示-运营条](../图片/组件/横幅提示/yun-ying-tiao.png)
![横幅提示-首页与二级页](../图片/组件/横幅提示/shou-ye-yu-er-ji-ye.png)

## 设计考量 / 原文摘录

> 蓝条：左对齐展示。包括：icon、参与人与数量、关闭 icon。
> 黄条：左对齐展示。包括：icon、参与人与数量、关闭 icon。
> 运营条：左对齐展示。包括：文案、关闭 icon。
> 蓝条：左对齐展示。包括：icon、参与人与数量、会议进行时间。
> 黄条：居中展示。包括文字按钮。
> 灰条：左对齐展示。包括文字、进入 icon、hover 关闭 icon。
> 黄条：居中展示。包括文字提示。
> 蓝条：居中展示。包括：icon、参与人与数量。

- **按对齐方式区分语义**：左对齐 = 信息内嵌（含 icon + 数据 + 操作），居中 = 单条文字 / 按钮提示
- **关闭按钮统一右侧**：所有横幅关闭操作位置一致
- **hover 才显示关闭（灰条）**：弱提示更"非侵入"，鼠标移上去才出现关闭

## 不推荐用法

- 同一区域同时出现 2 条以上横幅（优先级冲突）
- 横幅文案换行（应通过缩略或截断处理）
- 用横幅承担页面级 CTA（应用按钮 / Banner）
- 自定义横幅高度突破 38–44px 范围
- 灰条用于强警示场景（语义不符）

## 关联

- 标签语义色对照见 [标签](标签.md)
- 营销 / 运营场景的横幅广告见 [Banner](Banner.md)
- 反馈类悬浮见 [Toast](Toast.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
