企业官网建设流程全解析

1. 企业能源管理系统为什么值得用Axure做一版高保真原型

1.1 能源管理项目里的两个典型断点

在企业能源管理系统这个领域待久了，你会看到一种很常见的场面：业务部门说“我要实时看到全厂水电气热的用能情况”，开发部门理解的是“再堆一个报表页面”；管理层说“我要能效诊断”，但问到底层规则是什么，会议室里往往十个人有十种答案。这些断点不是数据问题，也不是算法问题，而是需求没有固定在可验证的界面上。

Axure高保真原型能解决这个问题的原因很朴素：它把用能采集、用能检测、用能分析、能效诊断、能源调控、能源绩效考核这一串抽象概念，变成屏幕上可以点击、可以输入、可以判断状态的交互对象。业务人员看到原型会说“对，这就是我要的”；开发人员看到原型会说“原来这里的跳转关系是这样”。一个高保真原型，实际承担的是甲乙双方之间的“通用语言”角色。

我刚接触能源管理项目时犯过一个错误——拿到需求后直接画静态页面，把注意力全放在配色和图标上。结果评审会上，甲方问我“这个实时看板的数据多久刷新一次”，我说“原型里体现不了”；甲方又问“诊断出异常后怎么下发调控”，我也答不上来。那一版原型基本白做。后来我把原型推进到“可点击、可演示、可带数据跳转”的高保真程度，评审效率一下高了很多。

1.2 高保真原型在投标、需求评审、开发交付里的三个角色

高保真原型在不同阶段发挥的作用完全不同，不是简单“提前做一遍UI”。

首先是投标演示。能源管理系统投标时，客户想看的不是一张功能列表，而是“这个系统装到自己工厂里长什么样”。用Axure把厂区总览、实时检测大屏、能效诊断报告、考核排名做成一连串可操作的页面，客户可以亲手点一点，比PPT演示的说服力强很多。

其次是需求评审与边界确认。能源管理项目最大的隐患是需求边界模糊。比如“用能分析”到底分析什么？是分介质趋势、分车间同比，还是设备单位能耗对比？原型一旦放出来，边界就清楚了。每个图表、每个筛选条件、每个导出按钮，都是对需求的一次强制澄清。

最后是开发交付参照。高保真原型固定了页面元素、交互状态、跳转链路和提示文案，开发和测试可以直接拿它写用例、估工时、做验收。实际项目中，我把高保真原型作为需求规格说明书的一部分归档，后面扯皮的情况少了一大半。说白了，原型不是设计稿，它是一份可以被全员读懂的交互契约。

2. 先把功能装进一张图：用能采集与检测原型的总体框架搭建

2.1 从能源介质流向反推原型页面

做企业能源管理原型，很多人一上来就画“驾驶舱大屏”，这是本末倒置。正确的切入点应该是先梳理能源介质和数据链路。

工业现场常见的能源介质包括电、水、天然气、蒸汽、压缩空气、工业氮气等。每一种介质都有自己的计量点、表计型号和数据采集频率。因此原型里至少需要“表计台账、采集器状态、数据质量校验”这些隐蔽但关键的页面。哪怕甲方没有明确提出，也要放出来——它们恰恰是后续能否做准用能分析的基础。

数据链路一般是这样的：计量表计把脉冲或Modbus信号传给采集终端，采集终端通过边缘网关上报到能源管理平台，平台再完成数据清洗、入库和展示。Axure原型不需要画出全部技术拓扑，但要在“采集状态”页面里体现这些层级，比如一张列表里能区分“表计离线”“网关断连”“数据超时未上报”三类异常。否则实时检测看板上的数字看起来再漂亮，也只是空中楼阁。

2.2 用Axure的页面面板搭建导航骨架

打开Axure RP9，我建议先把左侧Pages面板理解成整个能源管理系统的信息架构。

一个标准的导航层级可以是：总览驾驶舱、用能检测、用能分析、能效诊断、能源调控、能源绩效考核、系统管理。每个一级菜单下再挂二三级页面。这个结构看起来像普通后台，但能源管理系统有个特殊性——它的页面之间不是孤立的，而是从大到小逐层钻取的关系。比如总览驾驶舱的一个车间卡片，点击后跳到车间用能检测页；检测页里的异常点位，点击后跳到点位详情和诊断结果页。

在Axure里实现这种关系，一是靠页面树本身的层级，二是靠主页面里放置全局导航，然后用“页面交互”面板给导航项设置点击跳转。全局导航建议做成母版（Master），这样后面新增页面时不需要重复画导航，改一次母版全部同步，这是很多新手最容易忽略的高效操作。

2.3 实时检测看板的数据项设计

实时用能检测看板是原型里最容易“做得好看”但也最容易“空有其表”的页面。我整理了一份常用数据项对照，做原型时可以直接套用：

设计这些区块时，关键是不要用随便填的数字。高保真原型里出现的数值要符合真实量级：一个中型制造工厂的日用电量至少是几万度电，车间数量至少在五到十个。如果你在原型里写“电量1234 kWh”，懂行的人一眼就看穿，整个原型的可信度都会打折。

实时刷新效果在Axure里通常用“动态面板 + 定时器”实现。面板放曲线或表格区域，添加“载入时”交互，设置每隔若干秒切换面板状态，或者通过中继器重新加载数据。在原型演示阶段不需要真实接口，只需要让客户看到“数据会动”，动态面板就够用了。

3. 用能分析和能效诊断：把图表原型做成可讨论的业务方案

3.1 分析页面不是仪表盘复制粘贴

很多初做能源管理原型的人，会把用能分析页面做成“又一个看板”：左边一个饼图，右边一个柱状图，下面再来一堆折线。这种页面评审时最容易收到的反馈是“不够专业”，因为图表之间没有逻辑关系。

真正的用能分析应该围绕维度组织页面。按时间维度有日分析、月分析、年分析；按空间维度有厂区、车间、工序、设备；按介质维度有电、水、气、热；按对比维度有同比、环比、目标值对比、行业对标。做原型时，我习惯把页面分成左侧筛选区、中部图表区、底部明细列表三块，所有图表跟着筛选条件联动。

图表中最少要放这四个内容：趋势分析、占比结构、对比排名、单位能耗。单位能耗是能源管理里的核心指标，计算公式是：单位产品能耗 = 综合能耗 ÷ 合格产品产量。原型里一定要把这个公式展示出来，因为不同行业、不同产线的计算范围差异很大，需要提前和甲方确认“综合能耗包含哪些介质”“产品产量用什么口径”。这个问题不确认，后面所有节能结论都可能被推翻。

3.2 能效诊断规则与交互状态设计

能效诊断是能源管理系统的“大脑”，也是Axure原型里最能体现业务深度的模块。诊断逻辑本身在真实系统里可能是算法模型，但原型阶段需要先把规则可视化出来。

我常用的做法是：在原型页面里放一组“诊断规则配置”表格，列出每条规则的触发条件、阈值、判定级别和建议措施。比如：

• 设备空载率超过20%，判定为“空载浪费”，建议优化启停策略。
• 峰段用能占比超过60%，判定为“峰谷结构不合理”，建议调整错峰生产计划。
• 单位产品电耗连续3个月上升超过5%，判定为“能效下降”，建议启动专项审计。
• 管网压差超过设定值，判定为“可能泄漏”，建议排查管网分段。

在Axure里，可以用动态面板的多个状态来模拟诊断结果：正常状态用绿色标签，提醒状态用黄色标签，异常状态用红色标签。点击“开始诊断”按钮后，通过条件的判断给不同点位切换状态。这一版做出来后，甲方会非常认真地跟你讨论每一条阈值是否合理——这正是你要的效果，把抽象的诊断算法变成可谈判、可校验的内容。

3.3 报表导出、钻取与异常定位

能效诊断结果不能只停留在页面上，业务方需要把它导出成报告，也需要从一张汇总表逐层钻下去找到问题源头。Axure原型里必须把这些操作路径打通。

钻取交互最简单的实现方式，是在图表上添加热区，单击后切换到一个新页面或弹窗。比如点击饼图里的“3号车间”，跳到该车间的分介质用能页面；再点击“电耗异常”，跳到对应表计的实时曲线页面。每钻下去一层，原型都要告诉观看者：数据是从哪一层聚合的，最底层又能落到哪个物理点位。

导出功能不需要真的生成Excel，但要在原型里模拟“点击导出按钮后出现设置弹窗，包含时间范围、报表类型、导出格式”。这看起来是小交互，却是评审时最容易触发需求的地方。很多甲方在看过导出交互后，会提出“我要一键导出全厂日报”“我要自动定时推送月报”，这些都是后面研发必须响应的功能点，早发现比晚发现好一万倍。

4. 能源调控与绩效考核：闭环流程在Axure里的交互表达

4.1 能源调控流程从指标下达到执行反馈

能源调控模块做起来最复杂，因为它的核心不是某个页面，而是一个业务闭环。Axure原型能否表达好这个闭环，直接决定了开发阶段的需求质量。

调控流程通常包括五个环节：目标制定、方案生成、指令下发、执行反馈、效果评估。原型设计里，我建议把每个环节拆成独立页面，用页面流转把闭环跑通：

1. 第一步，能源管理员在“目标制定”页面填写本月用能定额、峰谷策略、设备启停计划；
2. 第二步，系统依据能效诊断结果生成调控方案，列出调整前后的预期节能量；
3. 第三步，点击“下发”后，指令进入车间任务列表，并以状态标签展示“待确认、已接收、执行中、已完成”；
4. 第四步，车间负责人反馈执行结果，包括实际执行起止时间、现场照片或备注；
5. 第五步，能源管理部门事后查看执行前后曲线对比，评估节能量并归档。

在Axure里实现时，可以用中继器做任务列表，用“设置文本”和“设置面板状态”来更新状态标签。为了让客户快速理解流程，也可以在主流程页面底部放一个步骤条，每完成一步高亮一步。这比单纯画五个页面更能传递“调控是一个闭环”的价值。

4.2 绩效考核指标：先算清楚再画表

能源绩效考核是管理层最关心的模块，也是最容易在原型里被做成“花架子”的地方。正因为如此，画原型前一定要先把考核口径列清楚。下面是我在一版项目原型里用过的指标对照表，可以当作参考：

这些指标放到Axure原型里，不只是做一张排名表。我建议在考核页面顶部加入“指标口径说明”的折叠面板，点击就能展开公式和统计周期。这样做的好处是，评审会上不会再听到“这个数据到底怎么来的”这种问题，因为口径已经写在了界面里。

绩效考核还要和角色权限绑定。部门经理只能看自己部门的排名和明细，厂级管理员可以看全厂并对下属部门发起评分调整。Axure里可以用全局变量保存当前登录角色，再通过条件判断控制页面元素的可见性。不必做真实登录，但需要让客户体验到“不同账号看到的东西不一样”。

4.3 用Axure模拟“诊断—调控—考核”的完整闭环

单独看能效诊断页面、能源调控页面、绩效考核页面，每个都自洽，但合在一起未必是闭环。我建议在原型中增加一个“闭环演示”入口，用几个步骤页串起完整业务：从大屏发现异常，到诊断页给出结论，到调控页下发指令，再到考核页看到改进结果。

这个入口放在总览驾驶舱的侧边栏，名称就叫“典型场景演示”。实际做的时候，我通常选三个典型场景：某车间峰段电耗超标、某管网压差过大疑似泄漏、某设备空载率过高。点击场景后，原型自动跳到对应页面，并用高亮框和浮层提示一步步引导操作。客户看完这种演示，基本就能理解这套系统不是一个报表工具，而是可以真正帮助工厂节降成本的管理工具。

5. 高保真原型实操中的关键细节与选型思考

5.1 图表组件自己画还是用现成组件库

Axure画图表，有三种路线：用原生矩形和线条拼、用中继器动态生成、加载第三方组件库。我的实际经验是，不要偏执地只用某一种。

原型初稿阶段，我通常加载一套组件库，比如Ant Design或Element的Axure组件库，先把整体风格拉起来。组件库里的表格、按钮、表单样式都比较规范，能省很多重复劳动。不过图表类组件，尤其是折线图和柱状图，组件库往往做得比较死，最稳妥的是用一个动态面板放图表图片，或者用中继器生成模拟数据。

对于实时曲线，我更倾向于用现成的Axure图表插件或SVG图形加状态切换。如果只是演示，放一张在不同状态下切换的曲线图就够用了；不一定非要用中继器逐点绘制。做高保真原型的核心是让评审聚焦业务，而不是炫技。把时间花在堆交互细节上，不如把时间花在梳理数据口径上。

5.2 原型的数值、单位和时间粒度要提前统一

能源管理系统对数字的严谨度要求很高，原型里如果出现单位混用，会被懂技术的甲方立刻抓到。比如电能既要展示kWh，也要能换算为tce（吨标准煤）；水量可能是m³，蒸汽可能是t。高保真原型里一定要在最醒目的位置标注单位，并且把换系数或换算逻辑放到注释里。

时间粒度也要统一。同一个页面上的事件线，至少要让客户清楚它是“实时、小时、日、月”中的哪一个。我见过一套原型里，总览写“昨日用电量”，车间页写“本日累计”，设备页写“当前功率”，三个时间口径混在一起，客户看半天也拼不出完整画面。后来我加了一个“全局时间筛选器”，放在页面顶栏，所有卡片和图表都跟随它变化，整个原型的逻辑一下清晰了。

5.3 高保真不等于每个按钮都做交互

高保真原型常被误解为“所有按钮都能点、所有页面都要完整”。现实是，一套几十个页面的能源管理系统，不可能也没必要做到全交互。

我的划分原则是：主价值链上的关键页面做高保真，包括总览、实时检测、分析、诊断、调控、考核；其余配置类页面做中保真，仅展示字段和布局。对于非重点页面，可以在原型顶部打上“示意页面，以最终需求为准”的标识。这样既能控制工时，又能把甲方注意力集中到核心业务逻辑上。

前阵子有朋友问我，Axure能不能跟AI结合起来提高效率。我的体会是，AI可以帮助生成文案、补页面说明、整理一些列表数据，但能源管理这种强业务场景，AI替代不了你把一条条诊断规则和考核口径想清楚。工具只是放大器，前提是你自己得有清晰的业务判断力。

6. 我在能源管理系统原型上踩过的几个坑

6.1 把系统原型做成了“PPT式大屏”

我第一次接到能源管理原型项目时，花了将近一周时间打磨总览驾驶舱的视觉：深色背景、发光边框、流动光效，看起来确实唬人。结果评审时客户说“好看，但我想看的车间用能效率在哪里？”我意识到，我把大量精力放在了视觉效果上，却忽视了完整的业务流程。

后来我把大屏压缩成一个入口页，把省下来的时间全部投到分析和调控流程上。高保真原型的第一目标是“业务说得通”，其次才是“视觉过得去”。尤其能源管理系统里那种跨页面、跨角色的流程，比单个页面的美感重要得多。

6.2 动态面板嵌套过深，交付后没人能维护

Axure里动态面板是模拟复杂交互的利器，但嵌套层级一旦超过三层，项目交接时就容易变成灾难。有一次我为了做一个设备详情浮层，嵌套了三层动态面板加两层中继器，结果团队同事接手改一个小文案，找了半天都没找到对应元件。

现在我的习惯是：能用一个动态面板解决的问题绝不用两个，嵌套层级控制在两层以内，关键面板和元件都按“模块_功能_属性”的格式命名。比如“panel_电表曲线_容器”“btn_导出_默认”。命名看起来琐碎，但在大项目中能省下大量沟通成本。

6.3 没有提前和甲方确认图表口径

有一次原型评审，甲方问：“你这个车间排名是按总用电量排的，还是按单位产量能耗排的？”我这才发现，原型里只写了一个“能耗排行”，没写清楚口径。如果开发拿到这个版本去实现，大概率会做成总量排行，而管理层真正关心的是单耗排行。

从那以后，凡是页面里出现带计算性质的指标，我都强制要求自己在图表旁加一行注释，或者放一个“指标口径”小图标。点击后弹出说明，把公式、取数范围、统计周期写清楚。这既逼着我提前确认需求，也减少了后续开发返工。

6.4 工具版本和授权管理要提前统一

最后提一个容易被忽视的问题：项目协作时，团队成员的Axure版本、组件库版本如果不一样，打开原型文件后经常会出现样式错乱、元件丢失、母版失效。尤其当原型文件超过几十页时，版本不一致带来的修复成本远大于画图成本。

我的建议是，项目启动前就统一使用正式授权的Axure RP9及以上版本，组件库、母版、共用中继器都放在固定目录里，并约定好谁负责最终合并。工具合规这件事别马虎，一方面是为了规避版权风险，另一方面是为了交付时文件能稳定打开。省在这里的每一点时间，最后都会变成项目交付里的风险。

能源管理系统的高保真原型设计，说到底是“用界面逼着所有人把问题想清楚”的过程。把用能采集、检测、分析、诊断、调控、考核这些模块完整串起来之后，客户看到的就不只是几个漂亮页面，而是一套能落在工厂现场运转的管理逻辑。这也是我在多个项目里反复验证下来、觉得最值得投入时间的地方。