把需求变成能验证的原型和界面

资料阅读面板的原型展示了整齐的列表与漂亮配图，用户真正需要完成的是找到指定材料、确认版本并开始阅读。原型要围绕这个任务定义输入、状态与结果，界面规格再把观察得到的需求落实到可以实现的规则。

本课设计一个独立阅读面板，有课程筛选、结果列表与详情区域。数据全部是合成资料，代码只检查状态覆盖，没有创建 Figma 文件、浏览器页面或生成图像。

原型先检验一个明确假设

假设可以是“用户能从列表识别最新版本”，也可以是“打开详情后能找到来源”。把任务、起点、成功条件和常见失败写下来。一次原型测试不宜同时证明需求存在、布局好用、性能达标和收费有效。

低保真草图适合比较信息组织，交互原型适合观察跳转、选择与反馈。若要测试输入错误与异步等待，需要可到达对应状态的交互，而不是只有最终截图。保真程度由待验证问题决定，不能以画面精致程度代替证据。

让参与者执行找材料任务，记录选择路径、停顿、误选与求助。提问应关注对方判断依据，避免先解释界面再观察“会不会用”。原型设计者知道按钮在哪，不代表新用户能看懂。

信息层级表达任务优先级

列表首先显示材料名称、适用课程与版本状态，详情展示来源和阅读入口。装饰图片不应抢占判断版本的位置。需要区分主要操作、辅助导航与元信息，避免所有文字同样粗或所有按钮同样突出。

内容的长短变化也属于布局约束。标题很长、标签缺失、来源很多时，面板怎样换行与保留信息？先准备这些例子，再决定固定高度或截断规则。截断后应有可访问的完整内容途径，不能让关键版本信息消失。

为窄屏定义结构变化，例如详情转入独立视图，筛选不挡住主要结果。断点来自内容与操作是否还能使用，不仅是某种设备尺寸。触控、键盘与放大文字都可能改变空间需求，应在规格中体现。

状态是交付规格的一部分

请求开始显示 loading，没有结果显示 empty，取得资料显示 success，失败显示 error。每个状态需要可理解的说明与下一步：空结果可调整筛选，错误可重试，但重试不能清空已有可用资料而无提示。

还要考虑部分成功、权限拒绝、版本过时和保存中。不要把所有异常都显示为同一空列表。按钮是否禁用、焦点移向哪里、旧结果是否保留、用户输入是否丢失，都属于行为，而非留给开发者临时猜测。

下面的离线审计只核对四个必需状态是否存在，返回缺失项。它不判断每个状态的视觉或交互质量。

required = {"loading", "empty", "success", "error"}
screens = {"loading": "spinner", "empty": "help", "success": "results", "error": "retry"}
assert required <= set(screens)
incomplete = {"success": "results"}
assert required - set(incomplete) == {"loading", "empty", "error"}
print(sorted(required - set(incomplete)))

实际输出是 ['empty', 'error', 'loading']。完整 screens 覆盖四项，仅有 success 的方案缺少三项。字典里的 spinner、help、results、retry 只是教学标签，并没有实现控件或异步请求。

字段存在也不代表状态可达。后续实现需要通过请求失败、无数据与延迟等条件进入状态，验证文字与操作。只展示四张图片不能证明状态转换没有丢失输入或重复执行任务。

设计系统提供语义与一致行为

设计 token 可以描述间距、字体、颜色与圆角，但名称应对应用途，例如正文、辅助文本和危险操作，而不是散落的任意数值。组件还要定义尺寸、状态、内容规则和可访问性，才能在多个页面持续保持一致。

组件库提供实现或样式，设计系统还包括使用理由与行为约束。Material 的模式可以作为参考，其品牌与平台选择不一定适合每个站点。借用组件前判断信息层级与任务是否相符，避免仅因现成而增加复杂度。

Figma 支持建立交互 flow 来探索使用路径，MasterGo 等工具也可用于界面协作；具体能力、许可与集成应查当前产品说明。本课不承诺未经核验的一键代码同步。设计工具中的组件名称应与实现规格对应，减少交接时的误解。

可访问性需要可操作证明

阅读面板应能通过键盘到达筛选、结果和详情操作，焦点顺序与阅读顺序一致。焦点要可见，弹层关闭后回到合理位置。加载或错误提示应有可感知的状态说明，不能只靠颜色、动画或一个图标表达。

图像需要按用途提供替代文本，装饰图可避免制造重复朗读。表格、表单与按钮使用适当语义。对比度、文字放大和屏幕阅读器行为需要实际检查，单凭设计图不能声称符合完整标准。

动效应服务于状态变化，持续旋转不能替代等待说明。考虑减少动态效果偏好，并避免重要信息仅短暂出现。可访问性验收既检查页面结构，也检查任务路径，不能只运行一个扫描工具就结束。

图片资产与代码分别审查

AI 生成资产可以帮助探索，但图像不是可用界面。生成面板截图通常遗漏错误、焦点和可调整文字，仍需转成真实结构与组件。也不能把参考截图的正文、案例或媒体换个颜色后当成原创内容。

记录资产来源、生成或授权条件与修改版本，检查是否适合公开使用。教学插图应核对知识准确性、文字与内容关系。不要因为图片看起来合理，就把其中的标识、人物或说明当作事实。

交付给开发的规格包含资源尺寸、裁切、替代文本、加载占位与失败处理。资源缺失不应让主要操作不可用。字体、图片体积与布局尺寸还会影响性能与位移，需要在实现阶段另行测量。

加载期间的操作也要写清。旧资料已经可用时，可以保留阅读入口，并注明新筛选结果还在等待；若按钮暂不可用，应解释原因。失败后恢复操作不能让焦点消失或跳到页面开头。用同一任务比较加载前、加载中和失败后的行为，能发现静态画面里看不到的问题。

练习：交付可验证的阅读面板规格

写出找材料任务和两条假设，设计列表、详情、筛选与四种基本状态。补充长标题、窄屏、无权限、键盘和图片加载失败的例子，注明组件与 token 的用途。

验收时，每个状态可通过明确输入进入；空结果与错误可区分；用户能回到列表继续操作；关键版本信息不被截断。提供焦点与阅读顺序说明，并列出需要实际 UI 测试的项目。代码审计只证明状态名称覆盖，原型可用性与可访问性需用任务观察和运行界面验证。