产品设计中怎么选择图表

在设计产品时,数据表格是我们经常运用到的组件,表格是一种可视化交流模式,通过行与列把数据展示给用户,是业务在数据层面的展示。但表格也存在缺陷,表格透出了数据的大小,但是很难直观透出数据之间存在的关联。而图表对表格数据进行了强化表达,增加了对数据大小以及数据关系的表达,帮助用户更直观地观察数据以及数据关系。

产品设计中怎么选择图表

一起看1组数据,已知近7日的店铺销售额数据为1019,2581,1209,5113,2085,3457, 3489。很容易从“数据表格”中读出不同日期的销售额数据大小,但不能直观读出多个数据的变化情况,而绘制成折线图后,近7日销售额数据的波动趋势跃然纸上。

产品设计中怎么选择图表

由此可见,图表可以强化对数据的表达,更直观更清晰地透出了数据以及数据关系,那么我们在产品设计中怎么选择图表呢?这需要我们了解不同图表的特点。

折线图

观察“近7日店铺销售额”数据表格,我们已经从表格中读出5-11号到5-17号每一天的店铺销售数据,这个时候想了解近7日的销售额变化,但是数据表格无法满足我们的需要,而把数据表格绘制成折线图,就能直观的了解近7日销售额的趋势变化。

图表特点

那么为什么折线图可以解决这个问题呢?首先,从人的视觉系统对图像和数字的理解上来看,通过图像更容易读出趋势。一起尝试下,在一组数字和图像中,我们会发现,通过文字去联想这一组数字的趋势,需要在脑海里自己想象不同数字之间的关系,数字“1019”到数字“2581”是上升了,数字“2581”到“1209”是下降了。而看图像就不需这一想象步骤,直接能读出趋势信息。

产品设计中怎么选择图表

其次,从折线图的构图过程来看,横坐标由数据表格中的列或行中的文本标签作为维度构成,沿水平轴均匀分布;纵坐标由数据表格中的数据单位作为度量构成,沿垂直轴均匀分布;折线图的数据点是按对应的文本标签统计到数据后,一一映射到图上的,连点成线后就能得到折线图。折线的变化趋势表达了统计数据随着“维度”变化的趋势。

图表价值

折线图利用了线条具有的延展性和多变性,通过线条的变化增强了对于一组数据趋势的表达,解决了数据表格无法直观透出趋势的缺陷,清晰表达了一组数据随着维度变化的趋势。

适用场景

折线图经常被用于根据维度变化观察数据趋势的场景,但前提条件是,构成维度的文本标签是均匀且连续分布的(常见的有时间标签)。因为只有当维度是连续的,统计到的数据才具有连续性,连点成线得到的折线图反映出来的趋势才是真实存在的。如果构成维度的文本标签无序,折线图表达出来的趋势在真实场景中是不存在的,是站不住脚的

例如下面这个数据表格,随着业务不断扩大,由单个店铺,扩展成了店铺A,店铺B,店铺C,文本标签是店铺,同样可以将店铺A、B、C这3个店铺的数据绘制成折线图,但是折线图反映出的趋势是和真实情况所违背的,因为店铺A、店铺B和店铺C之间并不存在顺序关系也不是一个连续的文本标签,所以折线图反映出来先上升后下降的趋势没有业务意义,是折线图错误的运用

产品设计中怎么选择图表

柱形图

折线图不适用于“多店铺销售额”数据表格,那么什么图表合适呢。通过表格可以读出不同店铺的销售额数据,但当我们想对比不同店铺数据时,表格透出来的信息就不够直观了,店铺B销售额比店铺A多,这个多出来的销售量是个怎么样程度呢,表格只能通过计算得到准确的一个差值,而将数据表格绘制成柱形图后,能通过矩形高度非常直观感受到不同店铺销售额的大小

产品设计中怎么选择图表

图表特点

那么为什么柱形图可以解决我们这个问题呢?首先,也是基于人视觉对图像和数字的理解习惯,通过图形所获取的信息更加形象,我们能很清楚的感受到数字1和9999的大小,但是数字9999相较于1有多大很难通过两个数字感知,而图像可以很直观的把这个量表现出来,看到图A有1个苹果和图B画了100个苹果,人很快就能产生原来100个苹果有那么多的感知

其次,从柱形图的构图过程来看,横坐标由数据表格中两个或两个以上不同的标签作为维度构成,沿水平轴分布;纵坐标由数据表格中的数据单位作为度量构成,沿垂直轴均匀分布;将按对应的文本标签统计到的数据点一一映射到图上,以点的高度绘制成长方形得到柱形图,柱形图的高度表达了不同维度下相同度量单位的数据量的大小

图表价值

柱形图利用矩形强化了对数据量大小的表达,矩形高表达了当前数据量大,低表达了数据量小,清晰反映了一组数据量的大小。同时通过不同矩形高度差异,更直观的表达了数据之间对比的差值

适用场景

柱形图经常被用于需要观察同一度量单位下不同维度的数据对比场景。前提是文本标签存在两个或两个以上数量(常见的是不同时间或者不同条件),但柱形图也存在不足,当不同维度下统计数量差异值极大的情况下,受极大值或极小值的影响会导致柱形图透出的数据量很难进行对比

例如店铺在现有客服团队下增加了机器人聊天助手,把机器人作为一个客服概念统计进了“客服接待人数”图表,绘制成柱形图后可以发现,由于机器人提供的自助服务比人工接待客服更便捷,接待人数远高于人工客服,机器人的柱形图高度远高于人工客服,虽然能读出机器人和人工客服直接的巨大差值,但是基本上很难读出人工客服与客服之间的差值了

产品设计中怎么选择图表

饼图

继续看的“多店铺销售额”数据表格,当我们想了解不同店铺占整个店铺组的占比情况时,表格也无法直观地透出不同店铺的销售额占比,而绘制成饼图后,通过观察不同店铺扇面的大小就能直观的了解到各店铺的占比情况了。

产品设计中怎么选择图表

图表特点

那么饼图为什么能解决这一问题呢?首先,依旧是人对于图像和数字的理解习惯,我们看10129和47619这两个数字,很难想象出10129占两个数字的占比情况,需要在脑海里除法计算10129这个数字占两个数字之和的百分比,得出20%左右的计算结果后,勉强能够联想出20%大概占了多少这样一个概念,而图像能很直观的表达20%占比,看一个占比是20%的扇面,我们就能有一个概念:原来占比20%大概是这样子的

其次,从饼图的构图过程来看,将数据表格中的一列或一行下的不同标签作为维度;计算相同标签下的数据与汇总数据的比例,来构造扇面的大小。不同的扇面的大小就代表了某一标签下的数据占汇总数据的百分比,代表了该标签下数据的占比情况

图表价值

饼图通过利用扇面大小能代表百分比的特点,强化表达了一组数据中,数据占汇总数据的占比大小,清晰反映了一组不同标签的数据占比情况

适用场景

饼图经常被用于需要观察不同维度的占比情况,但是构成维度的不同标签需要满足属于同一个集合的条件,例如杭州、绍兴都属于浙江省这个集合,5月30日和5月31日属于月份5月这个集合。如果标签不属于同一个集合,绘制得到饼图的扇面大小所表达出来的占比大小在实际场景中是不存在的

例如已知店铺A的销售额数据和店铺B客服1,客服2,客服3的销售额数据,店铺销售额和客服销售额不属于同一个集合,绘制成图,所得到的占比情况无法反映店铺A销售额占所有店铺的占比情况,同样也无法反映出客服销售额占所有客服的占比情况,无法反映真实的业务数据,得到的饼图也是没有用的

总结

通过对折线图、柱形图、饼图的分析,我们可以总结几点有价值的内容。首先,数据表格是基础,图表是以表格为依据进行更直观的可视化展示,强化表达了表格数据,帮助我们更直观的感受到数据量的大小以及多个数据之间的关系

其次,同一个数据表格可以加工成不同的图表,不同的图表具有不同的特点,其特点可以强化表达不同的数据观察需要,简单来说,折线图观察趋势,柱形图观察对比,饼图观察占比,用对合适的图表可以更好的表达业务想表达的数据

折线图、柱形图、饼图是我们在生活工作中非常基础的图表,但这3类基础图形也存在缺陷,在一些复杂的数据分析场景需要我们引入更高级的图表甚至需要通过调研来验证我们对于这些复杂场景的猜想

以上就是我对于在产品设计中怎么选择图表的思考和总结。

业界动态

微信视频号,为什么我会说一定不会大火

2020-6-2 8:53:52

业界动态

如何让品牌产品利润上升的法宝——品类战略

2020-6-2 9:12:27

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