---
title: 指向弹窗
slug: 指向弹窗
category: 组件
figma_node_id: 1:44
figma_page_name: ＞指向弹窗
aliases: [Pointed Popover, 指向气泡, callout, 引导弹窗, 指示性弹窗]
last_extracted: 2026-05-19
status: ok
---

# 指向弹窗

> 由触发元素旁弹出、明确指向具体目标的气泡式弹窗。常用于功能引导、新手提示、服务号弹出指向等场景。与"浮层"的区别在于**带指向尖角 / 圆点**明确锚定目标元素；尺寸按内容自适应，文案 1 行或最多 2 行；按指示方向分上 / 下 / 左 / 右四向。

## 类型与号型

如流"指向弹窗"覆盖两类场景：

| 场景 | 来源 FRAME | 适用 |
|---|---|---|
| 邮箱-桌面端 指向弹窗 | `邮箱-桌面端 指向弹窗`（1280 × 2392） | 邮箱场景的指向引导（独立窗口形态嵌入） |
| 桌面端反馈-指示性弹窗 | `桌面端-反馈-指示性弹窗`（1280 × 1133） | 通用反馈场景（如服务号弹出指向） |

按文案行数分两档（来自示例区"1 行文案"与"最多 2 行文案"标注）：

| 子类型 | 容器宽 × 高 | 文案 |
|---|---|---|
| 1 行文案气泡 | 内容自适应（典型 41 × 12 文字 + 容器 214 × 108） | 单行短文案 |
| 最多 2 行文案气泡 | 内容自适应（典型 68 × 12 文字） | 1–2 行文案 |

按指向方向分四档（由示例区多个气泡变体的方向推断）：

| 方向 | 含义 |
|---|---|
| 向上指 | 气泡显示在触发元素**下方**，尖角朝上 |
| 向下指 | 气泡显示在触发元素**上方**，尖角朝下 |
| 向左指 | 气泡显示在触发元素**右侧**，尖角朝左 |
| 向右指 | 气泡显示在触发元素**左侧**，尖角朝右 |

## 尺寸规格

数值取自 Figma `globalVars` 中各 layout token：

| 元素 | 宽 × 高 | 来源 |
|---|---|---|
| 邮箱场景规范画板 | 1280 × 2392px | `layout_K71Q78` |
| 反馈场景规范画板 | 1280 × 1133px | `layout_1UC3KE` |
| 邮箱场景独立窗口 | 960 × 660px | `layout_UPP826` + `effect_NY0EEL`：投影 `0 2 20 rgba(17,20,26,0.16)` |
| 示例气泡 Group 3643（基础示例） | 214 × 108px | `layout_9WNT9M` |
| 反馈场景气泡示例（按尺寸列表） | 217 × 226 / 163 × 80 / 150 × 114 / 160 × 112 / 210 × 281 / 210 × 138 / 149 × 109 / 196 × 158 / 254 × 132 | `layout_JDU5RU / 027R9N / G5HBXA / KS9YFC / UCGARC / 5H2AEJ / TKSIT5 / WDFJZP / GXC2RU`（共 9 个变体） |
| 指向圆点（Ellipse 1） | 8 × 8px | `layout_FEQ2XE`，fill `rgba(232, 23, 138, 0.24)` |
| 服务号示例容器（反馈场景） | 84 × 90.32px | `layout_8QSQ9S` |
| 服务号矩形（左右描边） | 12 × 90px | `layout_34H302 / FVPK9S` |
| 服务号矩形（上下描边） | 84 × 10px | `layout_KEDKWM / WZFYNZ` |
| 服务号标尺 | 40 × 16 / 40 × 44 / 20 × 40 | `layout_OX7UFH / F4OQF4 / ZS7031 / T36OQB` |
| 章节标题（24px Medium） | 96 × 24 / 48 × 24 / 72 × 24 | `style_SS97RK`：24/24 Medium |
| 文案（12px Medium） | 41 × 12 / 68 × 12 | `style_10GV1E`：12/12 Medium，色 `#17181A` |
| 分隔线 | 960 × 18px | `layout_0VA921 / EJXZUO`（基础规则与示例之间） |
| 页头 | 1080 × 232px | `layout_L533S5` |
| 反馈场景说明区 Frame 1 | 960 × 100px | `layout_PNTX4G` |

## 状态

| 状态 | 含义 |
|---|---|
| 默认 | 指向弹窗未触发，不可见 |
| 展开 | 由触发元素旁弹出，尖角指向目标 |
| 关闭 | 用户点击其他区域或主动关闭按钮收回 |

## 颜色与 token

| 用途 | hex | 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `White` | 通用底色（来自 `fill_I64LQS`） |
| 章节标题文字 | `#11141A` | 24px Medium |
| 气泡文案 | `#17181A` | 12px Medium |
| 指向圆点（演示用粉色） | `rgba(232, 23, 138, 0.24)` | `fill_XHFNE3`，演示标尺色（非组件本体色） |
| 投影（独立窗口） | `0 2 20 rgba(17, 20, 26, 0.16)` | `effect_NY0EEL` |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | 页头装饰渐变 |

> 指向弹窗本体（气泡容器）的具体填色未在本页 globalVars 中以独立 token 形式给出；实际产品中通常采用品牌色或深色半透明 + 白字方案，落地以最新组件库为准。
> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

- **气泡尺寸**：按内容自适应，从最小 149×109 到最大 217×226 / 210×281 不等
- **指向尖角 / 圆点**：8×8px 圆点（演示用），实际产品中改用三角形尖角指向触发元素
- **示例气泡分布**：反馈场景画板按 9 宫格陈列 9 种变体，覆盖不同尺寸与指向方向
- **章节标题与示例区分隔**：960 × 18px 分隔线（基础规则与示例间）
- **服务号示例位置**：反馈场景画板 y=563 起，演示服务号弹出指向区域，包含上下左右四向标尺

## 文案规则

- 文案使用 **12px Medium**，色 `#17181A`
- **1 行文案**：标准用法，简短直白
- **最多 2 行文案**：信息量较大时使用，避免超过 2 行（应改用 [弹窗](弹窗.md)）
- 文案应聚焦"指向什么、为什么提示"，避免长说明

## 交互行为

- **触发**：由特定事件触发（如新功能首次出现、服务号上线、引导步骤）
- **定位**：相对触发元素定位，气泡尖角 / 圆点精确指向目标
- **方向自适应**：根据触发元素在视口的位置自动选择四向之一，避免越界
- **关闭**：
  - 点击气泡内的关闭按钮（如有）
  - 点击气泡外部其他区域
  - 自动消失（业务自定义时长）
- **服务号场景**：服务号弹出指向后，气泡引导用户关注 / 点击服务号主体

## 示例

![邮箱-桌面端 指向弹窗-独立窗口](../图片/组件/指向弹窗/maildesktopdu-liwindow.png)
![基础示例-Group3643](../图片/组件/指向弹窗/baseexample-1rowtext.png)
![气泡变体-1行文案](../图片/组件/指向弹窗/bubblevariant-1rowtext.png)
![气泡变体-2行文案](../图片/组件/指向弹窗/bubblevariant-2rowtext.png)
![反馈场景-指示性弹窗总览](../图片/组件/指向弹窗/feedbackchang-jingoverview.png)
![反馈场景-服务号弹出指向](../图片/组件/指向弹窗/feedbackchang-jing-fu-wu-hao-zhi-xiang.png)
![气泡尺寸变体集合](../图片/组件/指向弹窗/bubblesizevariantji-he.png)

## 设计考量 / 原文摘录

> 1 行文案。
> 最多 2 行文案。
> 服务号。
> 基础规则。
> 示例。

- **指向 vs 浮层**：指向弹窗带尖角 / 圆点明确锚定目标，浮层是相对触发元素的悬浮容器但不强调"指向"
- **文案 ≤ 2 行**：超过 2 行违反"轻量引导"定位，应改用弹窗承载完整内容
- **粉色圆点是演示色**：`rgba(232,23,138,0.24)` 仅用于 Figma 示例标识"指向点"，实际产品改用三角尖角 + 容器同色
- **方向四向自适应**：根据触发元素位置自动定位，是与浮层一致的避免越界策略

## 不推荐用法

- 用指向弹窗承载多段长文案（应改用 [弹窗](弹窗.md)）
- 同一页面同时弹出多个指向弹窗（注意力冲突）
- 指向圆点 / 尖角偏离触发元素中心轴（破坏"指向"语义）
- 在 Toast 等非阻断反馈位置使用指向弹窗（应明确属于"引导"而非"反馈"）
- 文案 > 2 行（违反"最多 2 行"原文）
- 不做关闭按钮且无自动消失（用户无法摆脱引导）

## 关联

- 不带指向的悬浮容器见 [浮层](浮层.md)
- 阻断式确认对话见 [弹窗](弹窗.md)
- 独立窗口形态见 [浮窗](浮窗.md)
- 长按触发的浮层菜单见 [长按气泡](长按气泡.md)
- 不打断流程的反馈见 [Toast](Toast.md)、[Banner](Banner.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
