熟食结算整行三色状态卡设计
状态:方案 B 已确认,待用户复核设计稿后进入实施计划。本阶段不修改 SellWeight 源代码,不执行 Git 暂存、提交、推送或分支切换。
1. 目标与决策
隐藏并移除“当前商品:xxx”,将右上角状态文字改成横跨称重区域的双行状态卡:左侧图标,右侧主提示和辅助说明。所有状态只使用蓝、橙、绿三种语义风格。
本设计覆盖原“先放后选”设计中“当前商品区域可显示最近加入商品”的描述。商品名、重量和金额仍通过入车 Toast 与购物车确认。
2. 视觉预览
!
重量变化中,请等待稳定请保持商品不动,稳定后再选择商品
✓
请放置商品,等待重量稳定秤体已置零,放置后请保持商品不动
✓
商品已加入,请拿走商品拿走后请手动归零,准备称下一件
用户提供的三张参考截图仅用于提取整行卡片和三色语义,不引入截图中的其他业务文案或指令。
3. 页面结构与尺寸
┌──────────────────────────────────────────────────────────┐
│ ● 主提示文字 │
│ 辅助说明文字 │
└──────────────────────────────────────────────────────────┘
实时重量 实时价格 归零
- 称重区顶部保持
290dp,左侧区域保持820dp。 - 状态卡左右外边距各
16dp,高72dp,顶边距14dp,圆角10dp,描边2dp。 - 图标
36dp;主提示22sp粗体;辅助说明15sp。 - 下方重量、价格和归零保持原排列,只把定位基准改为状态卡。
4. 三色规范
| 语义 | 背景 | 描边/图标 | 主提示 | 辅助说明 |
|---|---|---|---|---|
| 蓝色·可操作 | #EAF5FF | #3197D6 | #246B9A | #5C7280 |
| 橙色·等待警示 | #FFF7E8 | #F5A12B | #A85B00 | #6F6252 |
| 绿色·完成 | #EDF9F0 | #38B862 | #287A43 | #5F7164 |
颜色、尺寸和文案均使用具名资源;图标使用 Vector Drawable,不使用 Emoji 或设备字体符号。
5. 状态映射
蓝色:当前允许下一步操作
| 状态 | 主提示 | 辅助说明 |
|---|---|---|
READY_TO_PLACE | 请放置商品,等待重量稳定 | 秤体已置零,放置后请保持商品不动 |
READY_TO_SELECT | 重量已稳定,请选择商品 | 点击商品后将直接加入购物车 |
橙色:等待、处理中或异常
| 状态/覆盖条件 | 主提示 | 辅助说明 |
|---|---|---|
WAITING_SCALE | 秤体未就绪,请等待称重数据 | 请检查秤体连接,等待设备恢复 |
WAITING_ZERO_STABLE | 请保持秤盘为空,手动归零并等待秤体稳定 | 稳定零位确认后即可放置商品 |
WEIGHT_CHANGING | 重量变化中,请等待稳定 | 请保持商品不动,稳定后再选择商品 |
| 用户正在归零 | 正在归零,请保持秤盘为空 | 请勿放置商品,等待秤体稳定 |
| 正在支付 | 正在支付,请稍候 | 请勿重复操作,等待支付结果 |
| 数据超时 | 称重数据已超时,请等待秤体恢复稳定 | 请检查连接,恢复前无法继续称重 |
| 去皮状态 | 当前处于去皮模式,请取消去皮并手动归零 | 恢复稳定零位后即可继续 |
| 单位异常 | 秤体单位异常,请切换为 kg | 当前单位不支持称重结算 |
| 其他秤异常 | 称重数据异常,请检查秤体 | 恢复正常并稳定归零后即可继续 |
在三色约束下,异常不新增红色;通过橙色感叹号和具体文案区分原因。
绿色:本轮入车完成
| 状态 | 主提示 | 辅助说明 |
|---|---|---|
WAITING_REMOVE_ZERO | 商品已加入,请拿走商品 | 拿走后请手动归零,准备称下一件 |
6. 展示与语音边界
renderWeighingState()仍是唯一状态渲染入口。- 建议增加带职责注释的
CookedFoodStatusTone枚举,集中表达INFO、WARNING、SUCCESS。 - 重复状态允许重新应用样式,但继续使用
lastStatusResId阻止重复播报。 - 辅助说明不参与语音;本次不修改任何语音资源。
- 状态切换不增加动画,避免秤体状态变化时产生额外闪动。
7. 文件范围
activity_cooked_food.xml:移除当前商品,加入状态卡、图标和辅助说明。CookedFoodActivity.java:删除当前商品视图依赖,集中更新状态卡。colors.xml、dimens.xml、strings.xml:增加具名资源并清理无引用文案。drawable/:增加三套背景和矢量图标。- JVM 测试:覆盖全部状态到三种视觉语义的映射。
8. 非目标
不改称重状态机、稳定与零位判断、点击商品直接入车、用户主动归零、商品明细 Toast、购物车、支付、订单数据以及现有语音。状态卡不抽成跨页面通用自定义 View。
9. 验收标准
- 页面不再出现“当前商品:未选择”或“当前商品:xxx”。
- 所有状态唯一映射到蓝、橙、绿之一,且文字、图标、描边和背景一致。
- 状态卡不与重量、价格、归零按钮重叠,长文案不截断、不抖动。
- 蓝、橙、绿切换不产生额外语音,相同状态连续上报仍只播报一次。
- “商品已加入,请拿走商品”的文字和现有语音保持一致。
- 商品名、重量和金额仍可通过 Toast 与购物车确认。
- 既有自动化测试和 Debug 构建通过,并在真机留存三种状态截图。
10. 风险与下一步
- 长异常文案优先通过精简辅助说明解决,不把主提示缩小到低于
20sp。 - 如真机出现蓝橙频繁闪动,应先核查秤体稳定标志,不在 UI 层掩盖业务状态。
- 用户复核并确认本设计稿后,再编写实施计划;本阶段不修改源代码。