总监出品的B端设计指南(七):常用图表的设计和应用

释放双眼,带上耳机,听听看~!
上期介绍了图表规划,这期继续分享图表规划和使用的相关知识。

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

往期回忆:

比较类图表的规划和运用

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

1. 柱状图

柱状图的知道

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

柱状图的制作

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

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

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

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

2. 折线图

折线图的知道

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

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

折线图的制作

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

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

3. 雷达图

雷达图的知道

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

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

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

雷达图的制作

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

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

总结

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

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

咱们下篇再贱~~

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

总监出品的B端设计指南(七):常用图表的设计和应用

总监出品的B端规划攻略(七):常用图表的规划和运用

给TA打赏
共{{data.count}}人
人已打赏
教程分享

免费商用!Iconic 打包了超多高质量的线性图标直接下载

2021-6-11 17:17:28

教程分享

如何设计「时间显示」更专业?来看大厂总结的方法!

2021-6-16 17:16:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索