簡介這份zip壓縮包是智慧水務云平臺的Axure高保真原型由ilovemockup.club整理面向產(chǎn)品經(jīng)理、交互設計師及開發(fā)團隊用于直觀理解水務管理系統(tǒng)的界面布局、交互流程與功能模塊覆蓋物聯(lián)網(wǎng)監(jiān)控、大數(shù)據(jù)分析、人工智能預警等環(huán)節(jié)。包內(nèi)共790個文件以svg、png圖像資源、html/css/js前端頁面、less/scss樣式表為主同時包含axure原型運行所需的chrome擴展程序crx文件與字體文件整體約36.41MB結構清晰便于按模塊查閱。目前已有530人學習下載適合正在設計或開發(fā)智慧水務、智慧城市相關平臺的讀者作為交互參考。通過這套高保真原型可以快速掌握管理端監(jiān)控大屏、公眾查詢服務、企業(yè)用水管理等角色的界面設計還能借鑒數(shù)據(jù)可視化圖表、告警聯(lián)動和系統(tǒng)集成頁面的排布思路減少從零搭建原型的成本。1. 智慧水務云平臺Axure高保真原型一份zip壓縮包能帶來的真正價值在大屏可視化滿天飛的項目里最不缺的就是“看著像樣”的網(wǎng)頁最缺的是能拿去做需求評審和開發(fā)排期的可交互原型。智慧水務云平臺Axure高保真原型這份zip拆開之后不是一個靜態(tài)圖庫而是一套把綜合駕駛艙、水質(zhì)監(jiān)測、告警聯(lián)動、泵站管理串成閉環(huán)的Axure工程。對要做水務信息化投標的產(chǎn)品經(jīng)理、售前工程師、交互設計師來說它最大的價值不是省幾張畫布而是讓你在寫PRD之前先把數(shù)據(jù)怎么流轉、異常怎么處置在這個場景里“演”一遍。拿到包之后能不能改、怎么改、坑在哪里才是決定這份資源值不值得投入的關鍵。2. 從zip到Axure工程解壓、體檢與版本識別三步走2.1 用7-Zip解壓“智慧水務云平臺Axure高保真原型-ilovemockup.club整理 1.zip”路徑與中文名怎么處理原型包是zip格式第一步就是解壓。這里我習慣先把文件放進一個沒有空格和中文的短目錄再執(zhí)行解壓尤其不要在Windows上直接右鍵“全部解壓縮”到一個超長中文路徑里。原因后面單獨講先看常用做法。在Windows上可以用7-Zip的圖形界面但命令行更可控在Linux/macOS上也能用同樣邏輯mkdir -p ~/workspace/swp # 短路徑避開中文目錄名 cd ~/Downloads 7z x 智慧水務云平臺Axure高保真原型-ilovemockup.club整理 1.zip -o~/workspace/swp cd ~/workspace/swp find . -maxdepth 2 -type f | head -307z x里的x表示解壓并保留目錄結構-o指定輸出目錄注意-o后面不能有空格。這份zip壓縮包文件名里有中文和空格命令行里一定要用雙引號包住否則會被拆成多個參數(shù)。find . -maxdepth 2 -type f | head -30是用來快速看解壓后的前30個文件確認結構是否完整。在Windows資源管理器里解壓這類包會遇到三個很常見的翻車點一是壓縮包文件名以中文開頭右鍵解壓到當前目錄時經(jīng)常生成一串亂碼文件夾二是解壓路徑帶著“桌面/企劃部/智慧水務項目/原型v3/...”這種超長路徑Axure加載資源時會因為路徑太長讀不到圖片三是部分二次打包的zip帶了一個偽加密標志位解壓工具能打開資源管理器卻報“壓縮文件格式無效”。所以最穩(wěn)的操作是復制一份zip到C:\swp這類短路徑再用7-Zip解壓。解壓出來的文件通常能分成三類后綴.rp的源工程文件、后綴.rplib的元件庫、以及一個可能存在的HTML發(fā)布目錄。判斷這個包能不能改只需要看有沒有.rp文件——有就能在Axure里繼續(xù)編輯只有HTML目錄說明給的是只讀演示版后續(xù)想加交互必須重新畫。2.2 這個原型是rp9還是rp11打開報錯后的三種處理方式拿到.rp源文件后直接雙擊Axure會自己告訴你版本。最近幾年市面上的水務原型大部分是rp9生成的因為rp9在“生成HTML原型、團隊協(xié)作、組件復用”這幾個功能點上最穩(wěn)。rp11能正常打開rp9的工程反過來不行如果你只有rp9雙擊一個rp11保存的文件會直接彈“此文件由更高版本創(chuàng)建”。處理方式有三種。第一種如果團隊里有人裝了rp11讓他在Axure里用“文件-另存為-兼容版本”把工程導成rp9格式第二種本地升級到rp11但升級后要花半小時檢查字體、動態(tài)面板狀態(tài)名和矢量圖陰影這三個地方是跨版本最容易變形的第三種不打開源文件只把zip里的html目錄解壓出來用瀏覽器演示給客戶看適合售前快速過方案不適合繼續(xù)改邏輯。這里多提醒一句網(wǎng)上那些“axure免費永久激活”“axure rp9授權密鑰”的資源不要碰。水務項目通常要交付給政企客戶原型里關聯(lián)著業(yè)務數(shù)據(jù)和設備告警口徑用破解版工具做項目一方面隨時可能被工具廠商后臺鎖文件另一方面給開發(fā)留一個安全隱患完全沒必要。公司采購或試用正版已經(jīng)足夠撐起一個投標周期。2.3 工程體檢清單頁面地圖、母版、樣式資產(chǎn)一處不漏打開工程后第一件事不是看首頁長什么樣而是看頁面地圖。智慧水務云平臺原型如果結構完整頁面地圖里至少應該覆蓋這些業(yè)務模塊登錄與權限入口、綜合態(tài)勢大屏、供水管網(wǎng)一張圖、水質(zhì)在線監(jiān)測、設備與泵站管理、告警中心、工單巡檢、報表統(tǒng)計、系統(tǒng)設置。如果只有大屏和幾個零散頁面那這份原型大概率是設計師自己拼出來的展示稿不是能直接指導開發(fā)的產(chǎn)品原型。第二步檢查母版。Axure的母版用來承載頂欄、側邊欄、公共彈窗這類跨頁面復用的內(nèi)容。打開母版管理看導航欄在每個頁面是否都能正常加載。很多高保真原型翻車就是母版里的“固定背景滾動”沒設置好頁面滾動時大屏的背景圖跟著滾走導航欄卻懸在空中。正確做法是在母版上選中背景組用“固定位置”屬性把背景釘住業(yè)務內(nèi)容放到另一個動態(tài)面板里滾動。第三步看樣式資產(chǎn)。打開“頁面樣式”面板看全局顏色、字體變量是不是一套。智慧水務項目里水質(zhì)達標是藍色系異常告警是紅色系權限禁用是灰色系如果這套語義沒有做進樣式變量里開發(fā)拿到原型后還要自己猜色值。再檢查資源管理器里的圖片如果圖片指向的是網(wǎng)絡URL斷網(wǎng)演示必白屏如果圖片體積動輒幾兆頁面加載會卡到開發(fā)想罵人。最后一步是F5預覽。不要直接退出Axure先生成一份HTML到本地tmp目錄用Chrome打開檢查彈窗、數(shù)據(jù)輪播、地圖這三個最吃性能的組件能不能跑。這一步能提前暴露百分之六十的演示事故。3. 高保真不等于好看把水務數(shù)據(jù)駕駛艙做成可交互黑匣子3.1 動態(tài)面板做數(shù)據(jù)刷新輪播、暫停與手動切卡怎么綁定智慧水務云平臺的首頁通常是綜合態(tài)勢大屏上面有取水量、供水量、水質(zhì)達標率、設備在線率幾個核心指標。展示這些指標的卡片如果只是靜態(tài)擺在那里評審時客戶一定會問“數(shù)據(jù)會不會動”。所以要用Axure動態(tài)面板做輪播。我一般先把一個卡片區(qū)域放進動態(tài)面板給它三個狀態(tài)命名成card_water_quality、card_network_status、card_alarm_summary不要用默認的“State1/State2/State3”。命名隨意在單個組件里看不出問題后續(xù)要寫交互邏輯、要交付開發(fā)看狀態(tài)名時你會恨不得重畫一遍。自動輪播的交互配置可以理解成這段偽代碼事件動態(tài)面板狀態(tài)改變 等待 5000 毫秒 設置面板狀態(tài)為“下一個” 勾選“循環(huán)” 事件鼠標移入動態(tài)面板 設置全局變量 autoPlay 為 false 事件鼠標移出動態(tài)面板 設置全局變量 autoPlay 為 true關鍵參數(shù)是等待時長。水務大屏的輪播間隔建議3000到10000毫秒取5000比較通用。如果寫成500毫秒甚至更小演示機的瀏覽器會直接卡成幻燈片CPU占用率往上飆客戶面前不但沒體現(xiàn)出“實時刷新”反而顯得系統(tǒng)很廉價。如果你想在輪播過程中讓用戶手動切卡就在每個頁面狀態(tài)里放兩個箭頭按鈕點擊時直接“設置面板狀態(tài)為指定狀態(tài)”并順手把autoPlay設為false這樣用戶一操作自動輪播就停下來了不會跟他搶控制權。動態(tài)面板還有一種用法是做告警跑馬燈。在告警中心頭部放一個動態(tài)面板內(nèi)容是幾條滾動告警文本用同樣的“等待下一個”邏輯循環(huán)。這里要注意跑馬燈的等待時長和內(nèi)容字數(shù)相關文字多時要給足展示時間一般至少4000毫秒否則觀眾看不清告警內(nèi)容就失去了制作高保真原型的意義。3.2 中繼器承載水質(zhì)監(jiān)測點列表排序篩選分頁一套配置走完水務平臺里最容易被做成“死頁面”的是監(jiān)測點列表。幾十個水質(zhì)監(jiān)測點、泵站設備如果每個點都單獨畫一張頁面那只是靜態(tài)展示真正高保真的做法是把它們放進Axure中繼器讓數(shù)據(jù)驅動列表展示。中繼器里的數(shù)據(jù)列常見做法是設置成station_name、cod、ammonia、ph、status對應采樣點名稱、化學需氧量、氨氮、pH值和設備狀態(tài)。先在中繼器“數(shù)據(jù)-列”里建好字段再往“中繼器數(shù)據(jù)集”里填模擬數(shù)據(jù)。列表里每個單元格綁定[[Item.station_name]]、[[Item.cod]]這樣的字段。綁定完成后接下來就是列表的三個核心交互排序、篩選、分頁。在Axure中繼器里點擊表頭排序我習慣這樣寫事件單擊表頭“pH” 動作清除排序 動作添加排序 → 列“ph”類型“數(shù)值”順序“降序” 動作刷新中繼器這里一定要先“清除排序”再加新排序。很多人在做多列排序時翻車就是只寫了“添加排序”沒有清掉上一次的排序條件結果點了pH降序再點COD升序數(shù)據(jù)列表的排列會疊加出莫名其妙的結果看著就像黑匣子里面亂了一鍋粥。水務監(jiān)測點需要按照超標情況優(yōu)先展示時可以再加一個篩選條件事件單擊篩選按鈕 動作添加篩選 → 條件 Item.status 告警 動作刷新中繼器篩選和排序可以疊加但要在原型里寫清楚目前生效的條件是什么。比如頁面上加一個當前篩選的標簽顯示“僅看告警設備”這樣評審時客戶能直觀看到兩種狀態(tài)的區(qū)別。分頁參數(shù)我一般按每頁5條或10條來設。中繼器屬性里有“分頁”配置設置每頁條數(shù)后在上一頁、下一頁按鈕上各加一條“設置中繼器頁面為下一頁/上一頁”的動作。水務平臺列表數(shù)據(jù)動不動就是幾百條分頁高保真不只是為了好看更是為了開發(fā)階段能讓后端提前確認分頁接口的參數(shù)格式。3.3 水務GIS地圖到底該內(nèi)嵌還是外鏈兩種方案的取舍表智慧水務離不開管網(wǎng)地圖。原型里處理地圖組件最常見做法有兩個內(nèi)嵌iframe外鏈成圖或直接放一張靜態(tài)管網(wǎng)截圖再疊加熱區(qū)。我見過不少高保真原型在評審現(xiàn)場因為斷網(wǎng)地圖白屏整個演示節(jié)奏被打斷。這兩條路線的取舍可以先看下面這張對比表方案保真度演示穩(wěn)定性開發(fā)參考價值工作量iframe內(nèi)嵌在線地圖高可縮放/可拖動差依賴外網(wǎng)與CSP策略中能看點位與圖層的交互邏輯低拖個組件就完靜態(tài)底圖熱區(qū)中縮放要另做高完全本地化高能明確標注熱區(qū)與彈窗關系中需要切圖與排坐標如果是投標評審或需求確認場景我會選靜態(tài)底圖加標記點熱區(qū)。做法是先把管網(wǎng)圖、廠區(qū)平面圖導出一張PNG放進assets/images目錄再在Axure里把它作為底圖鋪在頁面底層在上面對應位置放小圓點或設備圖標每個圖標做成熱區(qū)。點擊熱區(qū)彈出設備詳情動態(tài)面板這樣既保留了高保真手感又不會因為演示現(xiàn)場沒有外網(wǎng)而翻車。如果甲方明確要求看在線地圖的平移縮放效果那就在原型里用iframe嵌一次但要在評審前把演示機的網(wǎng)絡白名單、瀏覽器安全策略全部確認好。不要用一個未測試的場地網(wǎng)絡拿一份沒檢查過的原型就上會地圖組件在智慧水務原型里是最容易出事故的地方。4. 原型交接給開發(fā)PRD標注、HTML導出與版本管理要同時做4.1 給關鍵字段做標注讓開發(fā)不再追問“這個狀態(tài)哪來”高保真原型交付給開發(fā)不是把rp文件往群里一丟就完事。開發(fā)看原型最反感的是字段沒有口徑。智慧水務系統(tǒng)里的pH值、余氯、濁度、流量這些數(shù)據(jù)單位是什么、范圍是多少、多久刷新一次、來自哪個數(shù)據(jù)源如果原型里不寫開發(fā)第一輪會按自己的理解寫聯(lián)調(diào)時再被產(chǎn)品反推回去返工。在Axure里我會給關鍵控件加“標注”即交互面板右側的注釋選項卡。比如pH監(jiān)測卡片上注釋寫清楚單位pH無量綱正常區(qū)間6.5到8.5采樣頻率5分鐘一次數(shù)據(jù)來源為水質(zhì)在線監(jiān)測儀異常閾值由工藝段分別定義。這聽起來像PRD但放在原型注釋里成本最低開發(fā)點開控件就能看到。需要特別標注的位置有這么幾類設備狀態(tài)枚舉在線/離線/維護/告警工單優(yōu)先級緊急/高/中/低告警關聯(lián)的處置動作以及列表分頁參數(shù)。這些是開發(fā)寫接口時最容易來回確認的內(nèi)容。我建議在每個涉及狀態(tài)判斷的頁面里用矩形容器放一個“字段口徑說明”頁專門列一張字段表表格列名寫字段名稱、單位、取值范圍、來源、刷新頻率就算開發(fā)不看測試也能按這個口徑去寫用例。4.2 導出HTML演示包并在瀏覽器驗證別人打不開你的頁面怎么辦原型確認沒問題后導出HTML是必要的。Axure里選“發(fā)布-生成HTML文件”保留“生成站點地圖頁面”的選項輸出目錄單獨建一個release目錄。導出后先用本機Chrome打開index.html看右上角有沒有提示“需要安裝Axure RP擴展”。如果沒有提示頁面里動態(tài)面板、中繼器交互都很正常再把這個目錄打包發(fā)出去。如果別人拿到HTML后打不開或者能打開但提示要裝插件大部分原因出在瀏覽器版本或擴展設置上。Chrome需要裝“Axure RP Extension for Chrome”這是官方擴展不是破解工具。裝完擴展后要在瀏覽器首頁訪問openWithAxure提示的頁面授權本機原型路徑。另一個常見問題是只發(fā)index.html單文件資源目錄、js目錄、css目錄沒一起打包發(fā)到對方手上一打開全是裂圖。正確做法是把整個發(fā)布目錄壓成zip不要只拖一個html文件進微信。導出之前還要檢查一遍外鏈資源。如果整個工程里還有訪問https://開頭的圖片、地圖、字體最好在演示機斷網(wǎng)狀態(tài)下再點一遍。高保真不是只在裝好的演示機里成立而是要在客戶會議室那臺經(jīng)常沒網(wǎng)絡的電腦上也能成立。4.3 保留一份“日期版本快照”用命令行打包交付zip做原型迭代時最怕的是沒有后悔藥。大家都有過這種經(jīng)歷昨天還在改的水務大屏v3今天被領導一句話推翻了想回退卻發(fā)現(xiàn)原來的rp文件已經(jīng)不在。所以我每次交付前都會打一個帶日期的版本快照命令行更高效。在Git Bash或WSL里我會這樣打包DATE$(date %Y%m%d-%H%M) cd ~/workspace/swp tar -czf ../smart_water_prototype_${DATE}.tar.gz \ --exclude./release/* --exclude./.git/* .tar -czf里的c表示創(chuàng)建壓縮包z是gzip壓縮f指定輸出文件名。--exclude先把發(fā)布目錄和git目錄排除掉保留rp源文件、rplib元件庫和assets資源。如果同事是Windows環(huán)境也可以用7-Zip命令打zip7z a -tzip smart_water_prototype_${DATE}.zip . -xr!release -xr!.git-tzip指定zip格式-xr!release排除release目錄-xr!.git排除git。打版本包時源文件里的圖片引用必須是相對路徑不要出現(xiàn)file:///C:/Users/xxx/Desktop/...這種絕對路徑否則開發(fā)換一臺電腦解壓資源目錄還是指向你本機的地址裂圖沒跑。版本號命名也建議統(tǒng)一。我再也不相信“最終版”“最最終版”這種文件名智慧水務這種體量的原型至少要有v日期、修訂人縮寫兩個信息例如swp_20240618_ls.rp。這樣后面就算要回退也清楚是哪一版、誰改的。5. 避坑清單智慧水務原型最常見的五類翻車現(xiàn)場5.1 偽加密zip解壓報錯現(xiàn)象、原因與修復方法現(xiàn)象下載回來的zip壓縮包在Windows資源管理器里雙擊提示“壓縮文件格式無效”右鍵也沒法直接解壓但用7-Zip打開卻能看到里面的rp文件和assets目錄一切正常。這個情況在這類整理好的原型zip里并不少見原因是壓縮包在打包時頭部被設置了加密標志位但文件內(nèi)容實際并沒有加密也就是常說的zip偽加密。Windows資源管理器會嚴格按照加密標志去走解密流程于是報錯7-Zip這類工具對標志位容錯更強所以能正常瀏覽。解決辦法是用7-Zip打開這個zip選擇“文件-修復壓縮文件”修復后生成一個fixed.zip再把fixed.zip解壓出來。如果修復后還提示要密碼說明是真加密那就不要想著繞過加密回去找分享人要密碼或者換個下載渠道。5.2 動態(tài)面板死循環(huán)卡爆演示瀏覽器等待時長不是越小越好現(xiàn)象在評審會現(xiàn)場演示綜合態(tài)勢大屏時頁面一會兒流暢一會兒卡頓十幾分鐘后瀏覽器風扇狂轉最后直接無響應。原因是大屏上掛了多個動態(tài)面板輪播每個都設置了“等待500毫秒-下一個狀態(tài)-循環(huán)”幾個動態(tài)面板同時搶主線程瀏覽器直接崩掉。解決方法是把輪播等待時長統(tǒng)一調(diào)到3000毫秒以上并且在同一頁面里最多保留一個自動輪播的動態(tài)面板。如果一定要多塊區(qū)域“動起來”可以讓第二塊區(qū)域只在懸停時切換不做全局循環(huán)。另一個細節(jié)是演示時把瀏覽器窗口單獨開一個桌面別跟視頻會議、錄屏軟件搶GPU高保真原型在條件一般的演示機上很脆弱。5.3 中繼器排序后序號錯亂別把“行號”寫死在每一行現(xiàn)象水質(zhì)監(jiān)測列表里第一列序號原本是1到10點擊“pH”表頭按降序排列后行號還是跟著排序前的位置走看起來像表格數(shù)據(jù)錯亂了。原因很直接當初畫原型時第1行單元格里寫死了“1”第2行寫死“2”這與中繼器數(shù)據(jù)集完全沒關系。解決方法是把序號列綁定到中繼器每次數(shù)據(jù)載入時的行索引上不要手工錄入固定數(shù)字。在中繼器“每項加載”的用例里把當前行的索引值寫到序號文本框里這樣排序、篩選、分頁后行索引會重新計算序號也能始終連續(xù)。這條原則同樣適用于設備編號、工單號這類展示列凡是要隨列表順序變化的數(shù)字都不要寫死在數(shù)據(jù)集列里。5.4 演示機斷網(wǎng)導致地圖白屏外鏈圖資與靜態(tài)底圖的邊界現(xiàn)象在客戶會議室打開綜合態(tài)勢大屏其他頁面都正常唯獨管網(wǎng)一張圖區(qū)域白屏開發(fā)一眼就說是網(wǎng)絡問題。原因是原型里用iframe內(nèi)嵌了在線地圖而演示現(xiàn)場網(wǎng)絡沒有放開地圖域名訪問或者瀏覽器裝的安全策略把iframe攔截了。解決方法是把管網(wǎng)地圖先截圖成底圖放進assets目錄再在底圖上擺標記點和熱區(qū)。對于地圖縮放、平移這種必須演示的動態(tài)效果可以單獨準備一臺連好網(wǎng)的演示電腦通過投屏方式外接展示不在原型包里依賴外網(wǎng)。原型要做到“拔網(wǎng)線也能跑完核心流程”這是智慧水務這類政企項目演示的基本素養(yǎng)。5.5 rp9源文件在rp11打開后字體全亂先定字體再畫頁面現(xiàn)象把rp9的原型發(fā)到裝了rp11的同事電腦上打開后標題從粗體變成了細體中文全部顯示成宋體按鈕和文本重疊。原因是兩個版本對系統(tǒng)字體列表的處理不一樣工程里用的是原電腦上的“微軟雅黑 Bold”新電腦字體映射到了不同默認字體。解決方法是給工程設定一套跨平臺通用字體中文統(tǒng)一指定“微軟雅黑”或“思源黑體”英文統(tǒng)一“Arial”不要在單個控件上反復選”system-ui”這種映射不確定的字體?？绨姹敬蜷_后先做一次“字體批量替換”把全部文本控件替換到統(tǒng)一字體再處理樣式?jīng)_突不要一打開就急著改交互。演示機上如果確實沒有對應的字體文件最實際的辦法是讓現(xiàn)場工作人員提前裝好字體比在Axure里調(diào)半天更省事。6. 把智慧水務原型做出投標優(yōu)勢角色權限模擬與驗收核對表6.1 用條件可見性模擬水廠管理員與調(diào)度員兩種角色高保真原型如果只能演示頁面跳轉那它和一張PDF沒區(qū)別。投標時讓評委看到“不同角色看到不同界面”是很加分的一項。在Axure里用全局變量加條件可見性就能實現(xiàn)低成本的角色權限模擬。先設置一個全局變量userRole取值為admin或operator。管理員模式下顯示參數(shù)配置按鈕、用戶管理入口調(diào)度員模式下隱藏這些功能只能看數(shù)據(jù)和告警。給按鈕或菜單加可見性條件時寫法可以理解成下面這段偽代碼事件頁面加載 條件如果 userRole admin 動作顯示 btn_edit_parameter 條件如果 userRole operator 動作隱藏 btn_edit_parameter登錄頁做一個簡單的角色切換下拉框選擇不同角色后跳轉到不同首頁或者跳轉到同一個首頁但展示不同組件。評審現(xiàn)場講原型時用這個動作輕松帶出“權限管理”這個業(yè)務需求開發(fā)也會更清楚這里的邊界條件。6.2 原型驗收時需要核對的五張清單原型完成前我習慣用一張表逐項打鉤不為視覺只為了確認交互閉環(huán)。檢查項驗收口徑頁面閉環(huán)從登錄首頁進入大屏再進入監(jiān)測列表最后能退回上一級沒有任何死鏈接告警聯(lián)動點擊告警列表的任一條能關聯(lián)到對應監(jiān)測點和設備詳情狀態(tài)字段口徑一致列表交互中繼器的排序、篩選、分頁都能用排序后序號不錯亂斷網(wǎng)健壯關掉WiFi后核心演示頁還能完整打開地圖不外鏈在線資源交付完整存在無.rp源文件時必須連同.rplib和assets目錄打包不能只發(fā)單文件這張表不復雜但能攔住大多數(shù)原型交付后的返工。以前我總覺得原型做得像就是高保真后來被開發(fā)問了一句“這個狀態(tài)到底從哪來”才明白把每個交互邏輯寫成注釋、把每個參數(shù)列成口徑比畫得更精細重要得多?，F(xiàn)在我做水務平臺原型拿到任何zip包的第一件事永遠是先看頁面地圖和母版命名先把結構理清楚再動手改不碰來源不明的亂命名文件。希望幫到你。本文還有配套的精品資源點擊獲取 智慧水務Axure高保真原型：解壓、交互設計與交付避坑全指南
簡介這份zip壓縮包是智慧水務云平臺的Axure高保真原型由ilovemockup.club整理面向產(chǎn)品經(jīng)理、交互設計師及開發(fā)團隊用于直觀理解水務管理系統(tǒng)的界面布局、交互流程與功能模塊覆蓋物聯(lián)網(wǎng)監(jiān)控、大數(shù)據(jù)分析、人工智能預警等環(huán)節(jié)。包內(nèi)共790個文件以svg、png圖像資源、html/css/js前端頁面、less/scss樣式表為主同時包含axure原型運行所需的chrome擴展程序crx文件與字體文件整體約36.41MB結構清晰便于按模塊查閱。目前已有530人學習下載適合正在設計或開發(fā)智慧水務、智慧城市相關平臺的讀者作為交互參考。通過這套高保真原型可以快速掌握管理端監(jiān)控大屏、公眾查詢服務、企業(yè)用水管理等角色的界面設計還能借鑒數(shù)據(jù)可視化圖表、告警聯(lián)動和系統(tǒng)集成頁面的排布思路減少從零搭建原型的成本。1. 智慧水務云平臺Axure高保真原型一份zip壓縮包能帶來的真正價值在大屏可視化滿天飛的項目里最不缺的就是“看著像樣”的網(wǎng)頁最缺的是能拿去做需求評審和開發(fā)排期的可交互原型。智慧水務云平臺Axure高保真原型這份zip拆開之后不是一個靜態(tài)圖庫而是一套把綜合駕駛艙、水質(zhì)監(jiān)測、告警聯(lián)動、泵站管理串成閉環(huán)的Axure工程。對要做水務信息化投標的產(chǎn)品經(jīng)理、售前工程師、交互設計師來說它最大的價值不是省幾張畫布而是讓你在寫PRD之前先把數(shù)據(jù)怎么流轉、異常怎么處置在這個場景里“演”一遍。拿到包之后能不能改、怎么改、坑在哪里才是決定這份資源值不值得投入的關鍵。2. 從zip到Axure工程解壓、體檢與版本識別三步走2.1 用7-Zip解壓“智慧水務云平臺Axure高保真原型-ilovemockup.club整理 1.zip”路徑與中文名怎么處理原型包是zip格式第一步就是解壓。這里我習慣先把文件放進一個沒有空格和中文的短目錄再執(zhí)行解壓尤其不要在Windows上直接右鍵“全部解壓縮”到一個超長中文路徑里。原因后面單獨講先看常用做法。在Windows上可以用7-Zip的圖形界面但命令行更可控在Linux/macOS上也能用同樣邏輯mkdir -p ~/workspace/swp # 短路徑避開中文目錄名 cd ~/Downloads 7z x 智慧水務云平臺Axure高保真原型-ilovemockup.club整理 1.zip -o~/workspace/swp cd ~/workspace/swp find . -maxdepth 2 -type f | head -307z x里的x表示解壓并保留目錄結構-o指定輸出目錄注意-o后面不能有空格。這份zip壓縮包文件名里有中文和空格命令行里一定要用雙引號包住否則會被拆成多個參數(shù)。find . -maxdepth 2 -type f | head -30是用來快速看解壓后的前30個文件確認結構是否完整。在Windows資源管理器里解壓這類包會遇到三個很常見的翻車點一是壓縮包文件名以中文開頭右鍵解壓到當前目錄時經(jīng)常生成一串亂碼文件夾二是解壓路徑帶著“桌面/企劃部/智慧水務項目/原型v3/...”這種超長路徑Axure加載資源時會因為路徑太長讀不到圖片三是部分二次打包的zip帶了一個偽加密標志位解壓工具能打開資源管理器卻報“壓縮文件格式無效”。所以最穩(wěn)的操作是復制一份zip到C:\swp這類短路徑再用7-Zip解壓。解壓出來的文件通常能分成三類后綴.rp的源工程文件、后綴.rplib的元件庫、以及一個可能存在的HTML發(fā)布目錄。判斷這個包能不能改只需要看有沒有.rp文件——有就能在Axure里繼續(xù)編輯只有HTML目錄說明給的是只讀演示版后續(xù)想加交互必須重新畫。2.2 這個原型是rp9還是rp11打開報錯后的三種處理方式拿到.rp源文件后直接雙擊Axure會自己告訴你版本。最近幾年市面上的水務原型大部分是rp9生成的因為rp9在“生成HTML原型、團隊協(xié)作、組件復用”這幾個功能點上最穩(wěn)。rp11能正常打開rp9的工程反過來不行如果你只有rp9雙擊一個rp11保存的文件會直接彈“此文件由更高版本創(chuàng)建”。處理方式有三種。第一種如果團隊里有人裝了rp11讓他在Axure里用“文件-另存為-兼容版本”把工程導成rp9格式第二種本地升級到rp11但升級后要花半小時檢查字體、動態(tài)面板狀態(tài)名和矢量圖陰影這三個地方是跨版本最容易變形的第三種不打開源文件只把zip里的html目錄解壓出來用瀏覽器演示給客戶看適合售前快速過方案不適合繼續(xù)改邏輯。這里多提醒一句網(wǎng)上那些“axure免費永久激活”“axure rp9授權密鑰”的資源不要碰。水務項目通常要交付給政企客戶原型里關聯(lián)著業(yè)務數(shù)據(jù)和設備告警口徑用破解版工具做項目一方面隨時可能被工具廠商后臺鎖文件另一方面給開發(fā)留一個安全隱患完全沒必要。公司采購或試用正版已經(jīng)足夠撐起一個投標周期。2.3 工程體檢清單頁面地圖、母版、樣式資產(chǎn)一處不漏打開工程后第一件事不是看首頁長什么樣而是看頁面地圖。智慧水務云平臺原型如果結構完整頁面地圖里至少應該覆蓋這些業(yè)務模塊登錄與權限入口、綜合態(tài)勢大屏、供水管網(wǎng)一張圖、水質(zhì)在線監(jiān)測、設備與泵站管理、告警中心、工單巡檢、報表統(tǒng)計、系統(tǒng)設置。如果只有大屏和幾個零散頁面那這份原型大概率是設計師自己拼出來的展示稿不是能直接指導開發(fā)的產(chǎn)品原型。第二步檢查母版。Axure的母版用來承載頂欄、側邊欄、公共彈窗這類跨頁面復用的內(nèi)容。打開母版管理看導航欄在每個頁面是否都能正常加載。很多高保真原型翻車就是母版里的“固定背景滾動”沒設置好頁面滾動時大屏的背景圖跟著滾走導航欄卻懸在空中。正確做法是在母版上選中背景組用“固定位置”屬性把背景釘住業(yè)務內(nèi)容放到另一個動態(tài)面板里滾動。第三步看樣式資產(chǎn)。打開“頁面樣式”面板看全局顏色、字體變量是不是一套。智慧水務項目里水質(zhì)達標是藍色系異常告警是紅色系權限禁用是灰色系如果這套語義沒有做進樣式變量里開發(fā)拿到原型后還要自己猜色值。再檢查資源管理器里的圖片如果圖片指向的是網(wǎng)絡URL斷網(wǎng)演示必白屏如果圖片體積動輒幾兆頁面加載會卡到開發(fā)想罵人。最后一步是F5預覽。不要直接退出Axure先生成一份HTML到本地tmp目錄用Chrome打開檢查彈窗、數(shù)據(jù)輪播、地圖這三個最吃性能的組件能不能跑。這一步能提前暴露百分之六十的演示事故。3. 高保真不等于好看把水務數(shù)據(jù)駕駛艙做成可交互黑匣子3.1 動態(tài)面板做數(shù)據(jù)刷新輪播、暫停與手動切卡怎么綁定智慧水務云平臺的首頁通常是綜合態(tài)勢大屏上面有取水量、供水量、水質(zhì)達標率、設備在線率幾個核心指標。展示這些指標的卡片如果只是靜態(tài)擺在那里評審時客戶一定會問“數(shù)據(jù)會不會動”。所以要用Axure動態(tài)面板做輪播。我一般先把一個卡片區(qū)域放進動態(tài)面板給它三個狀態(tài)命名成card_water_quality、card_network_status、card_alarm_summary不要用默認的“State1/State2/State3”。命名隨意在單個組件里看不出問題后續(xù)要寫交互邏輯、要交付開發(fā)看狀態(tài)名時你會恨不得重畫一遍。自動輪播的交互配置可以理解成這段偽代碼事件動態(tài)面板狀態(tài)改變 等待 5000 毫秒 設置面板狀態(tài)為“下一個” 勾選“循環(huán)” 事件鼠標移入動態(tài)面板 設置全局變量 autoPlay 為 false 事件鼠標移出動態(tài)面板 設置全局變量 autoPlay 為 true關鍵參數(shù)是等待時長。水務大屏的輪播間隔建議3000到10000毫秒取5000比較通用。如果寫成500毫秒甚至更小演示機的瀏覽器會直接卡成幻燈片CPU占用率往上飆客戶面前不但沒體現(xiàn)出“實時刷新”反而顯得系統(tǒng)很廉價。如果你想在輪播過程中讓用戶手動切卡就在每個頁面狀態(tài)里放兩個箭頭按鈕點擊時直接“設置面板狀態(tài)為指定狀態(tài)”并順手把autoPlay設為false這樣用戶一操作自動輪播就停下來了不會跟他搶控制權。動態(tài)面板還有一種用法是做告警跑馬燈。在告警中心頭部放一個動態(tài)面板內(nèi)容是幾條滾動告警文本用同樣的“等待下一個”邏輯循環(huán)。這里要注意跑馬燈的等待時長和內(nèi)容字數(shù)相關文字多時要給足展示時間一般至少4000毫秒否則觀眾看不清告警內(nèi)容就失去了制作高保真原型的意義。3.2 中繼器承載水質(zhì)監(jiān)測點列表排序篩選分頁一套配置走完水務平臺里最容易被做成“死頁面”的是監(jiān)測點列表。幾十個水質(zhì)監(jiān)測點、泵站設備如果每個點都單獨畫一張頁面那只是靜態(tài)展示真正高保真的做法是把它們放進Axure中繼器讓數(shù)據(jù)驅動列表展示。中繼器里的數(shù)據(jù)列常見做法是設置成station_name、cod、ammonia、ph、status對應采樣點名稱、化學需氧量、氨氮、pH值和設備狀態(tài)。先在中繼器“數(shù)據(jù)-列”里建好字段再往“中繼器數(shù)據(jù)集”里填模擬數(shù)據(jù)。列表里每個單元格綁定[[Item.station_name]]、[[Item.cod]]這樣的字段。綁定完成后接下來就是列表的三個核心交互排序、篩選、分頁。在Axure中繼器里點擊表頭排序我習慣這樣寫事件單擊表頭“pH” 動作清除排序 動作添加排序 → 列“ph”類型“數(shù)值”順序“降序” 動作刷新中繼器這里一定要先“清除排序”再加新排序。很多人在做多列排序時翻車就是只寫了“添加排序”沒有清掉上一次的排序條件結果點了pH降序再點COD升序數(shù)據(jù)列表的排列會疊加出莫名其妙的結果看著就像黑匣子里面亂了一鍋粥。水務監(jiān)測點需要按照超標情況優(yōu)先展示時可以再加一個篩選條件事件單擊篩選按鈕 動作添加篩選 → 條件 Item.status 告警 動作刷新中繼器篩選和排序可以疊加但要在原型里寫清楚目前生效的條件是什么。比如頁面上加一個當前篩選的標簽顯示“僅看告警設備”這樣評審時客戶能直觀看到兩種狀態(tài)的區(qū)別。分頁參數(shù)我一般按每頁5條或10條來設。中繼器屬性里有“分頁”配置設置每頁條數(shù)后在上一頁、下一頁按鈕上各加一條“設置中繼器頁面為下一頁/上一頁”的動作。水務平臺列表數(shù)據(jù)動不動就是幾百條分頁高保真不只是為了好看更是為了開發(fā)階段能讓后端提前確認分頁接口的參數(shù)格式。3.3 水務GIS地圖到底該內(nèi)嵌還是外鏈兩種方案的取舍表智慧水務離不開管網(wǎng)地圖。原型里處理地圖組件最常見做法有兩個內(nèi)嵌iframe外鏈成圖或直接放一張靜態(tài)管網(wǎng)截圖再疊加熱區(qū)。我見過不少高保真原型在評審現(xiàn)場因為斷網(wǎng)地圖白屏整個演示節(jié)奏被打斷。這兩條路線的取舍可以先看下面這張對比表方案保真度演示穩(wěn)定性開發(fā)參考價值工作量iframe內(nèi)嵌在線地圖高可縮放/可拖動差依賴外網(wǎng)與CSP策略中能看點位與圖層的交互邏輯低拖個組件就完靜態(tài)底圖熱區(qū)中縮放要另做高完全本地化高能明確標注熱區(qū)與彈窗關系中需要切圖與排坐標如果是投標評審或需求確認場景我會選靜態(tài)底圖加標記點熱區(qū)。做法是先把管網(wǎng)圖、廠區(qū)平面圖導出一張PNG放進assets/images目錄再在Axure里把它作為底圖鋪在頁面底層在上面對應位置放小圓點或設備圖標每個圖標做成熱區(qū)。點擊熱區(qū)彈出設備詳情動態(tài)面板這樣既保留了高保真手感又不會因為演示現(xiàn)場沒有外網(wǎng)而翻車。如果甲方明確要求看在線地圖的平移縮放效果那就在原型里用iframe嵌一次但要在評審前把演示機的網(wǎng)絡白名單、瀏覽器安全策略全部確認好。不要用一個未測試的場地網(wǎng)絡拿一份沒檢查過的原型就上會地圖組件在智慧水務原型里是最容易出事故的地方。4. 原型交接給開發(fā)PRD標注、HTML導出與版本管理要同時做4.1 給關鍵字段做標注讓開發(fā)不再追問“這個狀態(tài)哪來”高保真原型交付給開發(fā)不是把rp文件往群里一丟就完事。開發(fā)看原型最反感的是字段沒有口徑。智慧水務系統(tǒng)里的pH值、余氯、濁度、流量這些數(shù)據(jù)單位是什么、范圍是多少、多久刷新一次、來自哪個數(shù)據(jù)源如果原型里不寫開發(fā)第一輪會按自己的理解寫聯(lián)調(diào)時再被產(chǎn)品反推回去返工。在Axure里我會給關鍵控件加“標注”即交互面板右側的注釋選項卡。比如pH監(jiān)測卡片上注釋寫清楚單位pH無量綱正常區(qū)間6.5到8.5采樣頻率5分鐘一次數(shù)據(jù)來源為水質(zhì)在線監(jiān)測儀異常閾值由工藝段分別定義。這聽起來像PRD但放在原型注釋里成本最低開發(fā)點開控件就能看到。需要特別標注的位置有這么幾類設備狀態(tài)枚舉在線/離線/維護/告警工單優(yōu)先級緊急/高/中/低告警關聯(lián)的處置動作以及列表分頁參數(shù)。這些是開發(fā)寫接口時最容易來回確認的內(nèi)容。我建議在每個涉及狀態(tài)判斷的頁面里用矩形容器放一個“字段口徑說明”頁專門列一張字段表表格列名寫字段名稱、單位、取值范圍、來源、刷新頻率就算開發(fā)不看測試也能按這個口徑去寫用例。4.2 導出HTML演示包并在瀏覽器驗證別人打不開你的頁面怎么辦原型確認沒問題后導出HTML是必要的。Axure里選“發(fā)布-生成HTML文件”保留“生成站點地圖頁面”的選項輸出目錄單獨建一個release目錄。導出后先用本機Chrome打開index.html看右上角有沒有提示“需要安裝Axure RP擴展”。如果沒有提示頁面里動態(tài)面板、中繼器交互都很正常再把這個目錄打包發(fā)出去。如果別人拿到HTML后打不開或者能打開但提示要裝插件大部分原因出在瀏覽器版本或擴展設置上。Chrome需要裝“Axure RP Extension for Chrome”這是官方擴展不是破解工具。裝完擴展后要在瀏覽器首頁訪問openWithAxure提示的頁面授權本機原型路徑。另一個常見問題是只發(fā)index.html單文件資源目錄、js目錄、css目錄沒一起打包發(fā)到對方手上一打開全是裂圖。正確做法是把整個發(fā)布目錄壓成zip不要只拖一個html文件進微信。導出之前還要檢查一遍外鏈資源。如果整個工程里還有訪問https://開頭的圖片、地圖、字體最好在演示機斷網(wǎng)狀態(tài)下再點一遍。高保真不是只在裝好的演示機里成立而是要在客戶會議室那臺經(jīng)常沒網(wǎng)絡的電腦上也能成立。4.3 保留一份“日期版本快照”用命令行打包交付zip做原型迭代時最怕的是沒有后悔藥。大家都有過這種經(jīng)歷昨天還在改的水務大屏v3今天被領導一句話推翻了想回退卻發(fā)現(xiàn)原來的rp文件已經(jīng)不在。所以我每次交付前都會打一個帶日期的版本快照命令行更高效。在Git Bash或WSL里我會這樣打包DATE$(date %Y%m%d-%H%M) cd ~/workspace/swp tar -czf ../smart_water_prototype_${DATE}.tar.gz \ --exclude./release/* --exclude./.git/* .tar -czf里的c表示創(chuàng)建壓縮包z是gzip壓縮f指定輸出文件名。--exclude先把發(fā)布目錄和git目錄排除掉保留rp源文件、rplib元件庫和assets資源。如果同事是Windows環(huán)境也可以用7-Zip命令打zip7z a -tzip smart_water_prototype_${DATE}.zip . -xr!release -xr!.git-tzip指定zip格式-xr!release排除release目錄-xr!.git排除git。打版本包時源文件里的圖片引用必須是相對路徑不要出現(xiàn)file:///C:/Users/xxx/Desktop/...這種絕對路徑否則開發(fā)換一臺電腦解壓資源目錄還是指向你本機的地址裂圖沒跑。版本號命名也建議統(tǒng)一。我再也不相信“最終版”“最最終版”這種文件名智慧水務這種體量的原型至少要有v日期、修訂人縮寫兩個信息例如swp_20240618_ls.rp。這樣后面就算要回退也清楚是哪一版、誰改的。5. 避坑清單智慧水務原型最常見的五類翻車現(xiàn)場5.1 偽加密zip解壓報錯現(xiàn)象、原因與修復方法現(xiàn)象下載回來的zip壓縮包在Windows資源管理器里雙擊提示“壓縮文件格式無效”右鍵也沒法直接解壓但用7-Zip打開卻能看到里面的rp文件和assets目錄一切正常。這個情況在這類整理好的原型zip里并不少見原因是壓縮包在打包時頭部被設置了加密標志位但文件內(nèi)容實際并沒有加密也就是常說的zip偽加密。Windows資源管理器會嚴格按照加密標志去走解密流程于是報錯7-Zip這類工具對標志位容錯更強所以能正常瀏覽。解決辦法是用7-Zip打開這個zip選擇“文件-修復壓縮文件”修復后生成一個fixed.zip再把fixed.zip解壓出來。如果修復后還提示要密碼說明是真加密那就不要想著繞過加密回去找分享人要密碼或者換個下載渠道。5.2 動態(tài)面板死循環(huán)卡爆演示瀏覽器等待時長不是越小越好現(xiàn)象在評審會現(xiàn)場演示綜合態(tài)勢大屏時頁面一會兒流暢一會兒卡頓十幾分鐘后瀏覽器風扇狂轉最后直接無響應。原因是大屏上掛了多個動態(tài)面板輪播每個都設置了“等待500毫秒-下一個狀態(tài)-循環(huán)”幾個動態(tài)面板同時搶主線程瀏覽器直接崩掉。解決方法是把輪播等待時長統(tǒng)一調(diào)到3000毫秒以上并且在同一頁面里最多保留一個自動輪播的動態(tài)面板。如果一定要多塊區(qū)域“動起來”可以讓第二塊區(qū)域只在懸停時切換不做全局循環(huán)。另一個細節(jié)是演示時把瀏覽器窗口單獨開一個桌面別跟視頻會議、錄屏軟件搶GPU高保真原型在條件一般的演示機上很脆弱。5.3 中繼器排序后序號錯亂別把“行號”寫死在每一行現(xiàn)象水質(zhì)監(jiān)測列表里第一列序號原本是1到10點擊“pH”表頭按降序排列后行號還是跟著排序前的位置走看起來像表格數(shù)據(jù)錯亂了。原因很直接當初畫原型時第1行單元格里寫死了“1”第2行寫死“2”這與中繼器數(shù)據(jù)集完全沒關系。解決方法是把序號列綁定到中繼器每次數(shù)據(jù)載入時的行索引上不要手工錄入固定數(shù)字。在中繼器“每項加載”的用例里把當前行的索引值寫到序號文本框里這樣排序、篩選、分頁后行索引會重新計算序號也能始終連續(xù)。這條原則同樣適用于設備編號、工單號這類展示列凡是要隨列表順序變化的數(shù)字都不要寫死在數(shù)據(jù)集列里。5.4 演示機斷網(wǎng)導致地圖白屏外鏈圖資與靜態(tài)底圖的邊界現(xiàn)象在客戶會議室打開綜合態(tài)勢大屏其他頁面都正常唯獨管網(wǎng)一張圖區(qū)域白屏開發(fā)一眼就說是網(wǎng)絡問題。原因是原型里用iframe內(nèi)嵌了在線地圖而演示現(xiàn)場網(wǎng)絡沒有放開地圖域名訪問或者瀏覽器裝的安全策略把iframe攔截了。解決方法是把管網(wǎng)地圖先截圖成底圖放進assets目錄再在底圖上擺標記點和熱區(qū)。對于地圖縮放、平移這種必須演示的動態(tài)效果可以單獨準備一臺連好網(wǎng)的演示電腦通過投屏方式外接展示不在原型包里依賴外網(wǎng)。原型要做到“拔網(wǎng)線也能跑完核心流程”這是智慧水務這類政企項目演示的基本素養(yǎng)。5.5 rp9源文件在rp11打開后字體全亂先定字體再畫頁面現(xiàn)象把rp9的原型發(fā)到裝了rp11的同事電腦上打開后標題從粗體變成了細體中文全部顯示成宋體按鈕和文本重疊。原因是兩個版本對系統(tǒng)字體列表的處理不一樣工程里用的是原電腦上的“微軟雅黑 Bold”新電腦字體映射到了不同默認字體。解決方法是給工程設定一套跨平臺通用字體中文統(tǒng)一指定“微軟雅黑”或“思源黑體”英文統(tǒng)一“Arial”不要在單個控件上反復選”system-ui”這種映射不確定的字體?？绨姹敬蜷_后先做一次“字體批量替換”把全部文本控件替換到統(tǒng)一字體再處理樣式?jīng)_突不要一打開就急著改交互。演示機上如果確實沒有對應的字體文件最實際的辦法是讓現(xiàn)場工作人員提前裝好字體比在Axure里調(diào)半天更省事。6. 把智慧水務原型做出投標優(yōu)勢角色權限模擬與驗收核對表6.1 用條件可見性模擬水廠管理員與調(diào)度員兩種角色高保真原型如果只能演示頁面跳轉那它和一張PDF沒區(qū)別。投標時讓評委看到“不同角色看到不同界面”是很加分的一項。在Axure里用全局變量加條件可見性就能實現(xiàn)低成本的角色權限模擬。先設置一個全局變量userRole取值為admin或operator。管理員模式下顯示參數(shù)配置按鈕、用戶管理入口調(diào)度員模式下隱藏這些功能只能看數(shù)據(jù)和告警。給按鈕或菜單加可見性條件時寫法可以理解成下面這段偽代碼事件頁面加載 條件如果 userRole admin 動作顯示 btn_edit_parameter 條件如果 userRole operator 動作隱藏 btn_edit_parameter登錄頁做一個簡單的角色切換下拉框選擇不同角色后跳轉到不同首頁或者跳轉到同一個首頁但展示不同組件。評審現(xiàn)場講原型時用這個動作輕松帶出“權限管理”這個業(yè)務需求開發(fā)也會更清楚這里的邊界條件。6.2 原型驗收時需要核對的五張清單原型完成前我習慣用一張表逐項打鉤不為視覺只為了確認交互閉環(huán)。檢查項驗收口徑頁面閉環(huán)從登錄首頁進入大屏再進入監(jiān)測列表最后能退回上一級沒有任何死鏈接告警聯(lián)動點擊告警列表的任一條能關聯(lián)到對應監(jiān)測點和設備詳情狀態(tài)字段口徑一致列表交互中繼器的排序、篩選、分頁都能用排序后序號不錯亂斷網(wǎng)健壯關掉WiFi后核心演示頁還能完整打開地圖不外鏈在線資源交付完整存在無.rp源文件時必須連同.rplib和assets目錄打包不能只發(fā)單文件這張表不復雜但能攔住大多數(shù)原型交付后的返工。以前我總覺得原型做得像就是高保真后來被開發(fā)問了一句“這個狀態(tài)到底從哪來”才明白把每個交互邏輯寫成注釋、把每個參數(shù)列成口徑比畫得更精細重要得多?，F(xiàn)在我做水務平臺原型拿到任何zip包的第一件事永遠是先看頁面地圖和母版命名先把結構理清楚再動手改不碰來源不明的亂命名文件。希望幫到你。本文還有配套的精品資源點擊獲取