B端接口使用频率不高，但却是一个极其重要的组件——图表，可以说是让设计师很头疼。设计一个图表并不难，但是要设计好它却需要付出很大的努力。很多朋友问我，说：每次设计图表，我都找不到我设计的地方，但是当我看我设计的图表时，我并不那么满意。我应该怎么办？今天，我们就来看看B面的图表，挖掘一些设计师平时没有捕捉到的细节。获取这些细节将以微妙的方式改善产品的用户体验。什么是图表百度百科解释：“图表，MicrosoftOffice术语，泛指显示在屏幕上的图形，可以直观地显示统计信息的属性（时间、数量等），对知识挖掘和直观起着关键作用和生动的信息。结构是直观、生动地‘可视化’对象属性数据的一种很好的手段。”根据百度百科的解释，我们来做一下“数据图形化”的小推导。从网站上找到一段描述低代码的数据（数据来源艾瑞，并稍作修改），如下：《低代码概念在2016年开始在中国兴起，投融资数量低码产品相关事件达10起，亿元以上融资2起截至2020年，中国低码市场共发生投融资事件59起，其中亿元以上融资13起2017年共发生11起融资事件，3起融资过亿元；2018年、2019年共发生12起融资事件，其中3起过亿融资事件；2020年共发生14起融资事件，2019年共发生融资事件12起，其中过亿元融资事件3起。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.AntVG2访问链接：https://g2.antv.vision/zh在AntV的官网上，是这样描述G2的：》一套常规的统计图表，Data-driven的高交互可视化图形语法，具有很高的易用性和可扩展性。使用G2，您可以使用Canvas或SVG构建各种交互式统计图表。”2.ECharts访问链接：https://echarts.apache.org/en/index.html百度百科：《ECharts是一个基于JavaScript的数据可视化图表库，提供直观、生动、交互、可自定义的数据可视化图表。ECharts是最初由百度团队开源，2018年初捐赠给Apache基金会，成为ASF孵化级项目。”3.HighCharts访问链接：https://www.highcharts。com/百度百科：《Highcharts是一个用纯JavaScript编写的图表库，可以轻松方便地为网站或网络应用添加交互式图表，免费供个人学习、个人网站和非商业用途使用。图表HighCharts支持的类型包括曲线图、面积图、直方图、饼图、散点图和综合图。”4.Chart.js访问链接：https://chartjs.bootcss.com/docs/Chart.js是一个简单灵活的JavaScript图表，供设计人员和开发人员使用。5.Chartist.js访问链接：https://gionkunz.github.io/chartist-js/Chartist.js是一个面向设计人员和开发人员的简单响应式图表，也是一个前端图表生成器。目前B端产品使用最多的图标库是AntVG2和ECharts。15个图表小细节笔者在对图表有了大致的了解后，结合自身经验、团队经验和行业经验，总结出图表技巧。希望这些小技巧能够润物细无声，影响我们的设计师，为B端提升一点体验。1、2px折线图一般在B面。我们使用线条，主要是1px。但是在折线图中，我们细细推敲，发现2px的线比1px的线要好。首先，2px的线条显得有力而清晰；二是线条多时，容易区分。2、柱形图中柱间距应与柱宽相同，最左柱与最右柱之间的距离应为柱的一半。如下图，如果柱子的宽度为X，则柱子之间的距离为X，两侧柱子之间的距离为X/2。3、刻度值图表上刻度值的增量值需要根据实际情况进行调整。适当的约束，比如最大值为150，不适合线上标注为1000的scale值。其次，如果业务数据总是动态变化的，可以将图表的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面吧~
