画出最短的使用流程

核心方法

页面不是一张静止的设计图。用户输入、保存、刷新和删除时，界面需要告诉他发生了什么。只画正常状态，会让最常见的边界情况在开发时临时拼凑。本课为「下一本」阅读清单设计最短流程与状态变化。

我们不需要先制作十几个页面。一个输入区域、一份列表、一段状态信息就能承担核心任务。重要的是每个按钮都有真实作用，每次失败有可理解的反馈，数据的保存范围始终清楚。

本课的成果

一份文字线框图、一个状态清单和三条完整使用路径。这些内容会直接指导下一课的 HTML 结构与第四课的 JavaScript 行为。

案例拆解

第一步：按阅读顺序画线框

页面标题：下一本，想读什么？
说明：先记下来，再一本一本慢慢读。

书名 [输入框_________________] [加入清单]
输入规则：1–80 个 Unicode 码点，最多 100 本
状态反馈：空白 / 新增成功 / 无效输入 / 保存失败

我的阅读清单                         1 / 3 已读
[ ] 第一本书                         [删除]
[✓] 第二本书                         [删除]
[ ] 第三本书                         [删除]

说明：仅保存在当前浏览器，不上传、不跨设备同步。
[清空本机记录]

输入框使用真实标签“书名”，不要仅依赖 placeholder。占位文字在输入后消失，不能持续说明字段的作用。删除按钮需要能区分删除哪本书；源代码使用包含书名的无障碍名称。

第二步：列出四种必须出现的状态

• 空状态：尚无记录，说明可以添加第一本，不伪造示例书单为用户数据。
• 正常状态：显示书名、已读状态与删除入口，数量从真实记录计算。
• 输入错误：保留用户输入，提示长度要求，不把错误内容写入存储。
• 存储异常：读取失败时暂停新增，保留原始存储；写入失败时说明本次修改未生效。

另有一个破坏性动作“清空本机记录”，执行前需要明确确认。这是示例里真实删除用户数据的动作，不应与普通导航按钮具有相同的强调程度。

第三步：走完一条正常路径

输入“第一本书” → 提交 → 校验通过 → 写入本机存储成功 → 更新列表 → 清空输入框 → 焦点回到输入框 → 读屏状态区域播报成功。再次添加不必用鼠标重新寻找输入框。

勾选已读后，列表重新渲染，但焦点应回到对应复选框。否则键盘用户会突然失去操作位置。视觉结果与交互连续性都属于验收范围。

第四步：走完两条异常路径

路径 B：输入 81 个普通汉字 → 校验失败 → 显示具体限制 → 输入框保持内容与焦点 → 修改后再次提交。这比直接清空错误输入更便于修正。

路径 C：勾选一本书，但浏览器拒绝保存 → 页面提示保存失败 → 复选框恢复原状态 → 旧记录保持不变。不能让界面显示已读，而刷新后又变成未读，却没有任何说明。

第五步：确定不在本原型中解决的状态

这个项目没有服务器请求，因此不需要假装出现“云端同步中”。多个标签页同时编辑可能发生后保存覆盖前保存；资料包明确按单个活动页面使用。如果要扩展并发同步，应另行设计冲突策略，不能只加一个旋转图标就宣称支持。

提示词与使用说明

请检查下面的页面流程是否覆盖需求，不写代码。
对每个状态列出：触发条件、用户看到的文字、允许的操作、
下一步状态、数据是否发生变化、键盘焦点应该在哪里。
重点检查无效输入、读取损坏数据、写入失败和清空确认。
这是单浏览器静态原型，不增加服务器和登录流程。

需求：[粘贴上一课需求]
线框与流程：[粘贴本课方案]

独立练习

先把答案写进本课笔记，再展开解析。以下人物、活动和数据均为教学用的虚构材料；练习记录请填写你实际完成的过程。

给定材料

页面包含书名输入框、添加按钮、列表。
用户可能：首次打开、输入空格、输入长标题、刷新、存储不可用。

你的任务

为这五种情况分别写前置条件、动作和预期结果。优先说明旧数据不能被破坏的情况。

验收与迁移

对照自己的成果逐项检查。未达到的项目，写明缺什么、怎样补；这些标准用于自查，不会自动标记课时完成。

• 五种输入或环境均有具体预期
• 失败时没有假报成功
• 数据恢复与数据新增被分别检查

带回自己的场景

写代码前先拿流程表走一次，发现缺少的按钮、提示和恢复方式，再调整页面。

延伸资料

浏览器存储的使用与限制 ↗。资料用于核对方法和技术边界，案例与练习由 Nextory 编写。