这是一份专为 **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. 设计交付物清单

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

---

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