信息可视化 - UCD大社区

信息可视化与视觉设计

JunChen — 2008-07-26 22:59:07

在工作中你是否会因为不知道用哪种图表（柱状图、饼状图、散点图……）来呈现表格数据而头疼呢？

这就是信息可视化（Information Visualization），是一个很大的话题。我们一般讲的可视化，包括科学计算可视化和信息可视化。前者大量运用在医学、地理、物理等领域（空间数据），比如部分分布式计算项目的屏幕保护程序，可以归为科学计算可视化的一种（当然与科研领域相比只能算毛毛雨了）。后者则主要是信息系统、商业金融、网络等领域（非空间数据，或者多维数据）。一方面由于信息可视化本身是近些年才发展起来的，另一方面我本人实际涉及的也不是很多，本文参考了一些信息可视化的文献，附在文末，与大家共勉。

一个例子

今年股市比较热，打开任何一款炒股软件都能看到花花绿绿的曲线、图形，那么你可知道用来表示股价信息的 K 线图是谁发明的呢？传说是日本大米商人本间宗久为了记录下每日的大米价格变动而发明的一种图示，记录下价格的涨跌和走势，适时的进行大米交易来积聚财富，这种图示法准确、细致、独特，后来才被引入美国股市和期货市场。当然现在信息技术和统计学的发展，还涌现了一大批图表，比如星空图、散户线、火焰山等等。

信息可视化在这里将大量的数据进行信息提取，然后通过直观和形象的图形表现出来。（想象一下如果股票信息都是以二维表格形式呈现的话，那是多么恐怖）

认知心理学和图形设计

信息可视化的两大基础是认知心理学和图形设计，认知心理学是理论基础，图形设计是实践操作。

可视化不仅仅是视觉上的，该领域的研究人员也尝试着将听觉、嗅觉和触觉融合进去（比如针对残障人士的设计）。在《信息可视化的基本过程和与主要研究领域》一文中，作者将视觉上的可视化变量分为 7 种：位置、形状、大小、方向、色彩、纹理、灰度，有时候也会将色彩分为色相、亮度和饱和度。基本上所有的信息可视化应用都是一个或多个变量的组合。不同的视觉变量在呈现数据各有优劣（从认知角度），如下表所示：

	联系	选择	次序	数量
位置	好	差	差	差
形状	好	差	差	差
大小	差	好	好	好
方向	好	一般	差	差
颜色	好	很好	差	差
纹理	一般	好	一般	差
灰度	差	好	很好	差

* 联系：数据与数据间的关系等；选择：数据的识别等；次序：比如时间序列和空间序列；

在 Web 设计上的应用

信息可视化对于具体的 Web 应用是很有指导意义的，或者说就是信息可视化的应用。基本步骤就是从大量数据中提取元数据，然后对应可视化变量，用图形设计方法去实现。IBM 有一个相关项目叫做 ManyEyes，内置了很多常见的可视化模型，可以参考。

对于 Web 设计来说，重点是利用认知心理学的理论作引导，比如色彩的暗喻、直觉等，如果是国际化产品，尤其注意文化差异。从色彩的角度讲，各个国家或地区因为政治、宗教、环境等不同，对色彩的感受不同。

结合上面的表格，举个例子：TagCloud。TagCloud 的目的是什么呢？并非是表现出各个 Tag 之间的关系，而是让用户能够更好的进行选择、识别，所以通过大小和颜色的区分，创造了 TagCloud。所以做设计还是回到了先进行用户研究这个话题上。

其他在 Web 上的应用，比如 Google Analytics、Google Trends。借助于 Flash、Flex、SilverLight 等强大的浏览器端图像渲染，可以将大量的、复杂的数据清晰、直观、生动的展现给用户。

也可以通过信息可视化技术和方法将 Social Network 表现出来：

参考文献

* 宋绍成, 毕强, 杨达, 信息可视化的基本过程与主要研究领域, 2004
* 张聪, 张慧, 信息可视化研究, 2006
* Edward Tufte, Envisoning Information, 1990

题图来源：带色彩指示的咖啡杯。

相关话题：信息设计信息可视化源地址：http://ucdchina.com/blog/?p=277

表面下的隐藏信息——浅谈信息可视化

段梦楠 — 2010-02-20 11:15:43

1910年，病卧床上的魏格那（德国气象学家，以“大陆漂移学说”闻名），无意地注视着墙上的世界地图……地图表面之下的隐藏信息惊现了：“大西洋两岸的轮廓竟是如此相对应……”。

地图，将地面坐标的信息可视化而产生的图形工具，更便于人们探索其中关系，进而发掘隐藏的真理。Let’s zoom out. 其实任何事物都是一类信息：表格，图形，地图，甚至文本，无论静态或动态，都为我们提供认识世界的手段。而可视化(visualization)，将数倍放大他们的威力。让我们看看Ta是如何穿透表面，让隐藏的信息浮现的：

1854年，霍乱在伦敦Soho区严重爆发，当时对霍乱起因的主流意见仅仅是空气传播。

约翰斯诺（内科医生）将水质研究、霍乱死亡统计分布图与地图对比分析，发现污染源来自于Broad Street的公用抽水机。证实了正是伦敦政府将废物倾销进泰晤士河的决定导致了霍乱通过地面下污水传播而最终爆发。

数据可视化的目标是通过图解手段清楚和有效传达信息。功能性的数据可视化并非要是看上去乏味的，极度精密尖端的数据可视化也不一定是看上去漂亮的。关键要结合数据的特征，以便观察。

越狱男主角Michael身上的魔鬼纹身头像是用来定位在墙上打一个小洞：

因为Michael参与过监狱维修，所以知道材料的弹力系数以及一些参数。根据胡克定律求出坐标后，当然要记下来，最容易记住的就是图形，他就把坐标隐藏在了恶魔的脸上了，然后又投影到墙上。这里，信息可视化以图形形式记忆复杂计算的结果，帮助用户快速使用并达到目的，数倍提高信息的使用效率。

如今，数据可视化已发展成为研究教学与发展的热门领域，是结合了科学与信息形象化的综合领域。今天的信息世界，信息爆炸：怎样组织它们？信息超载：怎样理解它们?所有信息是相互关联的：怎样介入它们？知识淹没在信息中：怎么发现知识？怎样展现各种形式的信息来帮助人们探索信息？Let’s take a look:

5 Years Infosthetics

http://moritz.stefaner.eu/projects/5yrs-infosthetics/

“假设总共1000条数据，每屏显示50条，共需多少屏显示的完？”

在Infosthetics论坛 5周年庆生之际，设计师将总共约2000个项目放在同一个页面中按多重维度进行筛选查找。左侧每一个小块代表一个项目，并赋予几个与右侧类别属性对应的颜色。

点击右侧的类别、回复数、年份可进行多维度筛选。从近2000条数据中筛选出感兴趣的内容也就点几下的功夫。通过减少搜索，以较少的空间表现大量的数据，间接提高了用户的信息获取效率。

Where Does My Money Go？

http://www.wheredoesmymoneygo.org/prototype/

2009年圣诞节前，英国政府宣布将对地方公众公开地方开支报告，于是wheredoesmymoneygo.org孕育而生。用户可以在这里查看英国的政府过去6年内各领域的开支。政府希望通过运作这个项目，收集更多细节的信息，包括地方消费等。图表内容的类别包括教育、健康以及国防等领域。由于所有图形的尺寸都与实际金额对应，颜色都与类别对应，即使没有百分比数据统计，也能直接看出各部分开支的比例，清晰直观。

——“油和能源的开支在哪儿？”

——“点绿的，进去就看到”

California Stimulus Map

http://www.recovery.ca.gov/HTML/RecoveryImpact/map.shtml

目前美国政府已向公众公开各地区的资助情况。市民可以在这个网站上可以一目了然看到各地区的资金补救和再投资分布。资助对象包括州政府，当地政府，地方企业，本地非赢利组织等。

图中圆形的大小对应资助总金额，数字代表资助项目数，彩色扇形分别对应交通、能源等各大领域。

Charting the Beatles

http://www.mikemake.com/#72772/Charting-the-Beatles

这些形象化的数据图表是对Beatles音乐的一项研究。素材来自于许多图和文献，包括销售统计、传记、笔记、活页乐谱和未加工的音频资料。

每个成员各自由一个颜色表示，从每个单曲的色块组成上，以及红色条状代表合作程度，可以看出成员日益独立的趋势。

这张图描述的是Beatles 1963-1966年期间的灌制唱片，拍摄影片以及巡回演出的时间。好像有点像唱片，从里到外一圈一圈，很有意思。

Netflix DVD Renting

http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-netflix-map.html

这是Newyork Times上关于Netflix.com 所有DVD电影在各地区的租售热度分布图。通过顶部滑动条可以租售量纬度选择不同片子并查看业绩。区域热租度已成为除了票房或IMDb评分之外的另一大推荐指数。

Crayola’s crayon chronology

http://www.weathersealed.com/2010/01/15/color-me-a-dinosaur/

Crayola’s是个历史悠久的蜡笔品牌，从1903年的八色起到现在的120色蜡笔套装，颜色数量每28年翻一番。照这速度到2050年，就会出现330种颜色的蜡笔。将来画条逼真的彩虹肯定没问题，不过叫人帮忙拿支蜡笔恐怕非得报出色号才行。

信息可视化是门博大精深的学问，在此仅作抛砖引玉之用，与大家一同探索，通过设计发挥出数据更大的潜力。

另附上一些不错的信息可视化资讯站点，供大家参考：

http://well-formed-data.net/

http://bestiario.org/

http://flowingdata.com/

http://infosthetics.com/

http://www.informationisbeautiful.net/

http://stamen.com/

相关话题：信息设计信息可视化源地址：http://cdc.tencent.com/?p=2219

设计信息可视化的10条建议

费南雪 — 2010-07-15 21:12:50

在coolinfographics.com看到这篇，觉得很不错。挑了几句重要的来翻译下，和大家分享。另其中的配图没有贴上，可以点击过去看原文。

原文链接：10 Tips for (journalists) Designing Infographics
（http://www.coolinfographics.com/blog/2010/4/27/10-tips-for-journalists-designing-infographics.html）

新闻出版中设计信息可视化（infographic）的10条建议

1. 内容简洁

新闻报道不是科学论文，读者不需要接触到那些琐碎的专业细节，所以一幅infographic，只要讲清楚一个观点就行了。当然，这并不代表应该只展现一个数字，而是你使用的这组数字应该只用来说明一个主要观点。

2. 大小合适

事先规划好图形最终的尺寸是多大，能不能看的清楚。要知道，并不是人人都愿意“点击查看大图”的。如果图片实在太大的话，那至少在缩小版上保证概要内容能看的清楚，让有兴趣的人“点击查看细节”。从整体的排版和布局上考虑这个infographic怎么和文章匹配，放在哪个位置、占多大篇幅等等。

3. 表达专业

把数字与相应的注解融入到infographic中去，让它看起来专业化。但注意不要专业过头，让普通读者觉得太难懂了，读者是不会花太长的时间来专研这些图表的。更不要简单地把图表、数据和注解分散在不同位置，迫使读者不得不在这些内容间不停地来回移动。

4. 数据清晰

图表也常常让人得出错误的结论。适当保留详细的数据源表，或者提供一个链接、文档什么的，让有心的读者可以深入挖掘下去。

5. 与众不同

如果可以的话，避免使用常规的柱状图、线图和饼图。可以加入些互动元素，让图表活起来。

6．准确性

当你使用不同尺寸几何图形或图片来表示数值上的大小时，记住要从使用他们占用的面积来表现大小差异。比方说，如果你是用两个圆圈来并表示“A是B的三倍大”，那么，圆圈A占的面积是圆圈B的面积的3倍，而不是把A的半径设为B的3倍。因为这样的话，A的面积实际上是B的9倍（半径的正确比例是A:B=根号3:1）。

7. 提升吸引力

使用图示和照片来调整风格，让图形变得焕然一新。

8. 混合多种图形

大胆的把各种图形化手段混合在一起。比如你的数据与国家有关，那么把他们和世界地图结合，会比使用一张常规的柱状图的效果要来得好。

9. 别忘了署名

要知道，你的infographic可能会被无数次的转载和分享，但你的文章通常不会一起转载。在全部完成前，请确保图片中包含了下面这些内容：
* 版权——明确他人使用时的权利和注意事项。
* 数据源——为有心人提供深入挖掘的线索，也让别人能验证你的数据是否可靠。
* 作者——你的团队可能包含美工，编程，艺术设计等等，别忘了他们，建立团队间的信任。
* 图片及文章的源地址——这样别人也能去看看你有什么别的作品。< /p>

10. 重要的是发挥创意

你可以使用任何你想得到的工具来创作你的infographic，重要的是发挥你的创意。当然，这还得和你想要什么样的效果有关。很多设计师都是用很普通的、很常见的软件来完成作品的，比如OmniGraffle或Visio，Office或 iWork，当然还有Photoshop。

相关话题：信息可视化源地址：http://june-gao.blogbus.com/logs/69303985.html

信息可视化研究范畴及案例

CDCer — 2012-06-19 22:37:28

最近在研究“信息可视化”，因此首先需要定义研究范畴。

信息可视化的定义之前有同事研究过，本文只简单摘录wiki的定义：
信息可视化（英文：Information visualization）是一个跨学科领域，旨在研究大规模非数值型信息资源的视觉呈现，如软件系统之中众多的文件或者一行行的程序代码，以及利用图形图像方面的技术与方法，帮助人们理解和分析数据。与科学可视化相比，信息可视化则侧重于抽象数据集，如非结构化文本或者高维空间当中的点（这些点并不具有固有的二维或三维几何结构）。

特别区别一下“信息可视化”和“科学可视化”概念。在一些书籍中，这两类可视化设计都是未经过区分的。
“科学可视化”处理的数据具有天然几何结构，如下：

有一种“科学可视化”相信读者都“设计”过，高中时候画“磁感线”“电场线”。这些“线”是肉眼不可见的（实际上也不存在），但是为了理论研究，我们将其可视化。
空气的流动，人眼是不可见的。在科学研究中，通过某些手段将看不见的气体流动可视化，以帮助进行模拟实验或者理论研究。
这一类可视化统称为“科学可视化”，是一个专门的研究领域，不属于“信息可视化”研究范畴。
“信息可视化”处理的数据更为抽象，比如：

柱状图，趋势图，流程图，UML图，还mindmanager生成的树状图，都属于信息可视化，这些图形的设计都将“抽象”的概念转化成为可视化信息。

撇清了“科学可视化”，本文将从功能主义角度研究信息可视化的范畴，以及不同类型信息可视化的案例和设计特点。这样做的好处是能够迅速明确“信息可视化”领域中哪个部分是对当前工作最有价值的。

Danyel Fisher在一篇研究动画可视化的文章中（《Danyel Fisher, Steven Drucker, Roland Fernandez, and Xiaoji Chen, Vis-à-vis: A Visual Language for Spreadsheet Visualizations, no. MSR-TR-2011-142, June 2011》）提到了数据可视化的一个维度：“展现——探索“（Presentation——Explorer），本文认为能够从功能主义角度较好的诠释信息可视化研究范畴。

以下通过一张图来表达“展现——探索“维度的含义。

如果单纯看图表没有感觉，本文找了几个有代表性的案例，各位可以结合图表和案例自行总结。

展现：
http://v.youku.com/v_show/id_XMzI2NTk1NTA4.html
http://xinxisheji.tuyansuo.com/info/1254.html

探索：
http://index.baidu.com/
http://www.google.com/trends/

————————这样的维度划分有什么用？———————-

下文讨论一下动画和交互在这两类信息可视化设计中的运用，既务实，也可以帮助理解这两类设计的不同。

先说动画，比如，在以下的视频中：
http://v.youku.com/v_show/id_XMzI2NTk1NTA4.html

设计者充分利用动画，达到了静态图无法达到的效果：

1、剔除了和话题无关的数据，强烈的引导了话题。
2、动画更加清晰的表达了数据含义，特别是设计者期望表达的含义。
3、比静态图更加炫更加有趣，更加吸引眼球。
以上这3点，都特别符合“偏向展现”的信息可视化的要求。

　　再说交互，以百度指数为例：
http://index.baidu.com

设计者充分利用了交互，达到静态图无法达到的效果：

1、组织了大量的，静态图根本无法承载的信息；让不同的角色用户，抱着不同的目的来到这里，都可以通过交互行为看到自己需要的信息。
2、通过交互行为，用户可以根据自己的目的和对数据的诠释思路去查看不同的数据。
3、交互让关键信息更加明确的展现出来。
以上这3点，都特别符合“偏向探索”的信息可视化的要求。

对于展示类的设计，我们是在导演一部电影，因此可以更多的使用动画；而对于探索类的设计，我们是在设计用户的探索行为，因此可以更多的使用交互。

最后，请各位讨论：在做设计汇报的时候，是做视频demo好还是做可互动demo好？

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5742)

相关话题：信息可视化源地址：http://cdc.tencent.com/?p=5742