数据图表设计十大原则 完整篇
上一篇我们介绍了数据可视化基本原理,这一篇将要讨论数据图表的设计原则。我们归纳了十大数据图表最佳实践原则。
忠于事实
5秒原则
确定观众
符合习惯
适度原则
要素齐全
突出重点
少即是多
审美因素
增加互动
忠于事实
没有什么比让图表反映数据真相更重要的原则了。图表必须准确反应真实的数据,而不能通过艺术加工误导观众。如同穿黑衣服显瘦一样,图表是数据的衣服,也可以通过“加工”让数据显得不一样。大部分“加工”仅仅是为了让图表好看一些,殊不知观众却因此读到了错误的结论。
问题:哪幅图是对的?
答案:右边的图。
解析:左边的图表和右边的图表使用的是相同的一组数据,但视觉上左图视觉上利润率不到10%,右图利润率约为30%。造成视觉差异的原因是由纵轴刻度起始点不同造成的:左图纵轴起始点是从20开始的,而右图是从0开始的。问题就在这里,实际上观众很难注意到坐标轴刻度起始点这一细节,而会简单的从柱形高度去判断利润率的大小,从而得出错误的结论。
问题:这组图背后的数据是B比A大一倍,那么哪幅图忠于事实了呢?
答案:勉强接受第三幅图。
解析:如果圆A的直径等于圆B的半径,那么圆A的面积只有圆B的1/4。然而对于图1,有些观众会认为B的面积是A的4倍,有些认为B是A的两倍,还有些会认为B包含A,B的面积需要把A减掉,因此B是A的三倍。可见图1造成的歧义极大,不能很好的说明数据实际情况。图2虽然修正了面积比例,但B包含A,依然容易产生歧义。只有图3反应了真实情况,但图3依然不是比较A和B大小的最好展现方式,这是因为人们比较难以比较圆的面积,而更容易比较条形长度,因此条形图才是这个分析需求的最佳展现方式。
5秒原则
对于同样的分析需求,数据图表首要的评选标准是比“快”,其次才是比“美”。这是因为数据图表的基本作用是让人们看见并且理解信息,而不是为美而生。
所谓5秒原则指的是,观众有多快能从一幅图表中读到你希望传递的信息,如果这个时间少于5秒,则这幅图表非常成功。5秒是一个非常高的要求,人们从一张10*10左右大小的表格中得出所需要结论的时间通常多过30秒,图表应该比表格快上很多才有意义。这就需要选择最适合的图表来回答问题,让观众一目了然的理解信息。
问题:这几幅图都在说明A、B、C、D四个产品类别的销售实际值与目标值的对比情况,以查看哪几个类别达成了目标。你觉得哪幅图更容易快速看懂呢?
答案:图2或者图4,图2用的更广泛一些。
解析:四幅图都是柱形图,但易读性存在明显的差别。
图1是并轴图,对于每个产品类别的实际值与目标值分别用浅蓝和深蓝柱子表示,由于数据比较接近,难以很快比较出哪几个类别完成了目标,并且看上去有点眼花。
图2是标靶图,柱子表示实际值,线段表示目标值。如果柱子穿过目标线,表示目标达成,反之未达成。图中柱形又加上了颜色,绿色表示达成,红色表示未达成。使图表更加一目了然,实际上只有C类别达成了目标。
图3是双轴图,将实际值与目标值的柱形相叠,其中浅蓝柱子为实际值,深蓝为目标值。由于颜色调整了透明度,交叠的部分呈现湖蓝色。如果实际超过目标,则会显露一截浅蓝色表示实际超出目标部分,反之则有一截深蓝色,表示目标超出实际部分。专业数据分析师会使用这幅图,因为它不但能说明达成情况,还能准确反映未完成或超出的部分。但是普通观众就比较难理解这幅图了,因此不推荐给大家。
图4是柱中柱图,外侧灰色较粗的灰色柱子表示目标,内测彩色柱子是实际值,内测柱子比外侧高表明超出目标,反之不及目标。颜色强调是否达成,其中绿色为达成目标的类别。这幅图和标靶图是比较接近的,区别只是一个用线段表示目标值,一个用较粗的柱子。
确定观众
同样的分析需求有很多图表可供选择,简单的图表大部分观众都理解,而复杂的、专业的图表观众较难理解。
假如我们问不同的观众同一个问题“你们常见或常用的图表有哪些?”,他们的答案很有可能是:
普通观众:表格、折线图、柱形图、条形图、饼图。
数据分析师:折线图、条形图、饼图、地图、双轴图、堆积图、树状图、雷达图、甘特图、漏斗图、瀑布图、散点图等等。
设计师:自由设计的图表、漫画。
数据科学家:散点图、直方图、箱体图。
越专业的人群越可能了解、使用一些普通观众所不知道的图表,这是因为他们日常工作确实会使用这些专业图表。那么问题就来了,如果观众不能理解的话,再专业的图表也没有价值。解决方案是在设计图表之前先确定观众,选用与观众的认知能力相匹配的图表。
提供7种常见食物的热量数据,我们请不同的身份的人就《常见食物多少克含有80卡路里》设计图表,他们所设计的图表事实上也是他们最容易接受的图表,以下是他们的答案。
一般观众:尽管他们爱看简单的图表或者漫画,但他们接受程度最高的,以及自己最有能力做的还是表格。
数据分析师:他们会使用各类数据图表去说明这个主题,由于这里卡路里数是固定的,就可以通过克数对比反映食物含热量的比例,而对比问题最适合使用柱形图。其中肥肉无疑是最胖人的。
设计师:他们表达食物一般不会选择文字,而是直接用图。对于肥肉、瘦肉、鱼标记克数,而半碗饭、一只鸡蛋、半杯牛奶、两只桔子这样的概念甚至无需标记克数就能直接给到观众一个概念。要知道很少观众能反应过来180克大概是一只桔子,69克是半碗小碗的米饭。一般观众也非常欣赏设计师的图片。
数据科学家:他们使用更为专业的箱体图来处理这7条数据,查看食物重量的分布。事实上,这幅图很少一般观众和设计师能看懂,只有数据科学家自己认为有用。
符合习惯
数据可视化是一门非常古老的学科,早到公元前人们开始绘制地图的时候,这门学科就已经开始萌芽。到了18世纪,如今喜闻乐见的折线图、柱形图、饼图陆续被发明了出来。
一门拥有千百年历史的学科,人们对于如何用图表展现、理解信息形成了认知习惯。这种习惯如同用规范的语法组织语言,人们会更容易理解一样,数据可视化也需要遵循图形语法和规范。
比如对于图表的选择,我们通常使用地图描述地理信息;折线图反应趋势;柱形图进行对比。又如绘制图表的时候,我们通常会对分类进行排序;时间的信息往往放在x轴上;用红色、黄色、绿色分别表示需要不好、中性、好这样的意思。
问题:全球新冠疫情确诊趋势图,你觉得哪幅图更合适呢?
答案:左图。
解析:两幅图区别在于左图把时间放x轴,新增人数放y轴,右图相反。由于我们更习惯看时间放在x轴上的趋势图,所以左图看起来很顺眼,右图很奇怪。
问题:全球新冠疫情确诊地图,你觉得哪幅图更合适呢?
答案:右图。
解析:两幅图都是填充地图,图表的选择非常恰当。而两幅图区别在于左图使用蓝色填充,右图使用红色填充。疫情通常联想到红十字,因此使用红色更为贴切。
值得一提的是,相同的可视化手法对于不同的场景含义可能不同。比如中国股市用红色代表上涨、绿色代表下跌,国外则相反。如果不考虑环境因素就会闹笑话。因此图表设计需要密切结合使用环境,符合受众的认知习惯。
适度原则
图形元素和图形属性如此丰富,如何搭配才能是图表看起来和谐、美观且准确表达所需传递的信息?这里我们会提出一个“适度“的标准,帮助你检查自己设计的图表是否合适。
信息量适度:
可视化图表通常展现高度聚合的数据,这是因为过大的信息量会使用户难以理解。比如人口普查数据,我们通常通过地区、性别、年龄段等比较粗颗粒度的维度去了解,而非把每一条数据都展现出来。因此在做图表之前,往往需要对数据进行筛选以及聚合计算。
图形属性不宜过多:
位置、颜色、形状、大小、角度这些被成为图形元素。一幅图表通常使用1-2种图形元素,过多的图形元素会妨碍用户理解。
问题:展现相同的信息,哪幅图更好?
答案:右图。
解析:两幅图同时用到产品类别和子类别的维度,以及利润和销售额两个度量,并且都选用散点图来展现各个产品子类别的分布。
左图使用了四种图形元素,分别是坐标轴位置表示利润和销售额、形状表示产品类别、大小表示销售额、颜色表示利润。其中销售额和利润在已经用坐标轴位置表示一次的情况下又分别用大小和颜色强调了一次。整幅图重点太多,观众不知道要看什么。
右图仅使用了两种图形元素,分别是坐标轴位置表示利润和销售额以及形状表示产品类别。观众可以理解到作者的意思是理解三个产品类别的子类别存在不同的特征。其中办公用品销售额和利润都较小、技术用品居中、家具有两个明星子类别书架和椅子,用具销售额和利润都较小,而桌子则亏损。
颜色适度:
颜色是最常用的视觉通道,效果强烈。关于颜色的理论很多,这里简单提一些图表制作的时候需要特别注意的几点。
颜色不宜超过八种,最好在五种以内。
避免使用饱和度和亮度过高的颜色。
避免使用纯色,特别是正红和正绿。
使用近似的色调,效果比较协调。
不过分修饰:
不使用3D、阴影等浮夸的修饰手法,尽可能使用简单的图形表示。
要素齐全
数据图表除了图表以外还包含众多要素,如标题、数据标签、坐标轴、参考线、图例、说明、注释、结论等。要素齐全的意思并非要求一张图表集合所有要素,而是审视一幅图表是否具有各种能帮助观众更好理解的信息。如果缺少某种要素,图表就难以看懂,那么就需要添加这种要素;反之无需特别说明观众也能够理解的话,就不需要添加这种要素。
标题:标题的作用是概括图表主要内容,它和文章的标题一样重要,是数据图表的必要信息。
坐标轴:如果选择的图表用到坐标轴位置的视觉通道,那么坐标轴与刻度通常需要绘制出来。当然有些图表也会省略坐标轴,取而代之的是把数字直接标记在图上。一般来说,坐标轴刻度和数字标签不同时显示,可视化图表上出现越少的数字越好。
参考线:提供参考的辅助线,通常将常量、目标值、平均值作为参考。
图例:说明图表上各种颜色、形状符号、大小所代表的含义,有助于更好的认识图表。图例和数据标签、说明文字通常选择一种形式出现即可。
说明:解释图表查看的方法,帮助观众更好的理解图表,也可以补充说明数据来源、时间范围等信息。
注释:对于图表整体或者关键数据点添加注释,补充说明更多的信息,帮助观众阅读。
结论:图表的结论或总结。
突出重点
同一幅图表,每个观众的关注点很有可能不同。这是因为图表上图形元素、图表要素、数据点众多,如果不加以引导,或者未能突出重点想要表达的信息,观众的关注点就会分散,从而得不出作者希望他们看到的结论。
问题:竞争产品销售趋势图,左右两幅图你分别读到了什么?
解析:左图用四种不同的颜色表示4种产品,需要结合颜色图例先找到那一条线是我司产品,然后与另外三种竞品进行比较。作者想传递的信息到底是什么呢?5年来几个产品销售额都差不多?我司产品销售有的年份比竞品高,有的年份比竞品低?2020年所有产品销售额都在300左右?还是2020年各个产品并未出现销售下跌的情况?
右图用红色表示我司产品,竞品都用灰色,图表坐标轴去掉了刻度,所能关注点仅剩下我司5年来销售额与竞品相差不多,但波动比竞品大。当突出的信息较为明显的时候,观众就知道作者要理解什么了。
问题:各司产品销售对比图,左右两幅图你分别读到了什么?
解析:左图用四种不同的颜色表示4种产品,读到了竞品C位于第一,以及各司的销售额。
右图用红色表示我司产品,竞品都用灰色,图表去掉了数字标签改用坐标轴,重点突显我司产品排名第三。
少即是多
少即是多原则强调的是简朴实用,与适度原则、突出重点一脉相承,又各有侧重。讲求用最少的油墨表达最想要表达的意思。在一些可视化文献中提到的减少“数据墨水比”也是这个意思。
少即是多原则核心的思想是简化,而简化的目的是为了让重要的信息突显出来。在设计数据图表的时候,可以不断问自己:这些是必要的?去掉是否不影响理解?是否会产生歧义?如果不影响,那么就应当断然舍弃掉。
右图对于左图的改造是相当成功的,在将左图众多信息简化到只剩下一条折线和两个点的时候,我们意识到什么叫极致简化。事实上,这一改造让我们聚焦到整体上升趋势以及最高和最低点,除了具体数值以外,我们并没有因此损失什么。而对于趋势图来说,大部分时候作者只是想传递趋势信息而已,也不会有多少观众比照坐标轴刻度进行读数或者从折线上的数据标签读取准确数值。应该说,如果观众需要的是数字,给他们看表格就好了。
审美因素
这项原则对于数据图表设计来说不是必须,却是锦上添花,但事实上这条原则的重要性并不亚于其他任何一条原则。这是因为人是视觉动物,而图表就好比数据的衣服,除了合身、功能性等基本要求以外,美观也是十分必要的。
以上四幅图想表达都是占比22%这个意思。两幅圆形的图表分别是饼图和环形图。环形图其实是在饼图的中间抠了个圆孔,视觉上让人感觉更舒服,并且中间的圆孔可以放标签,非常实用。而两幅方形的图表分别是堆积图和华夫饼图,不得不说华夫饼图的视觉效果十分出彩,10*10的小方格构图里,高亮了22个小方格,生动的展现了22%这个信息。无疑四幅图中油墨最多的是华夫饼图,效果最出众的也是华夫饼图。
为了让图表变美可能会与其他原则产生冲突,这个时候就要结合具体的使用场景和观众的喜好进行平衡和取舍。通常商业分析作品更注重功能性,使用较为朴素的展现手法;而数据新闻作品注重视觉冲击效果,会花大量笔墨进行渲染。
增加互动
增加互动是数据图表设计的高级技巧,如果你具有相当的设计能力或者具备使用专业图表工具的能力,可以增加互动性使你的图表更加出彩。
隐喻:
解释抽象或者枯燥概念的时候,与熟悉的事物结合起来,使图表更加生动有趣,激发观众阅读兴趣且便于理解。
上图说明的是蒙牛公司的损益结构,如果使用普通的堆积图平淡无趣,而在牛奶瓶里画出一瓶牛奶有多少比例是成本、费用、利润,非常形象生动。
与图表交互:
当人们查看可视化图表的时候经常会产生更多的分析需求,如想换一个分类了解情况;突显关注的信息;在了解整体情况后,想探索细分项的情况;改变数据的排序规则等。对于这些互动性需求,一张平面图片恐怕难以满足,我们可以接助专业工具制作带有交互性的图表。
动态播放:
将图表沿着时间进行播放,可以生动的看见数据随时间发生的变化,从而理解更多信息——除了最终结果和整体统计以外,还能查看变化发展过程。
上图是用Tableau可视化软件制作的动态图表作品,模仿了汉斯·罗斯林(Hans Rosling)教授在TED Talk上演讲所展示的可视化作品,汉斯是著名的医学学者、数据可视化设计师以及演讲家。这幅散点图每个小球是一个国家,横轴表示生育率、纵轴表示预期寿命、小球大小是国家人口,颜色是地区。数据的起点是1970年,当时大部分国家生育率高而预期寿命低下。随着时间进行播放,我们可以看到四十多年来各国的变化。到2013年的时候,大部分国家生育率大幅下降而预期寿命大幅提高。最后我们还可以重点查看中国的变化,了解中国现在的情况。
总结
数据图表设计有很深的学问,遵循最佳实践原则可以使你的图表达到较高的水准。不妨对照这些原则,审视一下自己的作品吧。
生活中大大小小的事情,都离不开决策。我们相信数据驱动的决策行为不仅理性,而且更具有说服力。我们想借「数据星球」这个栏目触达各类生活及工作中与数据相关的场景,与大家一起了解其背后蕴含的数据思维。
文章内容会同步更新在知达学院微信公众号中,可添加关注我们。
公众号微信号:JEDI_EDU
公众号名称:知达学院
咨询详情可添加客服。
知达客服微信号:jedi-edu
设计原则 设计师必懂的十大经典设计原则
世界只有不到3 % 的人关注了我们你真是个特别的人
作为设计师的你,不要跟我说你不认识迪特拉姆斯迪特拉姆斯的经典设计10原则,在国内甚至是国际上都影响了好几代设计师,而且这些理念和原则在当代仍然适用今天就给大家讲一下有哪十大原则希望能帮助更多年轻的设计师创造出更好的、更有效的设计1.好的设计是具有创新性的
创新的可能性是永远存在并且不会消耗殆尽的。科技日新月异的发展不断为创新设计提供了崭新的机会。同时创新设计总是伴随着科技的进步而向前发展,永远不会完结。
2.好的设计是具有实用性的
产品买来是要使用的,至少要满足某些基本标准,,不但是功能,也要体现在用户的购买心理和产品的审美上。优秀的设计强调实用性的同时也不能忽略其它方面,不然产品就会大打折扣。
3.好的设计是美的
设计以人为本,实用之外也要符合大众的审美。尤其是现在处于物质丰富的时代,追求精神层面的审美需求也至关重要。
4.好的设计是让产品更易懂的
优秀的设计让产品的结构清晰明了。更强大的是它能让产品自己说话。最好是一切能够不解自明。
5.好的设计是低调的
产品要像工具—样胞达成某种目的。它们既不是装饰物也不是艺术品。因此它们应该是中庸的,带有约束的,这样会给使用者的个性表现上留有—定空间。
6.好的设计是诚实的
不要夸张产品本身的创意,功能的强大和其价值。也不要试图用实现不了的承诺去欺骗消费者。
7.好的设计是历久弥新的
它使产品避免成为短暂时尚反而看上去永远不会过时。和时尚设计不同的是,它会被人们接受并使用很多年甚至是在当今被—次性商品充斥的社会。
8.好的设计是极精致的
任何细节都不能敷衍了事或者怀有侥幸心理。设计过程中的悉心和精确是对消责者的一种等敬。
9.好的设计是关心环境因素的
好的设计必须考虑到使用者的环境,关注体验的每一个环节。
福利分享【零基础学平面设计】
零基础系统性学习平面设计知识及理论:
以下两种方式皆可
点击下方链接申请学习资格
私信发我:学习设计
|数据图表设计十大原则、完整篇
完整篇 数据图表设计十大原则 设计原则 设计师必懂的十大经典设计原则