在分析之前,假设一个场景:
地球上有个村落叫阿萨姆,这个村子盛产土鸡并形成了产业。张三就是这个产业中的佼佼者。他的鸡店在阿萨姆这个村落里年年是销冠,大家纷涌而至每天排队买他们家生产的土鸡。张三为了掌握土鸡销售情况和生产情况,以方便制定商业决策。便要求每家门店上报销量,土鸡厂报告每个年龄段的土鸡数量。在拿到这个数据之后,张三便找来村头的画匠大发,将每日数据汇总展示在图表上,挂在他的办公室里。
画匠大发将数据汇总并画出来的行为定义为“数据可视化”,并给自己起了新的title-数据设计画师。大发发现张三对于同一个数据,有时候会要求展示前后两天的变化,有时候会要求跟隔壁王麻家的鸡店比比销量,有时候会想看看整个市场中他家份额占了多少。大发作为一个资深的画师,将工作中张三的各种需求整理为7种主要的图表。
那么接下来看看张三是怎么经过大发的帮助开拓他的商业版图的。
数据可视化
大发通过图表的形式展示数据之间的关系,帮助张三发现其中的规律。
图表设计要素
a.标题和注释 XXX直方图
b.图例 图表柱状图叠加这想吐
c.轴和单位 x轴、y轴
d.标签 xx-a,xx-b
通过这种形式,大发让张三可以更直观的观察数据。发现数据之间的商业奥秘,从而可以帮助决策者快速获得信息。
如何设计数据可视化图表
在画师大发在经过多次与张三的合作之后,总结出了一套工作流程,形成标准化流程。
a.明确设计目标 明确张三想要通过观察数据得出什么结果
1.理解数据及指标的意义
2.分析数据之间的关系,提炼关键词
3.明确用户是谁
4.通过数据我们想要表达什么?
b.选择图表
c.视觉设计
d.细节优化
正文—7种基本图表
一个阳关灿烂的工作日,张三突然登门造访大发的工作室,并带来了大发最喜欢吃的白切鸡。看着热情的张三,大发接过了白切鸡,也接过了张三的需求。张三的第一个需求便是将他的每个门店的每月销量制成图表好方便他看店铺的销量。
于是,大发便制作了一张柱状图,横坐标显示月份,纵坐标显示某个门店每个月卖了多少鸡。精心绘制之后放在了张三的像篮球场一样的办公室地面上,横向铺开。
1.柱状图 | 零散数据之间的对比
这里第一个知识点出现了,大发用到了柱 状图展示一个对象(土鸡)不同维度(销量)的对比
柱状图的用法
a.一个对象某一维度的数据对比
b.多个对象某一维度的数据对比
展示数据的对比关系
展示数据比例关系
展示分布关系
张三觉得最近市场份额第二的王麻的鸡店生意越来越好了,很有赶超自己的趋势。于是他又找到了大发,让他制作一张他与王麻每个月的土鸡销量图。于是,大发在原来柱状图的基础上增加了一个柱子展示王麻的销量。
延伸
分组柱状图
随时间变化(国家、城市...),多个对象的比较
堆叠柱形图
随时间变化(国家、城市...),部分和总体之间的关系
分组层叠柱状图
随时间变化(国家、城市...)。多个对象的比较,并展示某个由多个对象组成的对象的各个部分的比例
直方图
展示对象的分布关系
画师大发在线教你如何提升柱状图易读性
01 零基线
02 柱子之间的间距
单一对象,柱子与柱子之间的间距建议在1/2D与D
多个对象,簇形柱形图多个柱子之间的间距建议为1/8D,簇与簇之间间距建议为D,保证簇内数据的关联性,簇与簇之间合适的间距保证独立性和舒适的阅读体验。
对象太多或者文字太长时,可使用条形图
03 对象太多或者文字太长时,可使用条形图
老板张三最近想看看自己的各个分销商销量,并将排名从销量最高到最低排序,看看谁是销售冠军。大发便将柱状图横了过来,形成了一种新的图表-条形图
2.条形图(水平柱状图)
定义
多组数据之间的对比,比柱状图更直观
延伸
分组条形图
堆叠条形图
画师大发教你如何提升条形图易读性
文字分布
置于图例左侧,文字右对齐
置于图例上方,与图例左对齐
在分析了自家销量和竞争对后之后,张三又想看看自己的市场份额。于是画家大发便绘制了一张圆饼图,清楚地展示了张三鸡店的销量和市场份额。
3.饼图
定义
【比例关系】反映各项目之间占比
延伸
01 面包圈、环图:通过弧长表示数值
02 南丁格尔图:圆形直方图
03 嵌套饼图:子类别与主类别的合并展示
画师大发在线教你如何提升饼图易用性
01 饼图展示的标签维度不要超过9个
02 图例和数据的展示形式
使用引导线 数据变化时,排版难以掌控
不使用引导线
数据标注在图例上
数据不标注在图例上,与标签一块显示
数据不标注在图例上,点击显示数值
03 当饼图只展示两个维度的标签时,并且某个维度的标签具有特别的意义,可以弱化另一个标签,突出这个标签