编辑导语：在B端产品设计中，图表设计是常见的工作项目。合理有效的图表设计有助于数据抽象化、可视化，体现数据真实性，并传达相关信息。在本篇文章里，作者对B端图表设计可能出现的问题做了相应总结，一起来看一下。

这些天在帮网友看Ｂ端测试题，几乎每份都会涉及到可视化图表。我从中提炼出一些规律，将这些梳理总结出一份七宗罪走查清单，正如芒格先生所说“如果知道我会si在哪里，那我将永远不会去那个地方”，希望这份清单能帮助大家排雷扫障。

本文字，预计阅读时长20分钟，内含大量图表示例，建议PC端阅读。记得每次设计完图表后拿出来对照走查。阅读指引如下：

一、图表构成

清单中涉及一些专业词汇，为方便大家理解，我们先简单地认识一下图表构成。

图表设计规范同样由原子、分子、组件、模块、页面搭建而成，其中图表由多个组件构成，如数据标签、图例、图形主体、坐标系等。

标题：图表内容主题，包括主标题和副标题。可以是图表内容的概括，也可以是结论。切换选项：用以切换同组对象的不同维度数据，如销售量与销售额。数据标签：也叫提示信息，即当前数据的内容标注。数字型的数据标签，以通常以常驻形式存在于图表；气泡型/卡片型的数据标签，常以交互行为（点击、长按、悬停等）触发的形式出现。图例：指图表内容与数据的符号或颜色说明，它既为绘图标准，又是图表的阅读指南。工具（栏）：当前图表的操作项，例如编辑、刷新、导出、分享等。

坐标系：将抽象的数据关系映射到具象的图表上，该图表所处的空间维度叫做“坐标系”，用来确定数据空间位置的数组叫做“坐标”，例如（x，y）、（北纬N22°38′17.54″，东经E°05′52.35）。坐标系包括坐标轴和标尺。图形主体：用于数据视觉展现形式的图形，可以根据数据维度、数据差异，在同一图表使用不同图形绘制，例如常见的折柱混合、K线图。网格：以标尺刻度为基准的参考线，用以辅助数据的快速定位。值域：表示图表X轴的缩放大小，以及可视区域，多用于存在大量数据的情况。映射域：表示图表Y轴的缩放大小，以及可视区域，多用于数据差异较大的情况。

二、图表设计七宗罪

1.冗余

冗余即多余的、不必要的信息，或重复内容，产生了视觉干扰，无法直观获取数据信息。

图表的价值在于使抽象的数据关系具象化、可视化，使其直观易懂。我们在设计时，可通过信息降噪来提高信息获取效率。《纽约时报》信息设计师JonathanCorum曾给出指导：“显示内容，而非显示框架”。

例如下图斑马纹背景、黑色的网格，作者试图给柱形添加描边来提高阅读性，使得图表更加地混乱不堪。当我们去掉斑马纹与描边，适当削弱网格，图表是否变得干净起来？接着我们添加数据标签，剔除坐标系，不仅使得图表更清爽，阅读效率也有大步提升。

再者，刻度值选取也是较容易忽视的地方。

我们的设计原则为：在保证易读取坐标的基础上做最简化。例如我们可以保留半个刻度值，灰色显示，方便用户快速读取数值。如果你的图表用只来展示对比情况，无需精确读值，亦或者有交互行为触发数据标签，那么你完全可以只选取合适的整值刻度。

可视化的数据集一般分为展示类和业务类，展示类只做某些确定的数据集展示，如项目提案、工作汇报等；业务类围绕着业务数据，包含已有的确定数据集与未知的数据集，如物流监控、天气预监、数据埋点监测等等。

业务数据集大多随时间推演而变化，缩小字号与斜置X轴轴标签都会影响数据阅读。建议抽样选取轴标签，并辅以交互行为触发数据标签。也可以完整保留轴标签，用值域缩略器控制显示范围与轴刻度大小。

题外话，当展示类数据集遇到类别名称较长，又不具备连续性时，建议使用条形图。

潜在风险

过多不必要的视觉噪音，干扰信息读取效率，图表内容得不到凸显，失去直观、形象的价值。

如何避免

剔除不必要的非数据元素（如轮廓、网格线、背景），将重点放在数据元素；弱化坐标系（坐标轴、刻度线），保持其清晰但不起眼；当你设计了常驻数据标签时，甚至可以剔除坐标系；数据集具有连续性时，坐标轴抽样显示，或使用值域缩略器。

2.繁杂

即多而杂乱，分为设计语言繁杂、数据集繁杂，和视觉浏览动线繁杂。

相比其设计冗余，设计繁杂时阅读更为困难，甚至出现无法读取信息的情况。

1）设计语言繁杂

在同一套系统中各个模块，分别使用蓝绿科技风、黑金尊贵风、玫紫时尚风、驼色休闲风等等等。纷繁多样的设计语言，不仅使用户困惑、认知困难，还加大了开发成本。

虽在业内没有明确的规范，大家可应根据载体终端，将产品原设计系统衍生出一份图表设计规范。

在可视化专业术语中，我们给图表定义的设计语言叫做视觉编码，它是数据与视觉结果之间的映射规则。其中包括了形态、大小、位置、色彩、纹理、方向等等。

感兴趣的朋友可以阅读JacquesBertin的《SemiologyofGraphics》，他在当中总结了有哪些视觉变量，能最有效地显示定性或定量差异。

其中比较值得注意的是图表色板的设定，我们分为定性色板、顺序色板、离散色板。

定性色板：基于明度、饱和度的平衡上，调整色相以区分不同类别。适用于无顺序关系的图表，多见于对比类图表，例如柱状图、条形图、面积图。顺序色板：基于色相、饱和度的平衡上，调整明度以表示递进、流程、顺序等。适用于顺序关系的图表，例如于漏斗图、热图。离散色板：基于中间值（例如0）将两种顺序色板组合起来，适用于两种不同关联关系的图表，例如双向堆叠图。

注：这里的顺序关系指的是图表类型本身带有连续性、递进性、流转性，与数据本身的连续性不同。

2）数据集繁杂

数据集难免出现极限情况，例如对比几十个省份订单变化情况时，你能在左侧图中找上海的数据吗？

建议把总览图表按某种规则拆分为小组，例如按地理分区拆分为东北、华北、华中、华东、华南、西南、西北七区各省份订单对比。

也可以拆分为若干个子数据图表，如示例右侧每个省份一张图，拓展性更强，可以灵活调取任意省份进行对比。

当我们要看子数据占比情况时，较多的分类会出现饼图切片过小，读取困难。当数据类别＞5时，我们可以将较小的/不重要的数据合并为“其他”。

如果每个数据都很重要，合并子数据会导致信息显示不全，可以在外部展开单独绘制，但要注意合并项与总项的比例大小，避免让用户误解该合并项为重点特写部分。

3）视觉浏览动线繁杂

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

①按数据值大小排列

如数据类别无任何逻辑顺序，那么我们可以按照数据值的大小顺序进行排列。除非你的图表只用作点缀装饰。

饼图与玫瑰图除了按数据值大小排列，还应注意起始位点，最好从12点钟方向顺时针或逆时针绘制。以及将合并项置于最后。

②按逻辑顺序排列

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

潜在风险

设计语言、数据集和浏览动线的繁杂，使得用户需要自行处理复杂信息，读取困难、认知成本高。

如何避免

制定视觉规范、统一有效的视觉编码，将庞大数据集拆分为多个子数据组或单一数据，按照大小、时间、年龄等逻辑顺序排列，帮助用户降低认知成本。

3.暧昧

指关系含糊不明朗，令人难以辨别，常见于视觉编码近似、图表选择失误。

大多B端设计师天然喜欢克制、冷静、理性，经常在设计中使用同类色。但对比类图表如果使用同类色、邻近色，在饼图中尚且可以勉强分辨，但在折线图中就难以辨别了。

数据类别较少时建议选取定性色板中的对比色，数据类别多时可在定性色板基础上进行扩展。

人眼对于面积的敏感度会低于高度/长度，数据值差异较小时，不建议使用面积图，可改用玫瑰图、条形图/柱状图、异形柱状图。

可能有朋友要好奇了，南丁格尔玫瑰图不是基于面积对比吗？玫瑰图是基于半径进行对比的，具体会在第七点中详细展开。如下图，从面积图至异形柱状图，用户认知敏感度逐渐递增。

当我们使用面积图时，两类数据近距离重叠，建议使用透明色，确保信息不会被遮挡。

还有，暧昧要两个人才是甜甜的，最多可以加一位僚机，当出现第四人，场面开始有点不受控制了。所以数据类别≥4类时，建议使用折线图或柱状图。

潜在风险

颜色、图表选取不当，信息区分感模糊，容易造成用户困惑，价值体验降低。

如何避免

针对不同需求不同场景，选取合适的颜色与图表，帮助用户快速辨别。

4.失焦

即层级模糊，无法对焦核心信息。

与刚才的暧昧不同，失焦指在传递某一个核心信息时层级模糊，数据之间是有层级关系的；而暧昧指在展示数据集时分辨边界模糊，数据之间是平级的。

例如在汇报提案场景，有想要着重传达的核心观点结论。此时我们可弱化次要数据，强调主要数据，以突显关键信息；亦或者在查看基金业绩走势场景，用户更

转载请注明:http://www.aideyishus.com/lkzp/2661.html