
简介这是一份面向制造企业生产管理人员、产品经理与UI设计师的MES界面原型文档覆盖从设备监控、质量追溯到成品打包的一体化生产管理场景可辅助团队完成需求梳理与界面评审。资源为单个docx文档约1.51MB以文字描述了十大功能模块的页面布局与交互逻辑包括OEE数据分析日历插件、整线OEE对比、停机事件批量录入、停机原因库配置、毛坯信息录入、返工返修管理、在制品过站查询、报废事件管理、良率统计、成品箱号与轴号互查等。每个模块均标明了适用角色与具体操作方式例如按日期刷新所有设备OEE、复选设备时仅显示共有停机原因、工件ID反查箱号等便于不同层级用户直接落地。此外文档对OEE分析、停机原因库、报废事件等提供了可增删改的配置说明并区分高层、中管、操作者权限能帮助读者快速理解MES中的数据流与权限边界降低原型设计的沟通成本。目前已有840人学习适合正在规划MES系统原型或希望借鉴成熟功能设计的从业者。1. MES界面原型先回答“给谁看、解决什么”工厂里的数字大屏做得再炫生产异常单没人点确认数字孪生也变不成产能。这两年国内工厂更务实的共识是先上MES系统把工单、物料、设备跑顺比堆一套数字孪生更能直接解决问题。而MES能不能跑顺第一步往往不是选数据库不是定服务器配置而是一份界面原型。MES界面原型就是把车间业务翻译成可评审页面的一层纸工单怎么开、报工怎么点、异常怎么弹、追溯怎么查。这份原型在MES产品经理、实施顾问和车间主管之间来回改上几轮才轮到开发写代码。「MES界面原型.docx」这个标题很典型——你手里的不是Axure源文件而是通用办公软件里的页面蓝图。Word原型看起来朴素却是工业软件项目里最容易被甲方签字的交付物。这篇内容适合正在做MES选型或启动自研的团队也适合刚接手车间信息化项目的产品经理。按一线工程师的做事顺序从业务对象拆到落地实现把为什么做、怎么做、坑在哪一次讲完。2. MES界面原型先锁定核心业务工单、物料与设备状态2.1 工单状态机是MES界面原型的骨架界面原型设计的起点不是画框而是列状态。MES核心业务绕开工单展开工单在系统里每走一步页面上的按钮、颜色、字段可用性都跟着变。很多原型画得花哨但状态机漏了「暂停」和「强制完工」开发做出来才发现异常流程没法走。我一般会先拉着车间计划员走一遍从「工单下达」到「完工入库」的完整场景把每一步的操作人和等待节点标出来得到这样一张状态迁移表工单状态触发动作操作角色对应原型页面已创建ERP下发或人工新建计划员工单创建页已下达点击「下达」按钮计划员工单列表页生产中首站报工成功操作工报工页面已暂停点击「暂停」并填写原因班组长工单详情页已完工末站报工且数量≥计划量操作工报工页面已强制完工超差审批通过生产主管异常审批页已关闭财务月结归档系统自动工单查询页这张表直接决定了原型里哪些按钮在什么状态下置灰、哪些字段只读。比如「强制完工」这一步页面必须弹二次确认框并要求上传审批单号否则车间会拿它绕过所有质量拦截。2.2 MES系统功能模块的六对象两主线把状态机画完再拆MES系统功能模块就有抓手了。不管哪个行业的MES界面原型服务的业务对象都跑不出六个工单、物料、设备、人员、质量、追溯。它们之间有两条主线在串物流主线物料批次从仓库到线边再从工位到成品库每个环节要有「扫谁、扫哪、何时扫」的交互设计。信息流主线工单带着BOM和工艺路线往下走每道工序回传报工数量、不良数和设备参数。先有这两条线再有页面。我自己做原型前会先画一张字段表草稿确认每个页面的数据从哪来。比如工单创建页的字段表是字段样例值来源原型中的表现工单号WO20250601-001ERP下发只读文本框产品编码PCB-A101BOM主数据下拉选择计划数量5000人工录入必填数字框计划开始时间2025-06-03 08:00人工选择日期时间控件优先级P1计划员判断单选按钮组这张表要跟页面放在同一份文档里一页对一表。字段来源写「ERP下发」开发就知道要做接口同步而不是手工录入写「人工录入」就要做必填校验和取值范围限制。很多MES项目开发到一半推倒重来不是因为页面画得不好而是字段口径没在原型阶段对齐。2.3 用字段表草稿堵住“原型先行”的坑界面原型容易犯的错是只关注布局好不好看不关注字段从哪来、往哪去。车间主管要的是页面上能看到「在制品数量」IT问的是这个数从哪张表算出来——原型阶段不回答这个问题开发阶段就要反复扯皮。我一般会把字段表草稿再做一份机器可读的版本跟Word原型放在一起{ workOrderNo: { source: ERP下发, required: true, constraint: 正则表达式: ^WO\\d{8}$ }, planQty: { source: 人工录入, required: true, constraint: 0 planQty 999999 }, productCode: { source: BOM主数据, required: true, constraint: 必须存在于product表中 } }这段JSON的作用不是给车间看的是给开发看的。source对应数据来源constraint对应后端校验逻辑后面做接口设计时直接翻译成参数校验规则。Word原型里的人看表格机器读的看JSON两边一对照界面原型才算真正闭环。3. 用Word做MES界面原型的3种工艺从静态布局到可点击演示3.1 为什么工业软件圈仍然用Word交界面原型互联网产品经理习惯用Axure或Figma但MES、WMS这类工业软件项目甲方评审会常出现的角色是生产副总、车间主任、设备科长——他们不一定装Axure甚至不习惯看高保真HTML。而Word几乎人人都有还能走OA审批、盖章归档、作为合同附件。这不是技术落后是交付物要适配评审链路的现实。我见过不少项目MES产品经理花两周做了个Axure高保真评审时甲方打开却说字体太小、逻辑跳转看不懂最后又退回Word重画一遍。反过来Word原型画得规整每一页有编号、有版本号、有字段说明评审会过完直接在页脚签字这个版本就成了开发依据。3.2 用表格和文本框搭出可标注的页面栅格Word的排版能力不足以支撑自由拖拽但做界面原型够用。关键是别把Word当画图板要把它当栅格系统用。我通常的做法是1. 页面设为A4横向页边距上下左右都调成1.5cm内容区接近16:9 2. 用「插入-表格」画一个3行6列的框架 3. 第1行放页头系统Logo区、当前登录用户、车间名称 4. 第2行放左侧导航和右侧内容区导航单元格用灰色底纹 5. 第3行放页脚版本号、日期、页面编号、交互说明输入框和按钮怎么画输入框用「单行文本框」按钮用「带边框的小表格单元格」或者「形状-圆角矩形」这是Word原型里最接近真实控件的手感。字号上页面大标题用14到16磅加粗字段标签用9到10.5磅宋体保证评审会上投影出来能看清。一个常见坑是有人用Word的「自动编号」给页面排序结果插一页全乱所以页面编号我从来是手敲「P01、P02」或者用表格单独一列维护。3.3 从Word导出可点击HTML原型的命令路线Word原型静态评审没问题但车间操作工看不懂跳转关系还需要一个能点的版本。有两条路比较可靠。第一条是Word直接导出PDF利用Word里的「标题1」样式生成PDF书签评审时左侧目录点着走。这个零成本但不支持真正的页面跳转。第二条是转HTML用Pandoc一条命令搞定# 把Word原型转成可点击演示页 pandoc MES界面原型.docx -t html5 --self-contained \ --metadata titleMES界面原型v1.2 \ -o MES-UI-Prototype.html--self-contained会把图片和样式内嵌进单个HTML文件发给甲方不用打包。要说明的是Pandoc对Word里的文本框兼容性有限所以原型里的控件最好用表格边框来画真正的内容控件留给HTML版本去实现。如果要控制每一页的点击路径更稳的办法是把每页截图贴进HTML用锚点跳转nav a href#page-workorder工单管理/a a href#page-report报工看板/a a href#page-quality质量检验/a /nav section idpage-workorder img srcimg/01-工单管理.png alt工单管理原型页 /section这种做法对MES这类流程型系统特别合适原型页与页之间的跳转本来就有限用锚点做一二级导航足够用了。页面截图统一用Word导出PDF后转PNG保证所有页面的比例一致演示时不会出现页面大小跳变的观感问题。4. 从界面原型到落地实现开源MES系统carbon本地部署与页面映射4.1 为什么选carbon当原型落地的参考实现界面原型确认后团队要决定下一步。现在很多中小工厂不选商业MES而是先找一个开源项目做二次开发验证成本低且能快速看到真实物料。开源MES系统carbon是这条路径里比较完整的参考实现它自带工单管理、物料批次追溯和设备数据采集的底层模型前端也提供了可配置看板正好可以用我们的Word原型逐页对照。在工厂应用里数字孪生那种可视化往往排在MES系统之后原因很简单数字孪生的数据源就是工单、报工、设备这些基础记录基础记录没跑通可视化就是空壳。所以拿carbon当参考重点不是用它上线而是看它的数据模型和页面交互如何处理异常分支反过来补我们原型里漏掉的逻辑。4.2 carbon本地部署的最小命令集先在一台2核4G的测试机上把carbon跑起来我用docker compose因为依赖项少一条命令起全套。需要准备一个docker-compose.ymlservices: db: image: postgres:15 environment: POSTGRES_DB: mes POSTGRES_USER: mes POSTGRES_PASSWORD: mes123 volumes: - ./data:/var/lib/postgresql/data app: build: . ports: - 8080:80 depends_on: - db然后按顺序执行# 拉取carbon项目代码到本地目录 git clone carbon项目仓库 cd carbon # 启动数据库和应用服务 docker compose up -d # 查看应用日志确认没有启动报错 docker compose logs -f app # 打开浏览器访问 # 默认地址http://localhost:8080depends_on只保证数据库容器先启动不保证数据库已经就绪所以应用第一次启动如果报数据库连接失败等10秒再docker compose restart app就好。登录成功后先别急着点功能到后台把工序和工位的基础数据建好再用手工方式创建一个测试工单。这一步走通说明原型里的「工单下达」跟实际系统的数据流转对上了。4.3 把Word原型的工单页映射到数据表与接口carbon跑通后把Word原型里的每一页拆成「页面-功能模块-数据表」三层映射。业务字段直接对应到数据表字段原型阶段定的校验规则也一并写进DDL。建表语句可以加约束来实现-- 原型里“计划数量”字段落到工单表的约束示例 ALTER TABLE work_order ADD COLUMN plan_qty NUMERIC(10,2) CHECK (plan_qty 0);如果原型的JSON草稿里规定了工单号格式这里再加一个检查约束会更严谨ALTER TABLE work_order ADD CONSTRAINT chk_wo_no_format CHECK (work_order_no ~ ^WO\\d{8}$);这一步做完应整理出一张原型页与后端模块的对应关系表Word原型页carbon功能模块核心数据表/接口工单创建页Work Orderwork_order / POST api/work-orders报工看板Production Reportingproduction_lot / POST api/complete-operation质量检验页Quality Controlinspection_record / POST api/inspections追溯查询页Traceabilitymaterial_lot_history / GET api/trace拉开这张表项目的工作量就清楚了工作量不在页面画多少而在于字段映射和接口数据契约。原型阶段多花一周把字段来源写清楚落地阶段能省下开发返工的时间。5. 原型走查清单用SMT行业MES方案验证页面颗粒度5.1 SMT行业MES方案必须出现在原型里的3个页面SMT行业换线频繁、物料卷盘标识依赖高MES系统的页面颗粒度要求比一般装配行业更高。用SMT行业MES方案的思路反推原型是否合格重点看三个页面页面核心交互走查要点上料防错扫码枪扫描料盘与飞达料号扫错时页面是否弹阻塞提示是否要求双人确认钢网管理钢网领用、清洗、寿命计数是否显示使用次数与剩余次数超寿命是否锁定炉温曲线回流焊实时温度与标准曲线叠加曲线超出上下限时是否自动触发不良批次标记拿上料防错页来说原型里如果只画了「扫码成功」的绿色提示就漏掉了关键场景。车间里最常见的不是扫对而是扫错——料盘贴错、站位看错、操作工换线时拿混。页面必须设计「扫码不匹配」的红牌拦截并给出原因分类选项比如「料号错误」「站位错误」「批次混料」。这些异常分支画没画直接决定这个页面是演示Demo还是能上线的东西。5.2 用一行真实工单数据回填原型我在原型评审前有个习惯从客户ERP里导出一笔真实工单把真实值逐项填进Word原型的字段里看页面装不装得下。这个动作能暴露三类问题一是字段长度不够比如ERP的物料编码是18位原型里画了个15位输入框二是单位混乱有的系统用「件」有的用「盘」原型上没标清三是状态名对不上比如车间叫「在制」原型里写「生产中」操作工会觉得系统不是给他用的。具体做法是把真实工单的字段值做成一个对照表一列是ERP的真实值一列是原型页面显示值逐项核对。这种走查比开十次评审会都有效因为车间主管看到自己熟悉的数据出现在页面上才有能力判断流程对不对给他一堆「XX001」这样的假数据他只能点头说“差不多”。5.3 把页面清单转成验收测试用例编号原型定稿后最后一件事是把页面清单转成验收测试用例并且编号规则要同源。我的做法是给每个页面分配一个前缀编号后面所有环节共用WO-CREATE-01 工单创建-正常路径 WO-CREATE-02 工单创建-计划数量超限 WO-CREATE-03 工单创建-产品编码不存在 RP-COMPLETE-01 报工-数量大于剩余计划 QP-INSPECT-01 质检-不良数超阈值触发评审这样设计的原因很直接开发提测时拿这个编号说事测试按编号写用例验收时甲方点着编号看页面三方用的是同一套语言。原型做完不等于交付完成要能顺着页面编号一路追溯到测试结果才算闭环。评审会通过的原型每一页都要有人签字确认页脚写上确认人、日期、版本号这份Word文档才是后续所有开发活动的依据。本文还有配套的精品资源点击获取