绑盘机消费三方案交互原型

1. 原型定位

本原型用于评审绑盘机消费功能的三页信息结构、页面文案和异常状态表达。它是独立的产品设计证据，不是 Android 生产代码，不连接真实餐盘扫码器、一卡通读卡器或服务端接口。

• 目标用户：食堂现场用餐者。
• 目标设备：16:9 横屏绑盘机终端。
• 需求依据：消费功能产品需求文档 V0.9.3。
• 定稿入口：打开方案 B 视觉定稿。
• 探索入口：打开 A/B/C 对比原型。
• UI 标注：方案 B UI 交互与状态标注。

2. 三套设计方案

最终采用方案 B；A/C 仅作为探索证据保留。三套方案只改变信息结构，共用同一套业务状态、文案和安全规则。

3. 可点击范围

底部评审控制器支持：

• 使用左右箭头或键盘方向键切换 A/B/C。
• 选择六条演示流程。
• 使用“上一步/下一步”逐状态检查页面。
• 模拟餐盘拿走或仍在，验证餐盘状态不打断当前业务。
• 直接查看当前状态码、卡片保护窗口、防重扣和待补传标志。

演示流程包括：

1. 正常正金额支付。
2. 零元单与反馈补传。
3. 卡片在消费前读卡阶段拿走。
4. 扣款指令明确失败且实际扣款为 0。
5. 扣款成功但接口 C 反馈失败。
6. 扣款结果不确定。

URL 支持保存评审状态，例如：

index.html?variant=C&flow=report-failed&state=8&tray=removed

4. 复用证据

原型直接复用了 Android 项目的现有设计资产：

• app/src/main/res/drawable/home_bac.png：深蓝主背景。
• app/src/main/res/drawable/bac_put_tray.png：放盘示意图。
• app/src/main/res/drawable/icon_swipe_card_demo.png：放卡示意图。
• app/src/main/res/drawable/icon_home_bind_success.png：成功状态图。
• app/src/main/res/drawable/icon_home_bind_fail.png：异常状态图。
• app/src/main/res/layout/home_nav_layout.xml：三步导航结构。
• app/src/main/res/layout/fragment_scan_code_layout.xml：居中插画与大字号提示结构。

原型目录中的 assets/ 是上述资源的评审副本，生产资源仍以 Android 项目为准。

5. 模拟数据与假设

• 订单号使用 SAMPLE- 前缀，全部为虚构样例。
• 正金额样例为 18.50 元，零元样例为 0 元。
• 网络状态、餐盘状态、卡片阶段和接口反馈均为浏览器内存状态。
• 原型没有持久化、定时任务、真实语音、真实硬件调用或真实接口请求。
• “每 3 分钟补传、每批 50 条、单轮最多 100 条”只在文案与状态中表达，本原型不运行后台同步任务。

6. 运行方式

直接双击 index.html 即可查看。若浏览器限制本地资源，可在本目录启动静态服务器：

python3 -m http.server 65120 --bind 127.0.0.1

然后访问：

http://127.0.0.1:65120/index.html

7. 验证结果

• A/B/C 三套探索方案均可切换，方案 B 有独立定稿入口。
• 六条演示流程均可从入口推进至终态。
• 图片资源全部加载成功。
• 1440×900 和 800×1100 视口无横向溢出。
• 浏览器控制台错误为 0，请求失败为 0。
• 截图证据保存在 evidence/。

8. 非目标

• 不代表 Android 页面已经实现。
• 不验证真实一卡通协议、扣款安全或接口 C 幂等性。
• 不用于生产部署、真实支付或客户验收。
• 不替代后续 Android 技术方案、开发任务拆分和真实设备测试。