绑盘机消费功能方案 B UI 交互与状态标注

1. 文档信息

2. 定稿结论

最终采用方案 B“金额聚焦型”。方案保留现有绑盘页面的深蓝背景、主插画和大字号提示，将三步导航调整为顶部水平步骤条，并把订单号、金额、当前动作和结果集中在中央焦点面板。

选择理由：

1. 第二步能够把订单金额作为最主要信息，便于用餐者快速确认。
2. 第三步仍能保持单一动作提示，避免把硬件阶段和调试信息同时暴露给用户。
3. 横向步骤条与三页流程一致，中央区域比左侧导航方案拥有更大的订单与结果展示空间。
4. 与现有深蓝绑盘视觉保持连续，不重新建立第二套产品风格。

3. 页面框架

页面固定分为四层：

1. 顶部设备栏：产品名称、网络状态和时间。
2. 水平三步导航：1 放置餐盘、2 确认订单、3 卡片结算。
3. 中央焦点面板：承载当前插画、订单号、金额、主文案和辅助文案。
4. 系统状态提示：仅展示“等待识别、处理中、补传中”等用户可理解状态，不显示 JSON、APDU、PSAM、HTTP 或内部错误码。

生产页面不展示原型底部的流程选择、上下步、状态码和模拟餐盘控件；这些控件仅供产品评审。

4. 视觉标注

4.1 页面比例与安全区

• 设计基准：16:9 横屏。
• 顶部设备栏约占页面高度 8%。
• 水平步骤条位于内容区域顶部，左右各保留约 17% 安全边距。
• 中央焦点面板宽度约占页面 60%～72%，不同分辨率下保持居中。
• 主文案最多两行，订单号过长时允许自然换行，但不能挤压金额和主操作提示。

4.2 字号层级

金额使用分单位整数计算，页面统一格式化为 ¥18.50；零元显示 ¥0.00。

4.3 色彩

• 页面背景：复用 home_bac.png 深蓝科技背景。
• 主文字：白色。
• 当前步骤和处理中：青蓝色。
• 成功：青绿色。
• 需要注意但业务可继续：黄色。
• 扣款异常或需人工核对：浅红色。
• 同一页面只使用一个主状态色，不用颜色代替文案。

5. 三页主流程

5.1 第一步：等待放盘

• 当前步骤：1。
• 主插画：复用 bac_put_tray.png。
• 主文案：请放置餐盘。
• 辅助文案：请将餐盘平稳放入识别区域。
• 识别成功后自动切换第二步，不出现确认按钮。

5.2 第二步：确认订单

• 主文案：正在确认订单。
• 辅助文案：请稍候。
• 展示轻量加载动画，不展示订单号、金额或技术响应。
• 查询期间餐盘拿走不改变主页面文案，不取消请求。
• 订单成功后直接进入第三步，不显示订单已确认、正在进入支付或正在进入核验等过渡内容。

5.3 第三步：卡片结算

• 当前步骤：3，页面不得出现支付按钮。
• 进入第三步先确认读卡区无卡；存在遗留卡时显示请先取走卡片并使用取卡配图。
• 正金额等待状态显示请放卡片 / 请将卡片平放在读卡区域；零元显示请放卡核验 / 只读取卡片信息，不会扣款。
• 前读卡、扣款和后读卡统一显示结算处理中 / 请勿移动卡片；零元统一显示卡片核验中 / 请勿移动卡片。
• 首次完整读卡后，在当前面板内出现持卡人、补贴余额和现金余额，不新增页面。
• 后读卡成功且完整校验通过后，余额更新为真实结算后余额。
• REPORTING、成功和待补传统一显示完成状态；后台接口结果不形成新的用户页面。

6. 页面状态矩阵

卡片信息区在首次完整读卡后显示三列：持卡人、补贴余额、现金余额；上方用读卡时余额、卡片余额或结算后余额说明数据语义。

7. 交易失败和上传失败表现

7.1 扣款前失败

前读卡失败、提前移卡、余额不足或扣款前硬件断开时：

• 明确提示尚未扣款。
• 只保存本地记录，不显示“结果正在补传”。
• 不调用接口 C。
• 餐盘拿走后进入统一复位。

7.2 扣款明确失败

扣款指令返回明确失败且实际扣款金额为 0 时：

• 显示 支付未完成。
• 调用接口 C 反馈失败结果。
• 接口 C 上传成功或失败都推进统一复位。
• 上传失败显示 支付未完成，结果正在补传，后台重放原请求。

7.3 部分扣款或结果不确定

• 不显示普通“支付失败”。
• 显示 扣款结果待核对，请勿再次支付 或对应部分扣款提示。
• 不向接口 C 发送通用失败报文。
• 保存本地异常并禁止自动重新扣款。

7.4 接口 C 上传失败

• 不改变一卡通交易结果。
• 零元、扣款成功或扣款明确失败的原请求进入补传队列。
• 前台完成当前结果展示并继续下一单。
• 页面不展示网络技术错误，只显示“结算结果正在补传”。

8. 动效与展示时长

• 订单查询使用轻量加载动效；前读卡、扣款、后读卡和反馈不再分别触发文案或配图切换。
• 等待新卡可使用缓慢呼吸效果提示放卡区域；支持系统减少动态效果设置。
• 成功和可继续的补传状态默认最短展示 2 秒。
• 需要人工关注的异常状态默认最短展示 3 秒；餐盘仍在时保持到餐盘拿走。
• 页面重建、网络重连和 USB 恢复不得重新播放“请放卡片进行支付”语音。
• 展示时长均为可配置产品参数，开发时不得散落硬编码。

9. 可访问性与现场可读性

• 主文案和金额在两米内保持可辨认。
• 文字与背景对比度不得低于 WCAG AA 的基本要求。
• 状态不能只依赖颜色，必须同时有明确中文文案。
• 长订单号可换行或缩小一级字号，不得遮挡金额和主文案。
• 无网络、读卡器不可用等设备异常必须保留固定提示区域，但不覆盖主动作。

10. 页面资产

• 背景继续复用 Android 的 home_bac。
• 主流程新增 consumption_illustration_place_tray、consumption_illustration_place_card、consumption_illustration_remove_card 三张透明 PNG。
• 三张操作图使用统一深蓝、青蓝、白色色板和相同画布比例，不包含文字或大面积白底。
• 消费主流程不再使用旧刷卡图、绑盘成功图和绑盘失败图。

11. 开发边界

• 定稿原型使用本地模拟状态，不代表接口、硬件或后台任务已经实现。
• Android 开发需将页面渲染与消费会话状态机分离，Activity/Fragment 只负责展示。
• 生产代码不得包含原型评审控制器、样例订单号或浏览器脚本。
• A/C 方案保留为产品探索证据，不进入正式 Android 实现。

12. UI 验收标准

1. 方案 B 三步结构与定稿原型一致。
2. 用户主流程不出现支付按钮或“请刷卡”。
3. 金额、主文案、辅助文案和步骤状态层级清楚。
4. 卡片保护窗口内始终提示不得移卡，后读卡校验成功后允许移卡。
5. 扣款前失败、扣款明确失败、结果不确定和上传失败文案互不混淆。
6. 16:9 目标设备无裁切、遮挡或长订单号破版。
7. 页面不展示调试数据、接口 JSON 或一卡通技术字段。
8. 首次完整读卡后可看到持卡人、补贴余额和现金余额；下一轮开始前不会残留上一位用户信息。
9. 正金额完整成功显示真实后读卡余额，异常状态不把扣款前余额标记为结算后余额。