第 3 屏 ｜ 衣物上传（全状态画板）

微信小程序二级规范 · 375 × 812 pt
主色: #007AFF 失败色: #FF3B30 背景: #F2F2F7 | 全状态交付：初始态、动作面板、处理中、失败态、额度不足
状态 1 · 初始态与 iOS ActionSheet

40% 虚线上传区 + 底部原生 ActionSheet 面板

9:41
衣橱
上传衣物
拍照或从相册选择
支持 JPG / PNG，单张不超过 20MB
上传消耗 1 次上传额度
剩余 13 次
AI 将自动抠图并识别 15 项属性
📸 拍照建议以获得最佳效果：
平铺或悬挂单件
光线充足背景整洁
选择上传方式（消耗 1 次额度）
状态 2 · 处理中（Processing）

所选缩略图 + 三步横向步骤条 + 呼吸动效

9:41
返回
正在处理
分析中...
AI 识别流水线
排队中 已就绪
AI 抠图 进行中
智能分类 等待中
AI 正在识别你的衣物…
通常需要 10 秒左右，请稍候
处理完成后将自动跳转至衣物详情页，您可微调 15 维智能识别属性。
支持切换至后台运行，识别成功后通知推送
状态 3 · 失败态（Error Fallback）

红感叹号 + 额度回退声明 + 双操作分支

9:41
衣橱
上传结果
识别失败：图片抠图失败
本次上传额度已自动退回
可能是衣物轮廓不够清晰、背景与衣服颜色过于接近，或光线过暗导致。
建议尝试：
  • 将衣物平铺在纯色（如纯白/木质地板）背景上
  • 避免画面中同时出现多件杂物
  • 开启室内照明或闪光灯重新拍摄

第 3 屏 异常拦截规范与设计核查表

（遵循 iOS HIG Alert 对话框规范与小程序异步额度防重机制）
场景：上传前额度为 0 拦截（iOS Alert 规范）
上传额度不足
当前剩余 0 次，购买额度包后可继续上传

符合微信小程序与 iOS 居中 Alert 标准，点击「去购买」直接吊起轻量充值半屏。

关键设计与业务逻辑核对
  • 1. 占屏约 40% 虚线框：精确控制在 310pt 高度，居中布局大相机图标、规格说明（JPG/PNG、20MB 内）与额度提示。
  • 2. iOS ActionSheet 标准规格：顶部附带 36×5pt 胶囊 Grabber，选项间配备 0.5px 发丝线；取消项独立成组并与上方保留严格 8pt 间距。
  • 3. 三步横向步骤条：清晰划分「排队中（对勾）→ AI 抠图（实心蓝+呼吸动效进行中）→ 智能分类（浅灰圆点等待中）」，并标注文案「AI 正在识别你的衣物… 通常需要 10 秒左右」。
  • 4. 识别失败与额度返还：明确提示「识别失败：图片抠图失败」并突出强调「本次上传额度已自动退回」，同时提供「重新上传」与「手动填写信息」双兜底通道。
  • 5. 额度不足前置拦截：当剩余上传额度为 0 时，用户点击上传区域或入口即刻弹出 270pt iOS Alert 居中弹窗，避免无谓触发相机权限。