简介面向产品经理、交互设计师及水务信息化团队这套Axure高保真原型以智慧水务云平台为蓝本完整呈现物联网、大数据、AI、云计算融合下的业务场景。原型覆盖管理员监控、公众查询、企业用水管理等角色的界面布局与操作流程并通过水质监测、用水预测、异常告警、GIS和SCADA集成等模块展示从数据采集、分析到决策的完整链条为需求评审、产品规划和研发展开提供可复用的设计蓝本。资源包共790个文件大小36.41MB包含294个SVG、190个PNG等矢量位图素材53个HTML、85个JS、61个CSS等网页交互文件以及Axure扩展、多类字体等配套资源其中SVG和PNG便于替换业务图标HTML、JS、CSS有助于前端理解页面结构压缩包结构清晰可直接打开原型预览并二次编辑。目前已有530人学习下载适合智慧水务、数字孪生、城市生命线等方向的设计与研发团队参考使用。1. 拿到智慧水务原型zip之后先想清楚你要的是页面还是交互做智慧城市、水务集团数字化或水利信息化项目的产品经理和交互设计师大概率都遇到过这种情况从某个整理站下载了一个命名为“智慧水务云平台Axure高保真原型”的zip压缩包几十到几百MB解压后里面是一个或多个.rp文件外加一堆元件库、图片素材。这类资源的价值并不在封面截图而在两个地方一是页面层级是否覆盖了水务业务的全流程二是关键面板的交互事件是否可以直接复用。如果只是打开看一眼说“做得挺精致”那这个zip对你毫无意义。本篇就按一线从业者拿到这种包之后的真实处理路径来讲先解决zip解压、版本兼容和资源缺失再把智慧水务原型的页面骨架拆成驾驶舱、GIS管网、工单和报表四类接着把Axure里高保真原型最容易卡住的动态面板、中继器和全局变量配置逐个说透最后收在可交付的整理手法上。整个过程围绕Axure RP 9/10展开也会提到与Figma做同类原型时的选择差异但核心锁定在Axure本身。2. 解压“智慧水务云平台…1.zip”从压缩包到可编辑原型的第一步2.1 解压时先处理编码、路径和压缩包密码这类整理包多数在Windows环境下打包文件名里常有中文和空格。在macOS或Linux上直接解压最常见的问题就是中文文件名乱码表现为解压后目录名变成一串转义字符。使用unzip命令时加上-O gbk参数可以解决绝大多数Windows中文zip的编码问题。unzip -O gbk 智慧水务云平台Axure高保真原型-ilovemockup.club整理 1.zip -d water_proto参数说明-O gbk指定zip内文件名的编码为GBK-d water_proto把内容解压到指定目录。如果不加-O参数在macOS的默认终端下极易出现乱码而Windows自带的资源管理器右键解压则不需要这个参数。解压路径尽量避免带空格和中文。Axure RP在加载元件库和图片资源时对路径比较敏感路径里一旦出现特殊字符轻则元件库加载失败重则.rp文件打开时直接提示找不到资源。常见的做法是解压到一个类似~/projects/water_proto的纯英文路径下再把素材目录改名成不带版本号的简写。值得留意的是有些整理包会二次压缩并设置密码。如果你拿到的zip有密码优先回去找资源出处或说明文档大多数整理站会把密码写在下载页描述里。不要急着用那些标榜“一键解除压缩包密码”的工具去爆破成功率不高且容易被杀毒软件拦纯属浪费时间。2.2 认清RP文件版本Axure RP 9、10还是11解压后目录里一般会有.rp文件也可能有.rplib元件库文件。双击打开前先看文件版本这是整个流程中翻车率最高的环节。Axure RP 9保存的文件在RP 10里可以直接打开但反过来不行RP 10比RP 9多了不少组件能力尤其是中继器的排序和条件逻辑有差异RP 11则改动更大文件格式互不兼容的情况更明显。经验上判断文件版本有三个办法右键看文件大小RP 9的源文件普遍比RP 10小用文本编辑器打开.rp文件前几百字节里通常有版本标记直接看下载包内的说明文档整理方一般会标注“本套原型用Axure RP 9制作”。如果当前机器只装了RP 10而原型是RP 9做的直接双击打开会弹出“此文件由旧版本创建是否升级”的提示选确认即可但升级后旧事件里的部分表达式可能需要手动修。用RP 9打开RP 10制作的源文件会直接报错没有回退选项。这时候不要折腾降级最省事的方案是装一个Axure RP 10两个版本可以共存。授权方面按你所在公司的软件资产策略处理这里不展开。2.3 元件库、字体与图标缺失时的加载顺序原型文件能打开但页面上的图形不全、图标全是方块或者元件库面板显示“加载失败”这是第二类高频问题。Axure的元件库文件是.rplib通常和.rp源文件放在同一个zip里。打开.rp文件后如果Axure提示找不到某个元件库需要在菜单栏的“元件库”下拉列表中选择“加载元件库”手动定位到zip解压目录里的.rplib文件。字体缺失的情况更隐蔽。智慧水务原型为了视觉效果常用苹方、思源黑体或站酷字体换到没有安装这些字体的机器上Axure会自动退回到系统默认字体导致文本框高度和文字折行跟设计稿对不上。常用的做法是装一遍思源黑体它能覆盖大多数国内设计稿的中文字体需求英文字体则需要看原型具体用的是什么。图标和图片资源的绝对路径问题也常见。Axure在保存.rp文件时会把图片素材内嵌进源文件理论上换机器不会丢图。但如果原型里嵌入了外部HTML文件比如用内联框架引用了本地某个图表页那这些HTML文件是独立于.rp存在的必须连同素材文件夹一起拷贝。判断依据是看原型文件旁边有没有一个同名的“_files”后缀目录有的话整个目录都得跟着走。3. 智慧水务高保真原型的页面骨架从驾驶舱到工单的分层拆解3.1 驾驶舱大屏1920×1080自适应与内联框架嵌图表智慧水务原型的第一个页面几乎都是总览大屏业务上叫“驾驶舱”视觉上是深蓝色背景加数据卡片。Axure里做这种页面的核心不是画得好看而是定好基准尺寸和自适应策略。绝大多数此类原型固定使用1920×1080的画布宽度然后要求演示时在同等分辨率的屏幕或浏览器全屏下查看。如果你要做到小尺寸笔记本上不变形就在“概要”面板里给页面设置自适应视图按1440宽度再做一版栅格。数据图表是驾驶舱的视觉重心。Axure自带的形状画柱状图效率低且不真实业内常见做法是用内联框架嵌一个本地HTML文件图表用ECharts这类前端库渲染。整理包里凡是“看起来特别炫、像真实系统”的图表基本都是这么实现的。把图表做成HTML文件放在原型目录的html/widgets文件夹下页面里拉一个“内联框架”元件属性里指向这个HTML文件即可。HTML文件里是标准的ECharts渲染逻辑以下是最小可用示例。!DOCTYPE html html head meta charsetutf-8 script src本地相对路径/echarts.min.js/script /head body div idchart stylewidth:400px;height:260px;/div script var chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { data: [周一,周二,周三,周四,周五] }, yAxis: {}, series: [{ type: line, data: [820, 932, 901, 934, 1290] }] }); /script /body /html代码逻辑说明页面加载后初始化一个ECharts实例setOption里的xAxis.data定义横轴标签series.data定义数值序列。改数据时只动series里的数组即可无需在Axure里做任何修改刷新HTML后图表自动更新。这里的关键是echarts.min.js必须放在本地目录并通过相对路径引用不要依赖外网CDN否则离线演示时图表白屏。3.2 管网GIS页地图底图、坐标点位与弹窗联动管网监测是智慧水务区别于普通后台系统的核心页面展示的是供水管网、泵站、水厂在地图上的分布。Axure里做GIS页面有三种常见方案按保真度从低到高排列静态地图截图加热点区域、嵌入高德/百度地图的HTML、对接真实GIS系统的数据服务。整理包里使用最多的是第一种用一张水务GIS系统截图或地图底图作为背景在上面叠加“热区”元件每个热区对应一个站点点击后弹出设备详情面板。它的优点是不依赖网络和生产数据演示时必现且稳定。缺点是坐标定位是死的地图缩放后点位不会跟着动但高保真原型阶段这完全够用。要注意的是点位坐标和实际经纬度的换算。在Axure里没有地图投影概念你只需要在底图上手动摆好标记元件的位置然后把标记的命名规范成“site_站点编号”的格式。这样后期如果要把原型交给前端开发前端能顺着命名和坐标反推出真实地图上的标注逻辑减少沟通成本。3.3 工单与报表页中继器表格、筛选条件和状态流转驾驶舱负责展示态工单和报表页才是水务系统里真正被高频操作的界面。一个完整的智慧水务原型应该包含巡检工单、设备维修工单、水质报表和水量统计四类页面。这类页面的共同点是表格多、筛选条件多、状态标签多用Axure普通表格加静态文本做改一个字段要动整个页面效率太低。中继器是这类页面的标准解法。先把一行工单的所有字段做成中继器的列包括工单编号、站点名称、上报时间、工单类型、当前状态、负责人然后用一列固定宽度的文本框绑定中继器的列值。Axure RP 9及以上版本还支持在中继器内直接排序和按条件过滤不需要额外写表达式。筛选条件区用下拉列表选择工单状态选中后触发中继器的“移除排序”加“添加筛选”事件就可以实现按状态查看工单的效果。状态标签用动态面板做比用文本更合理。把“待派单”“处理中”“已完成”三种样式设计在一个动态面板的三个State里数据绑定到中继器列值时同时为动态面板设置一个根据状态值切换State的用例。这样中继器里每一行工单的标签都是动态的真实感比静态文本高一个档次。4. 让高保真原型“动起来”数据驱动、交互状态与参数配置4.1 中继器数据集设计字段规划、排序与区间筛选高保真原型和静态线框图的本质区别在于数据可操作。智慧水务原型里的中继器数据集字段设计直接决定后续交互是否顺手。设计原则是中继器只存“数据”不存“样式”。举例来说水厂监测数据表中列名应该设计为“站点名称、出厂流量、出厂压力、浊度、余氯、pH、采集时间”而不是“第一条数据、第二条数据”。前者是数据字段后者是展示文案前者才能支撑排序和筛选。以水质监测数据为例常见的中继器数据集结构如下。字段列名类型示例值说明site_name文本城东水厂站点名称flow数字3250.6出厂流量单位m³/hturbidity数字0.42浊度单位NTUresidual_chlorine数字0.65余氯单位mg/Lquality_status文本正常/预警水质状态update_time文本09:35:12采集时间在Axure里给中继器添加数据直接双击中继器组件打开数据集编辑窗口按这个结构录入几行模拟数据即可。演示时想要更接近真实效果可以用公式生成随机数比如在“数据集”的单元格里填入[[Math.random()*10002000]]每次运行都会刷新数值。筛选和排序的配置在“中继器”的“样式”面板下。排序模式下选择“按flow排序、降序”列表会按流量从大到小展示筛选则需要新增一个用例。用文本框作为筛选器在文本框的“文本改变时”事件里添加“筛选”动作为turbidity列添加条件“大于 0.5”输入条件用[[LVAR1]]引用文本框的值。具体配置路径选中中继器右侧“交互”面板的“中继器”选项卡中双击“添加筛选”在条件编辑器里设置“turbidity 大于 输入框的值”。4.2 动态面板状态机弹窗、抽屉与步骤条的实现方式智慧水务原型里弹窗是使用频率最高的交互形式。设备详情、报警确认、工单指派全都是弹窗。Axure做弹窗的标准套路是动态面板加“显示/隐藏”事件。具体操作方式在页面顶层创建一个动态面板命名为popup_device_detail里面放设备名称、运行状态、实时参数等信息。默认把所有弹窗面板的状态设为“隐藏”在触发按钮的“单击时”事件里添加“显示”动作目标选中这个动态面板即可。多状态弹窗需要动态面板配合State切换。例如设备详情弹窗需要切换“基本信息”和“历史曲线”两个页签把两个页签的内容分别放在同一个动态面板的两个State里点击页签触发“设置面板状态”的事件在“状态”栏里选择对应的State名称。这里有两个容易踩的坑一是State命名不要用默认的“State1、State2”按业务含义重命名为“tab_basic”“tab_history”否则后面切换时会选错目标二是弹窗底部要放一个半透明遮罩矩形作为点击遮罩关闭弹窗的事件载体遮罩的层级要置底否则会挡住弹窗内容上的按钮点击。4.3 用全局变量和表达式模拟“实时刷新”的监测数据高保真原型在客户现场演示时最怕数据是死的。客户随便问一句“这个数据是实时刷新的吗”如果原型上的数字纹丝不动演示效果会大打折扣。Axure没有后台数据源但可以用全局变量加循环事件模拟实时刷新。原理是在页面加载时启动一个循环每隔几秒给页面上的文本标签重新赋值赋值的来源是全局变量或随机数。具体步骤分三步。第一步在“概要”面板里点击“页面样式”区域的“全局变量”新建一个名为live_flow的变量初始值随意填。第二步在页面空白处放一些文本标签把它们的文本内容绑定为[[live_flow]]。第三步在页面任意一个元件的“载入时”事件里依次添加“设置文本-等待-设置文本”三个事件循环每次把live_flow重新赋值为[[Math.floor(Math.random()*5003000)]]。事件循环的配置方式是在一个事件的“组织动作”里同时添加“等待2000毫秒”和“设置文本”然后让设置文本的动作再次触发原来的“载入时”事件形成自循环。// 在“载入时”事件中配置的表达式 [[Math.floor(Math.random() * 500 3000)]] // 模拟流量值范围3000-3500 [[Math.max(0, (Math.random() * 0.2).toFixed(2) - 0.1)]] // 模拟浊度波动表达式说明Math.random()*5003000生成3000到3500之间的随机数用Math.floor取整模拟流量的波动第二行用toFixed(2)保留两位小数让浊度数值像传感器采集的浮点数据。演示时配合一个显示当前时间的文本标签使用[[new Date().toLocaleTimeString()]]表达式就能让整块大屏看起来像一个在运行的监控系统。注意循环事件里“等待”的单位是毫秒2000毫秒即2秒刷新一次刷新太快会让客户觉得数据跳变不真实。5. 收尾技巧把一套智慧水务原型整理成可复用的交付物5.1 页面、元件与交互事件的命名规范化从zip包里拆出来的原型最大的问题往往不是做得不好看而是命名乱。页面名称可能是“页面1”“未命名2”元件名称全是“矩形_123”“椭圆_456”。这种原型的复用成本极高因为你在做交互事件时根本不知道该选哪个元件。整理的第一步是重命名按“模块_页面_用途”的格式给页面重命名比如“M1_Overview_Screen”“M2_Network_GIS”“M3_WorkOrder_List”。第二步是给关键元件加前缀按钮用btn_前缀文本框用input_弹窗用popup_这样在“概要”面板里一眼就能看出元件类型。交互事件里被频繁引用的动态面板和全局变量命名要能表达业务语义。动态面板名如popup_alert_detail、panel_step_form全局变量如live_flow、current_device。这套规范并不复杂但它决定了三个月后你还能不能改得动这个文件。5.2 生成交付包浏览器验收与压缩标准原型改完之后不要只发.rp源文件给开发或客户发HTML包是更稳妥的做法。在Axure菜单里选择“发布-生成HTML文件”输出目录建议命名为water_proto_build。生成后先在浏览器里完整走一遍核心流程登录页免登录跳进驾驶舱驾驶舱弹窗打开设备详情详情页切到历史曲线。重点检查三个地方内联框架里的HTML图表是否正常渲染中继器的筛选条件是否按预期过滤数据全局变量循环刷新有没有影响页面加载性能。生成完毕的HTML文件夹里需要额外添加一个readme.txt说明文件写明原型版本、Axure版本要求RP 9还是RP 10、内嵌HTML图表的修改方式修改哪个js文件里的数据数组、以及源文件和构建文件的关系。最后整个文件夹压缩发给对方时zip根目录不要带系统隐藏文件压缩前先删掉__MACOSX这类目录。压缩交付包时记住一个技巧把生成HTML的data目录里那些超清位图先压过再打包一套驾驶舱背景图动辄几十MB压到70%后体积能降一半而肉眼几乎看不出差异。当你下次打开类似“智慧水务云平台Axure高保真原型”的zip时先翻它的全局变量表和动态面板命名就能在十分钟内判断这份原型的整理水平值不值得复用。本文还有配套的精品资源点击获取
智慧水务Axure高保真原型：从解压到动态交互实战指南
简介面向产品经理、交互设计师及水务信息化团队这套Axure高保真原型以智慧水务云平台为蓝本完整呈现物联网、大数据、AI、云计算融合下的业务场景。原型覆盖管理员监控、公众查询、企业用水管理等角色的界面布局与操作流程并通过水质监测、用水预测、异常告警、GIS和SCADA集成等模块展示从数据采集、分析到决策的完整链条为需求评审、产品规划和研发展开提供可复用的设计蓝本。资源包共790个文件大小36.41MB包含294个SVG、190个PNG等矢量位图素材53个HTML、85个JS、61个CSS等网页交互文件以及Axure扩展、多类字体等配套资源其中SVG和PNG便于替换业务图标HTML、JS、CSS有助于前端理解页面结构压缩包结构清晰可直接打开原型预览并二次编辑。目前已有530人学习下载适合智慧水务、数字孪生、城市生命线等方向的设计与研发团队参考使用。1. 拿到智慧水务原型zip之后先想清楚你要的是页面还是交互做智慧城市、水务集团数字化或水利信息化项目的产品经理和交互设计师大概率都遇到过这种情况从某个整理站下载了一个命名为“智慧水务云平台Axure高保真原型”的zip压缩包几十到几百MB解压后里面是一个或多个.rp文件外加一堆元件库、图片素材。这类资源的价值并不在封面截图而在两个地方一是页面层级是否覆盖了水务业务的全流程二是关键面板的交互事件是否可以直接复用。如果只是打开看一眼说“做得挺精致”那这个zip对你毫无意义。本篇就按一线从业者拿到这种包之后的真实处理路径来讲先解决zip解压、版本兼容和资源缺失再把智慧水务原型的页面骨架拆成驾驶舱、GIS管网、工单和报表四类接着把Axure里高保真原型最容易卡住的动态面板、中继器和全局变量配置逐个说透最后收在可交付的整理手法上。整个过程围绕Axure RP 9/10展开也会提到与Figma做同类原型时的选择差异但核心锁定在Axure本身。2. 解压“智慧水务云平台…1.zip”从压缩包到可编辑原型的第一步2.1 解压时先处理编码、路径和压缩包密码这类整理包多数在Windows环境下打包文件名里常有中文和空格。在macOS或Linux上直接解压最常见的问题就是中文文件名乱码表现为解压后目录名变成一串转义字符。使用unzip命令时加上-O gbk参数可以解决绝大多数Windows中文zip的编码问题。unzip -O gbk 智慧水务云平台Axure高保真原型-ilovemockup.club整理 1.zip -d water_proto参数说明-O gbk指定zip内文件名的编码为GBK-d water_proto把内容解压到指定目录。如果不加-O参数在macOS的默认终端下极易出现乱码而Windows自带的资源管理器右键解压则不需要这个参数。解压路径尽量避免带空格和中文。Axure RP在加载元件库和图片资源时对路径比较敏感路径里一旦出现特殊字符轻则元件库加载失败重则.rp文件打开时直接提示找不到资源。常见的做法是解压到一个类似~/projects/water_proto的纯英文路径下再把素材目录改名成不带版本号的简写。值得留意的是有些整理包会二次压缩并设置密码。如果你拿到的zip有密码优先回去找资源出处或说明文档大多数整理站会把密码写在下载页描述里。不要急着用那些标榜“一键解除压缩包密码”的工具去爆破成功率不高且容易被杀毒软件拦纯属浪费时间。2.2 认清RP文件版本Axure RP 9、10还是11解压后目录里一般会有.rp文件也可能有.rplib元件库文件。双击打开前先看文件版本这是整个流程中翻车率最高的环节。Axure RP 9保存的文件在RP 10里可以直接打开但反过来不行RP 10比RP 9多了不少组件能力尤其是中继器的排序和条件逻辑有差异RP 11则改动更大文件格式互不兼容的情况更明显。经验上判断文件版本有三个办法右键看文件大小RP 9的源文件普遍比RP 10小用文本编辑器打开.rp文件前几百字节里通常有版本标记直接看下载包内的说明文档整理方一般会标注“本套原型用Axure RP 9制作”。如果当前机器只装了RP 10而原型是RP 9做的直接双击打开会弹出“此文件由旧版本创建是否升级”的提示选确认即可但升级后旧事件里的部分表达式可能需要手动修。用RP 9打开RP 10制作的源文件会直接报错没有回退选项。这时候不要折腾降级最省事的方案是装一个Axure RP 10两个版本可以共存。授权方面按你所在公司的软件资产策略处理这里不展开。2.3 元件库、字体与图标缺失时的加载顺序原型文件能打开但页面上的图形不全、图标全是方块或者元件库面板显示“加载失败”这是第二类高频问题。Axure的元件库文件是.rplib通常和.rp源文件放在同一个zip里。打开.rp文件后如果Axure提示找不到某个元件库需要在菜单栏的“元件库”下拉列表中选择“加载元件库”手动定位到zip解压目录里的.rplib文件。字体缺失的情况更隐蔽。智慧水务原型为了视觉效果常用苹方、思源黑体或站酷字体换到没有安装这些字体的机器上Axure会自动退回到系统默认字体导致文本框高度和文字折行跟设计稿对不上。常用的做法是装一遍思源黑体它能覆盖大多数国内设计稿的中文字体需求英文字体则需要看原型具体用的是什么。图标和图片资源的绝对路径问题也常见。Axure在保存.rp文件时会把图片素材内嵌进源文件理论上换机器不会丢图。但如果原型里嵌入了外部HTML文件比如用内联框架引用了本地某个图表页那这些HTML文件是独立于.rp存在的必须连同素材文件夹一起拷贝。判断依据是看原型文件旁边有没有一个同名的“_files”后缀目录有的话整个目录都得跟着走。3. 智慧水务高保真原型的页面骨架从驾驶舱到工单的分层拆解3.1 驾驶舱大屏1920×1080自适应与内联框架嵌图表智慧水务原型的第一个页面几乎都是总览大屏业务上叫“驾驶舱”视觉上是深蓝色背景加数据卡片。Axure里做这种页面的核心不是画得好看而是定好基准尺寸和自适应策略。绝大多数此类原型固定使用1920×1080的画布宽度然后要求演示时在同等分辨率的屏幕或浏览器全屏下查看。如果你要做到小尺寸笔记本上不变形就在“概要”面板里给页面设置自适应视图按1440宽度再做一版栅格。数据图表是驾驶舱的视觉重心。Axure自带的形状画柱状图效率低且不真实业内常见做法是用内联框架嵌一个本地HTML文件图表用ECharts这类前端库渲染。整理包里凡是“看起来特别炫、像真实系统”的图表基本都是这么实现的。把图表做成HTML文件放在原型目录的html/widgets文件夹下页面里拉一个“内联框架”元件属性里指向这个HTML文件即可。HTML文件里是标准的ECharts渲染逻辑以下是最小可用示例。!DOCTYPE html html head meta charsetutf-8 script src本地相对路径/echarts.min.js/script /head body div idchart stylewidth:400px;height:260px;/div script var chart echarts.init(document.getElementById(chart)); chart.setOption({ xAxis: { data: [周一,周二,周三,周四,周五] }, yAxis: {}, series: [{ type: line, data: [820, 932, 901, 934, 1290] }] }); /script /body /html代码逻辑说明页面加载后初始化一个ECharts实例setOption里的xAxis.data定义横轴标签series.data定义数值序列。改数据时只动series里的数组即可无需在Axure里做任何修改刷新HTML后图表自动更新。这里的关键是echarts.min.js必须放在本地目录并通过相对路径引用不要依赖外网CDN否则离线演示时图表白屏。3.2 管网GIS页地图底图、坐标点位与弹窗联动管网监测是智慧水务区别于普通后台系统的核心页面展示的是供水管网、泵站、水厂在地图上的分布。Axure里做GIS页面有三种常见方案按保真度从低到高排列静态地图截图加热点区域、嵌入高德/百度地图的HTML、对接真实GIS系统的数据服务。整理包里使用最多的是第一种用一张水务GIS系统截图或地图底图作为背景在上面叠加“热区”元件每个热区对应一个站点点击后弹出设备详情面板。它的优点是不依赖网络和生产数据演示时必现且稳定。缺点是坐标定位是死的地图缩放后点位不会跟着动但高保真原型阶段这完全够用。要注意的是点位坐标和实际经纬度的换算。在Axure里没有地图投影概念你只需要在底图上手动摆好标记元件的位置然后把标记的命名规范成“site_站点编号”的格式。这样后期如果要把原型交给前端开发前端能顺着命名和坐标反推出真实地图上的标注逻辑减少沟通成本。3.3 工单与报表页中继器表格、筛选条件和状态流转驾驶舱负责展示态工单和报表页才是水务系统里真正被高频操作的界面。一个完整的智慧水务原型应该包含巡检工单、设备维修工单、水质报表和水量统计四类页面。这类页面的共同点是表格多、筛选条件多、状态标签多用Axure普通表格加静态文本做改一个字段要动整个页面效率太低。中继器是这类页面的标准解法。先把一行工单的所有字段做成中继器的列包括工单编号、站点名称、上报时间、工单类型、当前状态、负责人然后用一列固定宽度的文本框绑定中继器的列值。Axure RP 9及以上版本还支持在中继器内直接排序和按条件过滤不需要额外写表达式。筛选条件区用下拉列表选择工单状态选中后触发中继器的“移除排序”加“添加筛选”事件就可以实现按状态查看工单的效果。状态标签用动态面板做比用文本更合理。把“待派单”“处理中”“已完成”三种样式设计在一个动态面板的三个State里数据绑定到中继器列值时同时为动态面板设置一个根据状态值切换State的用例。这样中继器里每一行工单的标签都是动态的真实感比静态文本高一个档次。4. 让高保真原型“动起来”数据驱动、交互状态与参数配置4.1 中继器数据集设计字段规划、排序与区间筛选高保真原型和静态线框图的本质区别在于数据可操作。智慧水务原型里的中继器数据集字段设计直接决定后续交互是否顺手。设计原则是中继器只存“数据”不存“样式”。举例来说水厂监测数据表中列名应该设计为“站点名称、出厂流量、出厂压力、浊度、余氯、pH、采集时间”而不是“第一条数据、第二条数据”。前者是数据字段后者是展示文案前者才能支撑排序和筛选。以水质监测数据为例常见的中继器数据集结构如下。字段列名类型示例值说明site_name文本城东水厂站点名称flow数字3250.6出厂流量单位m³/hturbidity数字0.42浊度单位NTUresidual_chlorine数字0.65余氯单位mg/Lquality_status文本正常/预警水质状态update_time文本09:35:12采集时间在Axure里给中继器添加数据直接双击中继器组件打开数据集编辑窗口按这个结构录入几行模拟数据即可。演示时想要更接近真实效果可以用公式生成随机数比如在“数据集”的单元格里填入[[Math.random()*10002000]]每次运行都会刷新数值。筛选和排序的配置在“中继器”的“样式”面板下。排序模式下选择“按flow排序、降序”列表会按流量从大到小展示筛选则需要新增一个用例。用文本框作为筛选器在文本框的“文本改变时”事件里添加“筛选”动作为turbidity列添加条件“大于 0.5”输入条件用[[LVAR1]]引用文本框的值。具体配置路径选中中继器右侧“交互”面板的“中继器”选项卡中双击“添加筛选”在条件编辑器里设置“turbidity 大于 输入框的值”。4.2 动态面板状态机弹窗、抽屉与步骤条的实现方式智慧水务原型里弹窗是使用频率最高的交互形式。设备详情、报警确认、工单指派全都是弹窗。Axure做弹窗的标准套路是动态面板加“显示/隐藏”事件。具体操作方式在页面顶层创建一个动态面板命名为popup_device_detail里面放设备名称、运行状态、实时参数等信息。默认把所有弹窗面板的状态设为“隐藏”在触发按钮的“单击时”事件里添加“显示”动作目标选中这个动态面板即可。多状态弹窗需要动态面板配合State切换。例如设备详情弹窗需要切换“基本信息”和“历史曲线”两个页签把两个页签的内容分别放在同一个动态面板的两个State里点击页签触发“设置面板状态”的事件在“状态”栏里选择对应的State名称。这里有两个容易踩的坑一是State命名不要用默认的“State1、State2”按业务含义重命名为“tab_basic”“tab_history”否则后面切换时会选错目标二是弹窗底部要放一个半透明遮罩矩形作为点击遮罩关闭弹窗的事件载体遮罩的层级要置底否则会挡住弹窗内容上的按钮点击。4.3 用全局变量和表达式模拟“实时刷新”的监测数据高保真原型在客户现场演示时最怕数据是死的。客户随便问一句“这个数据是实时刷新的吗”如果原型上的数字纹丝不动演示效果会大打折扣。Axure没有后台数据源但可以用全局变量加循环事件模拟实时刷新。原理是在页面加载时启动一个循环每隔几秒给页面上的文本标签重新赋值赋值的来源是全局变量或随机数。具体步骤分三步。第一步在“概要”面板里点击“页面样式”区域的“全局变量”新建一个名为live_flow的变量初始值随意填。第二步在页面空白处放一些文本标签把它们的文本内容绑定为[[live_flow]]。第三步在页面任意一个元件的“载入时”事件里依次添加“设置文本-等待-设置文本”三个事件循环每次把live_flow重新赋值为[[Math.floor(Math.random()*5003000)]]。事件循环的配置方式是在一个事件的“组织动作”里同时添加“等待2000毫秒”和“设置文本”然后让设置文本的动作再次触发原来的“载入时”事件形成自循环。// 在“载入时”事件中配置的表达式 [[Math.floor(Math.random() * 500 3000)]] // 模拟流量值范围3000-3500 [[Math.max(0, (Math.random() * 0.2).toFixed(2) - 0.1)]] // 模拟浊度波动表达式说明Math.random()*5003000生成3000到3500之间的随机数用Math.floor取整模拟流量的波动第二行用toFixed(2)保留两位小数让浊度数值像传感器采集的浮点数据。演示时配合一个显示当前时间的文本标签使用[[new Date().toLocaleTimeString()]]表达式就能让整块大屏看起来像一个在运行的监控系统。注意循环事件里“等待”的单位是毫秒2000毫秒即2秒刷新一次刷新太快会让客户觉得数据跳变不真实。5. 收尾技巧把一套智慧水务原型整理成可复用的交付物5.1 页面、元件与交互事件的命名规范化从zip包里拆出来的原型最大的问题往往不是做得不好看而是命名乱。页面名称可能是“页面1”“未命名2”元件名称全是“矩形_123”“椭圆_456”。这种原型的复用成本极高因为你在做交互事件时根本不知道该选哪个元件。整理的第一步是重命名按“模块_页面_用途”的格式给页面重命名比如“M1_Overview_Screen”“M2_Network_GIS”“M3_WorkOrder_List”。第二步是给关键元件加前缀按钮用btn_前缀文本框用input_弹窗用popup_这样在“概要”面板里一眼就能看出元件类型。交互事件里被频繁引用的动态面板和全局变量命名要能表达业务语义。动态面板名如popup_alert_detail、panel_step_form全局变量如live_flow、current_device。这套规范并不复杂但它决定了三个月后你还能不能改得动这个文件。5.2 生成交付包浏览器验收与压缩标准原型改完之后不要只发.rp源文件给开发或客户发HTML包是更稳妥的做法。在Axure菜单里选择“发布-生成HTML文件”输出目录建议命名为water_proto_build。生成后先在浏览器里完整走一遍核心流程登录页免登录跳进驾驶舱驾驶舱弹窗打开设备详情详情页切到历史曲线。重点检查三个地方内联框架里的HTML图表是否正常渲染中继器的筛选条件是否按预期过滤数据全局变量循环刷新有没有影响页面加载性能。生成完毕的HTML文件夹里需要额外添加一个readme.txt说明文件写明原型版本、Axure版本要求RP 9还是RP 10、内嵌HTML图表的修改方式修改哪个js文件里的数据数组、以及源文件和构建文件的关系。最后整个文件夹压缩发给对方时zip根目录不要带系统隐藏文件压缩前先删掉__MACOSX这类目录。压缩交付包时记住一个技巧把生成HTML的data目录里那些超清位图先压过再打包一套驾驶舱背景图动辄几十MB压到70%后体积能降一半而肉眼几乎看不出差异。当你下次打开类似“智慧水务云平台Axure高保真原型”的zip时先翻它的全局变量表和动态面板命名就能在十分钟内判断这份原型的整理水平值不值得复用。本文还有配套的精品资源点击获取
