数据可视化与信息可视化浅谈

2018-08-10 13:56 来源:网络
浏览量: 收藏:0 分享

  与以前相比,数据可视化领域发生了很多的变化,得到了很大的发展。

  (1)可视化的表现形式和场景更丰富了

  在当今信息时代,信息出现了“泛滥”与“过载”,人们每天都受到各种信息的“轰炸”。当我们打开网页或手机APP时,首先进入我们视野的就是各种弹出的广告信息。这些信息从内容到形式,都经过了精心设计。

  我们走在大街上,映入我们眼球的则是满大街的广告海报,还时常有人站在街边向路人派发传单。我们不仅仅只从书上看到了可视化的图表,还从海报、信息图、PPT、数据产品、大屏等获取到了大量的可视化信息。

image.png

可视化的表现形式

  (2)可视化展现方式更多样、更灵活

  数据图表是最常用的可视化元素,除柱形图、条形图、饼图、环形图、线图、散点图、面积图、雷达图、K线图、地图等基本图表外,现在也出现了更多新式的图表,如山峰图、雷达图、气泡图、热力图、漏斗图、树图、箱形图、瀑布图、河流图、词云图、仪表盘、南丁格尔玫瑰图、旭日图、和弦图、桑基图、3D图,等等。

  另外,智慧的人们也常常创意性地将各种图表混搭,例如下图:地图和饼图、散点图、柱形图等搭配使用。

image.png

各种图表的混搭

  除图表外,对图片和图标的灵活运用,使得可视化更加美观、形象、贴切。

image.png

图片的灵活运用

image.png

图标的灵活运用

  (3)从静态到动态

  由于技术的发展,实时数据采集、实时数据传输以及实时数据计算得以实现,人们终于得以欣赏到数据的灵动之美。以前人们只能看到事后数据形成的分析结果,看到的是数据的过去式,领略的是数据的静态之美。

  而现在,通过实时计算及数据可视化,人们可以知道“当前时刻发生了什么”,看到了数据的变化,看到了数据的动态之美。

  (4)设计上更注重用户体验了

  由“信息泛滥”引起“信息过载”,从而导致“信息焦虑”。无论是风格、元素、配色、文字、交互上还是细节上,人们的可视化作品都越来越注重用户的视觉体验,希望能让用户一目了然,不多花一点儿时间去理解。

  在设计风格上,从3D拟物化到简洁扁平化再到拟物扁平化的发展变化,也在不断地为用户“做减法”。

      原则篇:关于设计的四大原则

  “别忘了,你是为读者进行可视化设计。”

  ——《数据之美:一本书学会可视化设计》

  所有的设计细节,都必须经过精心构思,都必须站在用户角度来思考。

  颜值高或者打扮好看的人,总能牢牢地吸引别人的目光。相反,衣着邋遢不修边幅的人,却往往是别人瞅一眼就嫌弃。

  那些聪明的人,必然深谙这样的秘诀:好看的PPT报告,总能在第一时间吸引受众,再加上生动的演讲,就会收到很多好评;广告牌做得越好,就越吸引路人的注意力,越能让路人记住,广告效果也就越好。

  当你看到别人的可视化作品时,你是否总觉得不好,但怎么也说不出到底哪些地方不好?

  如果你熟悉以下基本原则,就算不是一个专业的设计人员,你也可以快速看出哪里出了问题并提出非常中肯的建议。如果你还能熟练运用这些原则,那你的可视化作品将焕然一新,更加专业、好看、有趣,也将收获更多读者的赞赏。

  亲密性(分组)

  在生活中,几乎每件事都有逻辑,人们也喜欢遵循一定的逻辑去理解世间之事,例如:时间先后、空间、因果、总-分-总等逻辑结构。

  在做可视化设计的时候,我们所要表达的内容一定不能是一些无序呈现,这样会给读者造成理解上的混乱。我们的可视化作品应当能够遵循多数读者所能理解的思维逻辑,将内容分成几部分按顺序一步一步地表达出来。

  相同部分的内容,彼此相关,应当靠近,放在一起。这样阅读起来才能被理解成为同一单元的内容,而不是多个孤立的不相关的内容。不同部分的内容,应当明显地区隔开来,例如:上下部分内容之间用一空行隔开或者间距放大,这样有助于组织信息,减少混乱,为读者提供清晰的结构。

image.png

亲密性原则

  对齐

  在版式布局上,任何元素的摆放,都可能会影响甚至主导用户的视觉流程。因此,任何元素都不能随意摆放,否则会造成混乱,而混乱会令人不适。对齐,使每个元素都与其它元素建立起某种视觉联系。对齐,也让可视化作品更加清晰、精巧、清爽。

  对齐,不仅包括左对齐、右对齐、顶端对齐、低端对齐,还包括水平居中、垂直居中、横向分布、纵向分布等。

image.png

对齐原则

  重复/统一

  我们都有“先入为主”的“陋习”,当看到与之前不和谐不一致的东西,常感突兀,甚至本能抗拒。因此,在可视化作品中反复使用一些视觉要素,建立上下文之间的联系,增加条理性,保持视觉上的统一。

  任何视觉元素都可以在同一作品中重复使用,例如颜色、形状、材质、空间关系、线宽、字体、大小和图片,等等。

image.png

重复原则

  对比/强调

  在做可视化设计时,我们的初心是以图文的形式把所要表达的信息清晰的传递给用户,让用户一目了然,尽量不需要太多思考和理解。为了达到这个目的,我们需要强调重点,弱化次要,避免作品中所有的元素看起来重要程度都是一样的。如果所有的东西都同等重要,那就相当于所有的东西都不重要。

image.png

强调重点,弱化必要

  如果你想突出某些信息要点,那就让对应的元素(字体、颜色、大小、线宽、形状、空间等)与其它元素不相同,让他们截然不同,让用户首先能够关注到他们。

image.png

对比原则

  表达,力求准确、到位、简洁、易懂

  当用户看到我们的可视化作品时,我们最好要保证所表达的信息能被用户正确理解。除使用上面几个原则外,我们还要附加一些辅助信息,例如文字、箭头等。在可视化作品中,文字必不可少,但篇幅要加以控制。

  文字的表达,要准确、到位、简洁、易懂,要能引导用户正确地理解图表的意思,要能不引起任何歧义。

image.png

表达,要准确、到位

  四、流程篇:要有数据可视化的正确姿势

  没有什么比亲手创造美这件事更给人带来成就感了。

  当我们满怀激动地开始数据可视化时,请不要马上钻入某个细节里,不要急着考虑用什么酷炫的图表来展现,也不要纠结于用什么颜色、什么字体,我们要有数据可视化的正确打开姿势。

  不同形式的数据可视化流程有所不同,这里主要讲重要且相通的部分。

  1. 了解你的需求

  关于需求,在实现之前,一定要听清楚做什么,想清楚怎么做,说清楚怎么做。

  了解与分析数据可视化需求,主要围绕以下几点来展开:

  (1)看什么,即哪些内容需要可视化

  很少需求方能够准确、全面地说出他们真正想要什么,他们只能描述出大概的样子,因此需要不断引导他们以明确真正详细的需求。

  可视化的目的是什么,用户是谁,在哪里看,什么情况下看,多久看一次;

  了解数据,看看有哪些指标,哪些指标可以直接取,哪些需要复杂计算,哪些可以实时,哪些只能离线;

  哪些指标必须展现,哪些指标不展现,哪些指标可展现可不展现;

  展现的维度有哪些,按时间、部门、地域、指标,看实时数据还是历史数据;

  通过可视化,期望从中知道哪些信息,等等。

  (2)谁看,即用户是谁

  如果面对的是求真务实的老板,那可能需要侧重于内容,追求逻辑的合理性和数据的准确性;如果是来访参观的贵客,那可能为了展示公司实力与形象而追求高大上的图表设计;如果是不懂技术的业务人员,在可视化时可能需要避免过于技术性。

  (3)在哪里看,即有哪些可视化形式

  一次性的工作汇报,可使用PPT,如果老板嫌弃做PPT太慢,可以直接用Excel,或者其它工具,如脑图;如果为很多用户提供周期性计算的指标数据,且满足不同条件下的查看,那适合做一款数据产品或者可视化报表。

  向来访的贵客介绍公司情况时,如果想给客人们提供一种赏心悦目的视觉享受,用大屏可视化数据再合适不过了;如果想给公司各部门同事普及知识、介绍成果、通知活动等,做一张可视化信息图,并在线发布,图文结合,有趣生动,既吸引更多读者关注,提升阅读体验。

  (4)什么情况下看

  “第一印象”肯定是重要的,用户“第一眼”感觉不好,当然就没有了然后,就不会有“第二眼”、“第三眼”,也就不会再往下看了。所以,要带给用户“第一眼”足够良好的视觉体验,就要多想想用户会在什么场景下去看你的可视化作品。

  例如:打开手机,多数情形下,用户只会根据标题有选择地浏览少量文章。因此,取一个生动、有趣、亮眼的标题,比普通标题更有视觉冲击力,会让你的文章从众多内容中脱颖而出,赢得更多用户点击阅读。

image.png

取一个有吸引力的标题

  例如:在企业内部(特别是人多的公司),海报、信息图形式的内容,每天都大量地以邮件地方式群发给各部门人员,或活动通知、或展现成果、或宣传典型,等等。每个员工都“信息过载”,只能阅读少量的信息。

  除标题要吸引人外,还需要注意用户打开邮件的实际场景。不少用户打开这种群发邮件时,常常是下面的情况,一堆的收件人,一堆的抄送人,这已经占据了有限电脑屏幕的一部分,剩下的部分就是点击某个邮件时出现的正文内容的部分。

image.png

多想想具体的场景

  2. 可视化设计

  可视化设计是最重要的环节,只有做好这一环节,后面的事情才会变得简单顺畅。

  (1)梳逻辑

  我们在阅读时,只要遇到稍微难懂的知识,基本上会本能地第一时间选择退缩,不再看下去。之所以觉得难懂,最主要是因为逻辑不清晰给我们带来理解上的困扰。

  逻辑就像一棵树的树干,如果我们只见树叶不见树干,就会迷失方向。因此,在可视化设计前,一定要站在用户的角度,梳理出清晰的逻辑结构。这一步,想清楚怎么做,很重要,多花点时间也没关系。

  对于数据可视化来说,逻辑就是确定各部分的核心内容,以及内容之间的先后次序和关联关系,即讲什么不讲什么,先讲什么后讲什么。

  把逻辑设计得简单一些,清晰一些,用户就能越快明白你的“良苦用心”。

  (2)定风格

  风格营造一种氛围,驱动用户沉浸式阅读。不同的风格,适合不同的用户不同的场景,例如科技、学院、活泼、严肃、可爱,等等。

  (3)排版式

  版式设计就是关于如何处理信息重点,因为在任何设计中,最重要的信息需要首先被注意到,然后是次要信息。

  好的版式就像导盲犬,合理地对内容进行布局,适当地安排版式中的视觉流程,引导用户第一时间看到最需要被关注的部分,暗示用户“先看什么,后看什么”。

  一般来说,可视化作品一般包括标题、正文、图表、说明文字等要素。版式就是基于上述提到的几个原则,确定元素之间的层次结构,合理摆放这几个要素。

  (4)选图表

  不是越酷炫的图表就越适合,这首先要看展现什么数据。某些图表只适合展现相应格式的数据。其次,也需要对展现数据的图表进行个性化定制,包括样式、风格、颜色、字体,使之契合上下文语境,也让图表更有温度。

  不要将就而选择默认设置的图表,不要做那个“Mr.差不多”或“Ms.还行”。如果将默认设置的图表放在可视化作品中,总是显得那么突兀和不协调。另外,对默认设置的弃用,可以强迫自己不断精进,不断提升可视化的能力。

  (5)调细节

  对单个部分的可视化设计,并不能完全保证整体上的和谐一致。因此,回到整体,根据前面提到的几个原则,发现细节问题,对某些细节进行调整,使之整体上保持一致。例如:各部分视觉元素之间保持对齐,如标题、正文、图表等;在配色、字体或其它细节上,各部分要尽量做到统一;各部分之间要有明显的区隔,等等。

  3. 指标计算

  巧妇难为五米之炊,有数据,才能谈数据可视化。数据的获取、整合、计算,会占用大量的时间,这一部分工作是相对独立的。

  但需要注意的是,模拟数据和真实数据是有区别的。根据模拟数据设计的图表,一定要用真实数据展现与验证,验证图表与真实数据的契合程度。例如下图:模拟数据展示的图表中各部门之间存在明显的差异,但改为用真实数据展示时,却“看起来感觉都一样”,这时候就需要调整图表的设置,凸显视觉上的差异。

image.png

用真实数据验证可视化的效果

  指标的计算过程,这里略去不讲。

  4. 前端开发

  数据产品、大屏的可视化实现,还需要前端开发。

  理论上来讲,只要设计出的图表,就一定能在前端实现,但这个可能会受到前端开发人员的技术水平和展现工具的限制。所以,可视化设计有时候需要寻求一种关于设计与实现之间的平衡。

  可视化设计人员最好事先有所评估,采用复杂图表设计之前最好与开发人员沟通探讨实现的可行性。

  五、工具篇:你会用Excel设计图表吗?

  Excel是最常用、最基本、最灵活且最应该掌握的图表制作工具。 可以说,大多数图表样式都可以用Excel画出来。如果你认为用Excel画不出来某种样式的图表,有可能是你还未掌握Excel的高阶技巧。

  Excel展现的图表是静态的,且支持的数据量比较有限。所以,如果是企业级的动态数据展现,还需要借助专业的大数据可视化工具。

  专业可视化工具有很多,大致可分为三类:企业级专业可视化工具、轻量级在线可视化工具、编程式图表工具。

  1. 企业级专业可视化工具

  ECharts是国内使用率非常高的开源图表工具,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的 Canvas 类库 ZRender,提供直观、生动、可交互、可高度个性化定制的数据可视化图表。

  ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

  D3.js是最好的开源数据可视化工具库,D3.js运行在Java上,并使用HTML、CSS和SVG。 D3.js使用数据驱动的方式创建漂亮的网页, D3.js可实现实时交互。这个JS库将数据以SVG和HTML5格式呈现,所以像IE7和8这样的旧式浏览器不能利用D3.js功能。

  Tableau是一款企业级的大数据可视化工具,Tableau 可以让你轻松创建图形,表格和地图。 它不仅提供了PC桌面版,还提供了服务器解决方案,可以让您在线生成可视化报告。服务器解决方案可以提供了云托管服务。

  2. 轻量级在线可视化工具

  BDP个人版,类似Tableau的在线免费的数据可视化分析工具,不需要破解、不需要下载安装,在线注册后就能一直使用,操作很简单,只需要拖拽。支持几十种图表类型,也支持制作数据地图(自带坐标纠偏)。除可视化之外,BDP还有数据整合、数据处理、数据分析等功能。

  百度图说,基于ECharts,在线图表制作工具,采用Excel式的操作方式制作样式丰富的图表,图表自定义的选项很丰富,使数据呈现的方式更加美观个性,易分享传播。

  文图主要用在你要出一份包含文字说明的报告时使用,提供几个确定好风格配色的主题供选择,让整个报告风格统一、简洁美观!文图能够良好地适配移动端。但文图的排版不是很好用。

  创客贴,在线平面设计工具,简单、快速、轻松完成在线设计,据说是2016最好的在线设计网站。

  3. 编程式图表工具

  对于掌握编程语言的程序员来说,设计新颖、令人惊艳的数据图表也可以通过代码来实现。

  Python有很多具有画图功能的包,如matplotlib、Seaborn、ggplot、Bokeh、pygal、Plotly、Geoplotlib、Gleam、missingno、Leather,等等。

  R语言提供了很多数据可视化工具包,例如:ggplot2、ggthemes、ggmap、ggiraph、ggstance、GGally、gganimate、ggradar、ggTimeSeries、ggseas、lattice、rgl、ggvis、htmlwidgets、leaflet、dygraphs,等等。

  类似提供强大绘图编程功能的语言还有PHP、HTML、Java、CSS等。

  六、技巧篇:刻意练习是提升可视化技能的唯一途径 不断练习,不断精进

  提升数据可视化技能的唯一途径就是在理解可视化设计原则和方法论的基础上,不断练习,不断精进。

  除此之外,还要有点完美主义。

  技巧在于平时的积累,多观察生活中看到好的设计,多想想为什么人家设计那么好,让你忍不住多看几眼。看到不好的设计,多想想到底哪里不好。看到好看的图表,看到别人介绍的小技巧,动手做一做。

  技巧太多,这里不做展开细讲。

  “去设施倾向”

  “这是章北海看到的另一个以前很少有人想象到的现代技术特色——去设施倾向,这种倾向在地球上还只是初露端倪,但“去设施化”已成为比地球世界更先进的舰队世界的基本结构。这个世界到处都是简洁空荡的,几乎见不到任何设施,只有在需要时,设施才会出现,而且是在任何需要的位置出现。世界在被技术复杂化后,正在重新变得简洁起来,技术被深深地隐藏在现实的后面。”

  科幻小说《三体》里面的这段话,给了我们提示。当我们做分析和可视化数据时,如果不用选项框和菜单栏时,应该隐藏起来,用到时才打开。

  另外,也尽量让所使用的软件最大化。这样可以让内容信息展现在最大的视野区域内,这样有助于让我们从中获取更全面的信息,指导我们下一步做正确的决策。

image.png

有限的视野区域,信息最大化

  颜色不宜过多,配色要合理

  我们在可视化设计时,最好不要使用超过三种以上的主色调。颜色过多,无形中会分散用户的注意力,使得用户无法聚焦。

  颜色的搭配要合理,大自然是最好的色彩家,可以借鉴大自然的色彩搭配。另外,如果你第一眼看到别人的设计,感觉很舒服,赏心悦目,那也可以借鉴作品中的色彩搭配。相信你的直觉,至少你的身体不会欺骗你。

image.png

颜色不宜过多,配色要合理

image.png

从生活和自然中学习配色技巧

标签:

责任编辑:bozhihua
在线客服