---
title: 飘新-气泡-红点
slug: 飘新-气泡-红点
category: 组件
figma_node_id: 1:31
figma_page_name: ＞飘新、气泡、红点
aliases: [Badge, Dot, NewBadge, 红点, 灰点, 角标, 飘新, 飘新提示, 数字气泡, 导航气泡, 会话气泡]
last_extracted: 2026-05-19
status: ok
---

# 飘新-气泡-红点

> 用于在图标 / 入口 / 列表 / 导航上标示"新"或"未读"状态的小尺寸标记。分三大类：**小红点 / 小灰点（6px 切图）** 用于消息列表纯提示；**数字气泡 / 飘新** 用于带计数的提示（含 99+ 溢出态）；**会话气泡** 用于消息内容容器，覆盖 @我、@全员、单 / 多消息等场景。由于各端屏幕差异，红点统一使用切图。

## 类型与号型

### 红点 / 灰点 / 飘新分类

| 类型 | 用途 | 尺寸约束 |
|---|---|---|
| 小红点（6px） | 消息列表重要标记 | 6×6px 切图 |
| 小灰点（6px） | 消息列表次要标记（已勾选 / 已读但保留） | 6×6px 切图 |
| 数字气泡（单数） | 消息列表 / 导航上的 1 位数字 | 16×16px |
| 数字气泡（双数） | 2 位数字 | 自适应宽度 |
| 数字气泡（99+） | 超过 99 时溢出态 | 自适应宽度 |
| 主导航飘新 | 主导航入口的"新"标记 | 切图 |

### 会话气泡（消息容器）

| 类型 | 主要场景 |
|---|---|
| 文本信息（一行 / 多行） | 纯文字消息 |
| 图片 | 单图消息（含发送中 / 缓存 / 暂停 / 发送完毕状态） |
| 视频 | 单视频消息（含发送中 / 缓存 / 暂停 / 初始状态） |
| 图文混排 | 文字 + 图片混合消息 |
| 语音 | 音频消息（最小 125px，最大 271px） |
| 卡片 | 通用信息卡片 |
| 名片 | 个人名片（企业内 / 外）、群名片、服务号名片 |
| 链接 | 百度链接、外部链接 |
| @我、@全体成员 | 强提及消息（蓝色） |

## 尺寸规格

数据来自 Figma 三个顶层 FRAME 的 layout token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 移动端红点页画板 | 1280 × 3308px | `layout_ZN9R40` |
| 桌面端红点页画板 | 1280 × 2052px | `layout_G8SQ8E` |
| 移动端气泡页画板 | 1280 × 4805px | `layout_QNP7W3` |
| 章节大标题"飘新提示 / 示例 / 列表 / 导航 / 图标/入口 / 小红/灰点/飘新 / 数字气泡/飘新 / 气泡尺寸&颜色 / 会话气泡" | 24px Medium | `style_3D8RI2` / `style_Y6LZD0` |
| 行内说明 | 12px Regular，行高 22px | `style_ZJBPM3` / `style_132R1X` |
| 红点 / 灰点切图尺寸 | 6×6px（双倍 / 多倍切图） | 原文标注"红点一律使用切图，切图大小如下" |

### 会话气泡宽度规则（原文）

> 宽度最小值：除尖角外 30px；宽度最大值：除尖角外 271PX。
> 语音宽度最小值：除尖角外 125px；最大值除尖角外 271PX。

### 消息排布规则（原文）

> ——为了保持信息的可读性，消息气泡内部信息无论是左侧气泡还是右侧气泡，都保持左对齐。
> ——两条消息之间的间距为 24px，如存在外部拓展体，则拓展体与下一条间距为 24px。

### 卡片名片说明（原文）

> icon：展示对应附件类型；标题最大宽度 152PX，名称较长情况下展示两行，超出省略号 + 最后两个字 + .文件类型。

## 状态

红点 / 气泡只有"显示 / 不显示"两个状态；会话气泡（图片 / 视频）覆盖发送状态：

| 状态 | 含义 |
|---|---|
| 初始状态 | 消息容器准备就绪 |
| 发送中 | 上传中，进度条 / 转圈 |
| 视频加载前缓存 | 视频缓存中 |
| 图片加载前缓存 | 图片缓存中 |
| 暂停 | 用户手动暂停或网络中断 |
| 发送完毕 | 完成态，可正常展示 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 整页背景 | `#FFFFFF` = `White` | 主体底色 |
| 章节大标题 | `#11141A` | 24px Medium |
| 小节标题 | `#17181A` | 12px Medium |
| 说明文字（深灰） | `#5C6373` | 12px Regular |
| 说明文字（浅灰） | `#878D99` = `C-Coolgray60` | 备注 / 弱说明文字 |
| 灰底说明区 | `#F7F8FA` = `C-Coolgray20` | 上下两段大说明区底色 |
| @我 / @全员（我看到 / 我发出） | `#3377FF`（≈ `Brandblue60`） | 蓝色提及 |
| 别人@我（别人看到的） | 绿色（原文："别人看到的都是绿色的"） | 文字 / 框线绿色提及 |
| 标尺暖色高亮（演示用） | `rgba(255, 85, 0, 0.3)` / `rgba(255, 85, 0, 0.4)` / `#FF5500` | 演示标尺色（非组件本体色） |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 页头装饰渐变 |

> 红点本身的红色 token 在本页未以独立 hex 形式列出（强调"使用切图"），实际应取自功能色 `Warning/error` 区段，即 `Vermilion60 #FF5040` 或 `Red60`，详见 [色彩](../基础/色彩.md)。

## 间距与排布

- **消息间距**：相邻消息 24px；含外部拓展体时，拓展体与下一条同为 24px
- **气泡内对齐**：所有气泡内信息一律左对齐，左右气泡共用此规则
- **气泡宽度**：通用 30–271px（除尖角），语音 125–271px（除尖角）
- **数字气泡 99+ 溢出**：超出 99 显示为 "99+"，宽度自适应
- **红点 / 灰点 6×6**：用切图保证各端清晰度一致（避免子像素渲染问题）

## 文案规则

- 数字气泡内为纯数字，最大显示至 99，超出用 "99+"
- 红点 / 灰点不带文字
- 主导航飘新可使用"新"字图标 / 红点变体
- 会话气泡内容遵循消息发送的真实内容，不做截断（图片 / 视频附件除外）

## 交互行为

- **红点**：消息列表项左 / 右侧固定位置展示，点击进入会话后自动消失
- **灰点**：表示有更新但不强提示，常用于次要会话
- **数字气泡**：单击对应入口跳转，红点 / 气泡自动清零
- **主导航飘新**：用户首次访问新功能时显示，访问后消失
- **会话气泡 hover / 长按**：触发 [长按气泡](长按气泡.md) 互动菜单
- **@我 / @全员**：用蓝色高亮提示，确保用户视觉优先

## 示例

![移动端红点-红点灰点示意](../图片/组件/飘新-气泡-红点/mobiledothui-dian.png)
![移动端红点-数字气泡示意](../图片/组件/飘新-气泡-红点/mobileshu-zibubble.png)
![移动端红点-导航气泡99+](../图片/组件/飘新-气泡-红点/navbubble99.png)
![桌面端红点-列表与图标入口](../图片/组件/飘新-气泡-红点/desktopdotlist.png)
![移动端气泡-会话气泡总览](../图片/组件/飘新-气泡-红点/sessionbubbleoverview.png)
![移动端气泡-文本与图文混排](../图片/组件/飘新-气泡-红点/wen-ben-yu-tu-wen-hun-pai.png)
![移动端气泡-@我蓝绿色对照](../图片/组件/飘新-气泡-红点/atwo-lan-lv-se-dui-zhao.png)
![移动端气泡-名片与链接](../图片/组件/飘新-气泡-红点/ming-pian-yulink.png)

## 设计考量 / 原文摘录

> 说明：由于各个端屏幕显示不同，所以红点一律使用切图的形式，切图大小如下。
> 我@单人&全员都是蓝色；别人看到的都是绿色的；我看到的@别人的是蓝色。
> 为了保持信息的可读性，消息气泡内部信息无论是左侧气泡还是右侧气泡，都保持左对齐。
> 两条消息之间的间距为 24px，如存在外部拓展体，则拓展体与下一条间距为 24px。
> 气泡尺寸：宽度最小值：除尖角外 30px；宽度最大值：除尖角外 271PX。
> 语音宽度最小值：除尖角外 125px；最大值除尖角外 271PX。

- **切图代替矢量**：跨端一致性优先，避免子像素渲染差异
- **@色彩区分视角**：发送者与接收者看到的@色不同（蓝 / 绿），强化"被提及"的视觉感知
- **左对齐统一规则**：左右气泡内容都左对齐，提升信息可读性
- **24px 标准消息间距**：含外部拓展体也按 24px，保持节奏

## 不推荐用法

- 自定义红点尺寸（违反"切图统一"原文）
- 数字气泡溢出表示用其它数字（如 100、999），应统一 "99+"
- @文字色不区分自己 / 别人视角（破坏蓝 / 绿语义）
- 消息气泡内右对齐文字（违反"无论左右气泡都左对齐"）
- 消息间距 ≠ 24px（破坏节奏）
- 气泡宽度超过 271px（破坏可读性约束）

## 关联

- 标签 / 角标的色彩语义对照见 [标签](标签.md)
- 长按气泡的互动菜单见 [长按气泡](长按气泡.md)
- 消息列表整体见 [列表](列表.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
