IITOO · UI INTERACTION DESIGN · 2026-10-22
采购协作全流程
交互设计稿 · 试稿 03
我的买单、云买单、报询价一级盒子与订单成立的连续体验稿。用于下一轮业务对齐,不作为开发冻结规格。
01 · 本次交付与使用
在线入口 flow.html;ZIP 解压后先打开 START.html。PC 和移动端共用响应式页面。浏览器在本机保存演示数据,不连接真实业务后台。重置只影响试稿03,采购计划及买单02原稿的数据不受影响。
首次进入,可选择“加载全链路样例”,直接阅读已有买单、V1报价、V2询价与待确认订单;也可以从采购计划或直接创建买单开始。云买单需从采购计划创建。本版独立工作区承接全链路试验,不把旧稿中的完整商品/商务组件宣称为已经全部迁移。
02 · 已明确的业务规则
| 主题 | 本版行为 |
|---|---|
| 两屏创建 | 第一屏填写名称、截止时间、推进节奏、供应商等;确认通过才生成ID,第二屏完善单据。 |
| 采购计划来源 | 可见范围只读,供应商限制在范围内;截止时间不得超过采购计划;商务及商品内容只读,保留商务全文阅读。 |
| 直接创建买单 | 不出现可见范围,选择一个已有供应商关系;可编辑商务、创建商品或从商品库选择。 |
| 选品 | 采购计划来源仅能选择该计划商品。支持全选可选项、暂选、取消、确认、搜索。灰色历史勾选不能在中间件反选。 |
| 机会计数 | 每个采购计划Item:当前协作最多6,累计消耗最多9。主动发送成功或云接单成功消耗;退出释放当前、不返还累计。同一供应商历史发送过不能重选。 |
| 企业权限 | 额度标准企业统一,不按员工差异化。未来由VIP档位决定,三档具体数值及购买流程未实现。 |
| 时间门槛 | 采购计划剩余不足7天,禁止创建买单/云买单及发送/上架;每次动作重检。 |
| 报价商品 | 在报询价阶段展示需求商品与实际报价商品;按需求商品/按供应方商品两条路径。供应方商品只从已有能力库选择。 |
| 一级盒子 | 报询价盒子包含需求Item集合与历次报价/询价版本,版本不能覆盖历史。 |
03 · 明确标注的试行方案
以下为使全流程可体验而采用的默认方案,并非用户已确认的最终规则:
- 未发送买单确认选品后预占当前及累计可用容量;移除释放,发送转为累计消耗。暂选不预占。
- 不足7天同时阻止云买单新接单;买单自身截止时间同样接受7天校验。既有协作可继续到原截止。
- 创建后供应商固定。继承的协作方式只读;管理设置中可改截止时间与推进节奏。发送后修改截止时间的协作确认机制待定。
- 同一需求Item可以进入多个候选报询价盒子;本稿不限制盒子数,也不将盒子计入买单机会。正式去重和分叉规则待定。
- 盒子创建时确定报价方式和需求集合;首次发送后固定实际报价商品。后续往返只调整数量、单价、商务补充。部分退出、换新、开放内部能力等复杂交互未实现。
- 订单提案由最新发送版本的表达方发起,对方确认成立。角色权限是演示,未接真实身份。提案快照不随后续版本变化。
- 同一买单同一需求暂时阻止多份成立订单,拆量成交、跨供应商分配量、其他候选盒子的后续处理待定。订单成立后不演示收货、付款与履约。
- 企业规则按采购计划/买单/商品库创建场景独立配置。保存规则草稿不生效,发布递增版本;既有正式商品不追溯失效。
04 · 推荐体验路径
A. 采购计划 → 买单 → 报询价 → 订单
工作区 → 查看采购计划 → 创建我的买单 → 选择供应商 → 确认下一步 → 选择采购计划商品 → 勾选一项并确认 → 发送买单/确认模拟操作 → 模拟对方接受 → 创建报询价盒子 → 选择报价方式和商品 → 拟订报价 → 选择能力库商品及单价 → 模拟供应方发送 → 拟订询价 → 调整单价 → 模拟需求方发送 → 发起订单提案 → 确认生成 → 模拟对方确认成立。
B. 云买单接单
采购计划 → 创建云买单 → 确认下一步 → 选品 → 上架 → 模拟供应商接单 → 选择范围内供应商和商品 → 生成已接受的买单;再进入报询价。
C. 独立买单与Assessment
我的买单 → 直接创建 → 无可见范围 → 选择供应商 → 编辑商务 → 创建商品 → 保存草稿 → 发送会提示先保存为正式 → 编辑/Assessment → 保存为正式。也可从商品库选择,既有正式状态直接继承。
D. 机会耗尽
工作区 → 加载6/9机会演示 → 查看商品机会明细 → 进入其中三个买单,分别结束商品协作 → 当前从6降为3、累计仍为6 → 从该示例计划创建云买单并选中商品,上架后让供应商7、8、9接单 → 当前6、累计9 → 再退出也不能新增。
E. 企业管理
Global右侧“企业管理” → 选择买单创建场景 → 设置英文名称必填或最低有效参数数量 → 保存草稿/发布 → 在独立买单新建商品,验证字段提示和Assessment拦截。
05 · 中间件状态规范
| 状态 | 选择框 | 说明 |
|---|---|---|
| 可选 | 正常空框 | 内容和机会均符合要求。 |
| 本次暂选 | 品牌色勾选 | 允许反选,确认前不写入。 |
| 其他未发送买单占用 | 灰色勾选,禁用 | 只能回原买单移出商品,释放预占。 |
| 同供应商曾发送 | 灰色勾选,禁用 | 退出也不可重选;SidePanel可读历史买单。 |
| 机会已满,当前供应商无历史 | 禁用空框 | 直接显示当前名额或累计机会原因,商品阅读仍开放。 |
全选跳过不可选项并告知数量;历史灰勾不计入本次已选。当前协作、累计消耗、草稿预占分开展示。云上架本身不消耗。
06 · 字段提示与报错
| 字段/动作 | 规则 | 提示或报错 |
|---|---|---|
| 单据名称 | 必填,1–100字(试稿) | 单据名称需为1–100个字符 |
| 截止时间 | 有效时间、来源上限、剩余至少7天 | 不能晚于采购计划截止时间/距截止不足7天 |
| 供应商 | 必选;范围过滤+提交校验 | 请选择范围内的供应商 |
| 商品名称、英文名称 | 均最多100个字符,复用原稿校验函数 | 中文名称禁止控制字符;英文字符、首尾及连续连接符规则沿用原稿 |
| 参数输入 | 每行标题=值,双方非空 | 参数格式需为标题=值,不能留空 |
| Assessment | 按生效规则检查英文名、主图、有效参数 | 请填写英文名称/主图至少N张/有效参数至少N个 |
| 报价数量、价格 | 有限数;数量>0;价格≥0 | 请输入有效单价和正数数量 |
| 报价商品 | 能力库合法ID;发送后不可替换 | 请选择供应能力库商品/已发送后不能替换报价商品 |
| 联系人 | 最多50字 | 当前为文本模拟,正式应关联供应商联系人 |
| 存储失败/并发更新 | 保存失败回滚内存;另一页版本变化拒绝写入 | 其他页面已更新,请刷新后再操作 |
原稿的完整正则库、媒体上传校验和商务十八维度继续保留在交付包。全流程试稿采用缩小表单展示关键路径,并未把所有旧组件重做一遍。本稿创建商品仅可选演示主图,不模拟真实上传;视频和附件上传仍在原稿体验。
07 · 测试与验证
自动规则测试:10组通过,见 tests-flow.cjs;运行命令 node tests-flow.cjs。覆盖7天相等边界、截止及供应商越界、来源商品不可修改、草稿预占释放、同供应商历史去重、4+2→退出3→再接3的6/9计算、动作时重检截止、直接创建Assessment、报价版本和订单快照、报价商品固定及非数值拒绝。
浏览器已验证:采购计划来源创建/选品/发送/接受;供应方商品报价V1、需求方询价V2;订单提案与模拟成立;云上架与接单生成买单;商务全文阅读。移动端采用390px预览进行布局与创建页检查。并发与真实多用户权限并未完成服务端验证。
08 · 实现与交付边界
新入口:flow.html;移动端容器:flow-mobile.html;业务规则:flow-model.js;页面交互:flow.js;样式:flow.css。原 index.html、buy.html、buy-list.html 仅增加新稿入口,其已有业务页面未覆盖。新旧稿使用独立演示数据,不能把旧稿创建的单据直接当成新稿数据继续流转。
原型不具备真实后端授权、跨设备同步、事务级机会抢占、精确金额结算、合同签署或消息发送。正式实现需服务端完成权限、幂等、事务和时区统一;本地版本检查不能替代并发锁。测试结果不代表生产系统验收。
产品体验建议:先对齐一级盒子的商品映射与分叉,再对齐订单提案权、成交量和其他盒子退出规则。此三项会改变结构,优先于细节视觉冻结。