The more common types of charts in the C side are bar charts/column charts, line charts, pie charts/donut charts, etc., in this article, the author discusses the design points of data charts based on actual cases, let's take a look at them together.
1. Component introduction
The data chart in the C-side is mainly used to show the status of a group of data more intuitively or to facilitate visual comparison between data. Limited by the size of the mobile screen, the data charts on the C side will not appear in a particularly complex form, and the amount of information is relatively small (for the B side and the data screen).
There are so many types of data charts that this article can't cover all types of charts, but only a few of the most common ones for discussion, as well as only their basic configurations and limited variants.
The more common chart types in the C side are: bar/column charts, line charts, pie/donut charts, radar charts, and heat charts.
2. Usage scenarios
1. Health apps
Wellness apps make extensive use of data charts to show the user's body data, which is not only intuitive but also makes the app richer. In the Health app that comes with iOS, you can see a variety of different chart types.
In addition to data aggregation apps like "health", other health apps also include: fitness, sleep, stress, white noise apps, and so on.
2. Cookies App
Another type of app that uses charts and charts is the cookie app, which usually counts the frequency or frequency of information entered by the user, and generates a chart over a period of time. For example: todo, diary, habit formation, reading, accounting apps, and more.
3. Financial apps
Financial apps often display a large amount of data over a long period of time, which cannot be listed for users and can only be displayed using charts.
Third, the main points of the design
1. Selection of chart type
The type of chart you choose depends on what you want to show about the relationship between the data. There are 5 different relationships between data:
Composition: which components are made up of a whole and the proportion of each component; For example, every day;
Comparison: Comparison of values between data;
Trend: the trend of data with statistical periods;
Distribution: the frequency of the occurrence of statistical objects in different statistical periods;
Progress: The progress/position of the current value in the target value;
Each of these four relationships has a more "suitable" chart type, but some statistical structures and relationships can be applied to a variety of different charts, and students should consider which chart type is most suitable for you.
Composition: pie chart/donut chart, stacked bar chart/bar chart
Comparison: Bar chart/bar chart (data in a finite dimension is compared in multiple statistical periods), radar chart (multi-dimensional and single-period comparison)
Trend: Line chart
Distribution: heat map, scatter chart, bar chart
Progress: Bar progress chart, donut progress chart
2. Draw a bar/column chart
Column charts and bar charts are the same type of charts, but they are called separately according to the direction of the chart, and here we take column charts as an example.
First, according to the definition of margins in the design code, determine the drawing area of the chart. This area needs to include the chart itself, the legend, the focus value, the period switch, and so on.
Second, draw the X and Y axes and their labels. In some cases, it's possible to draw only the X axis and not the Y axis.
Next, draw the bar and bar equidistant distribution (e.g. Distribute horizontal spacing in Figma), which corresponds one-to-one to the labels of the axes. After you have finished making the column, align the label with it in the center. Attention should be paid to the width of the columns, which should be adjusted according to the number of columns to ensure that they are independent and do not stick together and do not leave a large number of blanks.
In the focused state, due to the low accuracy of the touch on the mobile terminal, the focus line must be adsorbed to the column, and the focus line must be aligned with the adsorbed column in the center, and the value can be placed at the top of the main body area of the chart.
When there are two sets of data to be displayed, you can use a grouped column chart, in which case the two data columns can be grouped together and aligned with the labels. Grouping column charts requires a legend to indicate what type of data the columns of different colors represent, so you have to add the above legend.
3. Draw a line chart
The early steps are basically the same as those of the bar chart, and here we need to explain how the nodes of the line chart are equally distributed. In the design software, anchor points can be aligned and distributed just like layers, so you only need to select all anchor points and perform horizontal equidistant distribution.
If you want to make an area chart, or add some color to the area below the polyline, you can copy a polyline, complete the shape with the Pen Tool (the shape must be closed), and add a fill to it.
In some line charts, a graph can be added to the node so that the user can see where the node is.
The focus state is similar to a histogram, and the focus line can be aligned with the node.
4. Draw a pie/donut chart
Let's talk about the pie chart first, the circle in the design software can be edited into a self-defined angle of the fan, some students may go to the side of each fan to match the edge, but this is quite inefficient. The general practice is to place the new sector below the first sector and adjust only one of the edges, which can be done for all sectors.
If you want to add spacing between sectors, you can add strokes to all sectors.
Similar to the donut chart, you can also edit all the circles into a circle in the design software, and complete the donut chart in the way of a pie chart.
Mobile has limited screen real estate, so it's unlikely to be able to annotate the legend directly on the pie/donut chart, which is usually marked below and the detailed values are listed.
5. Draw a radar chart
Attention should be paid to the design of the radar chart, when drawing the outermost circle of coordinates, the position of the header at each node must be reserved.
The tick marks can be decremented by a fixed value by the size of the outermost circle, which needs to be divisible by the size of the outermost circle. For example, if the size of the outermost ring is 200, the tick marks can be 160, 120, 80, 40, and decreasing by 40.
The node of the data graph must fall on the line connecting the center point to the outermost graph node.
Additional values can be added to the center of the radar chart, which can be the average of all dimensions or a total value.
6. Draw a heat map
Heat maps are typically used in habit formation or journaling applications to record daily frequency on a monthly basis, or hourly frequency on a weekly basis. The period of the hotspot needs to be determined according to the actual data display requirements, and in any case, a small grid needs to be drawn for each sub-period in the cycle. These small cells need to be equidistant and fill the chart area as much as possible.
After that, you can color the grid. If there is only a difference in state, it can be distinguished by different color values; If there is a difference in frequency, the color value can also be distinguished in more detail.
7. Different charts
Apple Fitness
There is a very special type of chart in Apple Fitness, the donut progress chart, which can not only show the progress of data in a single ring, but also show the progress comparison between different rings, which is a type of chart that can show the status of data from two dimensions.
There are a lot of bar charts in Apple Health that are not aligned with the highs and lows, which we generally call interval column charts or interval bar charts, and each bar corresponds to a value at the top and bottom of the bar, which refers to a range of values under the label.
Fourth, style expansion
Here are some additional online examples of data charts, which can also be used as a reference when designing:
end
Because of the variety of data charts, there are many different variations under the large types of charts, and these more detailed chart types need to be selected and learned to draw in the actual design.
That's where the components of the data chart come in.
Columnist
Sour plum dried superman, WeChat public account: Superman's phone booth, everyone is a product manager columnist. Focus on the field of UI interaction design.
This article was originally published by Everyone is a Product Manager and is prohibited from reprinting without permission.
The title image is from Unsplash and is licensed under the CC0 license
The views in this article only represent the author's own, everyone is a product manager, and the platform only provides information storage space services.