Skip to content

视觉 Token、排版与留白 ​

色彩 ​

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

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

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

字体、字号与行高 ​

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

语义角色字号单行行框字重使用位置
状态文字2424Medium 500时间、电量百分比
次级操作文字2432Regular 400操作提示、说明
列表元信息2634Regular 400;进度 Medium 500首页最近阅读
常规标题与应用名称3240依组件而定小组件标题、排序行、应用宫格名称
设置行主标签3644Medium 500设置根页与阅读设置
二级页 App Bar 标题4048Medium 500带返回的系统标题
根页 App Bar 标题4856Medium 500首页、书库、应用、设置
当前阅读主书名4860Medium 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 项间距。其他组件应按自身文字重新计算,不套用设置行的容量。

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

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

JustRead 项目文档