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

時間：2016-05-23　來源：中國集群通信網　作者：網絡　點擊：次

主頁（http://m.by236.com）：基于BootStrap框架構建快速響應的GPS部標監控平臺

最近一個客戶要求將gps部標平臺移植到bootStrap框架作為前端框架，符合交通部796部標只是他們的一個基本要求，重點是要和他們的冷鏈云物流平臺進行適配。我自己先瀏覽了客戶的云物流平臺的界面，采用的是bootStrap框架，自適應頁面大小，基于html5開發，界面設計非常的簡潔，清爽，冷色調，有點像蘋果或者錘子的官方商城頁面，這樣可以快速的關注到自己想看到的內容。不像傳統的物流網站千人一面，充斥著大量的物流廣告還配有slider動圖效果讓人眼暈，顯得很cheap。
顯然如果直接將一個以后臺數據展現為主的GPS管理平臺集成到這樣一個物流網站中，會造成界面的不和諧。
我理解客戶需求其實主要的要求是簡潔，浸入式設計的風格。這一點和我追求的界面設計風格其實是一致的，我覺得監控軟件的特點是長時間對著電腦屏幕監控，也就是看的多，所以界面風格要追求保守、簡潔，清晰，避免使用3D突起、漸變、五顏六色等風格，更要避免使用動圖，造成視覺疲勞，過度追求炫酷界面，則用戶體驗不持久，時間長了容易審美疲勞。
GPS軟件開發者在界面設計的時候，容易與一線用戶脫鉤，很少有一種簡潔、直接、樸素、持久的設計風格，首先考慮的不是信息的組織、用戶的體驗，而是如何的炫，如何能表現自己很高的設計水平，動感，漸進、半透明、滑門、延遲、手風琴、背景圖片等效果，總想用上一用，濫用顏色，這些除了造成視覺疲勞、操作繁瑣外，起不到真正的用戶體驗。

動手前，我確定了GPS部標監控平臺的界面設計規范如下：
1.工作區要盡可能大，能夠全屏設置，并且能夠調整區域大小，同時用戶需要看的信息要盡量組合分區集中在一屏當中，避免左右上下拖動；
2.盡量使用鼠標事件來代替按鈕，如鼠標移動到某一對象時，顯示對象的詳細數據，雙擊對象或記錄顯示信息等；
3.當數據信息多時，盡量使用標簽頁，而不是彈出窗口，避免窗口雜亂或信息重復加載；
4.分區: 頂部工具欄，左側導航區，底部數據信息顯示區，中間是監控工作區，右下是報警信息區。
5.界面色調采用灰色、白色和藍色三種色調。
6.菜單設計，大量增加了快捷菜單，主菜單采用css多層級聯的菜單，但是增加了快捷菜單、地圖工具欄和終端指令操作命令工具欄，使得用戶的常用操作不需要去層層點擊主菜單。
如下圖所示，采用藍色圖標，白色背景，藍白相間，正是BootStrap框架的流行色，也和客戶物流云平臺的網站Theme貼合。

交通部部標監控平臺