Today, we are going to bring you a new set of dashboard beautification tutorials, in which we will share with you a [blue-purple card style] dashboard style, which makes full use of Finebi 60.The new component grouping feature in version 15 is a clever adaptation to PC and mobile effects, providing powerful support for beautifying dashboards.
PC Effects:
Mobile Effects:
Below, we'll start with:Component layout, use of style elements, and application of diagramsThree aspects detail how to optimize and beautify your dashboard.
The articles and pictures are all built by Finebi, a star product of Finesoft!
Pay attention to Finefine, we will continue to explain to you the data analysis methods and tools and solutions for enterprise digital transformation" >>
Original layout analysis
Based on the original demo, the overall demo can be divided into the following areas:
Overall operating data.
Sales vs. regional metrics.
Analysis of the details of the operation.
What's the problem?
Although the overall business data is placed in the right place, its style is not prominent enough, resulting in the map and bar chart stealing the view from the page.
The information of 2 and 3 is interspersed, which violates the law of human eye viewing information, namely: up and down; Left Right.
The second important information is placed too high, resulting in an incomplete display on one screen, and the overall browsing steps are disrupted.
Layout issues are optimized
According to the problems analyzed above, we will carry out targeted optimization:
Styles that highlight the 1st important data:Emphasis is placed on a large color block in the background, so that the overall business data can be seen at first glance on the entire dashboard.
Catch the eye with the three-dimensional icons.
The above color blocks and charts are only a means to attract attention, and the unified layout adjustment should be decided according to its own dataIt is necessary to make the data graphically full, attracted to have real data to see.
According to the structure of the total score of the data, organize the process and line of sight when reading the data, so as to guide users to read the data from top to bottom.
3.Other layout styles apply
Keep each area nested within two layers to avoid ruining the overall layout and overly complicated style.
In each area, make sure that the overall color or graphics are presentThere is a distinction between visual weight and visual weight, red, yellow, green.
Holistic analysis of the original style
The entire blank screen in the original demo was monotonous and did not make good use of graphics to present the data. In particular, the empty space inside the red box should be avoided.
Due to data relationships, there are many blank areas for components such as organization and culture, chain management, etc.
Due to the selection of an inappropriate chart type, the graphics of categories such as brand management, product management, etc., are not full enough, resulting in the appearance of white space.
Each element is discharged separately and independently, lacking the concept of grouping, but in reality, there is a correlation between some adjacent graphs.
Excessive blue areas in histograms and maps steal the visual focus of important information, resulting in important information not being highlighted.
Overall style issues are optimized
Change the factors that make the screen thin and make the dashboard richer.
By adjusting the minimum and maximum values of the display data of components such as organization and culture, chain management, etc., or adjusting the position and size of the components, you can make the graphics fill the component area as much as possible.
Replace inappropriate charts with charts that are rich and meet your business needs, and consider using suitable types such as radar charts for small areas of data, while radar charts may appear thin and inadequate for large areas of data.
Arrange or stack some of the associated charts in groups to improve the smoothness and consistency of the overall data viewing.
Use a background color that is clearly colored to highlight the important information, and use a light color for the rest of the detail analysis charts. One thing to note: the entire dashboardThere can only be one highlightThe visual weight of other areas should not exceed it.
Use different colors to show the two sides of the contrast column chart for a noticeable contrast.
Stylistic elements
Note: The following style elements must be included in all to reflect the overall transparent, refined, clean and rich style. In terms of visual weight, only one piece can use heavy colors and take progressive layers.
1) Dashboard
Preset Style: Default Bright White.
Background color: f7f6f9;
Component clearance 0;
Adaptive: Fixed size (universal desktop (1366*768);
Overall accent color of the dashboard: (Use sporadic small color blocks to highlight the accent color in the overall dashboard and avoid large-scale use).
2) Components
Rounded corners 6px;
Title Background: White;
Border: None; Title Text: Default Automatic;
3) Component group area division
Leverage the grouping feature of components to bind each region block together to help resize and position more quickly;
20px spacing is uniformly used within component groups.
4) Text
The overall text of the dashboard is mainly 12px;
Title: Pangmen Zhengdao title font, 34px, bold;
Component Title: Dashboard preset default style;
Indicator card text size:
5) Charts
In order to make a delicate diagram, the following details are indispensable:
Avoid using a bulky bar chart and instead use a thinner bar width;
To avoid stealing the line of sight for important information, we opted to use light-toned charts. However, this can lead to a lack of recognition. To improve recognition, we can consider adding color detail by adding a border to the column.
For circular charts with a large area, it is recommended to use transparency to maintain the overall sense of transparency. Without transparency, it can appear clunky and ruin the overall effect (e.g., an optimized point map).
For smaller circular charts, you can darken the colors without ruining the overall feel (e.g., scatter charts).
Chart color scheme:6) Tab component
Nested usage specification for tab components:
This template uses multiple secondary tabs;
If you have a higher-level tab, you can use the first-level tab style;
Avoid using more hierarchical tabs;
There can only be one first-level tab:
7) Other visual elements
The legend is placed in the blank space of the graphic area to make reasonable use of spaceDue to the overall square shape of the radar map, when placed inside a rectangular component, there are blank spaces on both sides. Therefore, we recommend placing the legend on the right side of the chart.
Other rectangular charts can fill the entire component sufficiently, so to avoid the legend taking up additional space, we recommend placing the legend above or below the chart.
Make it simpleIf you have an axis title and a legend, it is repetitive information. Cancel the axis title uniformly.
If removing the axis does not have an identifying effect, then the axis should be removed for aesthetic reasons.
In addition to the chart types already on this dashboard, here are some more common icon types of the same style.
1.Pie charts
The doughnut pie chart retains a sense of transparency; Solid pie charts can increase the area of the graph, so you can choose according to your needs.
Fill the doughnut pie chart with a two-color three-color gradient.
The 6 categories for the pie chart have reached the limit, and when there are many types, you should change the chart type.
*Styling should be integrated into the overall dashboard, the following styling parameters can be used.
Row height
Header: 40 Body: 30
Style themes
Style: Style 1.
Accent color: f2f3f7
Data bar color:
#d8dbfd
#c8e6f8
Overall application effect:
Hopefully, this article will help you and your business make a better looking dashboard!