最近在上信息可视化(Information Visualization) 这门课,对信息可视化有些自己的思考。
下面我写写个人的理解,及一些好的例子
下面是一些作品摘抄,翻译和个人评价
以下是图标:
blue: for links (the A
tag) 蓝色表示链接
red: for tables (TABLE, TR and TD tags) 红色是表格
green: for the DIV tag 绿色是DIV标签
violet: for images (the IMG tag) 紫色是 图片
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and
OPTION tags) 黄色是表单
orange: for linebreaks and blockquotes (BR, P, and
BLOCKQUOTE tags) 橙色是分行和引用
black: the HTML tag, the root node 黑色是HTML
的根结点
gray: all other tags 其他的标签
1. CNN门户网页的可视化
CNN has a complicated but typical tag structure of a portal: Lots of links, lots of images. Similar use of divs and tables for layouting purposes. (1316 tags)
图1: CNN.com的可视化
从上图中可以看到很多概览性的信息,像红色的表格,紫色的表单等。这个通过如此的可视化手段呈现出来,一目了然。
再来一个Apple 网站的例子:
apple.com
As always, simplicity rules at Apple's website. A few images and links, that's it. Note the large yellow cluster, representing a dropdown menu. (350 tags)
以简洁设计著称的苹果,连网站也不例外。从图上可以看出苹果网页的结点不多,很规整。中心结点一堆黄色的表单群,其实是一些下拉菜单。
图2: apple.com的可视化
另外一个例子是MSN网站的可视化 (msn.com)
Surprisingly, at least to me, Microsoft's portal is very much div-driven. Also of note is it's very scarce use of images. (633 tags)
让人惊奇的是,MSN网站是用很多DIV标签作为驱动的,如图中大堆的绿点所示。而且这个网很少用图片(紫色的结点很少)。 这些信息不看概览图真的得不到直观的印象。
图3: msn.com的可视化
总结:
focused on the creation of approaches for conveying abstract information in intuitive ways
allows the discovery of unstructured actionable insights that are
limited only by human imagination and creativity.
PS. 更多的例子请看:
http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/
http://webdesignledger.com/inspiration/15-stunning-examples-of-data-visualization