A comprehensive summary of the types and manufacturing methods of app data graphic design

Did you consider moving the screen size and properties before you made the app data graphic design? Have you considered visualizing data graphs to enhance your app temperament? Have you considered the difference between the display of data graphs on app and Web side? Perhaps you have thought about it, but as a popular science article, or to start from the most basic.

　　What are the main apps with data graphs?

Earlier, yoyo through the app Store, Mobilepattern, dribbble crazy Search map, accumulated the following rich cases.

Mobilepattern:

Http://www.mobile-patterns.com/stats

Http://inspired-ui.com/tagged/visualization

Dribbble:

Https://dribbble.com/search?q=data

Https://dribbble.com/search?q=statistics

Typically, we see apps that have data graphs that look like the following:

　　Weather class

Go to the App Store and search the "weather", and none of the apps shown on the list add weather and temperature to the landscape. The following is a recommendation for an app called "Fresh Air," designed to be different from conventional weather apps, which can be adjusted for time and temperature background colors.

　　Sports class

With the popularity of various hand rings, the number of steps, sleep quality and other data are also more valued. In addition to foreign Fitbit, Jawbone, Misfitshine hand ring, the domestic technology companies have also launched a variety of prices more dominant hand ring, such as millet hand ring. Given that this type of app is familiar to everyone, here's a list of apps that you probably don't know much about, with a darker bottom: Fitport, which is rich in data, and has a record of weight and energy consumption in addition to the number of steps recorded.

　　Health class

Health apps In addition to focus on physical and mental health, there are some intelligent hardware to detect the safety of the environment, comfort, such as the following Nest, is a family thermostat, it can record the user's indoor temperature data, intelligent identification of user habits, and the room temperature to the most comfortable state.

Clue is an Aunt assistant, in the data display, such as the more relaxed, and so on, it will be based on the mood of different stages to do visualization, such as near aunt period with some explosion clouds express irritability mood.

　　Financial class

A variety of bookkeeping apps and money-management apps include almost every chart style, trend, pie, and column charts. The Spendee listed below are industry leaders in graphic design.

　　Professional Data Analysis Class

With the needs of mobile office, there are some professional data analysis platform refining the product features, need to show on the mobile side. The Google Quicklytics listed below is the product of Google Analytics on the mobile side.

　　

　　How do I make a data graph?

Looking at these apps, the basic data graph has an intuitive feeling. If your app also needs to present a data graph, then Yoyo's next share hope will help you.

　　One, color

A) Dark Bottom

Charts on dark Bottom usually create a kind of atmosphere, display data information is generally less, at this time can choose bright color, so that the information of the chart is easy to jump out from the dark.

Dribbble

B) Light Bottom

If the need for a clear display of a large number of data information, it is recommended to use light-colored bottom, the data information on the light-colored bottom of the relatively high degree of recognition. But note: If the amount of data information is too small, the light will appear in space on the bottom of the page, this will let users feel that your platform has no content or heat. Of course, this can be achieved by graphic texture, color and other optimization.

Left (Google Analytics) (clue) right (Spendee)

The following is a comparison of the reading efficiency of dark and light-colored bottoms:

In the data analysis-oriented, with a large number of data on the page, light-colored bottom of the page is more readable, reading efficiency will be higher.

Dribbble

C) Color Base

Sometimes, in order to make the page more vivid, can display the data information in the large area color block.

Business apps can be used in blue, green system as the background.

Sports app can be selected with more freedom of color, the color of the partial vigor, such as orange, yellow, orange and so on.

Left (Apple Health) (Alipay) Right (dribbble)

D) The bottom of the picture

To make the data easier to read, you can use the bottom of the picture. In some weather app, this kind of usage is more common, the picture content and the data information relate, enhance the readability.

Dribbble

Health apps make it easier to read data.

Misfit Shine

Weather type app, the home page renders will automatically pull the background picture according to the weather condition at that time.

Left (weather pass) (Ink weather) Right (Yahoo weather)

　　Ii. type of chart

The next step is to briefly describe the types of charts we usually see in the app.

A) Line chart

A line chart displays a sequence as a set of points that are connected by a single line, and is used to represent a large amount of data that occurs over a continuous period of time.

Left (dribbble) right (Apple Health)

B) graphs

[Graphs] Use a smooth curve to connect. If the data is coherent and real-time, and the data between any two points has analytical value, it is more appropriate to use [graphs] than [line charts], such as 24-hour data.

Dribbble

C) Pie chart

Pie charts are often used to show the percentages of the relative total of each component's value.

Dribbble

D) Ring chart, performance progress

The doughnut chart is the center empty pie chart. In addition to the display ratio, it can also be used to show progress loading, designed for clocks/timers.

Dribbble

E Bar Chart & Histogram

The bar chart displays the sequence as a set of horizontal bars.

Column chart displays a sequence as a vertical bar grouped by category.

Dribbble

F) Heat Map

[Thermal charts] are commonly used in geographical locations, for a period of time data (often a discrete amount) of the cumulative statistics of the graph, and then can analyze the data-intensive area/sparse area. This is a good way to show the effect of the expression.

Dribbble

G) Radar Map

[radar charts] are useful for comparing multiple categories of data sequences and looking at the overall situation, both to view the balance of their overall development and to compare the pros and cons of the two sequence as a whole. This is also a good display of data expression, in the presentation of the overall comprehensive information is very intuitive.

Left middle (dribbble) right (Alipay)

H) List

A list is a common expression, and often the list we see is the right Spendee interface, but there are some apps that make visualization attempts to do some partitioning of the data visualization in the list, as shown in the left and elevate interfaces below.

Left middle (elevate) right (Spendee)

　　Iii. organization of the chart

After you know the basic chart types, the next point is to organize the chart.

The biggest feature of mobile devices is that the screen is small, users can receive a small amount of data each time, so how to effectively organize the chart information is an important design point.

A how to display a single data?

Given that the app screen is small, an important data is displayed on a single page, how to design it?

Choosing a circle at this point will be a good choice, as it forms a visual center in the page. Whether it's a pie chart, a doughnut chart, or a radar map with a visual center, you'll have a visual focus on the page.

A single data is somewhat monotonous, in order to make the page richer, you can use dark, color, picture for the background supplemented by a solid color graphics (such as Sesame Credit), or will be like clue, with heavy color will be full of graphics, to achieve full vision.

Middle (clue) right (Alipay)

(B) How to display primary and secondary data?

How do I design two or three types of data to be displayed on a page?

At this point to pay attention to a slightly larger space to highlight key data, weaken the secondary data, as far as possible to the primary and secondary data of the chart type inconsistencies, graphs, pie, Ring, column chart, such as the basic chart, alternating use, so that the entire page hierarchy clear, rich content.

Top: Middle Right (dribbble): Middle (Fitport) right (Spendee)

(C) How to display a large amount of data?

There is also a type, the entire page should be divided into several large modules to display a large number of data information, how to design?

Users may have to brush a few screens to read all the data, at this point, it is recommended that each module to adopt a separate chart type, each module of different chart types, which will reduce the user's fatigue to show the data.

City Guides

　　Iv. Dynamic and effective

Dynamic effect can improve the interest of products, especially when displaying a large amount of data information, use dynamic performance to alleviate the reading pressure. There are several common dynamic effects in data graphs:

(A) Dynamic presentation of data in chronological order

Spendee

B) Navigation switch

Dribbble

C) Show more versatility

Dribbble

D) screen horizontal longitudinal switch data

Dribbble

　　Five, font

The use of a good font, can highlight the entire app temperament, so that the entire app maverick. But with app font copyright and font pack size, most app developers don't consider fonts as a category.

Cityguides is a particularly good app, its graphic design is excellent, the font selection and the entire style design complement each other, very good. Interested can download this font online (optigiant), non-commercial use of the situation is very useful.

Cityguides by National Geographic

The data graph design in app is much more than that, or it's true.

Finally, attach a team with extensive experience in data graphic design rallyhttps://dribbble.com/rally

Representative: City Guides, Snowbird

The author micro-letter public number: Yoyofootprint, welcome attention yo.