# Read Pico 系统界面、Mini App 与小组件设计规范

版本：v0.2.1 · 2026-10-05（小幅整理设计层级、留白与分隔线规则） 
状态：设计基线草案，可用于设计评审与 AI 生成约束；尚未经过目标固件与实机验收。 
适用范围：系统页面、第三方 Mini App、系统组件、首页小组件。默认竖屏。

## 1. 使用方式与规则优先级

本规范将口述要求整理为可执行规则，并补充布局计算、点击区域、刷新职责、异常状态与验收要求。

为避免不同性质的规则混在一起，本文按三层理解：****视觉设计层****负责 Token、排版、留白与组件外观；****系统交互层****负责导航、分页、按键、菜单与刷新行为；****平台契约层****负责应用画布、Mini App 声明、系统接口与验收约束。三层可以独立演进，当前仍保留在同一份文档中便于评审。

- ****必须／禁止****：硬性约束，生成界面和实现组件时必须遵守。
- ****建议／默认****：推荐方案；有明确场景时可偏离，但应记录原因。
- ****补充建议****：本次新增的设计建议，不代表已经确定的硬件限制或现有系统能力。
- ****待验证****：需要在目标固件、字体和面板上实测，不能宣称已经支持。

优先级：用户后续明确决定 > 本规范硬性规则 > 本规范推荐值 > 首页截图与 design.css 示例 > 外部平台参考。后续若发现与真实硬件能力不兼容，必须说明冲突并调整实现，不能假定硬件可以做到。

系统组件尚未实现。本文的组件名称、声明字段、刷新请求与布局接口均为****拟议契约****，不是已经存在的 SDK API。

## 2. 设备基准、单位与外部参考

### 2.1 已核对的硬件信息

|        |                                           |                        |
| ------ | ----------------------------------------- | ---------------------- |
| 项目     | 基准                                        | 依据                     |
| 屏幕     | 4.7 英寸单色墨水屏                               | 官方固件仓库 [S1]            |
| 原生像素尺寸 | 官方写法 1216 × 684；本文竖屏使用 684 × 1216         | 官方固件仓库 [S1]，与用户 CSS 一致 |
| 灰阶能力   | 16 灰阶                                     | 官方固件仓库 [S1]            |
| 输入     | 双点触摸、三个电容按键区域                             | 官方固件仓库 [S1]            |
| 刷新示例   | partial DU、Full GC16；阅读示例还列出 DU／GL16／GC16 | 官方 Demo 文档 [S2]        |

坐标原点为竖屏左上角，x 向右、y 向下。矩形采用左闭右开、上闭下开区间，例如 [0, 684)。旋转后的触摸坐标必须与显示坐标一致。

本文所有 px 均指****基准画布像素／目标设备物理像素****。字号也以目标栅格尺寸 px 定义，不等同于 iOS pt、Android dp/sp 或未经配置的浏览器 CSS px。网页预览必须明确 viewport 和缩放关系；整张预览可以缩放，不能据此改变交付像素。

### 2.2 如何参考 iPhone SE 3

Apple 官方列出 iPhone SE 第三代为 4.7 英寸、1334 × 750 像素 [S3]。它适合作为小屏信息密度、清晰层级、导航一致性与单手操作的参考；不能直接移植其颜色、动画、滚动或点数尺寸。

Apple HIG 的 iOS/iPadOS 控件默认尺寸参考为 44 × 44 pt [S4]。本规范不将它误写成 44 × 44 个墨水屏物理像素。按同尺寸屏幕的像素密度近似比较，44 pt 在 SE 的 2× 栅格中为 88 px，换算到本文画布约为 88 × 684 / 750 ≈ 80 px。因此将 ****80 × 80 px 点击热区****作为补充推荐值；它是设计估算，不是硬件认证下限。实际可用性仍须测试。

## 3. 核心设计原则

1. 白底、黑字、清晰字号层级、稳定对齐、充分留白。
2. 内容外沿默认贴齐左右 36 px 的内容线；不要让同层级文字任意漂移。
3. 整页分页，页面切换后有明确的静止终态；禁止自然滚动。
4. 信息层级优先用字号、位置、字重和结构表达，不能依赖灰度差异作为唯一线索。
5. 系统管理系统栏与刷新调度；应用只绘制获分配区域。
6. 小屏优先减少同时展示的内容，通过分页和二级页面容纳信息；不以缩小字号换取密度。
7. 默认不使用装饰性边框、分隔线、阴影、渐变和动画。
8. ****组内紧凑、组间留白****：同一信息组内部保持关联性，不为“显得高级”而过度拉开；不同内容组之间保留足够空间，避免小屏信息糊成连续黑块。

## 4. 设计 Token

### 4.1 色彩

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

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

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

### 4.2 字体、字号与行高

|            |     |       |                       |
| ---------- | --- | ----- | --------------------- |
| 角色         | 字号  | 推荐行高  | 默认用途                  |
| caption    | 20  | 24–28 | 阅读时长、日期、非操作提示         |
| body-small | 24  | 32    | 普通文字、可操作文字最低推荐档       |
| body       | 28  | 36    | 正文、列表主标签              |
| heading    | 36  | 44    | 区块标题、重要列表标题           |
| app-title  | 40  | 48    | 系统 App Bar 标题专用档，普通字重 |
| display    | 48  | 60    | 少量高优先级标题              |

- 所有由界面生成且需要阅读的文字，字号****不得小于 20 px****。
- 一般最大字号不超过 48 px；推荐偶数字号，优先 20、24、28、36、48。40 为明确指定的 App Bar 特例。
- 默认正文使用 24 或 28；一般标题用 36 或 48。
- 可直接点击的文字必须至少 24 px，且点击热区大于文字本身。20 px 元信息可出现在整行可点击的列表内，但不能成为单独的小型文字按钮。
- 建议采用 Noto Sans SC 或覆盖目标语言的清晰无衬线字体；普通正文常规字重，少量标题可加粗。App Bar 标题普通字重，不照搬示例 CSS 的 500。
- 行高属于补充默认值，必须检查中文、英文、数字和混排的完整字形。状态栏 24 px 字号配 24 px 槽位为用户指定的特殊布局，必须验证字体度量，不可直接裁切字形。
- 超长内容依次考虑减少并列内容、换行、重新分页、末尾省略和详情页；禁止通过缩小到 20 以下解决。
- 标题建议最多两行；系统工具栏标题建议一行省略，可在详情页读全称。阅读正文禁止以省略号丢弃内容。
- 真实封面图片内的小字视作图片内容，但不能成为获得书名、作者等必要信息的唯一方式。自行绘制的封面文字不享有低于 20 px 的例外。

### 4.3 留白与图标

- 留白尺度：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。这两项是明确例外。
- 普通标题栏与底栏图标可见尺寸：48 × 48 px；状态栏图标：24 × 24 px。
- 图标应风格一致。****补充建议：****48 px 图标先用 3 px 描边，24 px 图标先用 2 px 描边；最终以实机清晰度为准。
- 优先整数像素定位；避免示例中的小数坐标与小数线宽。
- 全局内容外沿左对齐或右对齐；宫格项目、导航图标、空状态可以在各自容器内居中，不应把“对齐内容线”解释成所有子元素必须贴屏幕外沿。

## 5. 系统栏与应用画布

### 5.1 所有权

应用声明全屏或非全屏，以及是否需要系统 App Bar、底部导航栏。非全屏显示系统状态栏。由系统提供的区域，其背景、图标、文字、触摸分发与刷新都由系统管理，应用不得自行覆盖绘制。

全屏模式可隐藏全部系统栏；如仍请求系统 App Bar 或底栏，按请求占用相应区域。无论是否全屏，都必须有明确返回／退出路径。

系统分配给应用的是全屏宽度的矩形画布。36 px 内容边距由布局规则施加，不能把系统分配宽度错误裁成 612 px，也不能在系统已经加过边距的组件中重复叠加。

### 5.2 状态栏

- 屏幕顶部 y = 0，高度 40 px。
- 内边距：左右 24 px，上下 8 px。
- 时间字号 24 px；图标可见槽位 24 × 24 px。
- 左侧建议只显示时间，格式 HH:mm，禁止显示秒。
- 右侧显示同步、Wi-Fi、电池图标与百分比；默认不越过屏幕中轴线向左延伸。
- 状态间距自动计算。空间不足时优先隐藏次要状态，不缩小文字和图标。
- ****补充建议：****同步图标静态显示状态，不旋转。时间按分钟边界、状态按实际变化提交更新；隐藏时不为其单独刷屏。
- 24 px 槽位若无法容纳指定字体完整字形，应调整字体度量或提交状态栏变更，不静默破坏 40 px 总高度。

### 5.3 App Bar

- 存在状态栏时，App Bar 可见行顶端 y = 56 px，即状态栏下方留 16 px。
- 可见行高 48 px，因此可见行底端 y = 104 px。
- 内容左右沿 x = 36 与 x = 648。
- 左侧标题 40 px、普通字重；右侧工具图标 48 × 48 px，图标之间可见 Gap = 24 px。
- 二级页面在标题左侧放返回图标，注册系统 Back 行为，屏幕返回与系统返回按键走同一导航逻辑。
- 返回图标占据左侧 48 px 图标槽，标题在其右侧；标题不再强行占据 x = 36。
- ****补充建议：****返回图标与标题间距 12 px；右侧默认最多两个高频工具，更多工具进入独立页面。
- 不显示状态栏但显示 App Bar 时，****补充建议****将可见行置于 y = 16，高 48；不继续保留 56 px 空白。
- 标题、返回按钮与工具按钮不能重叠；空间不足优先缩减标题或工具数量。

### 5.4 底部导航栏

- 建议 2–5 项，禁止超过 5 项；1 项不建议作为导航栏，可使用独立操作入口。
- 可见区域含选择指示器共高 64 px，下边缘距屏幕底部 16 px。
- 基准位置 y = 1136…1200，下方 y = 1200…1216 为底部留白。
- 可见图标为 48 × 48 px；最左图标左边缘 x = 48，最右图标右边缘 x = 636。
- 图标间距动态计算，n ≥ 2 时：Gap = (W − 2×48 − n×48) / (n−1)。
- W = 684 时，4 项 Gap = 132 px；5 项 Gap = 87 px。禁止照搬示例 CSS 的固定 Gap = 104。
- 非整数位置取整并分配余数，保证两端位置精确、相邻间距差不超过 1 px。
- 可采用纯图标，不强制增加文字。保持位置和含义稳定，为各项配置语义名称；陌生图标应提供首次说明或可见帮助入口，不以“用户最终能记住”作为唯一可发现性方案。
- 选中态建议使用图标下方短实线指示器；它表示选中，不属于装饰性区域分隔线。
- ****补充默认值：****图标置于 64 px 区域的上部，指示线高 4 px、宽 64 px，底对齐 64 px 区域，图标与指示线间留 12 px。
- 用户反馈的屏幕底部 4–8 px 可能不可见，尚未独立硬件验证；既有 16 px 留白已经包含这一考虑，****禁止再机械叠加一次底部安全区****。

### 5.5 基准坐标与可用高度

下表是几何分配，不包含应用内部留白。矩形写作 x、y、宽、高。

|                     |                             |
| ------------------- | --------------------------- |
| 组合                  | 应用画布                        |
| 状态栏 + App Bar + 底栏  | (0, 104, 684, 1032)         |
| 状态栏 + App Bar，无底栏   | (0, 104, 684, 1112)         |
| 状态栏 + 底栏，无 App Bar  | (0, 40, 684, 1096)          |
| 仅状态栏                | (0, 40, 684, 1176)          |
| 全屏，无系统栏             | (0, 0, 684, 1216)           |
| 无状态栏，有 App Bar + 底栏 | (0, 64, 684, 1072)，使用上文补充布局 |

公式：顶部边界取所有顶部系统栏的占用下边缘；底部边界有底栏时为 H−80，否则为 H；画布高度为两边界之差。

****补充建议：****三栏齐全时，应用实际内容在画布内再保留上 16、下 16 px，即建议内容区 (36, 120, 612, 1000)，对应 y = 120…1120。上下额外留白同时承担系统按钮热区的安全缓冲。它不是在屏幕底部 16 px 下再叠加安全区。

无底栏时，画布仍可延伸到屏幕底部，但关键信息与操作默认至少距屏幕底部 16 px。全屏不意味着可以忽略底部可见性。

### 5.6 点击热区与系统命中区域

以下为补充建议，用于解决可见图标尺寸与触摸易用性的区别：

- 独立操作优先采用至少 80 × 80 px 的热区；整行列表让整行可点。
- 顶栏 48 px 图标配 24 px 可见间距时，图标中心距为 72 px；不可把每个热区盲目扩成 80 px 宽而造成重叠。可采用 72 × 80 px 热区，或减少工具数量。这是受现有几何约束的紧凑例外，需重点测试。
- 基准顶栏工具热区可在 y = 40…120 内扩展，底栏图标热区可在 y = 1120…1200 内扩展；底部屏幕留白不被再次增加。
- 系统必须同时返回 applicationCanvas 和系统交互保留区域；应用不得在这些保留区域放可点击内容。建议内容区已避开这些区域。
- 相邻点击热区不得重叠；热区不得跨入状态栏、相邻按钮、其他应用或不可见屏幕区域。
- 图标与文字组合应作为一个操作区域，避免把每个小字都变成独立按钮。

## 6. 导航、分页与交互

### 6.1 输入原则

- 主要操作使用单击和可见按钮。

- 滑动仅用于阅读翻页与列表／宫格分页；不作为删除、隐藏菜单或其他关键操作的唯一入口。

- 不依赖长按、双击、双指缩放或复杂手势完成基础流程。确有专业需求时提供可见替代入口。

屏幕内基础流程不依赖长按、双击、双指缩放或复杂手势。第 6.5 节明确规定的菜单键长按截图、电源键长按打开电源菜单属于系统按键行为例外。

- 页面根层、二级菜单与返回行为保持一致；返回应恢复进入前的页码、选择与焦点。

- 顶栏返回按钮与被系统映射为 Back 的按键行为一致，不在没有依据时硬编码某一个实体键编号。

顶栏返回按钮与底部右侧横杠返回键走同一返回逻辑。物理位置与语义按第 6.5 节固定；驱动中的键值编号由适配层映射，不擅自假定编号。

### 6.2 整页分页

- ****禁止自然滚动、惯性滚动、跟手拖拽、回弹与滚动条。****
- 一次有效分页手势，切换到相邻一页的最终排版，默认不显示两页间的中间位置。
- 先完整排版下一页，再提交刷新；不得先显示半行或边滚动边重新排版。
- 列表项不得跨页切成两半。剩余空间装不下下一项时保留空白，将整项放到下一页。
- 单个列表项大于一页时，缩减摘要并提供详情页，不得无限换页或切断该项。
- 同一列表的翻页方向保持一致，不做横纵嵌套分页。阅读正文可使用其独立阅读分页方式。
- ****补充建议：****在手势释放时确认一次分页；刷新期间合并连续输入，防止多次重复激活，不将每个触摸移动事件都变成刷新请求。

### 6.3 分页指示器

- 横向分页：指示器在该分页区域底部。
- 纵向分页：指示器在该分页区域右侧。
- 优先圆点；不用手机式长条滚动条，以免暗示自然滚动。
- 当前页采用实心圆，其他页采用空心圆，避免仅依赖浅灰区分。
- ****补充建议：****圆点直径 8 px、间距 8 px，非交互指示器不套用按钮热区；若可点击，必须单独扩大热区并检查不重叠。
- 超多页时使用有限窗口圆点加“当前页 / 总页数”，或使用清晰的页码控件，不铺满几十个点。页码至少 20 px；若作为按钮则至少 24 px。
- 指示器需要在布局阶段预留空间。纵向指示器默认占用内容区右侧一条 24 px 槽，条目宽度相应减少，禁止盖住文字。
- 横向指示器属于应用／组件自己的分页区域，不能覆盖系统底栏或与底栏选中线混淆。
- 单页不显示多页指示器；到达边界不做回弹，可维持当前页并给出必要的静态提示。

### 6.4 动画例外的处理

用户同时提出“默认不使用动画”和“分页轻量淡出”。本版本将它们整理为：

1. 默认方案：无动画，直接显示整页终态。
2. 轻量淡出属于****明确保留但默认关闭的例外****，仅在视觉引导必要、驱动支持、耗时与残影实测合格时启用。
3. 不规定未经验证的动画时长、帧率或透明度步数；官方已读资料未提供可直接采用的淡出方案 [S2]。
4. 禁止把网页 CSS transition、旋转加载图标或循环动效直接移植到设备。
5. 如无验证结论，AI 必须输出无动画版本，不得擅自启用淡出。

### 6.5 设备按键与系统行为

本节依据用户新增的产品定义，以 Android 4 式菜单／桌面／返回操作逻辑作为交互参考；以下具体映射以本规范为准，不表示照搬 Android 的所有快捷操作。设备底部三个按键与屏幕内 64 px 底部导航栏是两套独立控件，不新增屏幕占用高度。

- 底部左侧横杠：菜单键。短按打开当前应用自定义菜单；应用未声明菜单时，打开系统默认菜单／控制中心。长按执行系统截图。
- 底部中间圆圈：桌面键（Home）。短按返回系统桌面，不等同于返回上一页或退出并终止应用。
- 底部右侧横杠：返回键（Back）。短按返回上一层；存在菜单等临时界面时，优先关闭该临时界面。
- 右侧实体按钮：电源键。亮屏使用状态下短按锁屏；长按弹出包含“重启”和“关机”的系统电源菜单，不直接将普通长按解释成强制断电。
- 桌面键与返回键的长按、双击、组合键，以及强制重启或强制断电阈值，本版不定义，不由 Agent 自行添加。

补充实现建议：由系统统一识别短按与长按；长按命中后必须取消该次短按，松手不再触发第二个动作。菜单键长按截图时，不得先弹出短按菜单；电源键长按时，不得先执行短按锁屏。长按时长与去抖参数待目标固件验证。

应用自定义菜单只接管菜单键短按对应的菜单内容，不覆盖系统截图、Home、电源键或全局返回语义。全屏应用同样遵守这些映射。建议返回关闭浮层后保留原页码与选择，Home 返回桌面时保留可恢复的阅读位置。

### 6.6 菜单弹层与默认控制中心

菜单从屏幕底部区域呈现。本版将“下半部分 1/2 区域”落实为最多占整屏高度的 1/2，即上边缘不得高于屏幕中线；不是将下半屏再次减半。684 × 1216 基准下，中线为 y = 608，菜单总容器高度不超过 608 px，位于 y = 608…1216 范围内，可随内容减少高度。底部关键文字与操作继续避开既有 16 px 留白，该留白计入此容器，不额外叠加。

- 菜单具体视觉设计暂未定稿，建议采用 List 列表或弹出控制中心。沿用白底、黑字、字号底线、左右内容边距与整项热区规则。
- 菜单不得自然滚动或显示半条目。内容过多时使用整页分页，或从菜单进入独立的完整设置页；设置页不属于菜单弹层高度限制。
- 应用声明自定义菜单时，菜单键短按遵循应用自定义内容；未声明时使用系统默认内容。应用自定义菜单仍遵守高度、分页与刷新规则。
- 系统默认菜单提供“屏幕全局刷新”基础操作。亮度调节作为适配其他设备的能力项；按用户对当前设备的定义，当前设备不支持亮度调节，应隐藏该项，不提供无效滑块。
- 支持亮度调节的设备，补充建议使用离散档位或加减按钮，避免将持续拖动与每一步屏幕刷新绑定。
- 默认无弹出动画、无渐变遮罩。补充建议保留上方原画面，不绘制大面积灰色蒙层；菜单开启期间系统阻止触摸穿透到底层应用。
- 补充建议菜单以临时覆盖层显示，可覆盖屏幕内底部导航栏，其覆盖范围内由菜单接管触摸；关闭后恢复原画面与底栏，不永久缩小应用画布。

菜单的绘制区域与关闭后的恢复区域均交给系统刷新调度，必须清除旧菜单像素。“屏幕全局刷新”应提交一次全屏清理请求，具体波形仍由驱动能力决定。

### 6.7 截图、锁屏与关机显示

- 截图：菜单键长按触发。补充建议截取触发时已提交显示的完整画面（含当时可见的系统栏或浮层），然后再显示简短的静态成功／失败反馈，避免把反馈本身截入截图。不使用闪白动画模拟拍照；保存位置、格式和访问入口待实现定义。
- 锁屏：电源键短按进入锁屏状态。锁屏设计原则稍后单独补充，主要允许用户自定义；本版不预设锁屏模板、壁纸限制、解锁手势或认证方式。锁屏后的唤醒与解锁按键行为待后续规范确定，不能自动假定 Home 或 Back 可以解锁。
- 关机：长按电源键打开菜单后，用户选择“关机”进入关机流程。建议最终屏幕为纯白背景，仅显示单一黑色文字“已关机”，不保留桌面、系统栏、插画或额外操作按钮；字号建议 36 px。最终画面应在正常关机断电前完成必要刷新。
- 关机流程尚未完成时，不将“已关机”用作可取消菜单或进行中状态的提示。锁屏自定义内容不默认覆盖关机最终画面。
- 重启由电源菜单提供独立入口；本版不额外规定启动画面。强制断电、意外掉电等无法保证最终刷新完成的情形，不宣称必然能够更新关机提示。

## 7. 刷新与功耗契约

本节是拟议系统行为，不代表现有 Mini App SDK。

- 应用描述状态变化和脏区域，系统统一决定局部刷新、区域清理与全局刷新，并合并同一交互中的多个更新。
- 官方已验证的示例类别包括局部 DU 和全屏 GC16 [S2]；不能由此推断每种模式都适合任意灰阶内容。四阶界面不意味着所有快速刷新模式都能准确保留这四阶。
- 换页时应覆盖分页容器完整矩形中的旧内容，包括变成空白的区域。先在帧缓冲中形成白底新页，再由驱动按支持的方式处理旧像素与新像素转换；不能只画新文字而不擦旧文字。
- “局部完全刷掉”指更新区域的完整内容替换，不等价于每次都让全屏闪烁。是否需要独立清理波形由驱动策略决定。
- 系统界面大幅变化、局部刷新残影累积到策略阈值、驱动判定需要清理或用户主动请求时，必须安排一次全局刷新。
- 不过度依赖全局刷新；禁止给每次点击或每个小图标变化固定绑定全刷。
- 全刷次数／面积／温度等阈值由目标驱动实测配置。****不在设计规范中虚构“固定每 5 次／10 次局刷全刷”这样的通用事实。****
- 刷新调度器应记录所用模式、局部刷新累计情况、变化面积与清理时机；没有残影检测能力时采用经过测试的保守策略，不能假设可以自动视觉识别残影。
- ****补充建议：****提供手动“清除残影／刷新屏幕”入口；后台小组件不可任意触发全屏刷新。
- 空闲界面不因隐藏倒计时、光标闪烁、不可见动画或固定轮询而反复提交显示刷新。
- 重要操作需有静态执行反馈；耗时任务显示状态文字，在开始／阶段变化／完成时刷新，避免旋转动画。
- 全刷和触摸状态切换时防止一次触摸被执行两次；页面切换后不能把尚未释放的手指事件误派发给新页。

## 8. 拟议系统组件

### 8.1 PagedList：分页列表

- 每项由主标题、可选副信息、可选前导图标与可选尾部状态／箭头组成。
- 默认主标题 28 px，元信息 20 或 24 px；整项触摸，最低建议行高 80 px，复杂项按内容计算。
- 默认使用留白划分行，不默认绘制卡片边框。高密度列表若仅靠留白仍难以快速区分相邻完整条目，可按第 10 节使用 1–2 px 轻分隔线；不要同时叠加灰底、卡片边框和分隔线重复表达同一层级。
- 项目必须完整显示，列表按实际可用高度和字体度量分页，不硬编码每页固定行数。
- 不建议展开／折叠菜单；需要二级设置时打开新的页面。
- 分组标题必须与至少一个条目同页，避免孤立标题。
- 返回列表恢复原页和原选择；内容更新时优先保持用户当前浏览位置。

### 8.2 IconGrid：方形图标加名称宫格

- 基准设备默认 3 列 × 3 行，或 3 列 × 4 行；不能为增加项目缩小字号和热区。
- 上方正方形图标区域，下方名称；名称建议 24 px，可允许两行，但同页高度一致。
- 图标和名称构成一个点击单元。
- ****补充示例：****在完整 612 px 宽内容区内，列 Gap = 24 时，三列单元宽为 (612−48)/3 = 188 px；单元内图标可使用更小的居中方形槽，不要求图标本身铺满 188 px。
- 实际行数必须计入系统栏、分页指示器、行间距、标题和名称高度；放不下 3×4 时退回 3×3 或更少完整行。

### 8.3 CoverGrid：长方形封面宫格

- 以竖向长方形封面为主要内容，不默认在封面下再显示名称。
- 参考设备建议最多 3 列、3–4 行，最终以完整封面比例与触摸区域能否容纳为准，不机械套用方形宫格。
- 保留封面长宽比，默认完整适配，禁止随意拉伸或裁掉书名。
- 无封面时使用干净占位图；若占位图内显示生成的书名，遵守 20 px 最低字号。
- 配置书名语义标签，并提供详情页或列表视图，以便识别文字模糊、相似封面或缺失封面的书籍。
- 封面边缘如需细线用于表示图像边界，可作为内容表达例外；不据此给所有界面区域加框。

### 8.4 建议补充的基础组件

|                         |                               |
| ----------------------- | ----------------------------- |
| 组件                      | 行为建议                          |
| IconButton / TextButton | 可见形状与热区分离；明确禁用、按下、执行中、完成状态    |
| ChoiceRow               | 单选／多选使用勾选或形状变化，不只变灰           |
| SettingRow              | 简单开关可行内切换；复杂配置进入二级页           |
| PageIndicator           | 方向、页数与当前页由组件统一管理              |
| EmptyState              | 说明当前无内容，并提供一个明确后续操作           |
| ErrorState              | 错误原因、保留的内容与重试入口；禁止仅显示模糊图标     |
| ProgressState           | 静态阶段文字或离散更新的进度，不做持续动画         |
| ConfirmationPage        | 删除等不可轻易恢复的操作显示对象与后果，确认和取消明确分开 |
| TextInput               | 优先调用系统输入界面；输入内容、清除与提交有明确可见入口  |

这些是建议补齐的组件范围，不表示要求立即实现全部组件。页面布局框线与控件自身必要的勾选框、输入范围边界应分开理解；控件形状可以保留，避免成为装饰性“框套框”。

## 9. 首页与小组件

### 9.1 首页结构

首页上部显示当前阅读，下部显示最近阅读或可替换小组件。首页截图用于参考信息层级与大体分区，文字规则优先于图中的历史样式。

可采用以下****建议归整坐标****复现基准页面，不强制所有首页永久固定：

|         |                            |
| ------- | -------------------------- |
| 区域      | 基准位置                       |
| 状态栏     | y = 0…40                   |
| App Bar | y = 56…104                 |
| 当前阅读卡片  | x = 36，y = 120，宽 612，高 300 |
| 小组件标题行  | x = 36，y = 444，宽 612，高 48  |
| 小组件内容   | x = 36，y = 508，宽 612，高 600 |
| 底栏      | y = 1136…1200              |

这里把原 CSS 的 446.87、510 等坐标归整到留白体系，不要求与截图逐像素一致。小组件标题与内容间距 16 px；内容底部 y = 1108，为底栏及热区留出空间。

### 9.2 小组件契约

- 基准内容尺寸固定为 ****612 × 600 px****，不包含上方由宿主管理的标题行。
- 宿主已经提供外部留白，小组件可贴其内容边界制作，不再强制增加 36 px 内边距。
- 应用可声明支持小组件，提供标题、标题左侧图标与内容实现，例如替换“最近阅读”文字和图标。
- 小组件布局不额外强制套用列表或宫格模板，但仍遵守公共字体、颜色、白底、交互和刷新规则。
- 小组件自绘与应用自绘共享相同组件逻辑；坐标使用本地原点 (0, 0)，显示与触摸都限制在宿主分配矩形内。
- ****补充建议：****宿主管理标题行和切换入口，组件不重复绘制标题。
- 内容过多时摘要展示并进入应用；确需组件内部分页时使用同样的整页规则，不与首页手势冲突。
- 加载、无数据、错误与离线状态都应有稳定的静态展示。
- 刷新按数据变化请求，由系统合并调度；隐藏时不持续刷屏，不使用秒级时钟或动画维持活跃。

## 10. 系统分隔线的有限例外

默认状态栏、App Bar、底栏与内容之间均无分隔线，优先使用留白建立层级。

应用有明确需要时可声明：无 App Bar 时在状态栏下方、存在 App Bar 时在 App Bar 下方、以及底栏上方显示轻浅灰实线。由系统绘制，不能叠加两道顶部线，也不能让线改变已分配几何尺寸。

高密度列表或首页“最近阅读”这类连续完整条目，如果仅靠留白仍不足以快速区分相邻项目，也允许使用轻分隔线。分隔线只是辅助层级，不应成为页面主要视觉元素；不能同时再叠加卡片边框、大面积灰底或粗黑线重复表达分组。

****补充建议：****从 1–2 px 实线测试，优先映射到 secondary／disabled 一类较弱灰阶。若实机灰线不稳定或残影明显，返回纯留白方案；不要为了保住分隔线增加更重边框。

## 11. Mini App 声明草案

以下 JSON 仅说明未来协议应该包含哪些信息，****不是可直接调用的固件配置****。字段名称可在 SDK 实现时调整。文档版本、设计规范版本与未来 Mini App 声明格式版本应分别管理：修改文案或视觉建议不应自动迫使声明协议升级。下面的 `designSpecVersion` 表示应用所遵循的设计规范版本；`manifestSchemaVersion` 仅表示此声明草案自身的结构版本。

{
  "designSpecVersion": "0.2",
  "manifestSchemaVersion": "0.1-draft",
  "orientation": "portrait",
  "fullscreen": false,
  "appBar": {
    "enabled": true,
    "title": "书库",
    "back": true,
    "actions": [
      { "id": "search", "icon": "search", "label": "搜索" }
    ]
  },
  "bottomNavigation": {
    "enabled": false,
    "items": []
  },
  "systemSeparators": {
    "top": false,
    "bottom": false
  },
  "pagination": {
    "axis": "vertical",
    "transition": "none"
  },
  "widget": {
    "supported": true,
    "title": "最近阅读",
    "icon": "library",
    "preferredSize": { "width": 612, "height": 600 }
  }
}

拟议运行时应提供：应用画布、系统交互保留区域、有效可见范围、语义输入事件、刷新能力与请求入口。应用不能直接假定系统组件存在，也不能自行控制全局刷新节奏。

## 12. 自适应与内容健壮性

- 基准设备先按 684 × 1216 设计并验收；其他设备以实际可用矩形、像素密度与输入方式适配。
- 不直接按分辨率比例缩小全部内容；保持可读字号和可操作热区，优先减少列数／行数并增加分页。
- 较大屏幕可增加列数与留白，不能把 3×4 永久视为所有设备的上限。
- 不把 612 × 600 小组件强行塞进更小宿主；未来宿主应协商尺寸或提供专门模板。
- 横屏需要独立评审；不能认为旋转整个竖屏位图就是完整适配。
- ****补充建议：****支持字号放大并重新分页，不因放大造成条目切半、按钮消失或横向溢出。
- 检查最长书名、长作者名、无空格英文、混合语言、100% 电量、无网络、无封面、空列表、第一页／末页和字体缺字。
- 错误／断网／加载中不清空仍然可用的数据；使用静态说明区分旧数据与最新结果。

## 13. design.css 与截图的修订清单

所附 CSS 是设计导出片段，存在重复通用选择说明与大量绝对定位信息，应当作视觉尺寸参考，不能直接当成可复用组件样式表。

|                                                |                |                              |
| ---------------------------------------------- | -------------- | ---------------------------- |
| 现有示例                                           | 与本规范的关系        | 建议处理                         |
| 684 × 1216 画布、36 px 侧边距、612 px 内容宽             | 一致             | 保留                           |
| 状态栏 40 px、App Bar y = 56、底栏 64 px / 底距 16      | 与主要几何一致        | 保留并明确系统所有权                   |
| 可见封面作者 16 px；另有隐藏的 14 px                       | 小于字号底线         | 合成封面改为至少 20 px；隐藏文字如被启用也必须合规 |
| 最近阅读标题 30 px                                   | 大于底线但不在首选档位    | 优先改为 28 或 36，并重算行高           |
| App Bar 标题字重 500                               | 与口述“普通粗细”不完全一致 | 默认改为 regular，按字体实际字重映射       |
| #0A0A0A、#111111、#333333、#8B8B8B、#F3F3F3 多个界面灰值 | 超出四类界面语义色      | 合并为四个 Token；真实图片另按内容层处理      |
| 大面积 #F3F3F3 合成封面背景                             | 不作为默认组件背景      | 合成封面优先白底；真实封面可保留其内容          |
| 最近阅读行间 2 px 分隔线                                | 与默认不使用线分区冲突    | 默认移除，改为留白                    |
| 状态图标 26／28 px                                  | 超过指定 24 px     | 统一 24 px 槽位并校正视觉重量           |
| 48 px 书名配 48 px 容器、58 px 行高                    | 存在裁切风险         | 改为能容纳完整行高的容器，例如建议 60 px      |
| 350 px 元信息位于 328 px 详情容器                       | 存在溢出风险         | 宽度跟随父容器，按内容换行或省略             |
| 476 px 文本位于 457 px 最近阅读信息容器                    | 存在溢出风险         | 使用父级可用宽度，不固定更宽的文本框           |
| 当前阅读图 170 + 间距 72 + 信息 328 = 570 px            | 剩余 42 px 未明确分配 | 用自适应剩余宽度并检查对齐，不凭固定值推定贴齐右边线   |
| 底栏固定 Gap 104 与 space-between 并存                | 不能代表最终均分值      | 按图标数量和外边距统一计算                |
| 23.27、446.87、4.49 等小数                          | 不利于像素栅格一致性     | 归整并检查实际渲染结果                  |
| 截图标题行为“更多”，CSS 注释为“更换”                         | 操作语义不一致        | 定义为进入详情还是切换组件，不能混用文案         |

## 14. 验收清单

### 设计与排版

- 竖屏画布 684 × 1216，已明确物理像素与预览缩放。
- 白底、四类语义色、主信息黑色，没有额外灰底与装饰边框。
- 生成文字全部 ≥20 px，独立可点文字 ≥24 px。
- 40 px App Bar 标题与 48 px 标题有正确行高，无字形裁切。
- 内容默认遵守左右 36 px；状态栏、底栏、小组件例外正确处理。
- 系统栏坐标、底部 16 px 与图标间距计算正确，没有重复增加底部留白。
- 长文本、混排和字号放大不越界、不切半行。

### 交互与导航

- 图标可见框与点击热区分别标注，热区不重叠、不侵占其他系统区域。
- 返回按钮与系统 Back 行为一致，返回恢复原页。
- 纯图标导航具有稳定语义与可发现的说明。
- 列表、宫格整页切换，指示器方向正确，不出现自然滚动或滚动条。
- 所有条目完整显示，超高条目有摘要／详情处理。
- 禁用、选中与错误不只依赖颜色表示。

v0.2 新增验收：检查左菜单／中桌面／右返回与侧边电源映射；菜单长按仅截图，不误开菜单；电源长按仅打开电源菜单，不先锁屏；应用自定义菜单优先、默认菜单含全局刷新且当前设备隐藏亮度；菜单不超过屏幕下半部，覆盖区域无触摸穿透；关机最终仅保留文字提示；锁屏自定义与解锁细节保持待定。

### 渲染与真机

- 在目标字体、实际像素与目标面板检查可读性；桌面截图不能替代实机验收。
- 用纯文字、封面灰阶、密集图标、连续分页分别测试残影与刷新耗时。
- 页面变短／空白时旧像素被正确清除。
- 局刷与全刷策略已经配置并验证，而非采用虚构通用阈值。
- 默认无动画；淡出若启用，有单独验证记录。
- 底部 4–8 px 可见性与紧凑顶栏热区已实测。
- 空状态、错误、加载、离线、首末页与触摸连击正确处理。
- 小组件绘制与命中不越界，后台不产生无意义显示刷新。

## 15. AI Agent 执行约定

当 Agent 根据本规范设计、实现或审查界面时，应：

1. 先确认目标画布与系统栏组合；缺少说明时使用 684 × 1216 竖屏、非全屏、系统状态栏与 App Bar，底栏仅在多主入口场景采用。
2. 明确输出系统保留区域、应用画布与实际内容区，不把三者混成一个尺寸。
3. 使用 Token 与现有组件；没有实际 SDK 时提供组件设计或适配层，不编造已存在的 API。
4. 先计算整页容量与点击区域，再绘制界面；内容太多时分页，不缩小字号。
5. 默认白底、黑字、留白、无动画、整页切换。
6. 说明每类交互改变的区域、刷新请求与系统调度责任。
7. 给出空／加载／错误／禁用／长文本等必要状态。
8. 对照验收清单输出通过项、发现的问题与待实机验证项；未实测不得写“已通过真机验证”。
9. 对规则冲突优先执行本文硬性约束，在结果中标注例外，不照搬截图中的旧样式。
10. 用户新决定改变基线时记录版本变化；未经明确决定的补充建议继续保持“推荐”性质。

## 16. 来源与待定事项

### 来源

以下为 2026-10-05 查阅的外部资料。数字、语义和实现规则中未另列外部依据的部分，来自用户本次口述、首页截图、design.css 或本文明确标记的补充建议。

- [S1] MindReset 官方 Read Pico 固件仓库 README：屏幕、分辨率、灰阶与输入设备。https://github.com/MindReset/read_pico_firmware
- [S2] MindReset 官方 Demo Firmware 文档：刷新模式与分页示例。https://dot.mindreset.tech/docs/read_0/demo_firmware
- [S3] Apple iPhone SE（第三代）技术规格：4.7 英寸与 1334 × 750 分辨率。https://support.apple.com/en-us/111866
- [S4] Apple Human Interface Guidelines / Accessibility：操作尺寸、文字可读性与不依赖单一感知线索。https://developer.apple.com/design/human-interface-guidelines/accessibility
- [S5] 用户指定设备入口：Read Pico Getting Started。https://dot.mindreset.tech/docs/read_0/start

### 待实机／SDK 决定

1. 灰色 Token 到实际面板灰阶的映射与各刷新模式的可用组合。
2. 局刷累计阈值、全刷时机及实测耗时。
3. 字体栅格、24 px 状态栏文字的完整字形和最小可读字号体验。
4. 顶栏 72 × 80 px 紧凑热区及其他 80 × 80 px 推荐热区的触摸准确率。
5. 屏幕底部实际不可见区域及旋转后的有效坐标。
6. 淡出动画是否值得启用；没有验证前保持关闭。
7. 系统组件与 Mini App 声明协议的具体 API、版本与能力协商方式。

v0.2 新增待定事项：菜单 List／控制中心的最终样式；按键长按阈值与去抖；截图存储格式、路径及访问入口；锁屏自定义范围、唤醒与解锁行为。新增按键映射与当前设备不显示亮度调节来自用户产品定义，不能据此声称现有固件已实现。

上述待定项不阻止依据当前规则完成设计稿、组件规格与无动画原型，但不能在交付说明中伪装成已经验证的事实。