ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Axure高保真原型设计:企业能源管理系统从需求到交互落地的关键实践

Axure高保真原型设计:企业能源管理系统从需求到交互落地的关键实践 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 实时检测看板的数据项设计实时用能检测看板是原型里最容易“做得好看”但也最容易“空有其表”的页面。我整理了一份常用数据项对照做原型时可以直接套用看板区块核心内容数据格式示例刷新策略总能耗卡片当日电量、水量、气量折标煤合计125.6 tce每5分钟刷新分介质实时曲线电力负荷、水流量等电流/功率曲线每10秒滚动车间排名各车间当前用能占比占比 升降箭头每15分钟聚合设备运行状态运行、停机、待机、报警状态标签 色块实时推送异常告警列表越限、离线、数据缺失告警级别 时间滚动追加设计这些区块时关键是不要用随便填的数字。高保真原型里出现的数值要符合真实量级一个中型制造工厂的日用电量至少是几万度电车间数量至少在五到十个。如果你在原型里写“电量1234 kWh”懂行的人一眼就看穿整个原型的可信度都会打折。实时刷新效果在Axure里通常用“动态面板 定时器”实现。面板放曲线或表格区域添加“载入时”交互设置每隔若干秒切换面板状态或者通过中继器重新加载数据。在原型演示阶段不需要真实接口只需要让客户看到“数据会动”动态面板就够用了。3. 用能分析和能效诊断把图表原型做成可讨论的业务方案3.1 分析页面不是仪表盘复制粘贴很多初做能源管理原型的人会把用能分析页面做成“又一个看板”左边一个饼图右边一个柱状图下面再来一堆折线。这种页面评审时最容易收到的反馈是“不够专业”因为图表之间没有逻辑关系。真正的用能分析应该围绕维度组织页面。按时间维度有日分析、月分析、年分析按空间维度有厂区、车间、工序、设备按介质维度有电、水、气、热按对比维度有同比、环比、目标值对比、行业对标。做原型时我习惯把页面分成左侧筛选区、中部图表区、底部明细列表三块所有图表跟着筛选条件联动。图表中最少要放这四个内容趋势分析、占比结构、对比排名、单位能耗。单位能耗是能源管理里的核心指标计算公式是单位产品能耗 综合能耗 ÷ 合格产品产量。原型里一定要把这个公式展示出来因为不同行业、不同产线的计算范围差异很大需要提前和甲方确认“综合能耗包含哪些介质”“产品产量用什么口径”。这个问题不确认后面所有节能结论都可能被推翻。3.2 能效诊断规则与交互状态设计能效诊断是能源管理系统的“大脑”也是Axure原型里最能体现业务深度的模块。诊断逻辑本身在真实系统里可能是算法模型但原型阶段需要先把规则可视化出来。我常用的做法是在原型页面里放一组“诊断规则配置”表格列出每条规则的触发条件、阈值、判定级别和建议措施。比如设备空载率超过20%判定为“空载浪费”建议优化启停策略。峰段用能占比超过60%判定为“峰谷结构不合理”建议调整错峰生产计划。单位产品电耗连续3个月上升超过5%判定为“能效下降”建议启动专项审计。管网压差超过设定值判定为“可能泄漏”建议排查管网分段。在Axure里可以用动态面板的多个状态来模拟诊断结果正常状态用绿色标签提醒状态用黄色标签异常状态用红色标签。点击“开始诊断”按钮后通过条件的判断给不同点位切换状态。这一版做出来后甲方会非常认真地跟你讨论每一条阈值是否合理——这正是你要的效果把抽象的诊断算法变成可谈判、可校验的内容。3.3 报表导出、钻取与异常定位能效诊断结果不能只停留在页面上业务方需要把它导出成报告也需要从一张汇总表逐层钻下去找到问题源头。Axure原型里必须把这些操作路径打通。钻取交互最简单的实现方式是在图表上添加热区单击后切换到一个新页面或弹窗。比如点击饼图里的“3号车间”跳到该车间的分介质用能页面再点击“电耗异常”跳到对应表计的实时曲线页面。每钻下去一层原型都要告诉观看者数据是从哪一层聚合的最底层又能落到哪个物理点位。导出功能不需要真的生成Excel但要在原型里模拟“点击导出按钮后出现设置弹窗包含时间范围、报表类型、导出格式”。这看起来是小交互却是评审时最容易触发需求的地方。很多甲方在看过导出交互后会提出“我要一键导出全厂日报”“我要自动定时推送月报”这些都是后面研发必须响应的功能点早发现比晚发现好一万倍。4. 能源调控与绩效考核闭环流程在Axure里的交互表达4.1 能源调控流程从指标下达到执行反馈能源调控模块做起来最复杂因为它的核心不是某个页面而是一个业务闭环。Axure原型能否表达好这个闭环直接决定了开发阶段的需求质量。调控流程通常包括五个环节目标制定、方案生成、指令下发、执行反馈、效果评估。原型设计里我建议把每个环节拆成独立页面用页面流转把闭环跑通第一步能源管理员在“目标制定”页面填写本月用能定额、峰谷策略、设备启停计划第二步系统依据能效诊断结果生成调控方案列出调整前后的预期节能量第三步点击“下发”后指令进入车间任务列表并以状态标签展示“待确认、已接收、执行中、已完成”第四步车间负责人反馈执行结果包括实际执行起止时间、现场照片或备注第五步能源管理部门事后查看执行前后曲线对比评估节能量并归档。在Axure里实现时可以用中继器做任务列表用“设置文本”和“设置面板状态”来更新状态标签。为了让客户快速理解流程也可以在主流程页面底部放一个步骤条每完成一步高亮一步。这比单纯画五个页面更能传递“调控是一个闭环”的价值。4.2 绩效考核指标先算清楚再画表能源绩效考核是管理层最关心的模块也是最容易在原型里被做成“花架子”的地方。正因为如此画原型前一定要先把考核口径列清楚。下面是我在一版项目原型里用过的指标对照表可以当作参考考核维度指标名称计算公式指标说明数据基础采集完整率有效采集点数 ÷ 应采集点数 × 100%低于99%要预警节能效果能耗节约率(基准能耗 - 实际能耗) ÷ 基准能耗 × 100%基准能耗需双方确认目标管理用能定额达成率实际用能量 ÷ 计划用能量 × 100%小于等于100%为达标运行管理异常处理及时率规定时间内处理条数 ÷ 异常总数 × 100%按1小时/4小时分档协同管理巡检完成率实际巡检点数 ÷ 应巡检点数 × 100%与设备运行率联动这些指标放到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及以上版本组件库、母版、共用中继器都放在固定目录里并约定好谁负责最终合并。工具合规这件事别马虎一方面是为了规避版权风险另一方面是为了交付时文件能稳定打开。省在这里的每一点时间最后都会变成项目交付里的风险。能源管理系统的高保真原型设计说到底是“用界面逼着所有人把问题想清楚”的过程。把用能采集、检测、分析、诊断、调控、考核这些模块完整串起来之后客户看到的就不只是几个漂亮页面而是一套能落在工厂现场运转的管理逻辑。这也是我在多个项目里反复验证下来、觉得最值得投入时间的地方。
返回列表