產品定位

智能城軌綜合業務平臺主要應用城市軌道交通行業，涵蓋城市軌道交通業務主要場景，的通用工業互聯網平臺。集區域數據監測，硬件管理，資源管理，設備調度等專業性功能，采用可視化，模塊化設計理念，可自由定制產品功能，滿足不同用戶的需求。

目標用戶

目前平臺主要核心場景是是地鐵監控，主要面向地鐵運營人員、軟件開發人員、組態人員、系統維護人員。擁有各領域專業的知識儲備，有一定的軟件操作基礎，年齡段相對較低，使用場景相對固定，主要在指揮大廳或各系統控制點操作系統，對系統專業性，易用性要求較高。

設計風格

平臺整體設計采用扁平設計風格，綜合運用場景化設計，模塊化設計，結合平臺自身屬性，進行布局優化和視覺設計。通過定制化的圖標和科學的配色，界面整體營造出出現代感和科技感，符合工業互聯網平臺的產品定位，且獨具特色。

優化視覺焦點，突出核心數據，讓用戶高效的獲取最有價值內容

針對原型界面，我們和客戶深入溝通后發現，用戶在平臺中查看數據視覺動線共分為3個層次，第一層：初步瀏覽，這一層用戶主要關心系統核心數據，主要包括當前資源占用情況，和虛擬機狀態，瀏覽頁面耗時相對較短，如無特殊情況即可略過；第二層：進一步查看細節信息，如系統通知、狀態及排名等信息，這一層用戶主要關注最新信息的更新，針對最新消息的提示或狀態變更的提示應當與其他信息明顯區分；第三層：辦理業務，這一層用戶會點擊進入二級或三級頁面執行業務，這一層應當是用戶使用系統最核心目的，用時也是最長的階段。

針對上述情況，我們在設計新版頁面時，從交互邏輯和視覺展示層面分別進行優化：

1.優化頁面層級，將一級菜單置頂顯示，同時首頁隱藏二、三級菜單，最大化利用首頁空間的同時，明確操作區域，簡化信息展示，減少不必要信息的視覺干擾。

2.優化視覺重量，人眼一般通過識別物體的大小，形狀，顏色這三個維度來區分視覺的主次關系，我們利用這一原則，把用戶關心的“資源情況”“車站狀態”等信息增大顯示面積，同時利用圖形/圖表來加重視覺重量，引導用戶視線聚焦核心數據。

3.優化信息顯示，改版后的產品相較原型增加許多數據，這樣單屏無法顯示全部數據，我們依據用戶習慣，將“虛擬機狀態”放在第二屏展示，用戶可點擊頁面箭頭實現數據的切換。“虛擬機狀態”部分，我們通過模擬立體方式展示設備之間拓撲關系圖，為用戶帶來直觀沉浸式的體驗。

以用戶為中心，提升人與平臺的友好視覺互動體驗

人機交互遵循“信息呈現（獲取）-操作指令-結果反饋”的循環，信息呈現便是人機互動的首要環節，我們在信息呈現時，盡可能以圖形化方式表達，減少用戶認知負擔，將單個的數字轉化為儀表盤，直觀地表現出資源占用情況，預警報警等多重含義，營造數據展示氛圍的真實感。

虛擬機狀態模塊，針對不同設備繪制對應立體圖標，通過圖標顏色區分設備狀態，力求以直觀的方式將信息傳達給用戶。

深度打磨產品細節，賦予產品設計靈魂

分析問題

界面原型左側導航區域層級過多，且區分不明顯，容易引起視覺混亂；內容區域信息展示和可操作性操作區分不明顯，部分功能堆疊較多，但信息展示較少，空間浪費嚴重。

解決問題

我們優化了頁面層級，將一級和二級菜單分開顯示，同時區分二、三、四級菜單，增加“選中”樣式，明確當前頁面所在位置，增加菜單收起功能，收起后只顯示圖標，節省頁面空間。

內容區域，我們優化了視覺顯示重心，把左側導航樹結構上下貫通顯示增強功能屬性和視覺重量，底部信息區域縮窄至于圖元編輯區域同寬，增加頁面空間利用率

右側屬性區域，把圖層和屬性模塊上下并聯排列，同時優化原有表格顯示樣式，明確“可編輯”“只讀”“可操作”等組件狀態和樣式，最大化利用頁面空間。

于細節處見大文章

頁面中重新設計的圖標，不僅更加貼合功能含義，也更加精美，能夠完美匹配系統風格。

圖形組態頁面中，將圖標分為示意性圖標和功能性圖標2大類，示意性圖標即為導航菜單/樹形控件中圖標，功能性圖標依據屬性不同右分為操作類圖標和繪制類圖標；操作類圖標對應系統全局功能，以藍色為主色；繪制類圖標主要用于繪制各種圖元結構，適用范圍僅限于頁面中央繪圖區，以黑色為主色。

豐富的組件庫設計，為產品提供強大的擴展能力

針對產品頁面無法涵蓋到的部分廠家，我們提前推斷并提供了詳盡的擴展組件，涵蓋一般通用平臺常用的業務場景，方便平臺的擴展，滿足模塊化，通用平臺的設計初衷。