How to visualize financial data

In the era of internet finance and financial Internet, daily life is surrounded by massive data information. From the design level, it is also a new area of challenge. Whether the data visualization design has the rule to follow, from the design work can discover its design the commonness and the characteristic, how to extract the important information content from the layer data information, through the introduction understandable design language accurate expression. With the designer's eyes, see the consistency of the product. Through the design of the information will be more reasonable, more storytelling, let us focus on the focus of information. Otherwise, the visual is just useless.

　What is data visualization

The main goal of the data visualization is it ability to visualize data, communicating information clearly and effectively. (The purpose of data visualization is to visualize data so that information can be delivered clearly and effectively.) -vitaly Friedman (5 foreign people who are most influential in web design) First, let's look at some data-related design works for appreciation.

Can you see a lot of design work as a common feature of financial relevance? The design features of some and financial attributes are sorted out.

　Characteristics of financial data design

1. The use of red and green under the financial category

The most appropriate figure is that the target user is willing to accept, and can clearly feel the message you want to convey. Or, it reflects your data graphics and the temperament of the product match. Ability to glance at product attributes and features. In the financial category of products are easily reflected in the red-green color, to note that in the domestic traditional industry, the red stock market represents a big rise in the bull market, green represents a sharp drop in the city. This and foreign cognition is the opposite, design more to adapt to the traditional industry to infiltrate the general understanding of the people, the traditional industry in some subtle impression to undertake under the new media.

2. No more than three kinds of simple color reproduction

Brand product design page, building brand sense is very important. Much also depends on the simplicity of the element. Concise as the name implies is clean, capable, so active use color is not very applicable. Color as a designer to convey the brand feelings of one of the main elements, a clear brand color, the user memory, awareness of a great increase. If you can, as far as possible with the standard color logo, if more special pages, will be properly separated from the standard color, but with a basic color will be controlled within three.

3. Use of illustrations

In modern web design to have a sense of the system, coherence. The trend is no longer to complex colors, styles and textures, but with wireframe, color block, micro-texture and other design-oriented style. Advantages: Integrated with the whole page/background to form a unified visual beauty. Not cumbersome design concepts, so that users clearly see the necessary information.

When you are lost in the information, the information diagram is very useful

1. jscharts--http://www.jscharts.com/

A JavaScript charting tool that has many templates.

2. d3.js--http://d3js.org/

is one of the most popular visual libraries and is used by many other form plug-ins.

3. dundas--http://www.dundas.com/components/gallery/asp/

NET under the old Data charting tool.

　How to use the financial products

1. Apply to the product page, first to find the color of the financial attributes, to set the tone of the main station

Finance and data, what words can we relate to?

And then extract the key elements that conform to the overall attribute temperament.

Dark blue highlights the distinction between site navigation and content modules, and in most pages, the brand blue will act as the dominant color, primarily for clickable manipulation controls. Gold as the auxiliary color and set different task properties, for the platform class, Multi-Color led has very good ductility. Point of view: Brand color here to play the role of the finishing touches, for some need to focus on the scene, emphasizing the interaction of the State and so on.

　Defining information architecture hardening action points

The first thing you need to do is to sort out the hierarchy of content, and a solid information architecture is the most important foundation. Flat or micro-textured elements to reflect the quality of the page, add a reasonable scene elements to create the atmosphere. In the product page design, the micro-texture interface, the user will be involved in the attention of the elements are removed, focus on information. This means that visual representation is usually only two dimensions that can be used to trigger a user to "click".

Try to enhance your expressiveness by elevating the contrast. The contrast described here includes the elements of color matching, font size, position layout and so on. In addition, to provide the necessary visual clues and feedback to the interaction elements to help users build awareness, such as when the mouse hovers over elements, or when the user clicks and touches these elements, the visual form needs to be changed to reflect the interaction characteristics of the elements and the results of user behavior.

Points of the map, the line will be too thin, can not Rob Banner Visual Center, in the entire page can only play a supporting role.

Establish a clear association with the target user by substituting an environment element that is highly felt. and reflect the personality of the product.

Always throughout the entire page through the financial element

Hexagon-honeycomb/strong/neat (unified large number of irregular icon)

Detailed function mapping is not easy to complex, to be suitable for identification, combination, change. The auxiliary color conforms to the tone of the entire website style.

Summary:

The data information platform product must have its product characteristic temperament, as well as through the whole station financial characteristic element. To help users comb information, have a usability based interface. Help people solve problems and build new ways of talking about banking, insurance, finance and data. Design, digestion of professional coat, convenient and easy to read and understand, can bring out the value of the product itself.