---
title: 框架功能布局
slug: 框架功能布局
category: 主体框架
figma_node_id: 1:54
figma_page_name: ＞框架功能布局-需要补充
aliases: [Layout, App Layout, 主体框架, 布局结构, 导航栏功能布局, 移动端布局, 桌面端布局]
last_extracted: 2026-05-20
status: needs_update
---

# 框架功能布局

> 如流客户端的主体框架分区与功能布局规范。规定主导航 / 副导航 / 拓展功能弹窗的位置与数量约束，以及桌面端 / 移动端两套排布方式。本页定义"哪一块区域承担哪类功能"，与拉伸尺寸（见 [框架拉伸策略](框架拉伸策略.md)）正交。

> ⚠️ 本页在 Figma 中被标注"需要补充/待补全"，内容可能不完整。

## 总览

本页主要由三块画板组成：

1. **移动端框架功能布局**（含两套首页截图样例，宽 375px、高 812px）
2. **桌面端框架功能布局**（宽 1280px、高 3308px）
3. **首页样例画板**（移动端 375×812，含状态栏、检索、头部、底部导航栏）

桌面端核心结论："**主导航位置和数量固定，副导航支持自定义配置 1-5 个**"。

## 移动端框架功能布局

来自节点 `26:3821`（375 × 812）：

| 分区 | 内容 |
|---|---|
| 系统状态栏 | 顶部 44px，承载时间 / 信号 / 电量（参考 `Bars/Status Bars/iPhone/Light`） |
| 顶部头部 | 系统状态栏下方 44px，承载搜索入口 + 头像 / 工具 |
| 检索条 | 头部下方独立检索区域 |
| 内容主体 | 中间可滚动的列表 / 卡片区 |
| 底部导航栏 | 高 80px（含安全区），承载主导航 4-5 个 tab |

首页样例（节点 `4435:24226`）内置以下功能位：
- `Status Bar` - 状态栏（44px）
- `检索` - 全局搜索入口（22px 高 + 内边距）
- `头部` - 应用标题区
- `互动-@消息` - 消息提示 icon（22×22）
- `Ellipse 1531` - 红点 / 未读小红点（8×8，色 `#E76C5C`）
- `底部导航栏` - 80px，375 宽
- `分隔线` - 0.5px × 14，色 `#E1E6F0`

## 桌面端框架功能布局

来自节点 `26:3828`（1280 × 3308）：

主要章节标题：

| 章节 | 节点 | 关键说明 |
|---|---|---|
| 导航栏功能布局 | `2282:85279` | 整体导航分区说明 |
| 副导航最多 5 个 | `2282:85345` | **"主导航位置和数量固定，副导航支持自定义配置 1-5 个"** |
| 拓展功能弹窗 | `2282:85346` | 二级浮层弹窗承载更多副导航 / 工具入口 |

桌面端画板的功能分区（推断自 `编组 3`、`编组 5`、`编组 11` 等容器）：

| 分区 | 宽 × 高 / 位置 | 角色 |
|---|---|---|
| 顶部页头 | 1080 × 232，x=100 y=0 | logo / 标题区（系统级）|
| 主导航 | 高 64px（含拓展功能区），固定位置与数量 | 全局一级导航 |
| 副导航 | 1-5 个，支持自定义配置 | 二级功能选择 |
| 拓展功能弹窗 | 960 × 640，居中浮出 | 容纳更多入口的弹窗 |
| 内容主体（左） | 336 × 704，x=160 y=1156 | 列表 / 树等导航辅助 |
| 内容主体（右） | 336 × 704，x=596 y=1156 | 详情 / 工作区 |

## 颜色与 token

| 用途 | hex | token |
|---|---|---|
| 整体底色 | `#FFFFFF` | `fill_O8DNQ9` |
| 状态栏图标色 | `#0A1833` | `fill_JMRV4W` |
| 移动端检索 / 卡片底 | `#F7F8FA` = `C-Coolgray10` | `fill_EJ4SZZ` |
| 分隔线 | `#E1E6F0` = `C-Coolgray20` | `fill_VLPD93` |
| 红点提示色 | `#E76C5C` | `fill_PLCTV3` |
| 主导航状态条蓝 | `#3377FF` = `Brandblue60` | `fill_B5PSUH` |
| 标题文本 | `#11141A` | `fill_TLWZCB` |
| 灰色占位 | `#D9D9D9` | `fill_KVFOUI` |
| 拓展按钮装饰 | `rgba(255,85,0,0.3)` | `fill_BW3C0M` |
| 灰色蒙层 / 半透明 | `rgba(10,24,51,0.8187)` | `fill_JMRV4W` 透明叠加 |
| 标准字体 | 24px Medium，色 `#11141A` | `style_Y23PHK` |

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

## 关键约束

- **主导航位置和数量固定**：所有客户端版本不可随意增删或换位
- **副导航 1-5 个可配置**：用户 / 租户可按业务自定义，超过 5 个走拓展功能弹窗
- **拓展功能弹窗**：容纳超出 5 个的副导航或低频功能入口，画板尺寸 960 × 640
- **移动端底部导航**：80px 高（含 iPhone 安全区），与桌面端的左侧主导航等价
- **顶部状态栏**：iOS 沿用 iPhone Light 样式；桌面端用 232px 高的页头承载 logo + 系统操作

## 待补全说明

本页 Figma 名称含"需要补充"。已知缺口：

- 桌面端各分区的精确像素尺寸与间距标注（当前只有部分 Group 容器的位置信息）
- 副导航 1 / 3 / 5 个状态的对应展示效果
- 拓展功能弹窗的内部网格结构与图标排布规则
- 与会中框架（见 [会中框架规则](会中框架规则.md)）的差异说明

## 示例

![移动端框架功能布局](../图片/主体框架/框架功能布局/mobileframe-layout.png)
![移动端首页样例](../图片/主体框架/框架功能布局/mobileframe-layout.png)
![桌面端框架功能布局](../图片/主体框架/框架功能布局/mobileframe-layout.png)
![桌面端副导航1-5个](../图片/主体框架/框架功能布局/mobileframe-layout.png)
![桌面端拓展功能弹窗](../图片/主体框架/框架功能布局/mobileframe-layout.png)

## 设计考量 / 原文摘录

> 主导航位置和数量固定，副导航支持自定义配置 1-5 个。
> 拓展功能弹窗。

- **主稳副变**：主导航锁死，让用户在不同租户间切换时保持肌肉记忆；副导航交给业务自定义，承担差异化
- **5 个上限**：副导航最多 5 个，避免过度堆砌；超出走拓展功能弹窗
- **跨端对齐**：移动端底部 tab 与桌面端左侧主导航对应，承担同等级别的全局入口

## 不推荐用法

- 修改主导航的位置或数量（必须固定）
- 副导航超过 5 个不走拓展弹窗、强塞到主导航条上
- 在移动端首屏堆叠超过 1 屏的功能位，应优先靠底部导航和拓展弹窗解决
- 在桌面端用拓展弹窗承担常用高频入口（拓展弹窗服务于低频功能）

## 关联

- 拉伸策略见 [框架拉伸策略](框架拉伸策略.md)
- 弹出窗规范见 [新窗口规范](新窗口规范.md)
- 会议中布局见 [会中框架规则](会中框架规则.md)
- 一级导航组件见 [导航菜单](../组件/导航菜单.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
