B端图表视觉设计思考（三）
二、图表排版设计
图表排版是指各元素在图表中的尺寸及布局等，对于B端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立
一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对B端后台类产品的排版规则，力求保证用户图
表的使用体验。
1. 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大
小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型
场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息
的目的。
“迷你图”尺寸最小，舍弃了Y轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每4像素1个数据点，Y轴坐标刻度不超
过5个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了
填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
2. 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数
等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区
间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能以解决.
第二个常见问题是刻度的说明文字过长。
如果是X轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜45°~90°的办法(如文字全部为中文，可用竖
排代替倾斜90°)，缓解信息过密看不清的情况。
如果是Y轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的Echarts图表、D3图表等开源图表库，需要提前预估
刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是AntV等可自适应的图表库，则不
必提前处理，图表库会自动按刻度长度进行整体调整。
3. 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适
当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队
所负责的B端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表
的浏览。为解决此问题，我们基于业务特点，针对B端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有
明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一
排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空
间。
