这是一份专为 UI/UX 设计师 撰写的《智能视觉售卖机系统 UI 设计参考规范》。

这份文档侧重于视觉风格、交互体验、关键页面布局及特殊状态的处理，旨在确保设计方案既美观又符合“视觉识别+即拿即走”的特殊业务场景。

智能视觉售卖机系统 - UI/UX 设计规范书

项目属性	定义
项目名称	智能视觉售卖机系统
文档版本	V1.0 (设计指导版)
设计核心	科技感 (Tech)、极简 (Minimalist)、信任感 (Trust)
关键体验	减少焦虑感（处理识别延迟），强化证据链（视频展示）
适应终端	微信小程序 (C端/B端)、PC Web (B端管理后台)

1. 视觉体系定义 (Visual Identity)

1.1 设计关键词

无感 (Seamless): 流程流畅，没有多余的点击。
通透 (Transparent): 价格透明、扣款透明、证据透明（建立对AI的信任）。
响应 (Responsive): 每一个操作（开门、关门、结算）都有明确的视觉反馈。

1.2 建议配色方案

由于涉及“支付”和“AI”，建议使用蓝色系作为主色，代表科技与安全；绿色代表通过/开门；橙红色用于警示/异常。

主色调 (Brand Color): Technology Blue (例如 #2979FF 或 #0052D9) - 用于核心按钮、选中状态。
辅助色 (Success): Signal Green (例如 #00C853) - 用于“门已开”、“支付成功”。
辅助色 (Warning): Alert Orange (例如 #FF9100) - 用于“补货差异”、“识别存疑”。
中性色:
- Black (#333333): 主标题。
- Grey (#909399): 次要信息、辅助说明。
- Light Grey (#F5F7FA): 背景色。

1.3 字体与图标

数字字体: 涉及金额、倒计时的数字，建议使用 DIN 或 Roboto Mono 等等宽字体，强调金融属性。
图标风格: 建议使用 线性图标 (Outline)，选中状态为 填充 (Filled)。线条需圆润，减少锐利感。

2. 用户端小程序 (C端) - 界面设计要点

2.1 首页 (Home)

首页即是“开门钥匙”，需极致简化。

背景: 全屏地图 (Map)，展示附近的点位锚点 (Marker)。
核心操作区 (Bottom Sheet):
- 扫码按钮: 巨大化设计，悬浮在底部中央，带有呼吸动效或阴影，暗示“点击这里开始”。
- 辅助信息: 扫码按钮下方展示“微信支付分 | 550分以上免押金”字样，增加用户信任。
侧边/角落入口: 个人中心（头像）、客服（耳机图标）、附近列表。

2.2 状态机页面 (购物全流程 - 核心难点)

这是一个根据状态变化的动态页面，切勿设计成多个割裂的页面。

状态 A: 开门申请中 (Loading)
- 视觉: 锁定屏幕，中间显示圆形进度条。
- 文案: “正在安全检测...”、“正在解锁...”。
状态 B: 门已开 (Shopping)
- 视觉:
  - 背景色转为柔和的绿色渐变。
  - 中央大图标：开锁图标 或 购物袋图标。
  - 醒目文案: “门已开，请选购”。
  - 底部提示: “选购完成后，关门自动结算”。
状态 C: 识别结算中 (Processing - 需缓解焦虑)
- 注：此状态可能持续 5-15 秒。
- 视觉:
  - 核心动效: 一个“AI大脑”或“扫描光线”在不断分析商品的动画。
  - 文案轮播: “AI正在清点商品...” -> “正在核对价格...” -> “即将生成账单...”。
- 禁止: 不要使用死板的“加载中”转圈，要让用户感觉系统在“思考”。
状态 D: 结算完成 (Receipt)
- 布局: 小票样式 (Receipt Card)。
- 顶部: 支付金额（大字）。
- 中部: 商品列表（缩略图 + 名称 + 数量 + 单价）。
- 底部: “查看购物监控”按钮（线框按钮）。

2.3 订单详情与证据链

视频播放器:
- 放在页面顶部或显眼位置。
- 默认状态: 展示封面图 + 播放按钮 + “购物过程回放”标签。
- 播放状态: 简易播放器，支持全屏。
售后入口:
- 在商品列表下方，设计“商品识别有误？”的文字链接。

3. 商户运营端 (PC Web) - 界面设计要点

3.1 布局框架

使用 侧边栏 (Sidebar) + 顶部导航 (Navbar) 的经典布局（类似 Ant Design Pro / Element Plus admin）。
风格: 干净、高对比度，适合长时间操作。

3.2 商品管理 (AI 模型关联)

此页面不同于普通电商后台。

图片上传区:
- 需强调图片规范。设计一个虚线框区域，并在旁边展示“正确示例（白底）” vs “错误示例（杂乱背景）”的对比图。
状态标签:
- 设计 distinct 的状态 Tag：未同步 (灰)、训练中 (蓝)、已生效 (绿)、训练失败 (红)。

3.3 挂起订单审核页 (人工介入)

这是一个分屏操作页，用于处理AI识别不准的订单。

左侧 (40% 宽度): 视频播放区。需支持逐帧播放、倍速播放。
右侧 (60% 宽度): 识别结果修正区。
- 显示 AI 识别出的商品列表（带删除按钮）。
- 提供“添加商品”的搜索框。
- 底部固定栏：显示“修正后总金额”，以及“确认扣款”与“取消订单”按钮。

4. 商家小程序 (B端) - 界面设计要点

4.1 运维工作台

卡片式设计: 每个设备是一个卡片。
状态指示灯: 卡片右上角用颜色点表示状态（绿=在线，灰=离线，红=缺货/故障）。
关键数据: 卡片内展示“当前SKU数 / 满载率”。

4.2 补货确认页 (Before/After)

运维关门后，系统会推送补货结果。

视觉重点: 突出“变化量”。
列表样式:
- 商品 A: 库存 5 -> 10 (+5) [高亮绿色]
- 商品 B: 库存 3 -> 2 (-1) [高亮红色，可能是拿走了]
修正交互: 每一行提供 + - 步进器，允许运维快速修正数字。

5. 组件与动效规范 (Interaction Specs)

5.1 弹窗 (Dialog/Modal)

C端: 使用底部弹窗 (Half-screen Dialog/Action Sheet) 为主，例如选择支付方式、查看优惠券。
B端: 使用居中弹窗，用于确认操作。

5.2 骨架屏 (Skeleton)

在地图加载、订单列表加载、商品详情加载时，必须使用骨架屏过渡，避免页面白屏闪烁。

5.3 异常反馈 (Toast/Alert)

轻微提示: 顶部下滑 Toast (如“网络连接已恢复”)。
阻断提示: 居中 Modal (如“您有未支付订单，请先处理”)，配上警示插画。

6. 设计交付物清单

UI Kit: 包含标准色板、字体规范、通用按钮、表单输入框、Iconfont/SVG图标集。
关键页面高保真图 (Hi-Fi):
- C端: 首页扫码态、开门鉴权弹窗、购物倒计时态、结算清单页、订单详情视频页。
- B端 PC: 仪表盘、商品上传页、视频审核页。
- B端 Mobile: 运维设备列表、补货差异核对页。
动效 Demo: “AI识别中”的加载动画演示 (MP4/Lottie/Gif)。

这份文档请设计师结合具体的 UI 框架（如 uView UI 或 Element Plus）进行落地设计。

UX设计规范书.md 7.5 KB تاريخچه خام