总监出品的B端设计指南（七）：常用图表的设计和应用

上期介绍了图表规划，这期继续分享图表规划和运用的相关知识。

往期回忆：

比较类图表的规划和运用

首要解说第一类图表 —— 比较。比较图表的作用，首要是用来对纬度的数值做比照的图表类型。比较是为了直观看到不同纬度之间的强弱、占比、趋势。

1. 柱状图

柱状图的知道

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

在这个二维坐标轴中，咱们能够用纵轴代表数值，也能够用横轴代表数值，另一个轴代表纬度。即在显现的进程中能够运用纵向或许横向的（横向的也被叫成条形图，都是一回事）。

柱状图经过柱体的长短，能够直接比照不同纬度数值的高低，但运用也有一定的差别。

纬度之间关联性不是太强，或许按时刻顺序摆放的就合适用横向摆放的方法，比方下方记录我随时或许猝死的打工人一周睡觉时刻。而触及排名或许时刻的数据组，就合适运用纵向摆放的，比方 Geekbench 展现不同 Mac 处理器强弱的排行榜（Pro 竟然比 M1 还低？）。

两种图表的挑选还和 UI 环境的交互方法有关，在 APP 中，横向摆放的柱状图能够显现的数量十分有限，想放更多纬度就要左右翻滚，这个操作是比较费事的。而运用纵向摆放的运用体会就会显着好不少。

再回到主题 “比较” 上，作为一个比较图表，柱状对详细显现的数值体现是很含糊的，咱们要重视的是不同纬度（柱体）之间的差异。

柱状图的制作

柱状图的制作作为咱们讲的第一个详细怎样着手制作的图表，就要多花点篇幅，讲详细一点。首要，一切常见的抽象图表（不包括相似地图这种很具象的内容），都是一个完好的模块，它包括了图表本身和前面咱们讲过的解说性元素。

在每次详细规划图表前，要先确认出详细在界面中运用的图表区域，然后再对这个区域进行相关的区分和布局，比方下图在一个 400px*280px 区域规划，包括标题栏、挑选栏、纵轴标识、横轴标识、图形区域、图形说明区域。

关于标题、挑选、说明 3 个区域，都是单纯的布局规划，需求做多大，放多少内容，都依据项目需求和规划师自己决议，就不多说了。优先讲它们的意图，是为了着重 —— 图表区域的高度是减去其它区域后得出。下一步，才到了咱们详细开端规划图表的进程。

规划图表不是做出来罢了，而是要先从检查数据的角度动身。咱们需求展现多少纬度，显现多大量级的数值。

纬度数便是咱们要显现的柱体数量，关于这个区域，是要显现一周、12 小时、一个年级、若干城市、若干人物仍是其它的数量，一起，还要结合显现区域的包容情况，比方咱们上图运用的区域，显然是放不下一整个月的一切日期。

假定咱们设置显现的是过去一周的睡觉时长，那么过去一周怎样算，是从昨日开端往前一周，仍是上一个周一到周日，或许周日第一天到周六……

关于纬度来说，运用文字来标识它们是有必要的，咱们就要对每个日期运用详细的文字描绘，这就还需求确认文本的描绘类型、格式。运用月日、星期几、或许距今几天。

文本内容和格式决议了每个标识文本的 —— 长度，这是最重要的特点，假如文字太长，底子无法包容，就需求咱们去调整运用的文字。不到万不得已就防止倾斜或许竖排的方法，阅读体会会十分差。

确认好纬度后，咱们就还要确认竖排的数值标识了，这里有两个注意点，规模和节点数，即 Y 轴底部到顶部的数值规模区间，以及要显现几节数值出来。

规模是对整个图表可看性影响最大的因素之一，比方一个显现体脂百分比的图表，理论上最大规模是 0-100%，但能够必定超越 30%以上体脂的人凤毛麟角，40%以上根本不会存在。那么 40-100 这个区间就彻底不需求呈现到图表中。

或许，在一个百分比变动特别纤细的场景，比方深圳房间监控的图表，房价喜迎 18 连跌，10W 均价每次跌 10 块钱，还用 0-10W 的显现规模就压根看不出改变。而没有改变，就意味着没有比照性，柱状图也就缺少了存在的价值。

而节数一般处于 3-8 节之间，区域高度能够包容的行数来做决议，影响相对来说不大。所以，监控一周睡觉时长，咱们运用 0-16 小时的规模，并拟定 5 个显现节点，0（起点）、4、8、12、16，能够完结一个根本的表单结构。

在上方案例中，咱们将 X 轴等分成 7 列，纬度标识在每列笔直居中对齐，Y 轴等分成 4 行（4 行才干画 5 条线），数值标识文字和每行的分割线水平居中对齐。

有了这个结构，下一步才是加入柱体，首要确认柱体的宽度，再依据 Y 轴的对应份额拟定高（用计算器打手动输入），然后添加色彩。

要再次着重，关于柱状图来说，柱体默认状态只需求填充一种色彩。由于关于这些纬度来讲，这个柱状代表的数值是同一种东西，没理由用不同的色彩去强行做比照。

咱们在这个图表中仅有要比照的东西便是柱体的 “长度”，而色彩本身也是一种比照东西手法，只要在这里进行选中，或许是运用分组柱状图的时分，才需求经过不同色彩的合作来展现图表。

2. 折线图

折线图的知道

折线图也是一个十分常见的图表，经过创立端点并运用直线衔接的方法展现出高低不平弯曲的线段。折线图在图表形式上和柱状图十分相似，但两者在运用上是有一定差异的。

当咱们要挑选运用柱状图的时分，往往重视数值的总量，或许维度代表的是不同的目标，比方不同 CPU 之间的跑分比照。可是折线图的运用就没有那么单一，它首要运用在同一个目标的同一维度改变比照中。

比方，咱们监控 CPU 的占用频率，那么维度运用时刻，数值用百分比，这里边产生的数据都是围绕 CPU 的占用频率展开，但假如维度改成了当前时刻不同中心的占用数值、温度，那么咱们就必定不会用折线图来表明。

折线图的运用是要经过线段的弯曲来反映数值的动摇，在运用进程中往往不作为一个静态的图表展现，而是运用于监控的场景，比方监控网站在线人数、CPU 温度、同一区域降水量等等。

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

这要回归本质来讨论，折线图也是进行比照的图形，假如没有直观的动摇，那么这个图形带来的信息量就十分有限。曲线会由于圆角的缘故而降低动摇带来的冲击力，乃至抹平这种比照。

只要在必定会接连呈现极大动摇的图表中才合适运用曲线，即会有一个围绕在中心值数值，曲线进行正负两端移动的类型。比方监控呼吸中含氧量（呼和吸一个周期的维度）。

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

折线图的制作

折线图的制作，结构和柱状图根本共同，数值的界说方法相同，而界说维度会有一定的差异。

一般，为了展现的阅读体会更佳，建议在 X 轴的左右两侧预留一点内边距，然后确认需求展现的维度数量，每个维衡量为一个竖线，将这些竖线等分到中心区域即可，对每个刻度的标识文本依据该竖线居中对齐。

比方界说一个一周起床时刻的折线图，那么 7 条线段就会等分得到下面的图表：

有了这样的根底，咱们就能够依据每个维度的对应数值，将端点结合 Y 轴数值添加进竖线中，然后运用钢笔东西的线段将它们顺次衔接即可。完结图形后，竖线作为参阅线就能够删去不用了。

要注意，折线图的端点图形不是一切场景下都要画出来，而是会依据实际情况决议。假如维度的数量十分密布，尤其相似股价图这种包括大量维度节点的，那么端点彻底便是负担。只要端点数控制在合理范畴（要自己判断）的时分，才有添加的必要。

3. 雷达图

雷达图的知道

雷达图，信任咱们看到最多的地方便是在游戏的人物面板或许兵器面板中。雷达图是一种倾向归纳性的图表，并不能用来体现大数值和高频改变，用来比照同一个目标不同维度数值的图表。

雷达图的运用，首要要确认出不低于 5 个的维度，而且这些维度能够运用相同的数值体系。而且，这些维度最好是由同一个目标身上拆分出来的，而不是 5 个维度指代不同的目标。

简略来讲，便是咱们能够用雷达图来体现一个学生不同科意图水准，这样雷达图能够大致归纳这个学生科目把握情况和相对的强弱。

可是不应该用雷达图来表明不同学生同一科意图水准，那就只是更根底的比照，用柱状图就能够了。

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

雷达图的制作

雷达图的制作，也是优先完结对描绘性区域的规划，然后再开端图形的规划。但雷达图却不是先确认图形尺寸再添加对应文字，而是先把维度文字大致填充进去再制作多边形。

由于雷达图中，咱们对维度的描绘，根本只能规划到不同端点外部去，那么文字本身的数量、占比，就会对图形的显现产生十分大的影响，而且在雷达图中维度的描绘文字是有必要的，过度精简仍是用其它方法体现都很不直观，所以优先预留足够的文字空间。

然后，依据咱们需求的维度数量制作一个相等边的多边形，并设置合理的数值。下一步，便是确认出这个多边形内所包括的数值刻度数量。假定除圆心外总共要显现 5 级，那么就要画 5 个叠加的等边形，那么咱们就从最大的那个等变形入手，再仿制 4 个出来，对它们分别乘以 80%、60%、40%、20% 即可。

最后，再将每个维度对应数值依据百分比将端点打在维度的直线上，再用钢笔东西将每个端点衔接起来创立一个完好的不规则多边形，就完结了雷达图的规划。

假如想要在一个雷达图添加多个目标，只要用不同色彩描边制作多个等变形即可，假如要填充这些图形，就一定要运用透明度填充来完结，否则或许遮挡后方的端点，导致图形不全。

总结

小声 BB：学习图表规划，了解大于实操。在你们正式项目里规划应该很少，真实运用的场景是做报告 PPT 用……

图表规划部分的分享比较费事，推进速度快不起来，应该还有两篇~不过提早预告一下，最终 B 端这个系列会做一套更完好的汇总型 PDF 文档，作为东西书一样推出出来。

咱们下篇再贱~~

欢迎重视作者的微信公众号：「超人的电话亭」