---
title: 新窗口规范
slug: 新窗口规范
category: 主体框架
figma_node_id: 1:56
figma_page_name: ＞新窗口规范
aliases: [新开窗口, popup window, 独立窗口, 弹出窗口, 群直播提醒]
last_extracted: 2026-05-20
status: ok
---

# 新窗口规范

> 桌面端从如流主窗口弹出的独立子窗口（如聊天记录、消息记录管理、会议、日程、待办、项目、图片查看、视频查看、群直播提醒等）的整体规范。覆盖独立窗口的标题构成、尺寸分级、弹出位置与拉伸规则四大部分。

## 1. 独立窗口框架规范

### 标题栏构成

> 窗口标题构成：系统按钮 + 标题区域 + 配置按钮区域。

| 区域 | 规则 |
|---|---|
| 系统按钮 | Mac 系统左侧 / Win 系统右侧的最小化 / 最大化 / 关闭按钮 |
| 标题区域 | 居中展示，含可选 icon + 标题文本 |
| 配置按钮区域 | Mac 系统右侧可配置按钮，可隐藏，最多展示 3 个按钮，按钮大小为 **20×20px** |

### 标题区域字符限制

- 不同窗口尺寸下，标题（包含标题 icon）展示字符**最大限制为 420px**
- 可根据窗口拉伸自适应
- 字体限制保证安全距离即可
- 超过宽度后**打点截断**

### 窗口拉伸安全距离

标题栏左右两端需保留安全距离（红色 16% 透明度矩形示意），避免内容直接贴住系统按钮 / 配置按钮：

| 元素 | 尺寸 |
|---|---|
| 安全距离指示矩形 | 90 × 30 / 70 × 30 / 420 × 30 等 |
| 系统按钮区域宽度 | 70px（典型，左侧三按钮） |
| 配置按钮区域宽度 | 14-45px（按按钮数变化） |

## 2. 独立窗口的类型及大小

### 2.1 可拉伸窗口

- **默认固定大小**：宽度 **360～1100px**，高度 **520～800px**
- **应用场景**：聊天记录、消息记录管理、会议、日程、待办、项目、图片查看器、视频查看器
- **规则**：默认窗口的长度或宽度其一，不可超出如流端内默认尺寸；内容为聊天消息展示及可输入、编辑内容，或图片、视频查看时，可使用此窗口

### 2.2 不可拉伸窗口

- **固定大小**：宽度 **320～600px**，高度 **344～720px**
- **应用场景**：如流介绍、个人、投屏、群组概况场景、发起直播场景、我的文件、系统设置
- **规则**：内容场景多为纯信息展示及系统设置，适用于此窗口

## 3. 窗口的弹出位置

### 3.1 通用窗口

> 窗口弹出位置位于 X 轴居中，位于屏幕中右上方。窗口与如流窗口保持错位，默认在如流窗口的右侧，位置跟随如流窗口，右侧空间不够时弹窗出现在左侧。

四档相对位置规则（按独立窗口高度 / 宽度对比如流窗口）：

| 情形 | Y 轴位置 | X 轴位置 |
|---|---|---|
| a. 独立窗口高度 < 如流窗口高度 75% | Y 轴位置低于如流窗口 **72px** | X 轴位置超过如流窗口 **72px** |
| b. 独立窗口高度 = 如流窗口高度 75-100% | Y 轴位置居中于如流窗口 | X 轴位置保持错位如流窗口 **72px** |
| c. 独立窗口高度 > 如流窗口、宽度 < 如流窗口 | X 轴和 Y 轴位置居中于如流窗口 | （同左） |
| d. 独立窗口宽度、高度皆大于如流窗口 | Y 轴位置居中于如流窗口 | X 轴位置保持错位如流窗口 **120px** |

### 3.2 小窗口

> 立即发起类独立小窗口，窗口弹出位置位于如流窗口中上方，位置跟随如流窗口。X 轴位置居中于如流窗口，Y 轴位置保持低于如流窗口 **72px**。

适用：群直播提醒等高频立即触发的小窗。

## 4. 拉伸规则

> 可拉伸的窗口，最大为当前屏幕尺寸。
> 拉伸后标题文案自适应展示（保证安全距离即可）。
> 拉伸关闭后再次打开，可配置默认态尺寸、记忆态尺寸，建议会话强相关场景使用记忆态尺寸。

### 拉伸方向

| 类型 | 拉伸方向 |
|---|---|
| a. 内容单列展示的独立窗口 | 支持宽度和高度拉伸 |
| b. 双列展示的独立窗口 | 支持宽度和高度拉伸 |

### 拉伸状态对照

| 状态 | 行为 |
|---|---|
| 拉伸前 | 默认尺寸（按 2.1 / 2.2 取值） |
| 拉伸后 | 标题自适应（保证安全距离）、最大不超过屏幕尺寸 |
| 关闭再打开 | 可选"默认态尺寸"或"记忆态尺寸"，会话强相关场景建议记忆态 |

## 颜色与 token

| 用途 | hex | token |
|---|---|---|
| 背景 | `#FFFFFF` | `fill_Y2NLN5` |
| 主标题 / 正文 | `#11141A` | `fill_37PM0T` |
| 章节标题 | `#000000` | `fill_ICXL1D` |
| 安全距离标识矩形 | `#FF0015`，16% 透明度 | `fill_G0J0G6` |
| 拉伸方向标注虚线 | `#3377FF` = `Brandblue60` | `fill_HQE6ON` |
| 投影 | `0px 2px 20px rgba(17, 20, 26, 0.16)` | `effect_W7K7AH` |
| 标题文字 | 24px Medium，色 `#11141A` | `style_Z1E3JN` |
| 一级章节（1./2./3./4.） | 20px Regular | `style_YRDRG5` |
| 区域说明 | 16px Medium，line-height 24px | `style_OMJT72` |
| 安全距离 / 拉伸后 标签 | 16px Medium center | `style_QQXM2B` |
| 详细描述（破折号 list） | 14px Regular | `style_U05ZUP` |

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

## 默认尺寸速查表

| 场景 | 类型 | 默认尺寸 |
|---|---|---|
| 聊天记录 / 会议 / 项目等 | 可拉伸 | 宽 360-1100px × 高 520-800px |
| 个人主页 / 群组概况 / 系统设置 | 不可拉伸 | 宽 320-600px × 高 344-720px |
| 群直播提醒 / 立即发起类 | 不可拉伸 - 小窗 | 跟随如流窗口 X 居中，Y 低 72px |
| 拉伸后最大 | - | 当前屏幕尺寸 |

## 示例

![新窗口-基础规则](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-标题构成](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-icon加标题](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-可拉伸窗口](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-不可拉伸窗口](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-通用窗口位置-a](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-通用窗口位置-b](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-通用窗口位置-c](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-通用窗口位置-d](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-小窗口](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-拉伸-单列](../图片/主体框架/新窗口规范/baserule.png)
![新窗口-拉伸-双列](../图片/主体框架/新窗口规范/baserule.png)

## 设计考量 / 原文摘录

> 标题区域：居中展示，不同窗口尺寸下标题（包含标题 icon）展示字符最大限制为 420px，可根据窗口拉伸自适应，字体限制保证安全距离即可，超过打点截断。
> 按钮区域：mac 系统右侧可配置按钮，此区域可隐藏，最多展示 3 个按钮，按钮大小为 20*20px。
> 2.1 可拉伸窗口，默认固定大小宽度 360～1100px，高度 520～800px。应用场景为聊天记录、消息记录管理、会议、日程、待办、项目、图片查看器、视频查看器。
> 2.2 不可拉伸窗口：固定大小：宽度 320～600px，高度 344～720px。应用于如流介绍、个人、投屏、群组概况场景、发起直播场景、我的文件、系统设置。
> 3.1 通用窗口：窗口弹出位置位于 X 轴居中，位于屏幕中右上方。窗口与如流窗口保持错位，默认在如流窗口的右侧，位置跟随如流窗口，右侧空间不够时弹窗出现在左侧。
> 3.2 小窗口：立即发起类独立小窗口，窗口弹出位置位于如流窗口中上方，位置跟随如流窗口，X 轴位置居中于如流窗口，Y 轴位置保持低于如流窗口 72px。
> 可拉伸的窗口，最大为当前屏幕尺寸。
> 拉伸关闭后再次打开，可配置默认态尺寸、记忆态尺寸，建议会话强相关场景使用记忆态尺寸。

- **场景驱动尺寸分级**：聊天 / 内容编辑类强需拉伸 → 2.1；信息展示与设置 → 2.2，避免随意调整尺寸
- **错位优于覆盖**：默认在如流窗口右侧 72px 错位，避免遮挡主窗，且空间不足时自然左侧打开
- **会话场景记忆尺寸**：聊天 / 项目这类高频强相关窗口，记忆用户上次拉伸的尺寸更好
- **20px 按钮 + 安全距离**：配置按钮 20×20，左右留出 16% 红色矩形示意的安全距离，避免视觉拥挤

## 不推荐用法

- 让"系统设置 / 群组概况"等纯信息窗口启用拉伸（应固定，符合 2.2 规则）
- 标题超过 420px 不打点截断（必须截断）
- 在右侧空间不足时强行让窗口出现在右侧（应自动落在左侧）
- 立即发起类小窗居中遮盖主窗（应在主窗中上方、Y 低 72px）

## 关联

- 整体框架功能见 [框架功能布局](框架功能布局.md)
- 拉伸尺寸策略见 [框架拉伸策略](框架拉伸策略.md)
- 会议中窗口见 [会中框架规则](会中框架规则.md)
- 弹窗 / 模态对话见 [弹窗](../组件/弹窗.md)
- 浮窗规范见 [浮窗](../组件/浮窗.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
