可视化图表在B端系统中很重要，但是很多设计存在不必要的视觉噪音，干扰信息读取效率，信息读取困难，用户认知成本高，数据关系含糊不明朗，信息区分很困难。

可视化设计中要注意

一、选择合适的图表

折线图是B端产品中常用到的图表之一，又称为趋势图，是用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

设计注意项：

1. 折线和曲线两种样式存在。线条是唯一的主体，线段的每一个点都真实反映数据的起伏，平滑的「折线」在视觉上看起来是愉悦，但是它歪曲了背后的实际数据，也很难读到关键的转折点数据。一般来说不建议用曲线，

折线图：更关注于点的数据

曲线图：更关注点构成的线点数据但是当x轴数据很多时，用折线就会很复杂，这时候建议用曲线

2. 线条上有带节点的和不带节点两种样式。在大多数情况下，日期之间的间隔是一致的，把每个节点标记出来的意义并不大，视觉上也会显得非常繁复，大量的数据点-混乱不堪的页面

3. 线根据最大实际数据展示，根据7+2法则，数量尽量控制在这个范围，数据集繁杂，数据集难免出现极限情况，例如对比十几个店铺订单变化情况时，你能在右侧图中快速找某一个店铺的数据吗？呈现的数据越多往往客户看不到重点数据了 

4. Y轴数据保留小数位、取整数值，单位统一

5.“+” “ -”正负向的Y轴标签，由于正负值带“-”符号，整个Y 轴看起来就有误差，特别是双轴图更明显

6.通常，为了节省可视化设计的空间，会采用多条双折线来呈现数据，但是在数量级不对等的情况下，折线图会很难读，甚至容易会误导用户，这个时候，建议分开使用的座标系来呈现，更加易读，同样可以看的出趋势，也不会得出错误的结论。（如下图，这种建议用两个图表来展示）

7. Y轴坐标线比例要统一

8.

柱状图最适合对分类的数据进行比较，尤其是当数值比较接近时，因此使用柱状图更加合适。

设计注意事项：

1. 如果是分类数据就不合适用折线看趋势

2. 柱子之间的间距不要过大，增加数据易读性。柱的宽度为，“柱与柱间距的1倍~2倍”,当然这只是个参考，根据不同的情况做出不一样的调整

3. 数据排列时，如数据类别无任何逻辑顺序，为帮助用户快速读取信息，我们需要将数据按照某种逻辑顺序进行排列，避免用户视线来回横跳。

4.如果你的数据类别带有连续性质，如时间、量级、年龄等，那么就按照连续顺序排列。

5. 柱形图柱子的高低已经传递了相关信息，不必用颜色来区分，所以建议使用相同颜色，颜色使用太多造成视觉干扰，增加理解成本，如果需要强调某个数据时，可以使用其他颜色才突出显示有意义的数据点

6. 在分类轴之间并没有紧密的关联关系，若采用抽样规则，则隐藏了一些标签，用户对图表信息的提取难度，对于分类建议转换成其他的图来展示 

7.

柱状图和折线图是一种非常重要且常用的组合图表，可以将多组数据在同一个表中直观的表达。可用于展示不同维度但存在一定关联关系的数据，为了浏览起来更直观，建议用柱图来表示数值类数据，用线图来表示百分比。

设计注意事项：

1. 左右坐标线要对齐

2. 虽然柱线组合可以用柱状和折线展示不同的维度，但是两个维度要存在一定的关联，例如要毛利和毛利率组合分析

圆形占比图当我们想要一组数据中每个数据类型所占的比例时，就可以优先选择饼形图。饼形图可以分为基础饼形、环形图

设计注意事项：

1. 大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。数据分块从顺时针从大到小排序显示

2. 当数据类别较多时，我们可以把较小或不重要的数据合并成一个模块命名为” 其它”。如果一定要保证数据的完整性和准确性，此时选择柱状图或堆积柱状图或许更合适。无论其他占比多少，都在做后一个

二、强化层次

除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一

气泡提示黑色透明还是白色底样式？1建议是白色底，黑色透明底有些指标颜色识别度不高；黑色透明底白色字体对比度没有白色底黑色字体的对比度强

指标图形，按照图表的样式显示指标的图标样式，浮层里面也要统一样式

三、图表自适应

B 端图表可视化的数据一般是自适应。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的尺寸，根据不同尺寸适配显示效果，以适应各种复杂情况。

1、坐标轴标签过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。

2. 我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。

3. 根据指标项和屏幕宽度，柱状粗细随之变化

4. 如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，通过切换的方式查看其他组别的信息。随屏幕宽度隐藏指标项

Powered by Froala Editor