← 返回 Gate4 产品设计

🎨 交互原型设计

版本: v2.0-2026-03-19 更新

最后更新: 2026-03-19 11:20

页面总数: 11 个(工程师端 6 个 + 审核员端 2 个 + 后台管理 3 个)

今日变更: 选择 SKU 页面优化、填写采购信息页面优化

今日核心变更(2026-03-19)

变更 1:选择 SKU 页面优化

✅ 已更新
  • 只展示 SKU 名称,不展示编码
  • 不展示适配产品信息
  • 只显示该工单允许核销的配件(如空调工单只显示空调配件)
  • 移除分类筛选功能

变更 2:填写采购信息页面优化

✅ 已更新
  • "数量"改为"购买数量"
  • 删除"使用数量"字段
  • 取货方式选择(自提/跑腿)仅在线下门店购买时显示
  • 普通网购不显示取货方式选择

工程师端 APP 交互原型(6 个页面)

1. 工单详情页

工单详情

页面元素:

  • 工单基本信息(产品型号、故障描述、用户信息等)
  • 配件采购入口按钮("采购配件")
  • 配件使用入口按钮("使用库存")
交互说明:
  • 点击"采购配件" → 跳转到选择 SKU 页面
  • 点击"使用库存" → 跳转到我的库存页面

2. 选择 SKU 页面(2026-03-19 更新)

选择配件

页面元素:

  • 顶部显示工单产品信息(如:工单产品:XXX 冰箱)
  • 搜索框(按配件名称搜索)
  • 配件列表(只显示该工单允许核销的配件
  • 每个配件项:只展示 SKU 名称(如"压缩机"、"温控器")
  • 不展示: 配件编码、适配产品信息
  • 无分类筛选
交互说明:
  • 输入搜索关键词 → 实时过滤配件列表
  • 点击配件 → 选中该配件(勾选框选中)
  • 点击"下一步" → 跳转到选择采购渠道页面
2026-03-19 变更: 移除编码显示、移除适配产品显示、移除分类筛选、只显示工单允许核销的配件

3. 选择采购渠道页面

选择采购渠道

页面元素:

  • 渠道选项:线下门店 / 普通网购
  • 每个渠道显示所需凭证说明(4 张:门头照、购买单据、支付截图、配件照)
交互说明:
  • 选择渠道 → 记录选择的渠道
  • 点击"下一步" → 跳转到填写采购信息页面
  • 如果选择线下门店 → 填写采购信息页面显示取货方式选择
  • 如果选择普通网购 → 填写采购信息页面不显示取货方式选择

4. 填写采购信息页面(2026-03-19 更新)

填写采购信息

页面元素:

  • 单价输入框(不展示限价,超标后台校验)
  • 购买数量输入框(超标后台校验)
  • 取货方式选择仅线下门店购买时显示):
    • 自提(默认选中)
    • 跑腿
  • 超标校验提示(根据配件基础信息配置)
交互说明:
  • 输入单价/购买数量 → 实时校验(超标显示提示)
  • 选择取货方式 → 记录选择(仅线下门店时)
  • 超标校验逻辑
    • 如果配件基础信息配置为"允许提交"
      • 显示超标提示
      • 要求工程师上传钉钉报备同意的聊天截图
      • 显示上传标准说明(如:需包含领导同意字样、明确配件名称和价格等)
      • 上传后可继续提交
    • 如果配件基础信息配置为"不允许提交"
      • 显示超标提示
      • 不允许提交,按钮置灰
      • 提示联系管理员修改配置或更换配件
  • 点击"下一步" → 跳转到上传凭证页面(仅当允许提交时)
2026-03-19 变更: "数量"改为"购买数量"、删除"使用数量"、取货方式仅线下门店时显示、新增超标校验逻辑(允许提交需上传钉钉报备截图/不允许提交则禁止)

5. 我的库存页面(新增)

我的库存

页面元素:

  • 渠道筛选器(只展示:线下门店/普通网购
  • 库存配件列表
  • 每个配件项:名称、库存数量、单价、购买渠道
  • 支持同配件不同价格选择
交互说明:
  • 选择渠道筛选 → 过滤显示对应渠道的配件
  • 点击配件 → 选中该配件
  • 点击"下一步" → 跳转到核销操作页面
2026-03-19 更新: 渠道筛选器只展示线下门店和普通网购,不展示其他渠道

6. 核销操作页面(2026-03-19 更新)

核销操作

页面元素:

  • 使用数量输入框
  • 新旧配件合照上传区域
  • 核销说明提示
交互说明:
  • 输入使用数量 → 记录使用数量
  • 拍摄新旧配件合照 → 上传照片
  • 点击"提交" → 生成新的报销单
  • 报销单状态: X 级待审批
  • 库存状态变化:
    • X 级待审批 → 库存冻结
    • 待报销 → 库存冻结
    • 结算 → 库存自动扣减
    • X 级审批驳回 → 库存自动还原
  • 提交成功后 → 显示提交成功页面
2026-03-19 更新: 填写使用数量并拍摄新旧照后,产生新的报销单,状态为X 级待审批库存状态根据报销单状态自动管理(冻结/扣减/还原)

7. 上传凭证页面(2026-03-19 更新)

上传凭证

页面元素:

  • 根据购买渠道和取货方式动态显示上传要求
  • 现场拍摄配件图片区域(新增)
  • 每个上传区域显示示例图查看入口
  • 上传进度显示
  • AI 智能校验提示区域(新增)
交互说明 - 不同渠道/取货方式的上传要求:
  • ① 线下门店购买 - 自提
    • 现场拍摄门头照
    • 现场拍摄购买单据
    • 相册上传支付截图
    • 现场拍摄配件图片(新增)
  • ② 线下门店购买 - 跑腿
    • 相册上传物流运费订单
    • 相册上传支付截图
    • 相册上传收货照/包裹照/装车照
    • 相册上传购买单据
    • 现场拍摄配件图片(新增)
  • ③ 普通网购
    • 上传网购订单详情
    • 现场拍摄配件图片(新增)
  • ④ 新机购买(购买单据/网购订单详情处):
    • 上传发票
    • 上传网购订单详情
    • 工程师可自行上传两张图片
    • 现场拍摄配件图片(新增)
AI 智能校验功能(新增):
  • 拍摄配件图片后
    • 系统自动识别配件图片
    • 与工程师选择的 SKU 进行对比
  • 如果 SKU 与实际配件不符
    • 系统提醒:"SKU 选择错误"
    • 显示正确的 SKU 建议
    • 工程师可选择系统建议的 SKU
  • 如果工程师选择系统建议的 SKU
    • 系统自动更新为新的 SKU
    • 重新校验购买的单价和数量
    • 根据新 SKU 的限价重新校验
  • 如果工程师坚持原 SKU
    • 记录选择
    • 进入后续流程(可能触发人工审核)
通用交互:
  • 点击上传区域 → 打开相机/相册(根据要求)
  • 查看示例图 → 弹窗显示标准示例
  • 所有凭证全部上传 → "提交"按钮可点击
  • 点击"提交" → 跳转到核销操作页面
2026-03-19 更新: 不同购买渠道和取货方式需要提交不同的凭证内容;新增 AI 智能校验功能(配件图片识别+SKU 对比+自动建议)

审核员端 PC 交互原型(2 个页面)

1. 审核列表页面

配件核销审核列表

页面元素:

  • 状态筛选器(全部/待审核/已通过/已驳回)
  • 时效筛选器(全部/正常/即将超时/已超时)
  • 搜索框(搜索工单号)
  • 审核单据列表(工单号、工程师、金额、提交时间、状态、时效标签)
交互说明:
  • 选择筛选条件 → 实时过滤列表
  • 点击单据 → 跳转到审核详情页面

2. 审核详情页面

审核详情

页面元素:

  • 工单信息区域
  • 配件信息区域
  • 4 张凭证预览(可放大查看)
  • 系统校验结果展示
  • 审核意见输入框
  • 审核操作按钮(通过/驳回)
交互说明:
  • 点击凭证 → 放大查看
  • 填写审核意见 → 必填项
  • 点击"通过" → 提交审核,自动打款
  • 点击"驳回" → 提交审核,退回工程师

后台管理交互原型(3 个页面)

1. 配件基础信息配置

配件基础信息配置

页面元素:

  • 搜索框(搜索配件名称/编码)
  • 配件列表(名称、编码、分类、限价等)
  • 批量操作按钮(导入、导出)
  • 编辑按钮(编辑配件信息)

2. 示例图管理

示例图管理

页面元素:

  • 凭证类型列表(门头照、购买单据、支付截图、配件照)
  • 每个类型显示当前示例图
  • 上传/替换示例图按钮
  • 编辑示例图说明

3. 工程师库存管理页面(新增)

工程师库存管理

页面元素:

  • 多维度筛选器:子公司、产品组、业务线、服务商、工程师、工程师 ID
  • 库存列表(配件、渠道、数量、单价、出库记录、购买单据)
  • 配件禁用开关
  • 库存流水查看入口
交互说明:
  • 选择维度筛选 → 过滤显示对应维度的库存
  • 点击禁用开关 → 禁用/启用配件(禁用后工程师端不可见)
  • 点击"查看"出库记录/购买单据 → 弹窗显示详情

完整采购流程交互

步骤 页面 核心交互 2026-03-19 变更
1 工单详情页 点击"采购配件" -
2 选择 SKU 页面 选择配件 只显示工单允许核销的配件,只展示名称
3 选择采购渠道页面 选择线下门店/普通网购 -
4 填写采购信息页面 输入单价/购买数量,选择取货方式 购买数量、仅线下门店显示取货方式
5 上传凭证页面 上传 4 张凭证 -
6 核销操作页面 拍摄新旧合照,提交 -