---
title: Banner
slug: Banner
category: 组件
figma_node_id: 1:34
figma_page_name: ＞Banner
aliases: [Banner, 横幅广告, 营销条, 营销Banner, 运营位]
last_extracted: 2026-05-19
status: ok
---

# Banner

> 用于承载运营 / 营销 / 入口推广的横向图卡组件。**移动端**采用 8:3 固定比例，圆角 6px；**桌面端**跟随面板宽度切换三档：最大宽度面板下 697px、默认屏幕 531px、最小屏幕 455px，高度保持不变（约 150px 一档），圆角 8px。

## 类型与号型

| 端 | 比例 / 宽 | 圆角 |
|---|---|---|
| 移动端 Banner | 8:3 比例（常见 427 × 147px） | 6px |
| 桌面端 Banner - 最大宽度面板 | 697 × 151.24px | 8px |
| 桌面端 Banner - 默认屏幕 | 531 × 153.24px | 8px |
| 桌面端 Banner - 最小屏幕 | 455 × 154px | 8px |

## 尺寸规格

数据来自 Figma layout token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| Banner 整页画板 | 1280 × 1325px | `layout_U9OIVP`（移动端 / 桌面端各一） |
| 移动端 Banner 示例 | 427 × 147px | `layout_WD92BG`（8:3 比例近似） |
| 桌面端 Banner - 最大 697px | 697 × 151.24px | `layout_45ADHL` |
| 桌面端 Banner - 默认 531px | 531 × 153.24px | `layout_1H97TC` |
| 桌面端 Banner - 最小 455px | 455 × 154px | `layout_9OUYMC` |
| 灰底说明区 | 960 × 731px | `layout_XY008Y` |
| 章节大标题"移动端 Banner 比例 / banner 宽度" | 24px Semibold，行高 24px，`#1C1D1F` | `style_L0FNDG` |
| 说明文字 | 14px Regular，`#11141A` | `style_2UM8YK` |
| 圆角 | 移动 6px / 桌面 8px | 原文 "banner 位圆角 6" / "banner 位圆角 8" |

### 原文摘录（关键尺寸）

> 移动端 banner 比例 8:3。banner 位圆角 6。
> 桌面端 banner 跟随面板尺寸变化宽度高度不变，最大宽度面板下 banner 区域 697px、默认屏幕 banner 区域 531px、最小屏幕 banner 区域 455。banner 位圆角 8。

## 状态

Banner 本身为静态展示组件，状态主要由是否含点击交互决定：

| 状态 | 含义 |
|---|---|
| 默认 | 展示图片 / 视频内容 |
| 可点击 | 整块 Banner 作为入口，点击跳转 |
| 多 Banner 轮播 | 横滑切换（移动端常见） |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 整页背景 | `#FFFFFF` = `White` | 主体底色 |
| 灰底说明区 | `#F7F8FA` = `C-Coolgray20` | demo 区底色 |
| 章节大标题 | `#1C1D1F` | 24px Semibold |
| 说明文字 | `#11141A` | 14px Regular |
| 标尺红色（演示用） | `#FF0000`（28.5% 透明度） | 标尺圆点 / 椭圆（非组件本体色） |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 页头装饰渐变 |

> Banner 内容本身的填充色由具体运营素材决定，本页规范只约束容器尺寸与圆角。

## 间距与排布

- **移动端**：8:3 比例严格执行，宽随屏幕缩放，高按比例同步缩放
- **桌面端**：高度固定（约 151–154px），宽度按面板尺寸切换三档
- **多个 Banner 同屏排布**：桌面端 demo 区三档（697 / 531 / 455）纵向堆叠展示
- **Banner 内边距**：由素材自行决定，不强制规范

## 文案规则

- Banner 内文案与素材一体设计，由运营提供，不强制
- 入口型 Banner 应有明确的 CTA 文字（如"立即参与"、"查看活动"）
- 标题简短有力，不超过两行

## 交互行为

- **点击**：整 Banner 可点击，跳转至运营页 / 活动页 / 落地页
- **轮播**：移动端多 Banner 支持横滑切换；桌面端通常静态展示
- **响应式**：桌面端跟随面板宽度切换三档尺寸；移动端按 8:3 等比缩放
- **关闭（可选）**：部分 Banner 可附关闭按钮，用户主动关闭

## 示例

![桌面端Banner-三档宽度对比](../图片/组件/Banner/desktopsan-dang-kuan-du-dui-bi.png)
![桌面端Banner-最大宽度697px](../图片/组件/Banner/desktop697px.png)
![桌面端Banner-默认531px](../图片/组件/Banner/desktop531px.png)
![桌面端Banner-最小455px](../图片/组件/Banner/desktop455px.png)
![移动端Banner-8比3比例](../图片/组件/Banner/mobile8bi3bi-li.png)
![Banner-说明区圆角](../图片/组件/Banner/descqu-yuan-jiao.png)

## 设计考量 / 原文摘录

> 移动端 banner 比例 8:3。banner 位圆角 6。
> 桌面端 banner 跟随面板尺寸变化宽度高度不变，最大宽度面板下 banner 区域 697px、默认屏幕 banner 区域 531px、最小屏幕 banner 区域 455。banner 位圆角 8。

- **桌面端高度恒定**：宽度切换不影响视觉重量，保证布局稳定
- **移动端比例固定 8:3**：跨设备视觉一致，避免变形
- **6 / 8 圆角分端差异**：移动端略小（6px），桌面端略大（8px），符合双端设计语言
- **三档宽度对应 panel 状态**：让 Banner 自然嵌入主体框架不同布局态（见 [框架拉伸策略](../主体框架/框架拉伸策略.md)）

## 不推荐用法

- 自定义 Banner 比例（应严格执行移动端 8:3）
- 自定义圆角值（应严格执行 6 / 8）
- 桌面端 Banner 高度跟随宽度同比缩放（应保持高度恒定）
- 同时展示超过 5 个 Banner（视觉拥挤，且无主次）
- Banner 内堆放过多文字（应以图为主、文字为辅）
- Banner 上叠加多个 CTA 按钮（应只有一个主 CTA）

## 关联

- 通知类横条见 [横幅提示](横幅提示.md)
- 主体框架的尺寸切换规则见 [框架拉伸策略](../主体框架/框架拉伸策略.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
- 字体 token 见 [字体](../基础/字体.md)
