---
url: /design/visual-and-typography.md
---
# 视觉 Token、排版与留白

## 色彩

| Token      | 建议数字值   | 用途                |
| ---------- | ------- | ----------------- |
| background | #FFFFFF | 所有系统页面和组件的默认底色    |
| foreground | #000000 | 正文、标题、图标、重要信息     |
| secondary  | #333333 | 少量次要提示；必要时弱化非重点信息 |
| disabled   | #CCCCCC | 不可操作控件；经声明的轻分隔线   |

数字灰值为**补充建议**，最终映射需要按驱动和面板调校。浅灰在实机上过淡时应调整同一语义 Token，不能各组件自行增加更多灰色。

* 界面语义色限制为白、浅灰、深灰、黑四类；不扩展更多界面颜色。
* 背景必须纯白，避免大面积浅灰底、纹理底和渐变。
* “白底不刷新墨水”在实现中应理解为背景目标像素为白色；旧画面存在黑色内容时仍需驱动正确清除。禁止把白色区域当作跳过绘制的透明区域。
* 主信息使用黑色。深灰不得成为正文默认色；可用于提示或降低非重点信息权重。
* 浅灰主要表示不可用，不用于承载必要说明。禁用原因应另用可读文字表达。
* 选中、未选中、错误、成功必须还有文字或形状线索，例如勾选、实心／空心形状、明确状态词。
* **补充建议**：必要的局部反白可用于很小的选中态，但不扩展成大面积深色主题，且需要残影测试。
* 字体抗锯齿与真实书籍封面属于栅格／内容层，可使用设备支持的灰阶；四类规则限制的是界面设计语义色，不要求把真实封面一律截成四阶。若实现合成书封，它仍应遵守界面文字与背景规则。

## 字体、字号与行高

以下是 Read Pico 在 MiSansVF 下的设备字号；字号与行框均为物理像素。角色相同才复用，不把某个页面的局部数值当作全局默认。完整的页面映射与字重见[固件实机排版映射](/design/firmware-type-mapping)。

| 语义角色 | 字号 | 单行行框 | 字重 | 使用位置 |
| --- | ---: | ---: | --- | --- |
| 状态文字 | 24 | 24 | Medium 500 | 时间、电量百分比 |
| 次级操作文字 | 24 | 32 | Regular 400 | 操作提示、说明 |
| 列表元信息 | 26 | 34 | Regular 400；进度 Medium 500 | 首页最近阅读 |
| 常规标题与应用名称 | 32 | 40 | 依组件而定 | 小组件标题、排序行、应用宫格名称 |
| 设置行主标签 | 36 | 44 | Medium 500 | 设置根页与阅读设置 |
| 二级页 App Bar 标题 | 40 | 48 | Medium 500 | 带返回的系统标题 |
| 根页 App Bar 标题 | 48 | 56 | Medium 500 | 首页、书库、应用、设置 |
| 当前阅读主书名 | 48 | 60 | Medium 500 | 首页当前阅读 |

应用宫格名称当前由绘制函数继承默认字重，尚未显式设置 Medium 500；不能因为字号相同就认为它与小组件标题字重相同。阅读正文初始为 38 px，并随用户字号设置每档变化 4 px，不受普通界面字号上限约束。

* 所有由界面生成且需要阅读的文字，字号**不得小于 20 px**。
* 普通界面文字一般不超过 48 px；常用设备字号以语义表为准，不再把旧设计稿的 28 px 当作设置行或应用名称的默认值。
* 操作提示通常用 24 px，列表元信息与主标签按组件选择 26、32 或 36 px；系统标题区分根页 48 px 与二级页 40 px。
* 可直接点击的文字必须至少 24 px，且点击热区大于文字本身。20 px 元信息可出现在整行可点击的列表内，但不能成为单独的小型文字按钮。
* Read Pico 当前使用 MiSansVF，并按上表选择字重；更换字体须重新检查字形边界和行框。App Bar 标题使用 Medium 500，不再以原稿对普通字重的描述覆盖实机校准。
* 行高属于补充默认值，必须检查中文、英文、数字和混排的完整字形。状态栏 24 px 字号配 24 px 槽位为用户指定的特殊布局，必须验证字体度量，不可直接裁切字形。
* 超长内容依次考虑减少并列内容、换行、重新分页、末尾省略和详情页；禁止通过缩小到 20 以下解决。
* 标题建议最多两行；系统工具栏标题建议一行省略，可在详情页读全称。阅读正文禁止以省略号丢弃内容。
* 真实封面图片内的小字视作图片内容，但不能成为获得书名、作者等必要信息的唯一方式。自行绘制的封面文字不享有低于 20 px 的例外。

## 留白与图标

* 留白尺度：8、12、16、24、32、48、64 px。8–16 px 用于紧密关联元素与组内间距；24–32 px 用于普通内容组之间；48–64 px 用于大区块、页面节奏或需要明显断开的区域。具体值应结合内容密度选择，不要求每个页面机械覆盖全部档位。
* 标准内容左右边距：36 px，基准可用宽度 612 px。
* 状态栏左右边距：24 px；底部导航图标外边距：48 px。这两项是明确例外。
* 普通 App Bar 右侧动作和底部导航图标可见尺寸为 48 × 48 px；App Bar 返回箭头为 24 × 24 px，放在独立的前导槽中。状态栏当前点阵资源中同步图标为 26 × 26 px，Wi-Fi 与电池为 28 × 28 px；无点阵回退时绘制 24 × 24 px 图标，详见[固件实机排版映射](/design/firmware-type-mapping#图标可见尺寸)。
* 图标应风格一致。**补充建议**：48 px 图标先用 3 px 描边，24 px 图标先用 2 px 描边；最终以实机清晰度为准。
* 优先整数像素定位；避免示例中的小数坐标与小数线宽。
* 全局内容外沿左对齐或右对齐；宫格项目、导航图标、空状态可以在各自容器内居中，不应把“对齐内容线”解释成所有子元素必须贴屏幕外沿。

页面外留白、组件内留白和组件间距分别管理；具体设置行、宫格与分页区域的推荐分配见[系统组件留白](/design/spacing-and-regions)。容量余量可保留空白，不把同组文字拉开来填满屏幕。

## 文字容量与 Token 管理（补充建议）

颜色、字号、行高和留白按语义集中维护。某个灰阶在面板上过淡时调整对应 Token 并复查引用它的组件，避免单页新增灰值。

文字容器高度按实际字体度量计算：先确定可用宽度与换行，再计算行框和内边距。Read Pico 设置根页的两行文字分别用 36 px／44 px 行框和 24 px／32 px 行框，放在 96 px 行槽中；行槽之后另留 16 px 项间距。其他组件应按自身文字重新计算，不套用设置行的容量。

必要信息被省略时提供完整内容入口；阅读正文通过重新分页保留全部文本。字号放大后重新计算条目容量，不能固定原有每页数量。

检查中文、英文、数字、标点、上下延伸字形和缺字回退。禁用原因、错误说明和封面替代文字必须可读，不能只靠浅灰或封面内的小字识别。