---
title: 浮层
slug: 浮层
category: 组件
figma_node_id: 1:29
figma_page_name: ＞浮层
aliases: [Popover, Tooltip, Menu, 悬浮卡片, 悬浮菜单, 下拉浮层, 弹出菜单]
last_extracted: 2026-05-19
status: ok
---

# 浮层

> 由用户主动触发、相对触发元素定位的悬浮容器。承载下拉菜单 / 加号菜单 / 右键菜单 / 操作菜单等多种语义。桌面端固定宽度 144px，移动端 160px；常见选项行高 44px，圆角 8px；上下间距 16px、相邻选项间隔 8px。当浮层用于"已经存在黑色蒙层"的场景（如智能看板）时改用投影替代蒙层。

## 类型与号型

| 类型 | 触发场景 | 容器宽 |
|---|---|---|
| 搜索加号菜单（桌面端） | 顶部输入区"+"按钮点击 | 144px |
| 通用菜单（桌面端） | 列表 / 工具栏右键 / 更多 | 144px |
| 浮层菜单（移动端） | 长按 / 点击触发 | 160px |
| 居中模态浮层（移动端） | 智能看板内的浮层（需配蒙层 / 投影替代） | 160px |

## 尺寸规格

数据来自 Figma `globalVars` 中各 layout / style token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 桌面端浮层画板 | 1280 × 876px | `layout_DKLEX3` |
| 移动端浮层画板 | 1280 × 2001px | `layout_T8AHR6` |
| 桌面端单菜单容器（5 项） | 144 × 228px | `layout_PSAQ3A / MOPYCG` |
| 移动端单菜单容器（5–6 项） | 160 × 272px | `layout_4I4TGS / JJC7P6` |
| 移动端短菜单（2 项） | 160 × 96px | `layout_K24UNN / ASENV5` |
| 移动端中菜单（3 项） | 160 × 140px | `layout_DNVVHB / H8QJX6` |
| 单选项行 | 144 × 44px / 160 × 44px | `layout_XGYIKJ / HS3VDE` 等 |
| 选项文字（16px Regular） | 96 × 16px | `style_9RKI01`：16/16 Regular，PingFang SC |
| 圆角 | 8px | 浮层容器 `borderRadius: 8px` |
| 关键间距 - 容器上下边距 | 16px | "16px" 标尺标注（重复出现于桌面与移动） |
| 关键间距 - 选项之间 | 8px | "8px" 标尺标注 |
| 关键间距 - 居中浮层与状态栏 | 44px | "44px" 标尺标注（移动端居中模态） |
| 选中态高亮（图标圆点） | 24 × 24px | `layout_WVJH18 / PYCXSS` |
| 章节标题"基础规则 / 示例 / 搜索加号菜单" | 24 / 48 / 96 / 144 × 24px | 24px Medium，`style_B2BUG7` |

## 状态

浮层的状态由选项行承载（来自 Figma 选项命名与 overlay 标尺）：

| 状态 | 含义 |
|---|---|
| 默认 | 浮层未触发，不可见 |
| 展开 | 浮层弹出，可见 |
| 选项默认 | 选项常态，文字主色 |
| 选项 hover | 选项高亮（桌面端） |
| 选项按下 | 移动端 touch 反馈 |
| 选项禁用 | 不可点击，文字灰化 |
| 选项选中 | 当前激活项，前缀圆点 24×24 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 浮层容器底色 | `#FFFFFF` = `White` | 通用底色，8px 圆角 |
| 灰底说明区 | `#F7F8FA` = `C-Coolgray20` | 桌面端说明区底色 |
| 选项主文字 | `#11141A` | 16px Regular |
| 说明区辅文字 | `#5C6373` | 12px Regular，行高 18px |
| 居中模态蒙层 | `rgba(0, 0, 0, 0.32)` | 黑色 32% 透明蒙层（智能看板等已有蒙层场景应改用投影） |
| 标尺暖色高亮（演示用） | `rgba(255, 85, 0, 0.5)` / `rgba(255, 85, 0, 0.3)` | overlay 暖色（仅说明区，非组件本体色） |
| 标尺线 | `#FF5500` | 演示用红线（非组件本体色） |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 页头装饰渐变 |

> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

关键间距（来自 Figma 标尺标注的 `16px / 8px / 44px` 三档）：

- **容器内上下边距**：16px（首个选项距容器顶 / 末个选项距容器底）
- **相邻选项间距**：8px（选项之间留 8px 透明带）
- **居中模态距状态栏**：44px（移动端"在页面居中展示"场景）
- **选项行内**：文字距左边 48px（含 24px 图标 + 24px 间距，从 `290 - 242 = 48` 反推）
- **桌面端 4 列演示画板**：每列宽 144px，列间距 125px
- **移动端 4 列演示画板**：每列宽 160px

## 文案规则

- 选项文字使用单行 16px Regular，不超过容器宽度
- 选项命名简洁明了（"选项 1 / 选项 2 / ..."为占位，业务自定）
- 章节标题"基础规则"、"示例"用 24px Medium
- 说明文字（如"在页面居中展示"、"当浮层用于智能看板等..."）用 12px Regular，行高 18px

## 交互行为

- **触发**：点击 / 长按触发，浮层从触发元素旁弹出
- **定位**：浮层相对触发元素定位，自动判断空间避免越界（详见 [长按气泡](长按气泡.md) 上下左右判断逻辑）
- **选项点击**：单击选项触发对应操作，浮层关闭
- **外部点击**：点击浮层外部区域，浮层关闭
- **居中模态**：移动端在页面居中展示，配 32% 黑色蒙层
- **智能看板场景**：当上层已有黑色蒙层时，改用投影替代蒙层，避免蒙层叠加

## 示例

![桌面端浮层-菜单总览](../图片/组件/浮层/desktoppopoveroverview.png)
![桌面端浮层-选项规格](../图片/组件/浮层/desktopxuan-xiang-gui-ge.png)
![移动端浮层-基础规则](../图片/组件/浮层/mobilebaserule.png)
![移动端浮层-居中展示](../图片/组件/浮层/mobilecenterdisplay.png)
![移动端浮层-菜单实例](../图片/组件/浮层/mobilecai-dan-shi-li.png)
![浮层标尺-16px与8px](../图片/组件/浮层/biao-chi16pxyu8px.png)

## 设计考量 / 原文摘录

> 在页面居中展示。
> 当浮层用于智能看板等（已经有黑色蒙层存在）时，应改直接加投影，不再用黑色蒙层。

- **避免蒙层叠加**：原文明确指出在已有蒙层场景改用投影，防止视觉过暗、信息层级混淆
- **16/8/44 三档间距**：统一可记忆的标尺，让多个场景间距一致
- **桌面 144 / 移动 160**：根据触摸热区差异调整宽度
- **选项 44px 高**：满足移动端最小可点击高度（44pt）规范

## 不推荐用法

- 浮层叠加在已有黑色蒙层之上（违反"已有蒙层场景改投影"原文规则）
- 自定义浮层圆角（应统一 8px）
- 选项行高小于 44px（破坏移动端可点击规范）
- 选项之间间距 ≠ 8px（破坏统一节奏）
- 浮层宽度超过 240px（与列表 / 抽屉混淆，应改用 [半浮层面板](半浮层面板.md)）

## 关联

- 长按触发的浮层菜单见 [长按气泡](长按气泡.md)
- 含遮罩的弹层见 [弹窗](弹窗.md)
- 抽屉式半浮层见 [半浮层面板](半浮层面板.md)
- 反馈类悬浮见 [Toast](Toast.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
