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

最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的云物流平台进行适配。我自己先浏览了客户的云物流平台的界面,采用的是bootStrap框架,自适应页面大小,基于html5开发,界面设计非常的简洁,清爽,这样可以快速的关注到自己想看到的内容。不像传统的物流网站千人一面,充斥着大量的物流广告还配有slider动图效果让人眼晕,显得很cheap。

显然如果直接将一个以后台数据展现为主的GPS管理平台集成到这样一个物流网站中,会造成界面的不和谐。

我理解客户需求其实主要的要求是简洁,浸入式设计的风格。这一点和我追求的界面设计风格其实是一致的,我觉得监控软件的特点是长时间对着电脑屏幕监控,也就是看的多,所以界面风格要追求保守、简洁,清晰,避免使用3D突起、渐变、五颜六色等风格,更要避免使用动图,造成视觉疲劳,过度追求炫酷界面,则用户体验不持久,时间长了容易审美疲劳。参见:GPS.NET 地图应用程序架构设计

GPS软件开发者在界面设计的时候,容易与一线用户脱钩,很少有一种简洁、直接、朴素、持久的设计风格,首先考虑的不是信息的组织、用户的体验,而是如何的炫,如何能表现自己很高的设计水平,动感,渐进、半透明、滑门、延迟、手风琴、背景图片等效果,总想用上一用,滥用颜色,这些除了造成视觉疲劳、操作繁琐外,起不到真正的用户体验。这些拙劣的界面设计必须要抛弃掉,参见:GIS、GPS和视频监控界面设计

采用BootStrap框架并学习它的前端设计思想可以很好的避免以上的缺点。

动手前,我确定了GPS部标监控平台的界面设计规范如下:
1.工作区要尽可能大,能够全屏设置,并且能够调整区域大小,同时用户需要看的信息要尽量组合分区集中在一屏当中,避免左右上下拖动;
2.尽量使用鼠标事件来代替按钮,如鼠标移动到某一对象时,显示对象的详细数据,双击对象或记录显示信息等;
3.当数据信息多时,尽量使用标签页,而不是弹出窗口,避免窗口杂乱或信息重复加载;
4.分区: 顶部工具栏,左侧导航区,底部数据信息显示区,中间是监控工作区,右下是报警信息区。
5.界面色调采用灰色、白色和蓝色三种色调。

6.菜单设计,大量增加了快捷菜单,主菜单采用css多层级联的菜单,但是增加了快捷菜单、地图工具栏和终端指令操作命令工具栏,使得用户的常用操作不需要去层层点击主菜单。

设计的最终效果如下:

时间: 2024-10-10 15:26:43

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

GPS部标监控平台的功能设计(一)-功能列表

在2011年交通部的796标准推出后,随着各地交管部门的硬性要求,大多数的GPS监控系统或者车辆管理系统或者物流管理系统,无论是旧的,还是新开发的,都必须要以796标准为基础蓝本,首先要满足796的要求,然后在此基础上增加行业应用的个性化要求,如物流运输车辆非常关心的油耗管理,冷链运输非常关心温度控制等等. 所以开发GPS平台的时候,必须要首先阅读交通部的jt/t 796 , jt/t808和jt/t809的文档,以此作为自己的功能设计的需求来源,行业需求或用户需求是排在后面的.很多开发团队做出

GPS部标监控平台的架构设计(七)-压力测试

部标监控平台的压力测试是部标检测流程的最后一个检测环节,也是最难的,很多送检的企业平台都是卡壳在这一个环节.企业平台面临的问题如下: 1.对于压力测试的具体指标要求理解含糊,只知道是模拟一万辆车终端进行数据包传输,不知道具体的检测标准是那些指标,等进京考试后落榜了,才知道压力测试失败了,这个时候,还要通知后方的同志改进,耽误的时间和差旅费用成本惊人.很多检测人员需要在京住上几十天,算算得多少钱.因为不知道方向,所以改进也是盲目改进,不知道行不行,应付任务再次送检,也是摇骰子,祈求上天让我们通过吧

GPS部标监控平台的架构设计(八)-基于WCF的平台数据通信设计

总体来讲,GPS部标平台的软件开发是一个对网络通信和应用程序之间通信的技术应用密集型的开发工作,也是有一定设计技术含量的工作. 1.设计通信接口 在设计的时候,根据职责划分,拆分成不同的应用子系统,对各个子系统进行功能隔离,并通过设计接口规定子系统直接的调用规约. 首先我们根据部标平台的要求,设计和开发出各个主要的服务器子系统,这是平台中最核心的子系统,在实际的应用中,由于车辆规模的大小和行业需求,还会扩展出各种业务子系统.核心子系统如下: 1)808GPS服务器,采用交通部的部标808协议,负

基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台

开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中,不断的填坑走弯路,以至于整个团队被坑埋掉.做GPS平台这么多年,以前就了解到一些开发团队过于关注某一种语言的优势,比如过于选用GO,Erlang,python,php等技术,最后团队熟悉这些技术的关键人员离职了,都没人接手,不能不说是个悲剧.所以说平台的技术架构选型要注重的是稳健,均衡而不是偏激,

基于Bootstrap框架的临床数据管理系统的设计与开发

    基于Bootstrap框架的临床数据管理系统的设计与开发     2018年11月10日 目  录 第一章绪论... 6 1.1 选题背景及其意义... 6 1.2国内外研究现状... 7 1.2.1 临床大数据管理系统发展现状... 7 1.2.2医疗电子表单管理发展现状... 8 1.3研究目标... 9 1.4 研究内容... 10 1.5论文整体结构... 10 第二章相关技术研究... 12 2.1 AngularJS技术简述... 12 2.2 RESTful API +sw

基于Dubbo框架构建分布式服务 (二)

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方

[转载] 基于Dubbo框架构建分布式服务

转载自http://shiyanjun.cn/archives/1075.html Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的F

基于Dubbo框架构建分布式服务 【转】

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方

基于Dubbo框架构建分布式服务

Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配置就能够实现分布式服务调用,也就是说服务提供方(Provider)发布的服务可以天然就是集群服务,比如,在实时性要求很高的应用场景下,可能希望来自消费方(Consumer)的调用响应时间最短,只需要选择Dubbo的Forking Cluster模式配置,就可以对一个调用请求并行发送到多台对等的提供方