基于BootStrap框架构建快速响应的GPS部标监控平台

时间：2016-05-23　来源：中国集群通信网　作者：网络　点击：次

主页（http://www.pttcn.net）：基于BootStrap框架构建快速响应的GPS部标监控平台

最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架，符合交通部796部标只是他们的一个基本要求，重点是要和他们的冷链云物流平台进行适配。我自己先浏览了客户的云物流平台的界面，采用的是bootStrap框架，自适应页面大小，基于html5开发，界面设计非常的简洁，清爽，冷色调，有点像苹果或者锤子的官方商城页面，这样可以快速的关注到自己想看到的内容。不像传统的物流网站千人一面，充斥着大量的物流广告还配有slider动图效果让人眼晕，显得很cheap。
显然如果直接将一个以后台数据展现为主的GPS管理平台集成到这样一个物流网站中，会造成界面的不和谐。
我理解客户需求其实主要的要求是简洁，浸入式设计的风格。这一点和我追求的界面设计风格其实是一致的，我觉得监控软件的特点是长时间对着电脑屏幕监控，也就是看的多，所以界面风格要追求保守、简洁，清晰，避免使用3D突起、渐变、五颜六色等风格，更要避免使用动图，造成视觉疲劳，过度追求炫酷界面，则用户体验不持久，时间长了容易审美疲劳。
GPS软件开发者在界面设计的时候，容易与一线用户脱钩，很少有一种简洁、直接、朴素、持久的设计风格，首先考虑的不是信息的组织、用户的体验，而是如何的炫，如何能表现自己很高的设计水平，动感，渐进、半透明、滑门、延迟、手风琴、背景图片等效果，总想用上一用，滥用颜色，这些除了造成视觉疲劳、操作繁琐外，起不到真正的用户体验。

动手前，我确定了GPS部标监控平台的界面设计规范如下：
1.工作区要尽可能大，能够全屏设置，并且能够调整区域大小，同时用户需要看的信息要尽量组合分区集中在一屏当中，避免左右上下拖动；
2.尽量使用鼠标事件来代替按钮，如鼠标移动到某一对象时，显示对象的详细数据，双击对象或记录显示信息等；
3.当数据信息多时，尽量使用标签页，而不是弹出窗口，避免窗口杂乱或信息重复加载；
4.分区: 顶部工具栏，左侧导航区，底部数据信息显示区，中间是监控工作区，右下是报警信息区。
5.界面色调采用灰色、白色和蓝色三种色调。
6.菜单设计，大量增加了快捷菜单，主菜单采用css多层级联的菜单，但是增加了快捷菜单、地图工具栏和终端指令操作命令工具栏，使得用户的常用操作不需要去层层点击主菜单。
如下图所示，采用蓝色图标，白色背景，蓝白相间，正是BootStrap框架的流行色，也和客户物流云平台的网站Theme贴合。

交通部部标监控平台