Appearance
视觉 Token、排版与留白
色彩
| Token | 建议数字值 | 用途 |
|---|---|---|
| background | #FFFFFF | 所有系统页面和组件的默认底色 |
| foreground | #000000 | 正文、标题、图标、重要信息 |
| secondary | #333333 | 少量次要提示;必要时弱化非重点信息 |
| disabled | #CCCCCC | 不可操作控件;经声明的轻分隔线 |
数字灰值为补充建议,最终映射需要按驱动和面板调校。浅灰在实机上过淡时应调整同一语义 Token,不能各组件自行增加更多灰色。
- 界面语义色限制为白、浅灰、深灰、黑四类;不扩展更多界面颜色。
- 背景必须纯白,避免大面积浅灰底、纹理底和渐变。
- “白底不刷新墨水”在实现中应理解为背景目标像素为白色;旧画面存在黑色内容时仍需驱动正确清除。禁止把白色区域当作跳过绘制的透明区域。
- 主信息使用黑色。深灰不得成为正文默认色;可用于提示或降低非重点信息权重。
- 浅灰主要表示不可用,不用于承载必要说明。禁用原因应另用可读文字表达。
- 选中、未选中、错误、成功必须还有文字或形状线索,例如勾选、实心/空心形状、明确状态词。
- 补充建议:必要的局部反白可用于很小的选中态,但不扩展成大面积深色主题,且需要残影测试。
- 字体抗锯齿与真实书籍封面属于栅格/内容层,可使用设备支持的灰阶;四类规则限制的是界面设计语义色,不要求把真实封面一律截成四阶。若实现合成书封,它仍应遵守界面文字与背景规则。
字体、字号与行高
以下是 Read Pico 在 MiSansVF 下的设备字号;字号与行框均为物理像素。角色相同才复用,不把某个页面的局部数值当作全局默认。完整的页面映射与字重见固件实机排版映射。
| 语义角色 | 字号 | 单行行框 | 字重 | 使用位置 |
|---|---|---|---|---|
| 状态文字 | 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 图标,详见固件实机排版映射。
- 图标应风格一致。补充建议:48 px 图标先用 3 px 描边,24 px 图标先用 2 px 描边;最终以实机清晰度为准。
- 优先整数像素定位;避免示例中的小数坐标与小数线宽。
- 全局内容外沿左对齐或右对齐;宫格项目、导航图标、空状态可以在各自容器内居中,不应把“对齐内容线”解释成所有子元素必须贴屏幕外沿。
页面外留白、组件内留白和组件间距分别管理;具体设置行、宫格与分页区域的推荐分配见系统组件留白。容量余量可保留空白,不把同组文字拉开来填满屏幕。
文字容量与 Token 管理(补充建议)
颜色、字号、行高和留白按语义集中维护。某个灰阶在面板上过淡时调整对应 Token 并复查引用它的组件,避免单页新增灰值。
文字容器高度按实际字体度量计算:先确定可用宽度与换行,再计算行框和内边距。Read Pico 设置根页的两行文字分别用 36 px/44 px 行框和 24 px/32 px 行框,放在 96 px 行槽中;行槽之后另留 16 px 项间距。其他组件应按自身文字重新计算,不套用设置行的容量。
必要信息被省略时提供完整内容入口;阅读正文通过重新分页保留全部文本。字号放大后重新计算条目容量,不能固定原有每页数量。
检查中文、英文、数字、标点、上下延伸字形和缺字回退。禁用原因、错误说明和封面替代文字必须可读,不能只靠浅灰或封面内的小字识别。