---
url: /design/interaction-and-states.md
---
# 导航、分页与交互状态

## 输入原则

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

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

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

屏幕内基础流程不依赖长按、双击、双指缩放或复杂手势。[设备按键](/design/system-actions)明确规定的菜单键长按截图、电源键长按打开电源菜单属于系统按键行为例外。

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

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

顶栏返回按钮与底部右侧横杠返回键走同一返回逻辑。物理位置与语义按[设备按键](/design/system-actions)固定；驱动中的键值编号由适配层映射，不擅自假定编号。

## 整页分页

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

## 分页指示器

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

## 动画例外的处理

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

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

## 返回与位置恢复（补充建议）

临时覆盖层优先关闭；详情页返回原列表并恢复页码、选择与焦点。根页面 Back 的具体去向尚需产品决定，不能自行推断为关闭应用或返回桌面。

内容更新后建议按稳定项目标识恢复位置；原项目消失时回到最近有效页并清除失效选择。实现尚无稳定标识时说明退化处理。

## 静态状态表（补充建议）

| 状态 | 呈现 | 操作与刷新 |
| --- | --- | --- |
| 正常 | 完整当前页与有效入口 | 只提交实际变化区域 |
| 空内容 | 原因与一个明确后续入口 | 清除旧条目与指示器 |
| 初次加载 | 阶段文字，按能力提供取消或返回 | 开始、阶段变化、结束更新 |
| 更新中 | 保留可用旧数据并说明正在更新 | 不先清空再重画；避免重复提交 |
| 失败 / 离线 | 原因、旧内容是否可用与重试入口 | 保留有效数据，恢复后清除旧错误 |
| 禁用 | 状态词或形状与可读原因 | 不执行禁用动作，不只变浅灰 |
| 首页 / 末页 | 清晰页码或静态提示 | 保持原页，不回弹或重复刷新 |

刷新期间合并连续分页意图的具体策略由实现评审决定。页面切换后不得把未释放触摸派发给新页。菜单、截图、锁屏与关机见[系统动作](/design/system-actions)。