让B端系统数据表格更美好的设计支柱

对于B端的数据可视化设计而言，能更直观地展示数据，洞察数据背后的真相。然而，很多设计师在工作中并不懂图表的设计，大多数情况下是随心所欲，只有经验的设计师才能驾驭。我们根据工作经验，整理出一些图表设计的支柱。

B端后台产品的图解设计思路与方法，将覆盖了曲线图、柱状图、饼图、雷达图、漏斗图...等各类常用图表类型，为实现清晰传达和视觉美好的目标，我们从图形层次方面将图表划分为：底层元素、中间元素和上层元素，根据视觉强度的不同，分别设计三类元素。下层元素最弱，顶层元素最强，梳理图元前后关系，可以清晰地把握元素的视觉层次，保证信息传递的效率。

基础元素设计

在各种类型的图中，我们将中轴、比例等定义为辅助说明数据的基础元素，为减小视觉干扰和突出主图，底层元素全部采用浅灰色设计。结果表明，当元素与背景颜色的对比明度为1.2:1时，人眼是很难看见的，而当对比度为2.0:1时，视觉的强度过强，很容易引起用户的注意。

经过元素视觉强度的调查和视觉实验，最终确定元素与背景对比度为1.6:1左右，人眼可以看到的视觉强度偏弱的程度。为了确保元素的视觉效果不突出，只有在需要的时候才能发现。

中间环节设计

中间元素包括数据图形、数据线段等承载数据主体信息的元素，是图表中表示数据的关键元素。中层元素采用较低的明度和较高饱和度的数据颜色，比底层元素表现得更好，使元素从页面中突出出来，确保可读性。风格上适当地加入渐变、描边等样式，以丰富视觉层次，给人以美的视觉感受。

顶级元素的设计

本文将顶层元素定义为一个突出的图表信息，内容包括悬停样式、悬停之后的详细数据描述等。在设计上为了保证视觉风格的突出，使用深灰色、强调色彩等强对比风格，并辅以动画、投影等手法来保证明显的视觉强调效果，确保最有效的传达用户。

最后的效果

经过层次梳理，将元素重要程度和视觉强度结合起来，将设计图中的主信息按重要程度显示出来，使用户能在第一时间接受最重要的信息，提高信息读取效率。

图表版面设计

图形的排版是指图中每个元素的大小和布局等，对于B端后台类产品，不同的排版方式会给用户的使用体验带来很大的影响。怎样建立一套合理的规范保证用户的使用体验？

图示大小：

图形尺寸指图表的整体长宽高。工程中，我们发现不同尺寸的图表对数据展示效果影响很大，比如大型数据的图表挤在名片大小的区域显示，这大大降低了信息读取的效率。基于此，搜集并提取出三种典型场景：“全貌概览”、“多角度环视”、“细节分析”三类尺寸，分别对不同尺寸的信息进行了优化，以实现高效率地读取信息。

该“最小图”是最小的，摒弃了Y轴等不必要信息，利用小区域显示最重要的图形信息，并控制数据密度，保证信息的有效读取。

限制了坐标轴刻度数和数据密度的“中号图表”尺寸受限，例如，曲线图数据点不高于1据点/4像素，Y轴坐标刻度不超过5个，以确保信息密度不过载；这种图表尺寸通常用于对一个大型类别的内容进行多方面检视时。

这个“大图”的尺寸是最大的，没有限制数据信息密度，并给出最完整的最详细的显示，这种尺寸通常被用于数据细节分析场景，比如数据的细节页面。

最终以多种图表混合排列方式，饼图、图示等大面积填色图表、相比较折线图等描边型图表，使视觉感觉更丰富。为了确保在多个图表混合排列时，我们缩小了填色类别的实际高度。

坐标轴设计：

图中出现的坐标轴频率较高，那么坐标轴的共同设计问题是什么？首先，横纵坐标轴在刻度上出现过密现象。

若坐标轴承载的是连续的数据(连续数据指可量化的、连续的、在时间间隔内任意取值的数据，例如时间、金额、人数等)，设计师可自行增减刻度数量，以保证视觉舒适度。若承载的数据是离散的(离散数据指不可量化、无关联、不可在区间内任意取值的数据，如分类、软件版本、省等)，则可采用增加坐标轴缩功能来解决。

其次是刻度的描述文本太长。

若为X轴(横轴)字太长，除可控制范围内减少刻度，也可采用文字倾斜45°~90°的方法(如文字全部为中文，可用竖排代替倾斜90°)，缓解信息过密不清的情况。

若为Y轴(纵轴)字过长，则需要联合研发调整数据的单位，如将“元”调整为“百万元”。

若无法调整，则应根据所用的图解进行调整。比如常用的Echarts图表、D3图表等开放源码图表库，需要对刻度文本长度进行预先估计和预留，否则刻度文本可能被裁减，无法完全显示。如果您使用像AntV这样的自适应图表库，则不需要预先处理，图表库将自动根据刻度长度进行整体调整。

图片说明：

图例作为图表中不可缺少的一部分，在各类图例中的位置各不相同，由于不同的图表样式有很大差异，图例的位置需要全面考虑，并适当布置，但在同一个产品或网页上，如果过于随意的放置图例，会导致页面不统一，同时增加用户的浏览成本。

本文旨在提高屏幕信息密度，对不同场景的页面排布进行分析，制定出上下两个较为宽松的指导原则，供设计者在没有确定最佳方案时选择。如果图表是左右两端对齐的类型，如折线图、柱状图，建议将图例放在图表顶部。从而可以结合其它元素如标题等进行统一排列，减少占用空间。如果图表本身在左右都有剩余空间，比如饼图，建议将图例放在图表的右边。还可以节省页面空间。

最后：

利用图表展示效率，让数据最直观地表达背后的商业逻辑和洞察，通过图表，让天下没有难看的B端图表是我们在B端用户体验设计中必须修炼的核心竞争力。