给数据穿上美丽的外衣
如今,在设计,通讯,信息及数据新闻,用户界面多个领域都可以见到数据可视化的身影,引入视觉设计的数据大大提升了说服力,可读性和逻辑性都得到了增强,他带来的不仅仅是颠覆表格那么简单,而是一种思想理念,它不仅把可视化信息作为一种沟通工具;同时也是一种重要的数据挖掘的手段。
一、表格已死,可视当立!
在互联网还没有诞生的年代,有一群元老们为数据可视化做出了不可磨灭的贡献,而至今他们仍在在努力地工作着,他们就是表格、饼图、柱状图等。
可事实情况是,饼状图和图表只适合表现一个维度的信息,表格也只能表现X,Y两个方向上二维的信息,这种传统的数据展现形式对于驾驭表现现代化的大量,复杂,多维度,的信息需求而显得力不从心。这种矛盾的产生,让新的数据可视化设计形式在近年来备受瞩目。
二、人佛皆有装,数据也着衣
数据可视化(Data Visualization)最早起源于1960年计算机图形学,人们使用计算机创建图形图表,将数据的各种属性和变量呈现出来。而在如今的信息爆炸时代,需要更高级的计算方法来给人们创建更复杂、规模更大,甚至是动态效果、实时交互的数字模型,因此数据可视化孕育而生。
俗话说,人靠衣装,佛靠金装,数据也是一样。
在数据可视化领域,主要有两个研究方向:
1.信息展示类——将丰富的信息进行整合、分析,从中提炼出最具意义的信息,以多样的、有趣的形式展现,供人们参考,引发思考。
中东——谁支持立即停火?
07年发表于“独立”杂志头版的信息图
Amaztype
在Amaztype图书搜索上搜索想要的书籍,搜索到的相关结果便会排列成检索词的首字母的形式。在展现了丰富的搜索结果同时体现了垂直搜索+视觉搜索的新搜索引擎。
2.数据挖掘类——从庞大的数据中,通过计算机图形学进行可视化的分析,从中得出某种联系,提炼出重要信息。
My map
这个图外围的每个圈代表一个人,他们之间的线条代表联系,越高亮的颜色代表交流的频率越高。是基于60000封电子邮件存档数据,用不同颜色深度的线条呈现了地址簿中用户和个体之间的关系,比如回复、发送、抄送。“My Map”允许在不同的关系组和时间段里挖掘信息,体现不同关系中短暂衰退和流向,从而成为名副其实的自画像、个人关系及社交的可视化反映。
What have I been listening to?
拜伦.李通过创建直方图根据自己18个月的听歌记录得出的可视化的图示描述了他的音乐之旅。
三、数据亦有意,设计皆有法
俗话说,量体裁衣。在数据可视化中,每一块数据都有其存在的意义,因此我们在视觉设计中必须以数据为核心,对其进行设计。那么,如何对“数据体”设计进行斟酌,筛选,并抽象并使其视觉化,将成为我们为其裁得好衣的关键!
1.数据轴线化
在数据可视化中,如何对多条主线,复杂的信息进行展现?
在这个进化的例子中,有很多条进化主线,而在设计里,取其主线——时间为轴,把这些信息放入这根主轴线中,就是很好的方法。
2.信息扁平化
先来看一个这样的调查:各个年龄段和不同性别的人在不同类型的在线应用上所花费的时间
你觉得应该用多少表格 和柱状图才能理清整个事件?
让我们来看看这样多维的信息是如何成功被可视化的:
把这些信息以某一个轴为链,并把其他相关的信息以传统的表格展示出来,并强调其对比性,把具有深度,结构复杂的数据进行扁平化。使得读者能第一时间触及到到信息的每个层面,最大地缩短了沟通的距离。压缩“3d”的信息,使其“2d”平面化成为设计的关键。
3.抽象化
数据总是复杂的,对于数据挖掘者而言需要找到最有用的数据,因此我们需要对大量的数据进行抽象,即提取最重要的数据给用户。
这个男女的例子很好地反映了这一点,它只选取了部分有代表性的keyword来构成画面的要素,而筛选出这些数据的条件,却能通过某种程序的规则来控制。既强化了数据的对比性,同时也保证了数据准确性。
所有的信息可视化的设计方法,无不离开信息的整合,提炼,筛选,乃至升华,视觉传达中的各种要素在其中得到了充分的体验,与其讲让数据去操作视觉语言在舞蹈,倒不如说视觉语言给数据提供了新的生命。
四、光鲜形于外,数据涵于内!
在数据可视化的领域,时刻都在诞生则各种炫目,惊艳的作品,严谨的技术与创造性的艺术再一次在这个新的领域得到了碰撞出了灿烂的火花,枯燥的数据在插上设计的翅膀后在这个信息爆炸的时代向人们展现数据独特的魅力。事实上,在光鲜美丽的外表下,其核心内涵是数据,是信息。
而可视化的过程也绝不仅仅是是美化图表那么简单。信息可视化的目的不是可视化,最终的目的是要实现从可视化中进行数据挖掘,帮助人们来分析问题。设计在这里也不仅仅是一种表现形式,而是一种手段,不仅要对复杂枯燥的数据进行视觉的设计,而且还要对带有各种专业性质的数据的分析、理解、抽象、并对其进行提炼,因此对于设计师而言任重而道远。
最后附上一些不错数据可视化的网站,供大家参考 :)
http://infosthetics.com/
http://www.visualcomplexity.com/vc/books.cfm
http://www.tuyansuo.com/page/14/
http://www.historyshots.com/store.cfm?s=sas
http://www.newsmap.jp/
http://www.bestiario.org/
http://well-formed-data.net/
http://flowingdata.com/