基於BootStrap框架構建快速響應的GPS部標監控平臺

最近一個客戶要求將gps部標平臺移植到bootStrap框架做爲前端框架，符合交通部796部標只是他們的一個基本要求，重點是要和他們的冷鏈雲物流平臺進行適配。我本身先瀏覽了客戶的雲物流平臺的界面，採用的是bootStrap框架，自適應頁面大小，基於html5開發，界面設計很是的簡潔，清爽，冷色調，有點像蘋果或者錘子的官方商城頁面，這樣能夠快速的關注到本身想看到的內容。不像傳統的物流網站千人一面，充斥着大量的物流廣告還配有slider動圖效果讓人眼暈，顯得很cheap。

顯然若是直接將一個之後臺數據展示爲主的GPS管理平臺集成到這樣一個物流網站中，會形成界面的不和諧。

我理解客戶需求其實主要的要求是簡潔，浸入式設計的風格。這一點和我追求的界面設計風格實際上是一致的，我以爲監控軟件的特色是長時間對着電腦屏幕監控，也就是看的多，因此界面風格要追求保守、簡潔，清晰，避免使用3D突起、漸變、五光十色等風格，更要避免使用動圖，形成視覺疲勞，過分追求炫酷界面，則用戶體驗不持久，時間長了容易審美疲勞。

GPS軟件開發者在界面設計的時候，容易與一線用戶脫鉤，不多有一種簡潔、直接、樸素、持久的設計風格，首先考慮的不是信息的組織、用戶的體驗，而是如何的炫，如何能表現本身很高的設計水平，動感，漸進、半透明、滑門、延遲、手風琴、背景圖片等效果，總想用上一用，濫用顏色，這些除了形成視覺疲勞、操做繁瑣外，起不到真正的用戶體驗。

 

動手前，我肯定了GPS部標監控平臺的界面設計規範以下：
1.工做區要儘量大，可以全屏設置，而且可以調整區域大小，同時用戶須要看的信息要儘可能組合分區集中在一屏當中，避免左右上下拖動；
2.儘可能使用鼠標事件來代替按鈕，如鼠標移動到某一對象時，顯示對象的詳細數據，雙擊對象或記錄顯示信息等；
3.當數據信息多時，儘可能使用標籤頁，而不是彈出窗口，避免窗口雜亂或信息重複加載；
4.分區: 頂部工具欄，左側導航區，底部數據信息顯示區，中間是監控工做區，右下是報警信息區。
5.界面色調採用灰色、白色和藍色三種色調。

6.菜單設計，大量增長了快捷菜單，主菜單採用css多層級聯的菜單，可是增長了快捷菜單、地圖工具欄和終端指令操做命令工具欄，使得用戶的經常使用操做不須要去層層點擊主菜單。

設計的最終效果參見：基於BootStrap框架構建快速響應的GPS部標監控平臺

基於Spring4+SpringMVC4+Mybatis4+Hibernate4+Junit4框架構建高性能企業級的部標GPS監控平臺

點此查看：Gps監控平臺文章索引。