最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的云物流平台进行适配。我自己先浏览了客户的云物流平台的界面,采用的是bootStrap框架,自适应页面大小,基于html5开发,界面设计非常的简洁,清爽,这样可以快速的关注到自己想看到的内容。不像传统的物流网站千人一面,充斥着大量的物流广告还配有slider动图效果让人眼晕,显得很cheap。
显然如果直接将一个以后台数据展现为主的GPS管理平台集成到这样一个物流网站中,会造成界面的不和谐。
我理解客户需求其实主要的要求是简洁,浸入式设计的风格。这一点和我追求的界面设计风格其实是一致的,我觉得监控软件的特点是长时间对着电脑屏幕监控,也就是看的多,所以界面风格要追求保守、简洁,清晰,避免使用3D突起、渐变、五颜六色等风格,更要避免使用动图,造成视觉疲劳,过度追求炫酷界面,则用户体验不持久,时间长了容易审美疲劳。参见:GPS.NET 地图应用程序架构设计
GPS软件开发者在界面设计的时候,容易与一线用户脱钩,很少有一种简洁、直接、朴素、持久的设计风格,首先考虑的不是信息的组织、用户的体验,而是如何的炫,如何能表现自己很高的设计水平,动感,渐进、半透明、滑门、延迟、手风琴、背景图片等效果,总想用上一用,滥用颜色,这些除了造成视觉疲劳、操作繁琐外,起不到真正的用户体验。这些拙劣的界面设计必须要抛弃掉,参见:GIS、GPS和视频监控界面设计
采用BootStrap框架并学习它的前端设计思想可以很好的避免以上的缺点。
动手前,我确定了GPS部标监控平台的界面设计规范如下:
1.工作区要尽可能大,能够全屏设置,并且能够调整区域大小,同时用户需要看的信息要尽量组合分区集中在一屏当中,避免左右上下拖动;
2.尽量使用鼠标事件来代替按钮,如鼠标移动到某一对象时,显示对象的详细数据,双击对象或记录显示信息等;
3.当数据信息多时,尽量使用标签页,而不是弹出窗口,避免窗口杂乱或信息重复加载;
4.分区: 顶部工具栏,左侧导航区,底部数据信息显示区,中间是监控工作区,右下是报警信息区。
5.界面色调采用灰色、白色和蓝色三种色调。
6.菜单设计,大量增加了快捷菜单,主菜单采用css多层级联的菜单,但是增加了快捷菜单、地图工具栏和终端指令操作命令工具栏,使得用户的常用操作不需要去层层点击主菜单。
设计的最终效果如下: