信息可视化研究范畴及案例
openkk 12年前
<p style="text-align:center;"><a><img style="width:551px;height:195px;" alt="信息可视化研究范畴及案例" src="https://simg.open-open.com/show/f3b07fa2ee689f642dade0085ed5cfdc.jpg" width="720" height="255" /></a></p> <p> 最近在研究“信息可视化”，因此首先需要定义研究范畴。</p> <p> 信息可视化的定义之前有同事研究过，本文只简单摘录 wiki 的定义：</p> <p> 信息可视化（英文：Information visualization）是一个跨学科领域，旨在研究大规模非数值型信息资源的视觉呈现，如软件系统之中众多的文件或者一行行的程序代码，以及利用图 形图像方面的技术与方法，帮助人们理解和分析数据。与科学可视化相比，信息可视化则侧重于抽象数据集，如非结构化文本或者高维空间当中的点（这些点并不具 有固有的二维或三维几何结构）。</p> <p> 特别区别一下“信息可视化”和“科学可视化”概念。在一些书籍中，这两类可视化设计都是未经过区分的。</p> <p> “科学可视化”处理的数据具有天然几何结构，如下：</p> <p style="text-align:center;"><img style="width:527px;height:125px;" alt="信息可视化研究范畴及案例" src="https://simg.open-open.com/show/faade14153b522354a05010b487123cc.jpg" width="720" height="171" /></p> <p> 有一种“科学可视化”相信读者都“设计”过，高中时候画“磁感线”“电场线”。这些“线”是肉眼不可见的（实际上也不存在），但是为了理论研究，我们将其可视化。</p> <p> 空气的流动，人眼是不可见的。在科学研究中，通过某些手段将看不见的气体流动可视化，以帮助进行模拟实验或者理论研究。</p> <p> 这一类可视化统称为“科学可视化”，是一个专门的研究领域，不属于“信息可视化”研究范畴。</p> <p> “信息可视化”处理的数据更为抽象，比如：</p> <p style="text-align:center;"><img style="width:531px;height:126px;" alt="信息可视化研究范畴及案例" src="https://simg.open-open.com/show/456c1a95a3a9c1f1503033f2869710e8.jpg" width="720" height="171" /></p> <p> 柱状图，趋势图，流程图，UML 图，还 mindmanager 生成的树状图，都属于信息可视化，这些图形的设计都将“抽象”的概念转化成为可视化信息。</p> <p> 撇清了“科学可视化”，本文将从功能主义角度研究信息可视化的范畴，以及不同类型信息可视化的案例和设计特点。这样做的好处是能够迅速明确“信息可视化”领域中哪个部分是对当前工作最有价值的。</p> <p> 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），本文认为能够从功能主义角度较好的诠释信 息可视化研究范畴。</p> <p> 以下通过一张图来表达“展现——探索“维度的含义。</p> <p style="text-align:center;"><img style="width:629px;height:757px;" alt="信息可视化研究范畴及案例" src="https://simg.open-open.com/show/557f721ac20859e5b67011ebe72aaacc.jpg" width="720" height="868" /></p> <p> 如果单纯看图表没有感觉，本文找了几个有代表性的案例，各位可以结合图表和案例自行总结。</p> <p> 展现：</p> <p> <a href="/misc/goto?guid=4958344946700621465">http://v.youku.com/v_show/id_XMzI2NTk1NTA4.html</a></p> <p> <a href="/misc/goto?guid=4958344947516767862">http://xinxisheji.tuyansuo.com/info/1254.html</a></p> <p> 探索：</p> <p> <a href="/misc/goto?guid=4958344948319790416">http://index.baidu.com/</a></p> <p> <a href="/misc/goto?guid=4958344949114605302">http://www.google.com/trends/</a></p> <p> ————————这样的维度划分有什么用？———————-</p> <p> 下文讨论一下动画和交互在这两类信息可视化设计中的运用，既务实，也可以帮助理解这两类设计的不同。</p> <p> 先说动画，比如，在以下的视频中：<embed src="http://player.youku.com/player.php/sid/XMzI2NTk1NTA4/v.swf" type="application/x-shockwave-flash" width="550" height="400" quality="high" /></p> <p> <a href="/misc/goto?guid=4958344946700621465">http://v.youku.com/v_show/id_XMzI2NTk1NTA4.html</a></p> <p> 设计者充分利用动画，达到了静态图无法达到的效果：</p> <p> 1、 剔除了和话题无关的数据，强烈的引导了话题。</p> <p> 2、 动画更加清晰的表达了数据含义，特别是设计者期望表达的含义。</p> <p> 3、 比静态图更加炫更加有趣，更加吸引眼球。</p> <p> 以上这 3 点，都特别符合“偏向展现”的信息可视化的要求。</p> <p> 再说交互，以百度指数为例：</p> <p> <a href="/misc/goto?guid=4958344948319790416">http://index.baidu.com</a></p> <p><img style="width:560px;display:block;height:507px;margin-left:auto;margin-right:auto;" alt="信息可视化研究范畴及案例" src="https://simg.open-open.com/show/fc695b97ab7048ba357dc324659cbde4.jpg" width="720" height="653" /></p> <p> 设计者充分利用了交互，达到静态图无法达到的效果：</p> <p> 1、 组织了大量的，静态图根本无法承载的信息；让不同的角色用户，抱着不同的目的来到这里，都可以通过交互行为看到自己需要的信息。</p> <p> 2、 通过交互行为，用户可以根据自己的目的和对数据的诠释思路去查看不同的数据。</p> <p> 3、 交互让关键信息更加明确的展现出来。</p> <p> 以上这 3 点，都特别符合“偏向探索”的信息可视化的要求。</p> <p> 对于展示类的设计，我们是在导演一部电影，因此可以更多的使用动画；而对于探索类的设计，我们是在设计用户的探索行为，因此可以更多的使用交互。</p> <p> 最后，请各位讨论：在做设计汇报的时候，是做视频 demo 好还是做可互动 demo 好？</p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958344951360422218" target="_blank">cdc.tencent.com</a> </div> <div></div>