图表的作用在于对数据的合理的诠释而不是美观。所以，在了解图表怎么绘制前，更重要的是了解图表是什么，包含哪些类型。下面就做下相应解释方便大家理解～

 

1.1 图表是什么

在今天，随着大数据和数据分析理念深入人心，图表在 B 端设计的地位越发重要。

那么什么叫图表呢？

图表指的是可以直观展示统计信息属性和数值的图形表格，对于多数人来说第一次接触图表概念都源自中小学计算机课程中的 Office Excel 表格教学。

 

要理解图表，你就绕不开 Excel 这个软件或其功能形式。我们都知道 Excel 是一个表格工具，可以任意填写表格化的信息内容进去。

但那只是呈现出来的表象，Excel 的真实身份应该是一个数据记录工具，通过这种表格形式记录，比如班级学生成绩、客户联系方式、仓库进销记录等等。每一条记录下的信息都是一条独立的 “数据”。

 

盯着表格看，我们确实可以看到一些具体的信息、数据、内容。但是，数据的作用只是让我们自己去精确定位想要的内容而已？显然是否定的。

我们统计数据的目的，还包括要从众多的数据条目中获得反映真实情况的 “规律”、“趋势”，如果我们只盯着数据条目一条条的浏览，是很难找出这些信息的。

于是，人类就发明了图表这种可视化工具，帮助我们对数据进行总结，用更直观的视觉方式来认识数据和找出规律和趋势，这也是为什么 Excel 是最强大的图表生产软件的原因之一。

 

总结：图表是统计学的子学科，它帮助我们更好的找到数据背后的真相，并做出正确的决定。

 

1.2 图表的内容构成

图表既然由数据内容生成，这个生成和转化的过程当然具备一些基本的规则和条件。要满足图表生成的数据必须要包含两种基础信息 —— ”维度“ 和 ”数值“。

它们是组成绝大多数图表的基石，比如看下面的表格，一次体检中有三个班级的5个同学，他们的身高、体重、体脂率、肌肉含量、视力各不相同。

 

我们可以从中挑选维度和数值，比如姓名做纬度（X轴），体脂率作为数值（Y轴），那么就可以生成基础柱状图表。

 

从上面案例可以知道，横向纬度表示的是你图表中要包含多少不同的展示对象，纵向数值则表示你要显示该维度的哪一类数据。

纬度通常指某个具体的人、日期、事件、分类，通常是 不可量化 的内容。而数值则是指包含 可量化 的数据类型，重点要记得数值是指 “数据类型”，而不是指具体的参数值。

再进一步，上方生成的图表，虽然直接反映了我们选择的纬度、数值的情况，但显然对于不了解数据背景的人来说太简陋了，不知道它们代表的意义。所以，一个完整的图表还会包含一些 “解释” 性元素，来让观看者更好的理解图表内容。

所以，一个完整的图表中除了中心图形，还会包含标题、单位、纬度图例、网格、选中提示等内容，用来提升其阅读性。

 

以上只是最基础的示例，不同图表、内容，对说明信息的要求各有不同，我们会在下方做出一定的解释。一个优秀的设计师要学会如何因地制宜，优化图表的内容构成，并对展示的信息进行取舍。

 

1.3 图表的类型认识

随着统计学的发展，图表也经历了一系列的增长与创新，除了我们常见的几种图表外，还发展出了大量平常看不到，只存在于各自专业领域的特殊种类。但是，它们对我们的生活和工作也起到产生了重要的影响。

比如在新冠危机中，政府和专业机构对民众开放的数据就大量使用了图表进行解释，让我们可以很清晰的了解事情的走势和真相。

 

之所以有这么多不同图表，让人眼花缭乱，在于数据所包含的信息和特性不同，导致了它们所总结的规律类型也不同。

业界将图表展示类型分成了四个大类，包含比较、分布、构成、联系，虽然比较简陋，但这是新手认识图表最简单的方式。

 

我们简单解释下这四个分类代表的作用：

• 比较：用来对比不同对象数值高低，比如上一份学生身高案例

• 分布：展示不同对象数值的分布区间，比如新冠新增分布省份

• 构成：表示某子对象的构成关系，比如班级中的男女比例

• 联系：表示不同对象之间的联系情况，比如不同城市之间的人口流动

之后我们就会以这个框架，来解释不同分类下的图表，帮助大家建立对图表的正确认识和设计方式。除了这种标准分类以外，我还额外做了一个归类，就是基础和高级图表。

前面提到，一般图表就只反映纬度、数值两个方面的图表类型，很容易理解。但复杂的图表，就会超过这个范围，它可能包含了多个维度、多种数值、甚至第三、第四。

比如下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（色彩）。在图表本身的解释性元素中，还包含分布区域、最大最小值标识、体重/身高均值。

 

这已经超出一个没有接触过统计的新手认知范畴了，是需要具体学习才能学会如何阅读和应用的图表。

这还是比较简单的高级图表，往后还有类似桑基图、K线图（韭菜的自我修养）、和弦图等类型，它们有各自使用的规范、参数，以及应用的场景。

 

高级图表的复杂度和抽象性，决定了它的使用门槛较高，识别效率较低。而随着数据各行各业数据重要性的提升，对图表的需求已经不再局限在二维抽象图形的应用上，而是提供了视觉效果更精美，制作过程更复杂，阅读门槛更低的可视化数据展示内容。

 

虽然我们在本篇文章不会拓展到大屏可视化的领域，但是掌握好平面二维的统计图表，提升对统计目的的认识，是深入学习可视化的必要条件。

 

接下来，我们就要来介绍一下如何绘制图表了。虽然图表之间有比较大的区别，但它们有很多细节是具有统一规范的。优先掌握这些一致的内容，再理解不同图表的具体绘制差异，可以帮助设计师快速上手图表设计工作。

 

2.1 基本内容绘制思路

上面我们提了，一个成熟的图表会包含不少解释性信息，怎么放置解释信息和图形元素是我们在设计时的第一个考虑要素。

常见的抽象图表都有一个完整的矩形区域，我们要先确定该图表的具体占比尺寸。然后，对这个区域进行布局的规划，而这个布局的规划就和解释信息的展示有非常大的关系。

比如，你需要在图表中增加标题和图形解释，那一开始把图形做成了上、中、下三栏。有的情况下我们可能还会增加一个默认存在的文本型解释模块，那么还会再右侧再切割出一个区域出来。

 

除了解释信息外，我们在设计中有时候还不能忽视交互内容，比如要包含分类筛选、时间线控制、开关等控件时，它们准备放在哪里，也要在这个阶段确定出来。

 

经过前面的切割，其实我们就能确定出中间的图形区域了。在开始绘制前，我们还要对图形具备的信息做进一步的确认，XY 轴坐标是否包含文字解释，饼图类是否包含延长指示线说明。

将这些区域先确定出来，减去它们的空间，就留下了最终要图形展示的区域了。

 

合理的图表绘制流程变是先布局，确定信息内容，最后才集中处理图形元素。如果对于前端适配有一定了解的同学，也就知道在完成这些步骤以后，图表的适配规则制定就畅通无阻了。

 

2.2  图形分布和比例映射

有了图形区域，接着就可以开始动手画图形了。不管是基础还是复杂的图形，你想要让自己输出的作品严谨、质量高，就需要应用专业的绘制方法。

图表图形的绘制类似尺寸作图，需要应用各种参考线、辅助工具来完成。图形本身并不是我们用来做创意的地方，而是要以准确的方式绘制出来。它包含两个重点，分布和比例映射。

以一个柱状图表举例，该图表中维度包含了 7 个对象，即应该出现 7 个柱形。那么首先就要通过等分图形区域，来确定柱形的分布，XY轴文字的对齐对象。

 

如果你不罗列对象具体数值的话，到这步也就结束了，但如果对象数值是必要显示内容的话，那么就要尽量确保柱状的显示比例和数值是一致的。

假设在上方案例中，Y轴总高是 100px，那么数值中每 1 小时的高度就是 100/16 = 6.25px，我们就要用你写下来的数值 * 6.25，保证柱状图高度比例和你的数值一致。

 

而类似饼图这样的图形中，只要添加了具体数值内容，那么饼图中不同的扇形角度，也要符合对应的比例。比如占比 10%、20%、30%、40% 的四个对象，它们的角度就分别为 36、72、108、144。

 

这就是分布和比例映射的基本逻辑，不管是什么图表，只要它根据数值在区域中进行绘制，就一定会受到数值的影响。不管学习什么新的图表，都只要确定这两个步骤就可以轻松准确的完成绘制。

至于具体该怎么实现，用插件还是参考线，就是软件基础的问题了，不在这里展开。

 

2.3 图表配色的基本原理

在图表设计中的最后一个问题，就是关于配色的方案了。图表配色的技巧主要关注两点，选色逻辑和搭配方法。

选色逻辑，就是图表用色的一些基本规范。我们知道图表往往非常的复杂，或者页面一屏中会包含大量的图表。

在这个基础上，图表的用色就注定是不能太 “刚猛” 的，饱和度要偏低，明度要适中。在选色面板中，它大概处中部偏上的区域。即使产品主色用的饱和度非常高，图表要和主色统一，也建议在主色基础上做适当调节，在色系上接近即可。

 

并且，建议新手在绘制图表的过程中千万不要用渐变色。即使在各类飞机稿中，渐变色的展示效果也非常的不理想，没有任何可读性。

 

有了选色逻辑，多色搭配的思路也就变得而非常简单了，只要重点关注色环的配色模式即可。

配色模式多种多样，包括补色、三角对立、类似、四元、方形、临近等等，不用想的那么复杂，只要牢记根据你的设计风格需要，你是要相邻配色，还是等分配色。

相邻配色，即以一个色系的临近色系为标准的搭配。以 H（色相）、S（饱和度）、B（明度） 配色模式为准，饱和度和明度数值基本不变的情况下，小幅度变更色相。

 

等分配色，也是保持饱和度、明度的一致，根据需要的色彩数量（大于三个）在色环中按角度等分，获得均匀的色彩过度。

 

配色的方法很简单，难的是你们如何根据页面的需要、视觉的体验，合理的运用配色的方案，这没有统一的标准。要记得图表配色不是仅仅针对自身，会和页面其它色彩产生联系。

保证相对平缓、不太激进的图表配色思路，是最安全的做法。 

 

首先解释第一类图表 —— 比较。

比较图表的作用，是用来对纬度的数值做对比的图表类型，直观对比不同对象的强弱、排序、趋势。

 

3.1 柱状类图表

3.1.1 基本认识：

柱状图，是一个使用柱状图形反映纬度数值的二维坐标轴图表，也是我们最常见的图表类型。

在这个二维坐标轴中，我们可以用纵轴代表数值，也可以用横轴代表数值，另一个轴代表纬度。即在显示的过程中可以使用纵向或者横向的（横向的也被叫成条形图，都是一回事）。

 

柱状图除了每个对象包含一类数值的做法以外，也允许包含多个数值类型，每个类型使用一种颜色表示，这种图表叫分组柱状。

 

并且，柱状图作为最基础的图形，衍生了非常多下级的柱状类型。包括：堆叠柱状、子弹图、正负混合、瀑布图、直方图等。但要注意的是，并不是所有柱状类图表，都是作为对比来使用的。后续会有进一步提示。

 

3.1.2 设计建议：

柱状图通过柱体的长短，可以直接对比不同纬度数值的高低，但使用也有一定的差别。

纬度之间关联性不是太强，或者按时间顺序排列的就适合用横向排列的方式，比如下方记录我随时可能猝死的打工人一周睡眠时间（见左图）。而涉及排名或者时间的数据组，就适合使用纵向排列的，比如 Geekbench 展现不同 Mac 处理器强弱的排行榜（见右图）（os：Pro 居然比 M1 还低？）。

 

两种图表的选择还和 UI 环境的交互方式有关，在APP中，横向排列的柱状图可以显示的数量非常有限，想放更多纬度就要左右滚动，体验不佳。而使用纵向排列则对空间的要求没那么高。

 

3.2 折线类图表

3.2.1 基本认识

折线图也是基础图表，通过创建端点并使用直线连接的方式展示出高低不平曲折的线段。折线图在图表形式上和柱状图非常类似，但两者在使用上是有一定区别的。

当我们要选择使用柱状图的时候，往往关注数值的总量，或者维度代表的是不同的对象，比如不同 CPU 之间的跑分对比。但是折线图的使用就没有那么单一，它主要应用在单一对象的单个维度变化对比中。

比如，我们监控 CPU 的占用频率，那么维度使用时间，数值用百分比，这里面产生的数据都是围绕 CPU 的占用频率展开，但如果维度改成了当前时间不同核心的占用数值、温度，那么我们就肯定不会用折线图来表示。

 

折线图的使用是要通过线段的曲折来反映数值的波动，在应用过程中往往不作为一个静态的图表展示，而是应用于监控的场景，比如监控股市市值、网站在线人数、CPU温度、同一地区降水量等等。

 

3.2.2 设计建议：

在折线图中，最大的认知误区就是对于曲线线段的应用了。在数之不尽的网上飞机稿中，使用曲线的折线图表 90% 以上都是错误的。

 

这要回归本质来探讨，折线图也是进行对比的图形，如果没有直观的波动，那么这个图形带来的信息量就非常有限。曲线会因为圆角的缘故而降低波动带来的冲击力，甚至抹平这种对比。

只有在必定会连续出现极大波动的图表中才适合使用曲线，例如围绕在会有一个中间值数值，曲线进行正负两端移动的类型，比如监控呼吸中含氧量（呼和吸一个周期的维度）。

 

所以，尽量避免曲线的应用，不仅画起来麻烦，而且实际使用效果极差。

作为折线图，在一些数值代表完成、占满、填充的概念时，往往就会觉得单纯的线段表示不够直观，于是就产生了将下方的区域填充色彩的 —— 面积图。只展示一个数值类型不够要加入多个数值和线段的就叫折线堆叠图。

 

3.3 雷达类图表

3.3.1 基本认识

雷达图，相信大家看到最多的地方就是在游戏的角色面板或者武器面板中。雷达图是一种偏向概括性的图表，并不能用来体现大数值和高频变化，是用来对比同一个对象不同维度数值的图表。

雷达图的应用，首先要确认出不低于5个的维度，并且这些维度可以使用相同的数值体系，比如0-10分，0-100%等。并且，这些维度最好是由同一个对象身上拆分出来的，而不是 5 个维度指代不同的对象。

简单来讲，就是我们可以用雷达图来表现一个学生不同科目的水准，这样雷达图可以大致概括这个学生科目掌握情况和相对的强弱。

但是不应该用雷达图来表示不同学生同一科目的水准，那就只是更基础的对比，用柱状图就可以了。

 

当然，雷达图中的占用内容，也可以添加多个对象，一个雷达图中可以放多个同学不同科目掌握水平的叠加图形，以此对比他们的差异。

 

3.3.2 设计建议

雷达图的绘制，也是优先制定说明内容区域，然后再开始图形的设计。

因为在雷达图中，我们对维度的描述，基本只能设计到不同端点外部，那么文字本身的数量、占比，就会对图形的显示产生非常大的影响，并且在雷达图中维度的描述文字是必须的，过度精简还是用其它方式体现都很不直观，所以优先预留足够的文字空间。

然后，根据我们需要的维度数量绘制一个等边的多边形，并设置合理的数值。

 

之后，才是确定出这个多边形内所包含的数值刻度数量。假设除圆心外总共要显示5级，那么就要画 5 个堆叠的等边形，那么我们就从最大的那个等边形入手，再复制4个出来，对它们分别乘以 80%、60%、40%、20% 即可。

最后，再将每个维度对应数值根据百分比将端点打在维度的直线上，用钢笔工具将每个端点连接起来创建一个完整的不规则多边形，就完成了雷达图的设计。

 

如果想要在一个雷达图添加多个对象，只要用不同颜色描边绘制对应数量多边形即可，如果要填充这些图形，就一定要使用透明度填充来完成，否则可能遮挡后方的端点，导致图形不全。

 

3.4 其它类型

3.4.1 阶梯图

阶梯图是一种用来对比前后数值涨跌的图形，它是柱状和折线图的合体。它和折线图的不同之处在于，更关注每个对象增减的份额大小。

不仅仅是关注波动，而是更具体的值。类似关注一只股票全年的股价涨跌情况，每个月涨跌的具体额度，就适合使用阶梯图表现。

 

3.4.2 漏斗图

漏斗图因为长得像漏斗而闻名。虽然这个图形看起来像一个锥形或者三角形，但本质上漏斗只是条形图（横向柱状图）的变体。

漏斗图是一种对阶段进行分层表现的图形，从上到下的顺序中，数值一定会呈现衰减的趋势（起码不会变大），然后从上到下的柱体就越来越小。

例如，UX 数据分析经常用的漏斗模型，就会建立一个从用户访问主页，到最后完成下单的转化率，每一个步骤都会有一定的用户流失。

在基础漏斗图之上还有进一步拓展，比如对这个转化本身有一个预期，那么可以做对比漏斗图，比较现实和预想中的差距。如果要对比 iOS 和 Android 端的漏斗数据，还有比较漏斗图，对比两侧的长短数据。

 

第二个解释的图表类型 —— 分布。主要是用来研究数据分布情况的图表，对不同数据的统计分布状况进行描述。

 

4.1  直方类图表

4.1.1 基本认识

直方图是一个看起来和普通柱状图非常接近的图表类型，是一个用来表示同一个纬度范围中，不同区间频率的图形。

 

直方图是一个二级图表，是对一级数据的进一步转化。比如看上图案例，散点图（下面会说）本身记录了不同的数据的位置，而直方图就是记录在发生在这个纬度内的次数。

直方图乍一看很像柱状图，但实际应用场景往往使用了非常密集的柱体，让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方图。

 

当视觉设计师、摄影师在学习处理位图的时候，就必然要学会直方图的读取，它并不是用来让我们学习如何对比前后数据差异的，而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。

直方图是统计学中的 “频率分布” 的视觉表现形式，需要确保使用的场景符合直方图的定义，以及确保用户能理解图表内容。

 

4.1.2 设计建议

对于直方图来说，如果维度对象少，只要获得相关的信息和数值，就可以像柱状图一样来绘制。

如果是针对一些比较专业的场景，如上方的通道直方图，那么就要放弃自己完成的目标，一定要借助相关插件，或者使用 Excel 等工具实现后再导入进来。

 

4.2 箱型类图表

4.2.1 基本认识

箱型图也叫盒须图，和直方图类似，它也是一个二级图表，即它不是直观反应原始数据，而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料，每个箱型包含下面这些信息元素。

 

箱型图反应的是一种 “大概” 情况，它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成，下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。

这里的排列主要通过 “数值大小” 来决定，而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高，虽然每个身高包含的人数不同，但 160 就是它的下四分卫，180 是它的上四分卫。

那么160-180身高包含的人数就是箱体本身的区域，上四分卫到上边缘是 180-190 的人数，下四分卫到下边缘是 160-150 的人数。

 

箱型图可以反应的信息是非常丰富的，它可以非常有效的反应不同数据组的虚实、占比、上下限，可以获得非常多有趣的结论。

 

4.2.2 设计建议

在箱型图的设计中，对于箱体和触须的表达要依据数据本身的重要性来判断。有些场景对最大最小值更在意，则箱体颜色就浅，线段更瞩目。而要重点关注箱体的话，则可以对触须进行弱化使用虚线。

同时，箱型图的主要识别信息是 Y 轴的长度，一个美观易度的箱型图，箱体宽度尽量控制在一个比较纤细的水平，不要为了填充画面的空白强行做宽。

 

4.3  K线图

4.3.1 基本认识

相信稍微了解过股票还是基金的同学，对K线图那可就一点也不见外了，下阳线、收盘光头阳、小阳线，开口就是老韭……不对，老股民了。

K线图是箱型图的一个变种，也叫蜡烛图，主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨，阴险代表下跌。

每个类型中，同时还表示当日成交中的最低价和最高价，柱体代表的是开盘价和收盘价。在我国股市，上涨用红色，下跌用绿色，在币市则相反。

 

K线图实际上动手设计它的情况微乎其微（只用开发好的），我们只要了解它的原理即可。

 

4.3.2 设计建议

K线图基本只应用在和理财有关的证券行业中，在会出现 K 线图的图表模块中，必然会出现相应的交互操作。如左右滑动、放大缩小，它是一个具备响应模式的图表类型，包含两种状态。

如果空间足够，则使用箱体和虚线的常规设计。如果显示的对象密集，那么就会以一条直线来显示，忽略掉箱体的部分。

同时，不同的场景，对于阴阳线箱体的展示会有一定区别，除了色彩外，还会应用实心和描边的区别。

因为涉及财产、交易，针对K线图的设计，一定要做好前期的业务调研，以及对比不同的竞品，降低设计出错的概率。

 

4.4 散点类图表

4.4.1 基本认识

散点图是一个使用也非常频繁的图表，它通过在 XY 坐标轴中添加圆点来表示不同对象的分布情况。

常见的散点图就是对普通二维坐标轴进行 “打点” 的图表，每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”，下面我们就用样本来称呼每个散点。

 

每个样本在散点图中必然包含两种以上的信息，一个是纬度值，一个是数值，这样我们才能确定它在坐标轴中的位置。

当然，针对样本并不是只可以包含两种信息，比如表示班级成员身高体重的散点图，我们可以再引入男女的对比，对散点图进行色彩的区分。再者，还可以添加体脂率，用每个点的大小来表示。

 

散点图是一个很直观的样本分布图表，它是概率论中做回归分析的主要工具。所以往往我们会看到散点图内出现了一个线段，那条线段叫做 “回归线”，他是通过散点分布情况，计算出来的一条均值线段。这个线段不仅可以大致标识数据的趋势，同时可以用来做概率计算和预测。

回归线包含指数、线性、多项式三种，对应绘制出来的回归线是曲线、直线、还是波浪线。

 

4.4.2 设计建议散点图的圆点可以使用软件的 Symbol 功能进行创建，确保后续可以统一修改配色和样式，尤其是在包含多种色彩的散点图中。

散点图的绘制不一定要完美契合数据内容，但是在大致的分布和数量上要和实际情况贴合。如果仅仅是随意的进行分布、均分，那么这个图表就会显得非常的不严谨和随意，比如下图图表。

 

4.5 其它类型

4.5.1 地图图表

地图图表，是将抽象的 XY 二维坐标轴替换成地图类图形的图表。本质上它们也包含 XY 轴，所以一样可以将数据内容进行映射。

最常见的，就是地图散点图了。背景由实际的地图完成，坐标则由经纬度体系来记录。这是可视化设计中非常常见的中心图表应用类型。

同时，背景的地图并不是只包含地理信息地图，还可以是球场、商场、网页、建筑表面等内容。

 

4.5.2 热力图

热力图则是地图和散点图的合体，也是在二维坐标体系中显示样本，只是热力图更注重的是这些样本之间的对比。例如区域的降水量、台风风力表现、网页的点击区域等等。

热力图本质上也是将坐标轴切割成了若干小块（样本），每个小块有一个对应的数值，然后通过算法绘制边缘和不同的渐变。

它也是很少直接通过设计软件绘制的图表，需要借助插件导入数据来实现，我们只需要确认色彩样式即可。

 

构成图表相对其它图表来说是最简单的一种，包含扇形、环形、饼图、堆叠、矩形树等类型。

 

5.1 饼图类图表

5.1.1 基本认识

前面看到的图表大多是遵循我们小学就看过的 XY 轴坐标系（笛卡尔坐标系）建立的，但是饼图并不需要考虑坐标空间的问题。它是一个依靠角度来反映数据的图表类型。

饼图作为一种常见图表，包含两个大类，一般饼图和环形图。如果没有一些特殊的交互或者复杂衍生类别的话，环形图其实就是饼图中间镂空的版本……

 

饼图绘制的主要依据是需要表现几条维度，以及它们对应的百分比值。饼图的显示有比较大的局限性，那就是显示的维度数不能过多。控制在 2-9 条比较合理，数量过多就会导致图形失去实际的使用意义。

 

除此以外，南丁格尔图、旭日图，也是饼图的延伸，通过添加额外的维度或者子分类，对饼图中的每个对象进行额外的示意。

 

5.1.2 设计建议

饼图作为基础图形，多数情况下也是由设计师自己完成的。但很多新手没有找到要领，导致做出来图形非常的别扭。我提供一个绘制的简单的思路，那就是通过绘制不同的三角形来拼装出一个饼图。

 

这类图形绘制的要点是确保三角形在圆心中的顶点时一致的，如果对比例的绘制有比较精确的要求，可以通过 Excel 之类的工具生成一个基础图形做背景，贴着它画即可。

南丁格尔图也可以沿用上面的画法，那就是对每个维度的三角形采取不同直径的圆做蒙版，就可以画出不同半径的占比区域了。

这么做的好处，是将图形的每个维度独立成一个单独的矢量图形，方便我们后续进行上色。

 

5.2 堆叠类图表

5.2.1 基本认识

堆叠类图表算是一个相对不那么严谨的类别，因为它多数由其它基础图表发展而来。主要包括柱状堆叠图、面积堆叠图、百分比堆叠图。

之所以把它归类到分布而不是其它大类下的图表子项，原因是只要出现堆叠，就意味着这个图表的核心目的是展示构成内容而不是对比或者分布。

在柱状类堆叠图中，通过将每个柱体切割成不同的更小柱体来呈现子分类的占比。面积堆叠图，则是单纯的把折线图进行填充然后叠加的图形。

 

而百分比堆叠，虽然看起来和面积堆叠和接近。但它是以最上层数据为 100% 标准，往下的每一级对象都根据顶层百分比呈现的分布样式。

 

5.2.2 设计建议

堆叠类图形的设计，最难的不是图形，而是色彩的应用上。之所以说堆叠只要应用就比原先图形的作用更大，原因就是堆叠使用不同的色彩表现层级，对于我们的视觉吸引力远远大于图形本身的轮廓。

而将丰富的色彩无缝拼接在一起，是最容易翻车的配色场景。在这种状态下，建议大家只用临近色来实现下级分类的搭配，千万不要使用色相差异过大的色彩。

 

而对于面积和百分比堆叠图，都建议在配色的过程中，直接使用带有透明度的色彩。因为这些折线并不一定会完美上下覆盖，当中间出现交汇的时候，不至于信息被遮挡。

 

5.3 矩阵树图

5.3.1 基本认识

矩形树图最初是一个设计用来表示磁盘空间占用情况的图形，通过将一块矩形切割成不同的区域来表示不同维度的占比，以及位置。

 

虽然也表示占比，但它比饼图类图表表示的信息更丰富。第一点是位置信息和并列关系，比如下面的 M1 芯片的示意图，就是矩阵树图的一种直观体现，在矩形中不同位置应用的不同芯片以及其占用的具体面积。

 

当然上方是最理想的情况，通常矩阵树图是为了对一些更抽象的概念实现矩阵化的排列。而这个排列中，还有个非常关键的要素是其中的 ”树“ 字。

因为矩阵中的每个切割出来的矩形，都可以作为一个独立矩形进行下一级的分割，实现一个类树状图结构的信息收纳。所以，完整的矩阵树图，是可以支持缩放或点击进入下一层级的。

 

而使用矩阵树图不使用树状图，原因也在于我们需要表现它的占比，而不是单纯的结构。所以如果只是简单表现层级结构，如企业组织架构、知识点拆分之类的，要用树状图而不能使用矩阵树图。

 

5.3.2 设计建议

在这类图表在项目中基本不会独立开发出来，因为其复杂度基本都会使用开源代码。

设计师的主要工作，就是根据对应开源图表，指定配色的方案，切割的边缘大小，以及文字的显示规范即可。

 

联系图表，是用来展示维度之间联系的图表类型，包含桑基、关系、和弦、韦恩图、依赖关系图等。

联系类图表中，多数是非常复杂的图形，已经脱离直接手工绘制的范畴，所以我们只简单介绍其中几个有代表性的图表且给出设计建议了。

 

6.1 桑基图类图表

桑基图是一个用来描述某维度值 ”流动“ 到其它维度走势的流动图表。

这是一个比较复杂的概念，比如下面的概念，不同国家人口的流动，人还是原来那些人（数值），但他们以不同的数量比例，移动到不同的国家（维度）。

 

桑基图的应用，关键在对数值迁移流向的关注上，它适合应用的场景在监控产品用户的跳转去向，货物的外贸出口状况，或类似新冠患者流动城区、地点的表示。

桑基图的数值总量通常是不变的，会包含起点和终点的维度，而维度的长短即代表其包含的数值总量（权重）。

它有非常多的变种，只有借助特定的图表生成工具，才能绘制出曲率、比例精准的流线。

 

6.2 关系类图表

关系图是大家比较不会陌生的图表类型，它在各类工具性软件、网站中都有应用。比如天眼查股东关系图、Wolai 页面关系图等。

 

关系图中包含了大量的节点，节点之间还有对应的关系，同构线段进行链接。常见的关系图有两种类型，一种是力导图，一种是弧长链接图。

力导图这名字也很难理解，源于力学中粒子存在某种互斥又具有引力的规律，粒子在两种力的作用下从初期的随机性会不断位移趋于平衡有序（读书多的好处？）。

 

力导图通常有一个起点，然后去关联后续的其它节点，如果节点之间还有关联，它也可以对这些节点的关联做出连接。它不仅表现一对多的关系，也表现多对多的关系，甚至在极其复杂的关系网中可以呈现成一定的强关联 ”聚类“ 信息。

而弧长链接图，则是通过弧线对节点进行关联的图表，它既可以是环形，也可以是水平横线的展示。

 

6.3 和弦图

和弦图是环形关系图和桑基图结合的图表，它表示结构之间的依赖关系和强度，链接的线段不再是粗细统一的而是具有粗细比例的标识，且维度之间的长度也有表示。

 

这类图表常用于社会学、生物学等学科的研究统计结果绘制上。如果单纯浏览，看上去非常复杂，所以正确的使用形式是可以进行指定维度的展示和隐藏的。

 

6.4 韦恩图

韦恩图，它是所有学 UI、UX 设计的老朋友了，一个用图形层叠相交来表示它们关系的图形。RGB、CMYK 的色彩介绍里韦恩图的身影必不可少。

 

韦恩图的使用相比起来没有那么严格的数学运算，它只是一种关系表现的方法，可以对各种无法量化的对象进行关系的陈述。比如，UX 设计师应该具备的知识点……

 

下面是超人的电话亭团队持续整理收集到的可视化组件库工具网站，以供参考：

 

原文地址：站酷

作者：酸梅干超人

思维导图，英文名叫 The Mind Map，是一种用来开展、记录发散性思维的图形工具。可以说是目前职业办公中使用最广泛最基础的图形工具，无论是做故事大纲、头脑风暴、任务拆解，都会进行应用。

 

通常，思维导图会有一个到两个中心主题，然后中心会扩展出不同的子节点，并使用连线进行关联。每个子节点，都可以继续建立更下级的节点，依次类推。

通过这种方法，我们可以建立出比较结构化的信息层级，中心主题是宏观内核，越往下级拓展的，就是越细节的信息。

而随着思维导图软件的发展和完善，除中心主题、连线、节点外，我们还可以在这个图形中添加关联、备注、图标、待办、图片和附件等内容。创建思维导图的工具在今天随手可得，无论是桌面端还是网页端，想要创建思维导图，从下方选择一个即可。

 

思维导图存在的价值，并不仅仅是我们要做一个方便别人理解的架构图形，而是通过它本身包含的结构层级属性，来帮助我们梳理自己的思路、想法、灵感。比如你要搞清楚进阶设计师应该具备哪些能力，如何进行学习，那就可以通过思考，查找资料，以树状图的形式记录和整理。

 

它最大的价值，就是帮助我们在绘制的过程规范我们的思维形式，能针对不同节点实现聚焦和深入探索与思考。而不让想法特别离散一会儿插画，一会儿体验，过一会儿又是平面四要素般毫无章法。

在互联网团队中，使用思维导图输出除了日常工作内容计划外，最多应用于和产品需求相关的表述上，有一些专用的思维导图类型需要我们认识，包含下面三种：

1. – 产品功能结构图
2. – 产品页面结构图
3. – 产品信息结构图

下面我们将从这三个思维导图入手，了解如何实现它们的输出，以及如果应用思维导图工具来提升日常工作的效率，以及规划自己的职业技能发展。

 

功能、页面、信息结构图，都是产品经理输出的内容产物，通常会置入到 PRD 中供团队成员查看和理解。但是，这三种思维导图不仅看起来差别不大，而且很容易搞混。

2.1 产品功能结构图：

我们首先介绍的第一个结构图类型，叫产品功能结构图，用来解释产品本身功能的树状图。如果学习过用户体验五要素的同学，就可以把它理解成它决定的就是范围层的内容。

 

通常，产品再开始进行一个新产品功能规划的时候，第一件事就是启动思维导图工具，开始整理该产品会包含的具体功能，和对应的功能层级，这应该非常好理解。

比如我们用潮汐这个 APP 举例，如果我要规划一个这样的产品，我会先考虑它包含的核心功能白噪音，然后向后思考白噪音包含哪些种类，如专注、睡眠、小憩、呼吸。每个白噪音类型里，我再根据对应场景提供更细节的功能出来。

 

然后，我再想到，白噪音不是只有固定一种的，而是包含非常多种，是不是就该提供一个放不同白噪音的地方，于是就增加了探索的模块。在这个模块里，包含搜索、广告位推荐、分类推荐功能。每个独立的白噪音，还可以对它进行收藏、分享等功能。

 

再然后，就还有添加用户系统，增加会员功能，统计功能，个性化定制等，就可以进一步完善这个图表将所有想到的功能多罗列出来。

 

虽然产品需求的推导前面还有别的专业分析步骤，但落实到具体包含功能的制定上，过程和结果都如上方的一致。通过思维导图逐个模块添加和细化，明确它们的类型、层级。

一个修订完整的功能结构图，就能清晰的表示这款产品包含了哪些功能和服务。

 

2.2 产品页面结构图：

产品页面结构图，是一个和功能结构图非常容易搞混的图形。很多产品经理在 PRD 中会在做完功能结构图以后紧跟页面结构图，两张图形中会包含大量重复的名称和相似的结构，让新手一头雾水。

页面结构图等同于体验五要素中的结构层，用来诠释产品包含的页面、层级、分支。

 

首先明确一个概念，就是功能并不等于页面。

一个页面中可能包含多个功能，比如专注页面中，就包含了时间、开始、暂停、停止、模式、标签、场景设置的功能。

 

 

而一个功能模块，也可能包含多个页面，比如我们在功能结构图中可能会简单表示添加声音的功能，但这个管理需要比较多的操作步骤和页面来完成。

 

既然我们知道功能和页面不是一回事，那么页面的类型、结构有没有必要表现呢？答案必然是肯定的，页面也需要通过树状图做完整的梳理并展示。

 

一个产品有什么样的页面，层级如何制定，都是基于功能分析出来的，合理的情况，是先把功能定好，再想怎么做页面。功能是产品的内核，而页面涉及到具体的表现形式。

所以，外行在规划一个产品的时候，往往是从页面入手，告诉你整个产品包含了哪些页面，大概的层级，但对功能的具体规划却往往语焉不详。

页面结构图对于设计师来说至关重要，因为它决定了我们应该设计哪些页面，可以说是决定了我们的版本设计任务和工作量。不管产品有没有提供这个图形，我们都要自己梳理出来。

 

2.3 产品信息结构图：

功能和页面的问题解决了，就所有结构性问题都解决了嘛？显然还没有。

五要素中还包含一个框架层和视觉层，视觉层指具体页面的样式，那得用设计图来表示，显然不是思维导图工具能实现的。那么，就剩下框架层一个还需要我们注意了。

 

框架层的表现无外乎就是单个页面包含的内容、交互、布局。交互和布局都是由原型图来呈现的，但不管你有什么跨时代的交互思路还是殿堂级的排版能力，都要面对一个严肃的问题 —— 界面里要摆啥？

虽说功能地图有一定的描述，但显然还是比较宽泛模糊的，设计师是需要更具体的字段内容的。这就是信息结构图存在的价值，描述每个功能模块或页面下方，包含哪些信息字段内容。

比如在白噪音的详情页中，要放哪些信息？就一个音频文件，我们要往里塞什么好。如果作为产品我的出发点就会是丰富这个页面的一些信息，让用户更有欲望使用，或者进行识别。

 

仔细整理这些信息，你会发现不少页面虽然看起来简单，但是实际信息量一点都不少。而这些信息，不是设计师还是开发随手做的，都是经过产品规划才落地的。

每个具体的信息，类似开发环境中常说的 “字段”，它也确实是产品经理工作中后续和开发梳理字段表的雏形。

所以，到这里我们也就基本了解了项目中最常用的三个具体思维导图。它们包含一定的先后顺序，“功能 —— 页面 —— 信息” 依次推导，从核心到细节。

梳理这些内容，对后续我们展示、理解项目会起到非常积极的作用，也是 PRD 文档中必备的图形元素之一。即使项目环境中不需要设计师自己上手，你也要保证可以明白它们各自的作用，以及看懂它们在实际文档中表述的内容。

 

除了在产品说明中使用思维导图，它还可以应用在我们工作和学习领域中的方方面面。我们就分别从这两个领域切入来讲一下设计师如何利用思维导图，提升自身能效。

3.1 工作领域

在工作上，设计师可能也需要在竞品分析里输出上面这3种图形，但还有很多别的工作场景需要我们应用，最常见的莫过于工作待办事项的整理了。

比如我们对一整个项目的工作内容进行梳理和评估，那我们就可以根据时间线或者内容类型，将所有要做的事情梳理成树状图。

 

 

或者，做用户现场访谈这种调研，一个跨度接近一周的工作，我们也可以用思维导图将前后需要完成的工作和顺序解构记录下来。

 

任何复杂的工作流程，只要经过结构化的拆解，就可以细化成更容易理解和执行的步骤。也更能帮助我们判断工作量和制定时间计划。

 

3.2 学习领域

在学习领域上，思维导图最常用的在我看来有两个方向，一个是对自己知识体系的整理，另一个是对于学科、书本的知识点整理。

虽然我们可能在各个干货或者公开课里，看到很多有关职业技能树的说明，并伴随不同的通行类型。但它们都只是对内容讲解和输出的一种抽象图形解释，用来辅助作者意图的表达。

比如我们 B 端课程中使用的 B 端设计师技能掌握图形，采取圆的形式，这样讲解起来更方便，也更好展现流程（树状图会太长根本放不下去）。

 

但对于个人的实际学习来说，这种图形是没办法直接进行记忆的，而且显然可以整理得更细致，所以我们就可以通过思维导图的形式，对自己职业需要掌握的技能整理下来，作为自己的学习目标。

 

一个灵活的思维导图，会随着你对职业的认识加深和计划的调整始终处于一个更新的状态，辅助你对当前已经掌握的，和准备掌握的技能有更全面的认识。强烈建议所有同学都培养这种习惯。

再者，就是进入到更细节的领域，比如一个简单的技能，还是一本书，通过思维导图完成知识点的拆解和整理。这在网上是最常见的思维导图，就不在这里多做介绍了。

 

最后一点，就要简单解释思维导图的输出了。如果我们做的思维导图仅仅是给自己看的，那么就没有输出的需求，但如果思维导图是要展示给别人的呢？

对于一般的评审还是方案说明，我们只需要在导出思维导图前，根据展示的画布，调节方向、类型，以及精简展示内容的数量，让文字能被正常看见即可。

 

但如果我们要在作品集中展示呢？相信大家已经看过不少作品集中包含思维导图展示页面结构的案例了。

 

见过非常多新人在问这类思维导图要用什么软件制作，答案是本文罗列的那些工具都做不到上方案例的效果。要想在作品集的展示中获得良好的观感，就只能自己手动绘制。

也就是说，你们要自己用 PS/AI/Sketh/XD/Figma 等软件画一遍。你可以根据当前的场景和氛围去设计合适的树状图样式，我就不慢慢做怎么画树状图的软件教学了，只强调一个细节，就是连接的弧线应该要怎么画才准确。

不管你使用上下还是左右的布局，如果应用到弧线，就不能每个弧线全用肉眼预估来拖拽贝塞尔。最简单的做法，先确定出包含几个二级节点，画出等距离的横线，然后先拖出最上或者最下的弧线，确保控制端点都处于水平方向。然后复制这个弧线，将对应一侧的端点移动到对应横线上去即可。

 

切记要保证弧线的一致和稳定，而不是歪歪扭扭的。再之后，想要设计成什么样的风格，增加什么样式，就根据你们自己的想法决定了。

 

强烈建议大家日常多使用思维导图，因为它能很好的锻炼我们结构化思维能力。用的越多，你就会发现在你生活困扰你的问题就会越来越少。

之后，还会出一篇完整的流程图介绍，继续解释和图形有关的知识。

下篇再见~