学会这15个细节，帮你快速提升B端图表用户体验

B 端界面中运用频率不高，但却无比重要的组件——图表，可谓是让规划者们烦透了心。图表规划起来不难，但想要规划好，也是需求下一番功夫的。

很多小伙伴问我，说：每次在规划图表的时分，总是找不出自己哪里规划的欠好，但看着自己规划的图表，又没有那么满意，该怎么办呢？今日，咱们就来一起了解下 B 端的图表，挖掘一些规划者们平常未曾捕捉到的细节，取得这些细节，将从细微之处提高产品的用户体会。

什么是图表

百度百科解说：“图表，Microsoft Office 用语，泛指在屏幕中显现的，可直观展现计算信息特点（时刻性，数量性等），对常识挖掘和信息直观生动感受起要害作用的图形结构，是一种很好的将目标特点数据直观，形象的‘可视化’的手法。”

依据百度百科的解说，咱们来做一个「数据图表化」的小推导。我从网站找了一段描述低码的数据（数据来源艾瑞咨询，并做了一些小修正），如下：

“2016 年开端低代码概念开端从国内逐渐鼓起，当年低代码相关产品投融资工作达 10 起，亿元以上融资数量 2 起，至 2020 年中国低代码商场共有 59 起投融资工作，其中亿元以上融资共有 13 起。2017 年融资工作 11 起，亿元以上融资 3 起；2018 年融资工作 12 起，亿元以上融资 2 起；2019 年融资工作 12 起，亿元以上融资 3 起；2020 年融资工作 14 起，亿元以上融资 3 起。跟着企业对体系敏捷性、易用性需求的增加和对事务部门低代码接受度的提高，商场会迎来新的发展要害，短期内投融资热度将持续增长。”

尽管以上的文字现已做了一些简练，但阅读时分难免觉得有些绕，不能很直观的了解数据，且要记住要害数据还是较为困难的。

下面，咱们对以上文字进行再次整理，恰当分段，进行结构化排版：

“2016 年开端低代码概念开端从国内逐渐鼓起，当年低代码相关产品投融资工作达 10 起，亿元以上融资数量 2 起。

至 2020 年中国低代码商场共有 59 起投融资工作，其中亿元以上融资共有 13 起。

2017 年融资工作 11 起，亿元以上融资 3 起；

2018 年融资工作 12 起，亿元以上融资 2 起；

2019 年融资工作 12 起，亿元以上融资 3 起；

2020 年融资工作 14 起，亿元以上融资 3 起。

跟着企业对体系敏捷性、易用性需求的增加和对事务部门低代码接受度的提高，商场会迎来新的发展要害，短期内投融资热度将持续增长。”

经过分段描述，以上阶段显得清楚了很多，但是例如”融资工作、亿元以上融资“等词语还是重复出现，全体来说不够简练。

那么，咱们再将以上数据进行表格化展现来看看，如下：

咱们能够发现，表格的展现方式比分段的结构化文本又明晰了太多，使得数据展现十分直观。不只用户能够看清楚数据自身，还能够比照数据，假如表格再规划的人性化一些，能够将最大值进行要点标注（依据事务需求对数据进行差异化标注）。

不过表格也有劣势，无法展现数据随时刻改变的趋势等问题。咱们再次仔细阅读上述数据，能够整理出如下图表。

上图将 2016 年到 2020 年的融资工作总数进行了要点处理，亿元以上融资工作数量进行了次要处理。并且用柱状图叠加折线图的图表表达了 2016 年到 2020 年低码融资工作数量的趋势状况。

图表的优势

综上所述咱们能够发现，从一般意义上来说，图表优于表格，表格优于结构化文本，结构化文本优于一般阶段。那咱们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点，例如柱状图是用来比较同一目标下不同目标状况的图表；饼图是展现部分与部分之间，及部分与全体之间占比的状况。咱们在运用图表时，需求先对数据进行判断，再挑选适宜的图表进行展现。

2. 直观性

图表与文字比较，在数据的体现上十分直观。不只能够让用户一目了然地看到数据，还能让用户将数据进行比照，然后发现问题，定位原因，解决问题。

3. 混合与拓宽性

依据数据的特点，图表是能够进行混搭与拓宽运用的。混搭是指图表和图表能够拼搭运用，例如折线图与柱状图常常合体运用。拓宽性是指依据根底图表能够拓宽出一系列个性化图标。例如堆叠柱状图是由根底柱状图衍生出来的。

开源图表库

现在开源的图标库以下几种：

1. AntV G2

拜访链接：https://g2.antv.vision/zh

在 AntV 的官网上，是这么描述 G2 的：“一套面向常规计算图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。运用 G2，你能够无需重视图表各种繁琐的完成细节，一条句子即可运用 Canvas 或 SVG 构建出各种各样的可交互的计算图表。”

2. ECharts

拜访链接：https://echarts.apache.org/en/index.html

百度百科：“ECharts 是一款根据 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts 开始由百度团队开源，并于 2018 年初捐赠给 Apache 基金会，成为 ASF 孵化级项目。”

3. High Charts

拜访链接：https://www.highcharts.com/

百度百科：“Highcharts 是一个用纯 JavaScript 编写的一个图表库，能够很简略便捷的在 web 网站或是 web 使用程序增加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途运用。HighCharts 支撑的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和归纳图表。”

4. Chart.js

拜访链接：https://chartjs.bootcss.com/docs/

Chart.js 是一个面向规划人员和开发人员的简略而灵敏的 JavaScript 图表。

5. Chartist.js

拜访链接：https://gionkunz.github.io/chartist-js/

Chartist.js 是一个面向规划人员和开发人员的简略的响应式图表，是前端图表生成器。

现在来说 B 端产品运用最广泛的图标库是 AntV G2 和 ECharts。

15 个图表小细节

在大致了解了图表今后，笔者总结了根据自身经历、团队经历与职业经历的图表小技巧。希望这些小技巧能润物细无声地影响咱们的规划者，然后为 B 端提高一点小体会。

1. 折线图 2px

一般在 B 端中，咱们用到线，以 1px 居多。但在折线图中，咱们经过重复推敲，发现 2px 线优于 1px 线。首要，2px 线条显得有力而明晰；其次，在线条多的时分，便于分辨。

2. 柱状图距离

柱状图中柱子与柱子之间的距离与柱子的宽度共同就好，且最左边和最右边柱子距离两边的距离为柱子的一半。如下图所示，若柱子的宽度为 X，则柱子与柱子间的距离为 X，两边柱子距离各自向外距离为 X/2。

3. 刻度值

图表上的刻度值递增数值依据实际状况需求做恰当束缚，如最大数值为 150，就不合适刻度值上线标记为 1000。其次，若事务数据一向处于动态改变中，则图表 Y 轴能够设置成动态。

4. 饼图文字显现

在饼图分类较少时分，能够将文字写在饼图上，但当分类较多时分，文字合适写在饼图外。

5. 饼图块摆放

饼图块摆放也是个值得讲究的工作，一般来说，饼图块呈顺时针方向旋转，且以 12 点钟方向为起点，块面从大到小布局，若有“其他”模块，则放置在最后。

6. 标签方位

一般标签都会放在图表的上方区域，但这并不是一成不变的规则，例如当折线图线较多的时分，能够考虑将标签直接跟在折线的尾部。一起能够做一些交互作用，鼠标点击标签能够让线弱化或许显现。

7. 图表颜色

图表在配色上要运用区分度大的颜色，不要为了美观而运用相邻的颜色，这会导致图表的可读性大大下降。如有条件，建议在颜色上考虑无障碍视觉。

8. 同类色运用

归于同一色相，不同明度和饱和度的颜色，也是有运用空间的，一般表示同一目标的梯度改变。

9. 显现要点

当图表上数据及其多，且产品团队压根没打算将数据量减少时，咱们能够考虑展现要点数据（体系默许展现推荐要点，用户能够自己挑选他所需的要点），弱化其他数据。

10. 标题的妙用

标题不只仅是用来出现一般描述的，在特殊场景下，标题描述能够略微进行改变，然后达到直观表述图表中心含义的目标。

11. 时刻周期太长

某些事务的数据计算需求跨很长的时刻周期，这时，图表无法满意如此长周期的时刻展现需求，咱们不要慌，能够经过以下几种方式去解决。

1）增加缩略滑块

给图表增加缩略滑块，能够经过拖拽滑块了检查某段时刻规模的数据。滑块拉拽的越大，能够看到的时刻规模越大，但留意，会有极限值。

2）增加滑动滑块

给图表增加滑动滑块，能够经过滑动一个固定巨细的滑块，检查某短时刻规模的数据。它与缩略滑块的区别在于，滑动滑块每次看到的时刻段是共同的。

3）区块放大镜

假如图表的出现就是希望时刻周期显现完整，那么当时刻周期较长的时分，颗粒度能够展现的略微粗一些，不必太细，例如无需 2 月 1 日、2 月 2 日、2 月 3 日、2 月 4 日、…连续展现，只要2月1日、3月1日、4月1日、5月1日、…距离展现即可。在交互上，鼠标移入图表区不断进行某时刻周期数据框选（即放大），就能够让框选区数据不断明晰。日K线常用此类方法去做。

12. 时刻轴显现

当时刻轴日期跨过在当年时，无需每个时刻点都带上年份；而当跨年时，能够带上年份，这样能够保证时刻轴显现更简略，不拥堵。

13. 等宽字体

若图表中会选用表格去协助检查某类数据的明细，联动展现，那么表格中的字体建议运用等宽字体，等宽字体便利用户用视觉来比较巨细。

14. 数据归类

目标大盘上放置着各类型图表数据，建议规划者们对数据的进行归类整理，归于一类的数据接近展现，便利用户连续性检查相关数据。

15. 静态与动态图表

图表分为静态和动态图表，当事务出现较为简略时，运用静态图表就好。而当事务复杂，一张图表难以表达细节时，就要考虑动态图表去出现了，“鼠标交互，数据扩展和下钻”是动态图表的特征。

总结

图表的小细节远远不止文中提到的这 15 种，还有很多很多。由于每时每刻都有规划者由于产品需求发明出新的好用的图表类型，图表成为了 B 端可持续探索的一片海洋。欢迎我们重视我的公众号“知果日记”，与我一起来探索 B 端吧~

今日共享给我们一份 Axure 绘制原型的组件库，附件下载。

欢迎重视作者微信公众号：「知果日记」