Construction of a fast response GPS monitoring platform based on bootstrap framework

A recent customer request to port the GPS platform to the bootstrap framework as a front-end frame, meeting the Ministry of Transport 796 is just one of their basic requirements, with emphasis on adapting to their cloud logistics platform. I first browsed the customer's cloud logistics platform interface, using the bootstrap framework, adaptive page size, based on HTML5 development, the interface design is very concise, refreshing, so that you can quickly focus on what you want to see. Unlike the traditional logistics site thousand people side, flooded with a lot of logistics advertising also has a slider action diagram effect let a person dizzying, appear very cheap.

Obviously, if we integrate a GPS management platform with background data mainly into such a logistics website, it will cause the interface disharmony.

I understand that the main requirements of the customer's needs are concise, immersion style design. This and my pursuit of the interface design style is in fact consistent, I think the characteristics of monitoring software is a long time on the computer screen monitoring, that is to see more, so the interface style to pursue a conservative, concise, clear, avoid the use of 3D projection, gradient, colorful and other styles, but also to avoid the use of dynamic diagram, resulting in visual fatigue, Excessive pursuit of cool interface, the user experience is not durable, long time is easy to aesthetic fatigue. See also: Gps.net Map application Architecture Design

GPS software developers in the interface design, easy to decouple from the first-line users, few have a concise, direct, simple, long-lasting design style, not only consider the organization of information, user experience, but how to dazzle, how to express their high level of design, dynamic, progressive, translucent, sliding door, delay, accordion, Background pictures and other effects, always want to use the use of, abuse of color, these in addition to cause visual fatigue, operation cumbersome, do not have a real user experience. These poor interface designs have to be discarded, see: GIS, GPS, and video surveillance interface design

Using the bootstrap framework and learning its front-end design ideas can be good to avoid the above shortcomings.

Before I did, I determined that the interface design specification for the GPS monitoring platform is as follows:
1. Work area to be as large as possible, to be able to set the full screen, and can adjust the size of the area, while the user needs to see the information to try to combine the partition in one screen, avoid dragging up and down;
2. Try to use mouse events instead of buttons, such as when the mouse moves to an object, display the object's detailed data, double-click the object or record display information, etc.;
3. When the data information for a long time, try to use tabs, rather than pop-up windows, to avoid window clutter or information repeated loading;
4. Partition: The top toolbar, the left navigation area, the bottom data information display area, the middle is the monitoring work area, the bottom right is the alarm information area.
5. The tone of the interface is three shades of gray, white and blue.

6. Menu design, a lot of added shortcut menu, the main menu with CSS Multi-level menu, but added the shortcut menu, Map toolbar and Terminal Command Operation Command toolbar, so that the user's common operation does not need to go to the layer to click the main menu.

The final results of the design are as follows:

Construction of a fast response GPS monitoring platform based on bootstrap framework