供应链系统页面原型：从业务梳理到状态驱动的完整实践

简介供应链系统页面原型是一套以HTML形式呈现的可视化设计稿目标用户包括业务人员、设计师和开发者用于梳理采购、库存、生产计划、物流配送、销售分销、财务核算及报表分析等核心功能帮助团队在开发前统一界面认知和交互流程。资源包内共299个文件其中87个HTML页面构成主要原型界面126个GIF用于展示动态操作效果43个PNG图标和14张JPG图片提供视觉素材配合JS、CSS样式文件以及3个Excel表格整包仅661KB轻量且便于分发浏览。目前已有1174人学习下载适合供应链系统规划、UI设计参考或教学演示。逐页浏览原型时可看到供应商列表、询价单、库存预警、运输追踪、销售订单、成本分析等典型页面的字段布局和交互细节即使没有完整后端也能直观理解系统间数据流转为后续开发或二次设计提供扎实的参考依据。1. 供应链系统页面原型为什么画了上百张图评审还是说没看懂接到供应链系统页面原型的任务很多人的第一反应是打开原型工具把采购订单、库存台账、配送单这些页面一张张画出来。但真正做过的人会发现评审现场翻车的往往不是配色和交互而是业务人员问出三句话这个状态谁触发这个字段哪里来的我手机上能不能操作页面原型值钱的不是页面数量而是背后那条业务主线是否跑得通。这篇文章就从我实际做供应链系统页面的经验出发讲清楚从业务梳理、页面编排到交付开发的完整路径以及那些只有上手后才会踩到的坑。2. 先梳理业务边界再画页面供应链原型的核心是流程不是图2.1 从角色视角拆解页面清单而不是按菜单抄一遍我见过太多项目拿到旧系统的菜单树就开始画采购管理、库存管理、配送管理每个菜单下面一堆子页面画了一百多张图业务评审却直接否掉因为这不是我们的流程。原因很简单旧系统的菜单是按功能模块组织的而业务人员的日常工作是按角色任务组织的。采购员每天早上第一件事是看待审核的请购单仓库主管关心的是今天有哪些到货计划配送文员关心的是哪些订单要拆车。你按功能模块画页面等于把业务人员的工作路径拆碎了。所以我在启动任何供应链页面原型前会先做一件事列角色清单。角色核心任务对应页面采购员请购、下单、催货请购单列表、采购订单列表采购主管审核请购、审核订单审批中心、请购单详情仓管员收货、上架、盘点、拣货收货单、库存查询、盘点单配送文员派车、拆单、异常登记配送单列表、配送单详情财务结算对账、发票匹配结算单、供应商对账管理层看采购和库存全局工作台、数据看板每个角色对应一张任务卡片把他今天要完成什么写下来再映射到页面。这样页面清单就不是从菜单抄出来的而是从任务推出来的。做法上我会给每个角色发一张空白表格让他们按频率列出日常操作高频任务对应的页面做成一级入口低频维护类页面收进二级菜单。这个步骤不要省它是后面所有页面的地基。2.2 用状态流转推导页面跳转而不是凭空画线页面之间的跳转关系本质上是单据状态在驱动。采购订单不是一张静态表它有草稿、已提交、待审核、审核驳回、已确认、部分收货、已完成这一串状态。状态一变页面上的按钮和字段就要跟着变。我在画页面原型的第二阶段会把每种单据的状态机整理成一张表这张表比页面本身更重要状态入口按钮可执行操作目标状态草稿编辑、提交提交审核待审核待审核查看详情通过/驳回已确认/草稿已确认创建收货单生成收货单部分收货部分收货继续收货收完剩余数量已完成已完成查看无操作关闭这张状态表确定后页面上的每个按钮都对应一条状态转换线。画页面时我习惯在按钮旁边加批注写明点击后去往哪个页面、触发哪个状态变更。因为供应链系统的数据是链式的请购单引用物料档案采购订单引用请购单收货单引用采购订单入库单又引用收货单。页面跳转如果只是简单连线开发拿到后照样不知道逻辑。把状态表放在原型文档的第一页开发不用来回问评审也有据可依。2.3 原型的粒度选择低保真和高保真要混着用供应链页面原型最容易犯的错误就是一刀切要么全部画成高保真浪费大量时间在视觉细节上要么全部用线框图评审看不出来实际效果。我的做法是分三档。第一轮评审全部用线框图灰白底色、占位文本、方块代替真实内容目标是确认流程完整、状态齐全、权限没有遗漏。第二轮只对关键页面升级为高保真也就是工作台、采购订单详情、收货单、库存查询这四类页面因为它们是业务方每天高频使用的。第三轮等流程全部确认后再统一视觉样式。为什么要混着用因为供应链系统的评审重点是逻辑不是视觉。业务人员看到精细的页面细节注意力会被带偏到按钮颜色、字体大小上反而把最关键的状态流转和字段来源漏掉了。另一个重要习惯是给每张页面加三个标注状态标注当前页面属于哪个业务流程节点、字段来源标注用户填报、上游单据带出、系统自动计算、权限标注谁能看、谁能改。这三个标注写清楚原型就从示意图变成了开发依据。3. 从骨架到布局菜单、工作台、单据页的页面编排3.1 导航与菜单分组按业务域而非按系统功能供应链系统的菜单结构直接决定业务人员能不能快速找到入口。常见的翻车做法是把系统管理基础档案放在菜单最前面业务人员每次都要翻半天才能进到自己的工作页面。我的分组原则是一级菜单按业务域划分同一个业务域内按作业顺序排列。以一家典型的贸易型供应链公司为例采购在前库存居中配送在后结算收尾。一级菜单二级菜单说明采购管理请购单、采购订单、收货单、采购退货按采购作业的时间顺序库存管理库存查询、入库单、出库单、盘点、库位管理查询放最前作业单据在后配送管理配送单、签收记录、异常登记高频操作靠前结算管理供应商对账、费用结算低频但重要基础数据物料档案、供应商档案、仓库档案维护类统一收口二级菜单的数量控制很关键。供应链业务人员普遍没有耐心去层层展开菜单超过两级就会产生认知负担。如果一个业务域下超过六个菜单项我会考虑把一部分做进工作台的快捷入口而不是全部堆在菜单里。菜单排序做完后再处理页面内部的 Tab 切换。同一种单据的不同状态不要拆成多个 Tab比如待审核采购订单和已确认采购订单放同一个 Tab用状态筛选下拉而不是用多个 Tab 页。因为业务单据的状态是动态流转的拆成 Tab 等于让业务人员在多个入口之间反复跳。3.2 工作台与审批中心把关键指标和待办放对位置供应链系统的工作台不是用来放一堆图表的。业务人员打开系统第一眼想看的是今天有哪些事等我处理哪些单子快超期了。所以我的工作台页面从上到下分为三个区域。顶部是待办区显示待审核采购订单数、待收货数量、逾期未入库数量每个数字可以点进去跳到对应列表。中部是关键指标区放当天的收货完成率、订单按期交付率、库存预警物料数。底部是快捷操作区放高频入口新建请购单、创建收货单、登记异常。待办区的交互参数要具体待办数量超过三位数时显示99而不是让数字撑破卡片待办列表默认按紧急程度排序超过交期或超过预计到货日期的单子置顶并标红。审批中心我也单独设计。供应链系统的审批流往往有多个层级采购主管审核请购运营总监审核大额订单财务审核结算单。如果审批中心只是把待办列表堆在一起审核人还得点进详情才能看到关键信息。我的做法是每张待办卡片直接带出单据摘要申请部门、金额、供应商、交期、附件预览。审批动作放在详情页底部固定区域通过、驳回、转交三个按钮固定显示驳回时必须填写理由。这个细节看起来小但真能减少业务方和采购部门之间的扯皮。3.3 单据页的标准三段式筛选区、列表区、详情区供应链页面原型里占比最高的就是列表详情型页面。我的标准结构是三个区域顶部筛选区、中间列表区、右侧详情抽屉。筛选区是一组强约束。供应链单据列表最常用的筛选条件是时间范围、单据状态、往来单位、关键字这四个超过四到五个筛选条件时要把不常用的收进更多筛选折叠区避免页面顶部被筛选项占满。列表区每行显示单据编号、业务日期、往来单位、金额、状态、操作按钮。字段数量控制在六到八列供应链业务人员真正关注的列没那么复杂字段越多视觉噪音越大。状态列要用彩色标签而不是纯文字配色的规则是红色代表异常审核驳回、逾期未收货、黄色代表进行中待审核、部分收货、绿色代表已完成。详情区我建议用右侧抽屉而不是跳转整页。原因很实际业务人员在列表和详情之间频繁切换抽屉不丢失列表上下文。抽屉宽度取 560px 左右内容按三段组织单据头编号、日期、往来单位、明细行物料、数量、单价、金额、执行记录操作日志、状态变更历史。4. 采购到履约的页面主线采购、库存、配送三类关键页面4.1 采购流程页面从请购到入库的页面衔接采购域是供应链系统页面里链路最长的部分从请购到采购订单再到收货入库中间隔了审核、确认、供应商发货多个环节。请购单页面的关键字段是请购部门、请购人、期望到货日期、物料明细编码、名称、规格、数量。这里有一个经验参数期望到货日期的默认值设为填单当天 7 天因为大部分常规物料的采购前置期在五到十天默认值合理能减少业务人员反复修改。采购订单页面从请购单引用生成这也是原型里必须体现的交互。我的做法是在采购订单列表页面上提供一个从请购单创建的入口点击后弹出请购单选择框勾选后按请购单的行项目带出物料、数量、交期。带出的数据在确认前可以改数量但供应商和单价必须在模板选择后才能编辑。收货单页面要体现部分收货逻辑。供应链里整单一次到货的情况其实少更多是分批发货。所以收货单列表的每一行要有实收数量和未收数量两列点击创建收货单时自动带出该订单的未收数量。如果这个细节没画出来开发很可能做成整单收货仓库用起来只能手工改数量。采购退货页面容易被忽略但实际业务一定会用到。退货单要从原采购订单或收货单关联进入退货原因用枚举下拉而不是自由文本枚举值包括质量问题、延期到货、数量差异、价格争议。4.2 库存页面批次、库位、库存流水一起呈现库存查询页面是供应链原型里最容易画错的地方。很多原型只画了物料名、规格、结存数量这个表格拿去给仓库评审基本会被当场退回。反复出现的问题是缺少批次维度。供应链库存管理的核心是按批次追踪同一物料可能分多个批次入库每个批次有生产日期、有效期、库位、质量状态。我的库存查询表设计如下列名说明是否必填物料编码物料档案主键是物料名称与规格冗余显示是批次号按生产批次区分是库位仓库储位编码是生产日期 / 有效期先进先出依据是可用数量 / 冻结数量拆分显示是这张表只展示当前库存快照。但供应链页面不能只看快照业务人员还要弄清楚某笔数量是什么时候进来的、从哪张单证来的所以库存流水页面要用专门的页面承接。库存流水页面的筛选区按操作类型分类入库、出库、盘点调整、移库、期初导入。每行流水要写明来源单号、操作时间、操作人、变动数量、变动后结存。这些字段在评审时经常被忽略但财务审计和库存追溯都靠它们。批次和库位在原型里的交互细节批次号点击后可以展开批次明细显示该批次的所有库存流水库位字段在仓库作业页面上必须具备扫描输入的支持所以输入框要设计成可聚焦的文本域。4.3 配送与签收页面运单拆分、异常件登记配送域页面链路相对短但涉及的角色多配送文员建单、司机接单、客户签收、异常登记。我通常把页面流程设计为四条分支正常签收、拒收、破损异常、延期未送达。配送单详情页面分为三块。第一块是订单信息包括订单号、收货人、收货地址、预约送货时间。第二块是配送信息包括承运方、司机、车牌、装车时间。第三块是签收与异常记录这区域是配送页面原型设计的重点。正常签收路径简单页面提供确认签收按钮弹窗确认签收人和签收时间。异常路径必须在原型的显著位置画出独立入口不能让人在备注字段里手写异常说明。我的处理方法是配送单详情页右侧放一个异常登记按钮点击后弹出异常类型选择枚举值固定为拒收、货物破损、少件、延期、客户改期每种类型选择后系统自动带出对应的处理流程。另一个高频需求是拆单。一个订单对应多个收货地址或者一个订单货物量太大需要分两车都要做拆单交互。配送单页面提供拆分配送单按钮按行项目勾选需要拆出的明细生成新的配送单号并保留原单号与子单号的关联关系。配送页面上还有一个容易被忽略的点司机端看到的信息和文员端看到的信息不完全一样。司机不需要看订单金额和结算信息只需要看收货地址、联系人、货物件数和重量。如果原型只做一套页面后续做移动端适配时会推倒重来。5. 供应链系统页面原型避坑5个真实踩坑记录5.1 照搬现成软件的菜单业务评审直接否定现象模拟项目X的页面原型按市场上某套供应链管理软件的菜单结构画了一遍采购管理、库存管理、配送管理各有十几个子页面。评审时采购主管看了十分钟说这不是我们的流程我们请购要先经过部门预算确认供应商是按区域分配的不是按物料分配的。原因没有先做角色和任务梳理直接按外部软件的模块结构自嗨。每个公司的供应链流程细节差异很大现成软件是通用设计覆盖不了这家公司的组织结构和权限边界。解决回到第 2 章的流程先找采购、仓管、配送三方各聊 30 分钟把他们的实际作业步骤记录下来再按角色任务重新生成页面清单。现在我做任何供应链原型的第一周只做访谈和流程梳理不开原型工具。5.2 字段来源没有标注开发反复追问现象高保真原型里每张单据页都画了完整的字段。评审顺利通过进入开发阶段后前端开发建了一个群每天问五六次这个字段是你们填的还是系统算的金额用什么单位日期要不要精确到分钟原因原型表达了布局但没有表达字段的数据来源和约束。页面原型对产品经理来说是交互稿对开发来说是需求说明书两者看到的不是同一个东西。解决在关键字段旁边加批注统一用三种标记手填、上游带出、系统计算。再补一个字段说明表列字段名、类型、长度、必填项、取值范围。我的习惯是页面越复杂说明表越要先行否则开发靠猜上线后全是数据问题。5.3 状态流转画漏了已发货到已完成变成黑匣子现象配送单页面画了已发货和已完成两个状态中间没有分支。开发实现后发现客户拒收时配送单无处安放只能自定义一个状态硬塞进代码导致列表筛选条件错乱仓储和财务看到的数据不一致。原因页面原型只画了页面没有画状态机。状态不是页面上的标签而是数据流的控制点漏掉一个状态等于漏掉一条业务流程。解决在原型文档开头加一张状态流转表把每种单据的既有状态、触发动作、目标状态全部列出来。设计验收时我专门有一条自检项从初始状态走到最终状态路径上的每一步都要有对应页面和操作按钮。5.4 只做了桌面端仓库现场根本没有电脑现象高保真原型全部按 1920 宽桌面端设计评审现场仓库主管提了一句我们在货架前收货手里拿的是手机不可能开电脑。当场方案不成立。原因默认业务人员都是坐在电脑前办公忽略了仓储作业岗的实际使用场景。供应链系统一大半用户是在仓库里、货车上、客户侧移动办公。解决关键操作类页面收货、盘点、移库、签收必须做窄屏布局版本图不需要高保真画一份线框说明横向纵向布局即可。如果项目明确要先做电脑端也要在原型里标注移动端适配范围避免开发把桌面端页面直接压缩出事故。5.5 组件样式不统一前端返工改样式改了三周现象同一个供应商选择功能在请购单页面用了下拉框在采购订单页面用了弹窗列表在结算单页面又是另一个样式。前端为了对齐样式加班改了三周视觉上仍不统一。原因画页面之前没有建立组件规范。供应链系统的表单密集、列表密集、弹窗密集同一个交互在多个场景反复出现没有统一规范就是给自己挖坑。解决画页面之前先定义高频组件我自己的模板是固定五件套筛选器条件重置搜索、单据选择器列表弹窗搜索分页、状态标签红黄绿三色规则、操作按钮组主次按钮区分、金额展示千分位两位小数。组件规范定好后后面的每个页面都从这套组件里取用样式基本不会再跑偏。6. 让原型从看得懂到可直接开发的三个习惯6.1 交付前 20 分钟自检清单我养成的习惯是每次交付原型前先按主流程走一遍完整链路采购员发起请购、主管审核、采购下单、仓库收货、配送签收。走完只检查四件事每个按钮是否有去向、每个状态是否有来源、每个字段是否有数据出处、每个操作是否有权限限制。出现任何一处断点当场补标注。这 20 分钟能拦住多数返工。6.2 页面说明表一个页面一张表页面原型图是给人看的页面说明表是给电脑看的。我每个页面附带一张说明表字段至少包含字段名、数据类型、来源手填/带出/计算、必填、权限角色。这个表开发能直接转成数据库和接口的字段清单评审时也能量化核实每个字段的合法性。6.3 用一次完整的主流程演示替代逐页讲解评审演示不要一个页面一个页面平铺选一条完整业务链路从头走到尾请购到采购到收货到入库到配送签收。演示过程中刻意做一次异常操作比如驳回请购单或登记一次拒收让评审看到异常分支的页面表现。一次主流程演示胜过十页截图讲解业务方对流程链路有直观感受开发对状态流转有完整认知。我第一次做供应链页面原型时也翻过车菜单照搬、状态漏画、字段无出处评审会上被业务和开发两头问住。后来养成先列角色、再画状态、最后补字段的习惯后评审效率明显提升开发拿到手不反复追问。做供应链原型真正的功夫在页面之外把流程和规则想清楚页面自然站得住。希望帮到你。本文还有配套的精品资源点击获取