Skip to main content

Applications we design are becoming increasingly data-driven. The need for quality data visualization is high as ever. Confusing and misleading graphics are all around us, but we can change this by following these simple rules.


1. 选择正确的图表类型(Choose the right chart type)

Choosing the wrong chart type, or defaulting to the most common type of data visualization could confuse users or lead to data misinterpretation. The same data set can be represented in many ways, depending on what users would like to see. Always start with a review of your data set and user interview.


You can learn more on how to pick the right representation for your data, and how to design effective dashboards in my article about Dashboard design.


2. 基于正负值,使用正确的绘图方向(Use correct plotting directions based on the positive and negative values)

When using horizontal bars, plot negatives values on the left side and positive on the right side of a baseline.
Do not plot negative and positive values on the same side of the baseline.


3. 柱状图总是从0基线开始(Always start a bar chart at 0 baseline)

Truncation leads to misrepresentation. On the example below, looking at the chart on the left, you can quickly conclude that value B is more than 3 times greater than D when in reality the difference is far more marginal. Starting at zero baseline ensures that users get a much more accurate representation of data.


4. 对折线图使用自适应的Y轴刻度(Use adaptive y-axis scale for line charts)

For line charts always limiting the y-axis scale to start at zero may render the chart almost flat. As the main goal for a line chart is to represent the trend, it’s important to adapt the scale based on the data set for a given period and keep the line occupying two-thirds of the y-axis range.


5. 使用折线图时要考虑到你的时间序列(Consider your time series when using a line chart)

The line chart is composed of “markers” that are connected by lines, often used to visualize a trend in data over intervals of time — a time series. This helps to illustrate how values change over time and works really well with short time intervals, but when data updates infrequently this may cause confusion.

折线图是由线条连接的 “标记 “组成的,通常用于可视化数据在时间间隔内的趋势–时间序列。这有助于说明数值是如何随时间变化的,在时间间隔较短的情况下效果非常好,但当数据更新不频繁时,这可能会引起混淆。

Ex. Using a line chart to represent yearly revenue, if values are updated monthly will open the chart to interpretation. Users may assume the lines connecting the “markers” are representing actual values when in reality true revenue numbers at that specific time are unknown.
In such scenarios using a vertical bar chart can be a better option.

例如,使用折线图来表示每年的收入,如果数值是每月更新的,那么图表就会被解释。用户可能会认为连接 “标记 “的线代表了实际的价值,而实际上在那个特定时间真正的收入数字是未知的。

6. 不要使用 “平滑的 “折线图(Do not use “smoothed” line charts)

Smoothed line charts may be visually pleasing but they misrepresent the actual data behind them, also excessively thick lines obscure the real “markers” positions.

平滑的线形图可能在视觉上令人愉悦,但它们歪曲了其背后的实际数据,而且过粗的线条也掩盖了真正的 “标记 “位置。

7. 避免混乱的双轴图(Avoid confusing dual-axis)

Often, to save space for your visualization, you may be inclined to use dual-axis charts when there are two data series with the same measure, but different magnitudes. Not only are those charts hard to read, but they also represent a comparison between 2 data series in completely misleading way. Most users will not pay close attention to the scales and just scan the chart, drawing wrong conclusions.


8. 限制饼状图中显示的切片数量(Limit the number of slices displayed in a pie chart)

A pie chart is one of the most popular and often misused charts. In most cases, a bar chart is a much better option. But if you decided on a pie chart here are a few recommendations on how to make it work:

  • Don’t include more than 5–7 slices, keep it simple
  • You can group the extra smallest segments into the “Other” slice


  • 不要包括5-7个以上的片断,保持简单
  • 你可以将额外的最小的部分归入 “其他 “片中

9. 直接在图表上标注( Label directly on the chart)

Without proper labeling, no matter how nice is your graph — it won’t make sense. Labeling directly on the chart is super helpful for all viewers. Consulting the legend requires time and mental energy to link the values and corresponding segments.


10. 不要在图表分片上标注(Don’t label on top of slices)

Putting the values on top of slices may cause multiple problems, from readability issues to challenges with thin slices. Instead, add black labels with clear links to each segment.


11. 设置饼图分片以加快扫描(Order pie slices for faster scanning)

There are several ways commonly accepted in ordering pie slices:

  • Put the largest slice at 12 o’clock position and put next slices in descending order clockwise
  • Put the largest slice at 12 o’clock, second largest after it clockwise, third at 11 o’clock, and all remaining slices in descending order clockwise


  • 将最大的分片安排在12点的位置,接下来的分片按顺时针方向依次递减。。
  • 将最大的分片安排在12点的位置,第二大分片顺时针放在后面,第三片放在11点的位置,其余的分片都按顺时针的顺序递减。


12. 避免随机性(Avoid randomness)

The same recommendation holds true for many other charts. Do not default to alphabetical sorting. Place the largest values on top (for horizontal bar charts) or left (for vertical bar charts) to ensure the most important values take the most prominent space, reducing the eye movements, and time required to read a chart.


13. 太纤细的甜甜圈图表无法阅读(Thin donut charts are impossible to read)

A pie chart in general is not the easiest chart to read, as it’s very hard to compare similar values. When we take the middle out and create a donut chart, we free as space to display additional information but sacrifice clarity, taken to extremes it renders the chart useless.


14. 让数据自己说话(Let data speak for itself)

Unnecessary styling is not only distracting, it may cause misinterpretation of the data and users making false impressions. You should avoid:

  • 3D elements, shading
  • Shadows, gradients, and other color distortion
  • Zebra patterns, excessive gridlines
  • Highly decorative, italic, bold, or serif fonts


  • 3D元素,阴影
  • 阴影、渐变和其他颜色失真。
  • 斑马纹,过多的网格线
  • 过度的装饰性、斜体字、粗体字或衬线字体

15. 选择一个与你的数据性质相匹配的颜色组(Pick a color palette that matches the nature of your data)

Color is an integral part of effective data visualization, consider those 3 color palette types when designing:

  • A Qualitative color palette works best for the display of categorical variables. Colors assigned should be distinct to ensure accessibility.
  • A Sequential color palette works best for numeric variables that need to be placed in a specific order. Using hue or lightness or a combination of both, you create a continuous color set.
  • A Divergent color palette is a combination of two sequential palettes with a central value in the middle(usually zero). Often divergent color palettes will communicate positive and negative values. Make sure color also matches the notion of “negative” and “positive” performance.


  • 定型色板最适合显示分类变量。指定的颜色应该独特的,以确保可及性。
  • 连续性的色板对于不可计数变量,它需要按照特定的顺序去展示。按照色环或明度抑或两者一起使用,你创建了一组可延续使用的色板方案。
  • 一个区分的颜色方案是包含了2组连续的色板和中间色(一般是0),通常区分的颜色方案将传达出正值和负值。以确保颜色匹配“正”和“负”的概念。

你可以看看这个工具- ColorBrewer 可以帮助你生成一个颜色集方案。

16.无障碍设计(Design for accessibility)

According to the National Eye Institute, about 1 in 12 humans are color blind. Your charts are only successful if they are accessible to a broad audience.

  • Use different saturation and luminance in your color palette
  • Print your data visualization in black and white to check the contrast and readability.


  • 在你的颜色集中利用不同的饱和度和灰度。
  • 将你的图表设计以黑白色打印,以确保它的对比度和可读性。

17.注重可读性(Focus on legibility)

Make sure typography is communicating information and helping users focus on data, rather than distracting from it.

  • Chose legible typefaces, avoid serif and highly decorative fonts
  • Avoid italic, bold, and ALL CAPS
  • Ensure high contrast with the background
  • Do not rotate your text


  • 选择可读性强的字体,避开衬线字体和过度装饰的字体
  • 避开斜体字、粗体字和大写字母
  • 确保背景高对比度
  • 不要翻转你的文字

18. 使用条壮图而不是旋转标签(Use a horizontal bar chart instead of rotating labels)

This simple trick will ensure users will be able to scan the chart much more effectively, without straining their neck


19. 选择你的图表库(Choose your charting library)

If your task is to add interactive charts to web and mobile projects, one of the first questions you should ask is what charting library will we use? Modern charting libraries have many of the previously mentioned interactions and rules baked in. Designing based on a defined library will ensure ease of implementation and will give you a ton of interaction ideas.


20. 超越静态的报表(Go beyond static reports)

Help users explore by changing parameters, visualization type, timeline. Draw conclusions to maximize value and insight. In the example below, you can see the IOS Health app using a combination of various kinds of data presentation to its benefit.


阅读建议(Reading suggestions)

For all who would like to learn more about this topic, I highly recommend reading “The Wall Street Journal Guide to Information Graphics: The Dos and Don’ts of Presenting Data, Facts, and Figures” by Dona M. Wong. Many of the ideas in this article are inspired by this book.

对于所有想了解这一主题的人来说,我强烈推荐阅读《华尔街日报信息图表指南-呈现数据、事实和数字的注意事项》,作者 Dona M. Wong。这篇文章中的许多想法都是受这本书的启发。


文章来源:Taras Bakusevych

原文链接:20 ideas for better data visualization | by Taras Bakusevych | Aug, 2021 | UX Collective (


Close Menu


我是一枚 UI/UX 设计师,目前就职平安集团旗下的子公司。 自 08 年毕业后,自学结合项目实践积累了 4 年多的前端静态页面开发经验后,再次回到 UI+交互设计的跑道。

T: +0086-18621561432