基于BootStrap框架構(gòu)建快速響應(yīng)的GPS部標(biāo)監(jiān)控平臺

時間：2016-05-23　來源：中國集群通信網(wǎng)　作者：網(wǎng)絡(luò)　點擊：次

主頁（http://www.130131.com）：基于BootStrap框架構(gòu)建快速響應(yīng)的GPS部標(biāo)監(jiān)控平臺

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

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

交通部部標(biāo)監(jiān)控平臺