---
title: 框架拉伸策略
slug: 框架拉伸策略
category: 主体框架
figma_node_id: 1:55
figma_page_name: ＞框架拉伸策略
aliases: [响应式, 自适应, 窗口拉伸, resize, 布局1, 拉伸规则, 桌面端拉伸]
last_extracted: 2026-05-20
status: ok
---

# 框架拉伸策略

> 桌面端如流主框架在窗口缩放时，各分区按"固定 / 默认 / 可拉伸"三类策略协同响应的规范。规定可拉伸区域 1（左侧主面板）、可拉伸区域 2（中央内容区）、可拉伸区域 3（右侧辅助区）的最小 / 最大 / 默认尺寸，以及拉伸过程中各高度行的固定 / 自适应表现。本规范聚焦"哪一块跟着拉、跟到多少"，与功能分区（见 [框架功能布局](框架功能布局.md)）正交。

## 总览

桌面端共有三组画板示意拉伸策略：

1. **桌面端框架拉伸策略 - 布局 1**（节点 `26:3854`，1280 × 4621）
2. **桌面端框架拉伸策略 - 布局 2**（节点 `2282:86155`，1280 × 4621）
3. **桌面端框架拉伸策略 - 布局 3**（节点 `2282:86702`，1280 × 4621）

> 应用场景说明：布局 1 主要用于消息页、通讯录。

每套画板按"默认尺寸 → 拉伸最大 → 拉伸最小"等多档对照展示。

## 可拉伸区域定义

| 区域 | 角色 | 拉伸行为 |
|---|---|---|
| 可拉伸区域 1 | 左侧主面板（消息列表 / 通讯录列表等） | 跟随窗口宽度拉伸，受最小 / 最大宽度约束 |
| 可拉伸区域 2 | 中央内容区（详情 / 工作区） | 默认宽度固定，可在 2&3 联动下拉伸 |
| 可拉伸区域 3 | 右侧辅助区（卡片 / 附加面板） | 默认 120px 高，拉伸如流面板时按规则同步 |

### 可拉伸区域 1 - 宽度约束

| 状态 | 宽度 |
|---|---|
| 最小宽度 | **192px** |
| 最大宽度 | **344px** |
| 默认宽度 | 272px（标准布局） |

### 可拉伸区域 2 - 默认尺寸

| 项 | 数值 |
|---|---|
| 默认尺寸 | **576px** 宽 |
| 与左侧固定列间距 | 64px（多次复现于尺寸标注） |
| 与左侧"固定尺寸"区 | 64px |
| 顶部 High（行高） | 44px |

### 可拉伸区域 3

| 项 | 数值 |
|---|---|
| High（默认行高） | **120px** |
| 默认尺寸 | 与区域 2 协同 |

## 默认高度下的拉伸行为

来自原文："默认高度下，2&3 可拉伸区域说明"。当窗口高度保持默认时，可拉伸区域 2 与 3 按以下规则联动：

- **区域 2 优先拉伸**：宽度先吃完，再传导给区域 3
- **区域 3 维持 120px 高**：仅作宽度自适应，不主动撑高
- **High = 44px**：单条行高在拉伸过程中始终保持 44px

## 拉伸如流面板高度下

来自原文："拉伸如流面板高度下，2&3 可拉伸区域说明"。当用户拉伸整体面板高度时：

- 区域 2 与 3 按比例分摊新增高度
- 区域 1（左侧列表）行高保持 44px，行数随容器高度自动增减
- 标准布局下窗口默认高度 = 700px（推断自画板比例）

## 固定尺寸区

| 元素 | 尺寸 | 来源 |
|---|---|---|
| 左侧主导航条宽 | 64px | "64px" 文本反复出现的 token |
| 主导航行高 | 44px | "High = 44px" 标注 |
| 左侧固定列与可拉伸区分隔 | 0.5px 红色虚线（标注用） | `#FF0707` |

## 颜色与 token

| 用途 | hex | token |
|---|---|---|
| 背景 | `#FFFFFF` | `fill_QLXYRW` |
| 拉伸示意蓝（区域 1 标识） | `#3377FF` = `Brandblue60` | `fill_UUD8J6` |
| 拉伸示意深（区域顶栏） | `#0A1833` | `fill_7FNVQU` |
| 标尺刻度 / 网格 | 透明黑（半透明叠加 0.36 / 0.8187 等） | `fill_UUD8J6` + opacity |
| 半透明白蒙层 | `rgba(255,255,255,0.24)` | `fill_EF6BR2` |
| 标注红虚线 | `#FF0707` | `fill_LP525M` |
| 标题字号 | 24px Medium | `style_CSM8OG` |
| 章节副标题 | 14px Regular | `style_YIKTQ9` |
| 尺寸数字标注 | 10px Regular，色 `#FFFFFF`（在深底上） | `style_TQ4XO9` |
| 灰色补充说明 | `#5C6473`，16px Regular | `style_3GLGMX` |

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

## 拉伸优先级

按从左到右、从固定到弹性的顺序：

1. **左侧 64px 固定主导航**（不参与拉伸）
2. **可拉伸区域 1**（192-344px 范围内拉伸）
3. **可拉伸区域 2**（默认 576px，剩余空间优先吃这里）
4. **可拉伸区域 3**（默认 120px 高 / 协同宽度）

任何缩放过程中：
- 主导航 64px 不变
- 行高 44px 不变
- 区域 1 触底 192px 后，剩余压缩由区域 2 / 3 吸收
- 区域 1 触顶 344px 后，区域 2 / 3 继续吃后续放大空间

## 示例

![框架拉伸策略-布局1](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-布局1-默认尺寸](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-布局1-最大尺寸](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-布局1-最小尺寸](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-布局2](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-布局3](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-可拉伸区域1](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-可拉伸区域2](../图片/主体框架/框架拉伸策略/layout1.png)
![框架拉伸策略-可拉伸区域3](../图片/主体框架/框架拉伸策略/layout1.png)

## 设计考量 / 原文摘录

> 可拉伸区域 1 最小宽度说明 / 可拉伸区域 1 最大宽度说明。
> 默认高度下，2&3 可拉伸区域说明。
> 拉伸如流面板高度下，2&3 可拉伸区域说明。
> 可拉伸区域 2&3 说明。
> （主要用于消息页、通讯录）
> 最小宽度 = 192px，最大宽度 = 344px。
> 默认尺寸 = 576px。
> High = 120px。
> High = 44px。
> 64px / 固定尺寸 / 默认尺寸。

- **固定主导航**：64px 主导航不参与拉伸，确保品牌识别和肌肉记忆
- **区域 1 是"列表"语义**：消息 / 通讯录类列表的宽度，给 192-344px 的范围，避免行高变化
- **44px 行高基准**：所有列表项保持 44px，与主导航行高对齐
- **三档布局示意**：消息页 / 通讯录 / 其他主要走布局 1；布局 2 / 3 提供其他场景的参考样例

## 不推荐用法

- 让可拉伸区域 1 突破 192-344px 范围（应保持窄列表语义）
- 拉伸过程中改变 44px 行高（应保持固定，行数自动增减）
- 主导航 64px 参与缩放（必须固定）
- 区域 2 / 3 都不吸收剩余空间（必须有一个承担弹性）

## 关联

- 功能分区见 [框架功能布局](框架功能布局.md)
- 弹出独立窗口见 [新窗口规范](新窗口规范.md)
- 会中布局见 [会中框架规则](会中框架规则.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
