信息可视化与视觉设计

cuppa.jpg

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

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

一个例子

stock_star.gif

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

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

认知心理学和图形设计

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

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

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

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

在 Web 设计上的应用

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

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

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

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

google_trends.gif

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

wallop_network.jpg

更多应用

以下例子取自information aesthetics,点击图片上的链接访问源网站:

oakland_crimespotting.jpg
similar_diversity.jpg
anymails.jpg
sharkrunners.jpg
craigstats.jpg

参考文献

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

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

11 Responses to “信息可视化与视觉设计”

  1. Boolean Says:

    哈哈,好文!!!

     此文的实际意义远胜于对人物角色的讨论!

  2. Shark Says:

    不错的介绍!赞!

  3. Angela Says:

    to Boolean:有句话说“广告只扎有需求人的眼睛”,对内容而言也是如此。我猜此文解决了你近期项目中某个重大疑惑。

  4. xw Says:

    同样的信息,不同的呈现方式,对人产生结果是完全不同,这也正式信息架构的魅力所在,到底是艺术?还是科学?

    (ps:哈哈,在Social Network的图片中出现了好多俺的头像)

  5. xiaodouban Says:

    谁能给我一个http://ucdchina.com/blog/wp-content/uploads/2007/08/wallop_network.jpg  这个图网站的注册邀请呢?

  6. JunChen Says:

    @xiaodouban 已发邀请

  7. forouc Says:

    有涉及可视化的兄弟姐妹们 加QQ群:73172591

  8. zhuxiaocao Says:

    我在和讯网工作,遇到很多财经、股票、期货类数据,这些数据在专业人士看来没什么不好理解的,但是普通投资者看来却比较费时费力。信息可视化是一个很重要的议题,只是这类文章比较少。

    希望楼主继续深入研究,我也很有兴趣,可以深入探讨

  9. iceFiFi » Blog Archive » 《UCD火花集》电子书版下载 Says:

    […] 信息可视化与视觉设计 http://ucdchina.com/blog/?p=277 […]

  10. 汽车配件展销网 Says:

    视觉设计既要直观,还要符合用户的审美要求。

  11. invest liberty reserve Says:

    Excellent goods from you, man. 信息可视化与视觉设计 - 团队博客 - 以用户为中心的设计 I’ve understand your stuff previous to and you are just extremely magnificent. I really like what you have acquired here, really like what you’re stating and the way in which you say it. You make it enjoyable and you still care for to keep it wise. I cant wait to read far more from you. This is really a wonderful 信息可视化与视觉设计 - 团队博客 - 以用户为中心的设计 informations.

Leave a Reply

You must be logged in to post a comment.