---
title: 浮窗
slug: 浮窗
category: 组件
figma_node_id: 1:40
figma_page_name: ＞浮窗
aliases: [Floating Panel, 悬浮窗, 浮动面板]
last_extracted: 2026-05-19
status: ok
---

# 浮窗

> 邮箱场景的桌面端独立悬浮窗口。固定大小宽 640 × 高 600px，不可拉伸；标题区居中展示，字符最大限制 420px；窗口标题构成 = 标题区域 + 关闭按钮；弹出位置于页面内居中，整体背景使用黑色遮罩 `#000000` 30%。

## 类型与号型

如流"浮窗"主要服务**邮箱-桌面端**场景下的独立悬浮窗口。Figma 当前页（`邮箱-桌面端 浮窗`）展示 4 个并列的独立窗口示例，结构一致，分别演示标题区、内容区、操作区与不同业务变体。

| 类型 | 形态 | 适用 |
|---|---|---|
| 独立窗口浮窗 | 640 × 600 固定窗口 | 邮箱桌面端的独立创建 / 撰写 / 查看场景 |

## 尺寸规格

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

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 桌面端规范画板 | 1280 × 3966px | `layout_KHT2TR` |
| 独立窗口（4 个示例位） | 960 × 660px | `layout_B3VA2P / OIRK6F / R93LUC / 1NEIP0` |
| 实际窗口尺寸（原文规范） | **640 × 600px**（固定，不可拉伸） | 文案明确标注 |
| 标题区域字符最大限制 | 420 × 55px | `layout_87S5NR`（演示标尺） |
| 页头 | 1080 × 232px | `layout_1TPDD0` |
| 章节标题"基础规则"（24px Medium） | 96 × 24px | `style_GTLN99`：24/24 Medium |
| 1.浮窗框架规范（20px Regular） | 134 × 28px | `style_WI720R`：20px Regular |
| 小节标题（16px Medium） | 250 × 24 / 160 × 24px | `style_X5BVIS / SSRKK1`：16/24 Medium |
| 说明正文（14px Regular） | 517 × 100px | `style_7W27S1`：14px Regular |
| 阴影 | `0 2 20 rgba(17,20,26,0.16)` | `effect_N2SE9J`（4 个独立窗口共用） |

## 状态

| 状态 | 含义 |
|---|---|
| 默认 | 浮窗未触发 |
| 弹出 | 浮窗居中展示，背景蒙层激活 |
| 关闭 | 用户点击右上角关闭按钮收回 |

> 浮窗本身不像按钮 / 输入框那样具备"hover / disabled"语义，其状态主要由生命周期（弹出 / 关闭）描述。

## 颜色与 token

| 用途 | hex | 说明 |
|---|---|---|
| 窗口容器底色 | `#FFFFFF` = `White` | 通用底色 |
| 整体背景蒙层 | `#000000` α 30% | 黑色遮罩（注：与"弹窗"的 32% 透明度略有差异） |
| 章节标题文字 | `#11141A` | 24px Medium |
| 小节正文 / 说明 | `#000000` | 16/14 Regular（说明区取纯黑） |
| 演示标尺红 | `#FF0015` | 仅说明区，非组件本体色 |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0)→rgba(51,119,255,0.06))` | 页头装饰渐变 |
| 投影 | `0 2 20 rgba(17,20,26,0.16)` | 浮窗与下层背景的层级分离投影 |

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

## 间距与排布

- **窗口标题构成**：标题区域 + 关闭按钮
- **标题区域**：居中展示，不同窗口尺寸下标题展示字符最大限制为 **420px**
- **位置**：弹出位置于页面内**居中展示**
- **背景**：整体背景黑色遮罩 `#000000` 30%
- **拉伸规则**：**不可拉伸**窗口，固定大小宽 640 × 高 600px
- **演示画板排布**：4 个独立窗口在画板中以两行两列形式陈列（y 分别 664 / 1384 / 2109 / 2839，每个 960×660 演示位），方便横向对比业务变体

## 文案规则

- 标题居中展示，建议简短直白（"撰写邮件"、"邮件转发"等动宾结构）
- 标题宽度上限 420px：超出后需考虑截断或换标题
- 说明文字使用 14px Regular，正文与小节标题之间用 16px Medium 区隔

## 交互行为

> 标题区域：居中展示，不同窗口尺寸下标题展示字符最大限制为 420px。
> 拉伸规则：不可拉伸窗口，固定大小宽度 640 × 高度 600px。
> 位置背景：弹出位置于页面内居中展示；整体背景黑色遮罩（#000000，30%）。

- **触发**：通过邮箱主界面内的"撰写"、"转发"、"查看"等按钮触发独立浮窗
- **居中模态**：浮窗于页面内居中弹出，背景 30% 黑色蒙层全屏
- **关闭**：右上角关闭按钮收回浮窗
- **不可拉伸**：窗口尺寸固定 640 × 600，用户不可拖拽改变大小（与浏览器原生 window 不同）
- **与弹窗的区别**：浮窗承载完整的次级功能（写邮件、转发邮件），蒙层 30%；弹窗承载短决策对话，蒙层 32%

## 示例

![桌面端浮窗-独立窗口示例 1](../图片/组件/浮窗/du-liwindow-example1.png)
![桌面端浮窗-独立窗口示例 2](../图片/组件/浮窗/du-liwindow-example2.png)
![桌面端浮窗-独立窗口示例 3](../图片/组件/浮窗/du-liwindow-example3.png)
![桌面端浮窗-独立窗口示例 4](../图片/组件/浮窗/du-liwindow-example4.png)
![桌面端浮窗-标题字符最大限制 420px](../图片/组件/浮窗/titlezui-da420px.png)
![桌面端浮窗-总览](../图片/组件/浮窗/desktopfloatingoverview.png)

## 设计考量 / 原文摘录

> 窗口标题构成：标题区域 + 关闭按钮。
> 标题区域：居中展示，不同窗口尺寸下标题展示字符最大限制为 420px。
> 拉伸规则：不可拉伸窗口，固定大小宽度 640 × 高度 600px。
> 位置背景：弹出位置于页面内居中展示；整体背景黑色遮罩（#000000，30%）。

- **场景定位**：浮窗是"独立任务窗口"，不是纯反馈层，因此尺寸固定且较大（640×600），区别于浮层 / 弹窗
- **不可拉伸**：固定尺寸保证设计稿与实现一致，避免响应式带来的布局漂移
- **30% 蒙层**：比"弹窗"的 32% 略弱，因浮窗承载次级任务而非阻断式决策，蒙层弱一档让用户仍能感知上下文

## 不推荐用法

- 用浮窗承载短决策对话（应改用 [弹窗](弹窗.md)）
- 浮窗中再嵌套另一浮窗 / 弹窗（蒙层叠加，破坏层级）
- 自定义浮窗尺寸（应严格遵循 640×600）
- 蒙层透明度 ≠ 30%
- 浮窗内容超出 600px 高时未做内部滚动（应保持外框不撑高）

## 关联

- 阻断式短对话见 [弹窗](弹窗.md)
- 由触发元素旁定位的悬浮容器见 [浮层](浮层.md)
- 抽屉式半浮层见 [半浮层面板](半浮层面板.md)
- 不打断流程的反馈见 [Toast](Toast.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
