---
url: /design/spacing-and-regions.md
description: 系统栏、设置行、宫格、小组件与分页控件的留白职责、推荐间距和完整布局示例。
---

# 系统组件留白与区域分配

## 参考图的使用范围

仓库中的五张参考图是原始 PNG，文件尺寸均为 **1368 × 2432 像素**。Read Pico 的竖屏基准画布为 **684 × 1216 物理像素**；这组图按宽、高各 2 倍导出。只在读取**原始 PNG 文件的像素坐标**时，将 x、y、宽、高分别除以 2：例如原图中的矩形 `(200, 400, 96, 80)` 对应基准画布的 `(100, 200, 48, 40)`。

聊天窗口、浏览器或文档页面可能再次缩放图片；屏幕上看到的显示尺寸不是原始 PNG 像素，不能直接套用“除以 2”。量取位置时应打开原始文件并以它的像素坐标为准。此换算只统一计量单位，不要求逐像素照搬参考图；本页的布局数值仍按组件约束和可用空间计算。

图中可参考的结构包括：统一左右内容线、当前阅读与最近阅读之间的分组留白、独立排序行、固定宫格单元、整行设置项、底部分页区域，以及少量内容下方的整片空白。本文推荐值是按既有 Token 和可用空间重新计算的布局例子，不宣称已逐像素复原截图。

封面灰底、小字、标题字重和分隔线仍按[视觉规范](/design/visual-and-typography)及[分隔线例外](/design/separators)评审。参考图中的“会员”、应用名、开关和排序项只表达界面结构，不证明产品功能已实现。

## 区域与留白的职责

| 概念 | 含义 | 负责方 |
| --- | --- | --- |
| 系统保留区 | 系统栏及其独占交互范围 | 系统 |
| 应用画布 | 系统分配的完整绘制矩形 | 系统分配，应用绘制 |
| 页面外留白 | 内容线与系统交互区之间的页面布局空间 | 应用布局或系统页面容器 |
| 组件内留白 | 图标、文字、控件与组件边界之间的距离 | 组件 |
| 组件间距 | 两个同层组件之间的间隔 | 父容器 |
| 内容组间距 | 两个不同信息组之间的间隔 | 页面布局 |
| 容量余量 | 为完整条目、行高或固定槽位留下的剩余空白 | 排版结果 |

同一段间距只由一处管理。例如标题容器已提供 16 px 到内容的间隔，内容容器不要再添加同名的 16 px。组件报告自身完整尺寸，父容器据此计算分页，不只报告图标或文字的可见尺寸。

留白以布局框之间的距离计算。字体字面与行框、图标路径与图标槽位之间还可能有内部空白；不能通过裁掉行高或放大图标来强行消除它们。

三栏齐全时建议内容区仍为 `(36, 120, 612, 1000)`，系统几何见[系统栏与应用画布](/design/system-layout)。应用画布从 y=104 开始，建议内容从 y=120 开始；底部内容止于 y=1120，为系统底栏热区留出空间。这里的上下留白不改变系统分配的画布，也不在屏幕底部再次叠加安全区。

## 推荐留白表（补充建议）

以下数值用于常规组件，实际排版可按字号、内容与系统返回区域调整。动态均分所得的列宽、间距和余量可以是其他整数，不把它们新增为全局 Token。

| 场景 | 推荐值 | 使用说明 |
| --- | --- | --- |
| 正文内容线 | 左右各 36 px | 页面容器提供；子组件不重复扣减 |
| 组内主标签与副信息 | 8–12 px | 相同信息组保持关联，不随页面高度拉大 |
| 图标与标签 | 12–16 px（上下）、24–32 px（左右） | 使用统一槽位，避免每行文字起点漂移 |
| 列表行内上下留白 | 各 16–24 px | 与文字行高共同决定完整行高 |
| 普通内容组之间 | 24–32 px | 不同时叠加两个容器的边距 |
| 大区块之间 | 48–64 px | 只用于明显分组，不在每条列表项间使用 |
| 工具 / 排序行到列表或宫格 | 24 px 起 | 工具行自身热区另算，不能只看文字高度 |
| 宫格列间距 | 默认 24 px，或按封面尺寸动态计算 | 同页一致，余数差不超过 1 px |
| 宫格行间距 | 24–32 px | 单元内部图标与名称的间隔另算 |
| 内容到分页控件 | 16–32 px | 先给分页控件预留完整槽位 |
| 小组件标题到内容 | 16 px | 沿用宿主基准布局，不由小组件再加一次 |

标题栏后默认按建议内容区保留 16 px。页面需要额外呼吸空间时，可在内容区内选择 24 或 48 px 的顶部留白；这应参与容量计算，而不是把所有应用的系统画布整体下移。

## 设置行与分页列表

参考图 4 和图 5 展示同一设置列表语言：有图标时，主标签使用统一的文字起点；无图标的详情页从 x=36 内容线开始。尾部箭头、开关或当前值靠右对齐，并给标签保留明确的宽度。

Read Pico 当前设置根页与阅读设置页的行槽均为 96 px，高度之外另留 16 px 项间距，因此相邻行起点相距 112 px。其他列表仍应按字形与内容计算完整行高，不把这一组坐标推广为所有 PagedList 的固定值。

| 部分 | Read Pico 当前设置行布局 |
| --- | --- |
| 根页前导图标 | 48 × 48 px，行内垂直居中，左边沿 x=36 |
| 图标到主文字 | 36 px；主文字从 x=120 开始 |
| 主标签 | 36 px、44 px 行框、Medium 500 |
| 根页副信息 | 24 px、32 px 行框、Regular 400 |
| 主副信息位置 | 两行分别从行顶 8 px 和 54 px 开始，两个行框之间留 2 px |
| 阅读设置尾部箭头 | 36 × 36 px，左边沿 x=612；根页分类行没有该箭头 |

根页行从 x=36 到 x=648，前导图标占 x=36…84，文字从 x=120 开始；当前绘制给文字组 457 px 宽，不能把“图标到文字 36 px”误算成旧示例的 32 px。阅读设置二级页没有前导图标，文字从 x=36 开始，尾部箭头另占 x=612…648；长标签须在中间剩余宽度内处理。

根页有副信息时，主标签行框覆盖行内 y=8…52，副信息行框覆盖 y=54…86，行内最后留 10 px。只有主标签时，它从行顶 30 px 开始。两种条目均保持 96 px 行槽与 16 px 项间距，不因内容少就把条目拉散。

图 5 只有三个条目，保持正常行高并从上向下排列，剩余空间留白；不要把三项均匀分散到整屏，不把最后一项推到页面底端。可交互的整行区域包含其内留白；列表结束后的空白不成为最后一项的热区。

## 宫格、排序与分页区域

图 2 和图 3 都将排序行、内容宫格、分页控件分开。建议先分配这些区域，再计算完整行数；不能先塞入宫格，最后把页码压进底栏或临时缩小字号。

### 图标宫格示例（补充建议）

完整 612 px 宽度、3 列、列间距 24 时，每列宽 188 px。每个单元中的图标与名称共同居中，名称预留最多两行的统一高度，不能因单行名称较短就把同页的图标中心移位。

下面是一种能容纳 3×4 的区域分配，数值是布局推导结果：

| 区域 | y 范围 | 高度 |
| --- | --- | --- |
| 排序工具行 | 120…168 | 48 |
| 工具行后间隔 | 168…192 | 24 |
| 图标宫格 | 192…1024 | 832 |
| 宫格后间隔 | 1024…1040 | 16 |
| 可点击分页控件 | 1040…1120 | 80 |

宫格按 4 行、行间距 32 分配，单元高为 `(832 − 3 × 32) / 4 = 184 px`。示例内容可采用 64 px 图标槽、12 px 图文间距、两行 32 px 名称行高、上下各 16 px 内留白，总需 172 px；剩余 12 px 在单元内分配。64 px 图标只是宫格示例，不改变 App Bar 与底栏的 48 px 图标规范。

长名称、字号放大或不同字体导致单元放不下时，减少完整行数并重新分页；不得裁掉第二行或侵入分页区域。

### 封面宫格示例（补充建议）

为保留图 2 的三列封面与较宽列间留白，可采用 170 px 宽封面槽，列间距为 `(612 − 3 × 170) / 2 = 51 px`，槽左边缘为 x=36、257、478。51 px 是此布局的动态计算结果，不是新的通用间距 Token。

一个完整 3×3 页可分配为：排序行 48、间隔 24、封面宫格 808、间隔 32、分页区 80、末尾余量 8，总计 1000 px。宫格行间距 32 时，槽高为 `(808 − 2 × 32) / 3 = 248 px`。

因此宫格从 y=192 到 1000，分页区从 y=1032 到 1112，末尾余量到 1120。封面在 170×248 槽内按比例完整适配；这是容器尺寸，不要求把所有封面拉伸成同一个比例。不能在此尺寸上再机械增加“3×4 第四行”。

### 分页控件的留白

纯圆点属于非交互指示器，可按原规范预留较小槽位。图 2 和图 3 的“上一页 / 当前页 / 下一页”包含可点击箭头，建议预留完整 80 px 高的交互槽；箭头可见框和页码在槽内对齐，左右按钮热区不覆盖页码或相互重叠。

80 px 已包含上下热区，不在它外面再重复加一个 80 px。组件只占据自己的分页区域，不能侵入 y=1120 起的系统底栏保留区。单页隐藏指示器时可回收它的槽位，但应重新计算本页容量，不能把既有内容随意拉伸填满。

## 当前阅读与首页小组件

首页沿用[首页与小组件](/design/home-and-widgets)中的基准分区：当前阅读高 300、区块间隔 24、小组件标题行高 48、标题到内容间隔 16、小组件内容高 600。

当前阅读内部可采用 170 px 封面槽、48 px 图文间隔、394 px 文字组，合计 612 px。封面按比例完整适配，在 300 px 高度内居中；文字组按“书名 / 作者 / 阅读进度 / 元信息 / 操作提示”组织，组内优先 8–16 px，书名可用 12–24 px 与其他信息区分。标题变为两行时先重算总高度，必要时减少非必要摘要或进入详情。

这里的 48 px 图文间隔是新增推荐，不等同于原 CSS 的 72 px 历史数值。需要其他值时记录理由并计算文字剩余宽度，不凭截图估算硬编码更宽文字框。

宿主已经提供左右 36 px 外边距，小组件的本地宽度是 612 px。标题行的内留白由宿主管理；小组件不再添加统一的 36 px 边距。内部确需留白时，根据自身内容采用 8–24 px，并报告完整尺寸。

图 1 中连续的最近阅读条目可以优先使用 24–32 px 的条目间隔。确有必要使用分隔线时，按[有限例外](/design/separators)评审，线本身不替代文字组之间的留白，也不改变小组件的 600 px 固定内容高度。

## 菜单、空状态与容量余量

底部菜单仍最多占屏幕下半部，高度不超过 608 px。建议上下内留白各 16 px；已有底部 16 px 计入菜单容器，不再加一层。按完整条目、条目间距和操作槽计算菜单高度；放不下时分页或进入独立设置页。

空、加载、错误状态放在预先分配的内容区内，可在自身区域居中或沿原内容线排布。建议保留稳定的标题、提示与一个后续动作；不能因为内容变少把控件推入系统保留区，也不通过放大留白把三个状态元素散布到整屏。

剩余空间是完整分页的合法结果。除非明确选择有一致规则的宫格均分，不使用整屏 `space-between` 拉开正文组内间距；不要用占位卡片、装饰线或循环动画填补空白。

## 留白与热区验收（补充建议）

* 同一间隔只有一个管理方，未重复添加页面、宿主与组件的边距。
* 每个布局计算都包括工具行、完整组件、间距、分页槽和余量。
* 图标槽、文字行框与命中区分别记录，未用裁字或缩放来消除内部空白。
* 同组文字保持关联；少量条目从上向下排列，下方空白保持非交互。
* 宫格名称多行时同页高度一致；封面比例、字号和热区均完整。
* 分页热区包含在自己的槽位内，未侵占系统底栏或其他按钮。
* 字号放大、无副信息、末页变短和隐藏分页指示器后重新计算容量。
* 参考图换算使用原始 2 倍尺寸，新增推荐值未冒充截图精确测量或实机结果。

## 参考图

以下原图保持原始像素内容。展示尺寸由浏览器缩放，规范计算以基准画布为准。

![首页参考图：当前阅读、最近阅读与底部导航](/design-reference/home.png)

![书库参考图：三列封面宫格与底部页码](/design-reference/library.png)

![应用参考图：三列四行图标与名称](/design-reference/apps.png)

![设置参考图：统一图标槽、主标签和副信息](/design-reference/settings.png)

![阅读设置参考图：三个条目与页面下方留白](/design-reference/reading-settings.png)