Anneism: 信息可視化與視覺設計

[轉] 在工作中你是否會因為不知道用哪種圖表（柱狀圖、餅狀圖、散點圖……）來呈現表格數據而頭疼呢？這就是信息可視化（Information Visualization），是一個很大的話題。我們一般講的可視化，包括科學計算可視化和信息可視化。前者大量運用在醫學、地理、物理等領域（空間數據），比如部分分佈式計算項目的屏幕保護程序，可以歸為科學計算可視化的一種（當然與科研領域相比只能算毛毛雨了）。後者則主要是信息系統、商業金融、網絡等領域（非空間數據，或者多維數據）。一方面由於信息可視化本身是近些年才發展起來的，另一方面我本人實際涉及的也不是很多，本文參考了一些信息可視化的文獻，附在文末，與大家共勉。

一個例子

今年股市比較熱，打開任何一款炒股軟件都能看到花花綠綠的曲線、圖形，那麼你可知道用來表示股價信息的 K 線圖是誰發明的呢？傳說是日本大米商人本間宗久為了記錄下每日的大米價格變動而發明的一種圖示，記錄下價格的漲跌和走勢，適時的進行大米交易來積聚財富，這種圖示法準確、細緻、獨特，後來才被引入美國股市和期貨市場。當然現在信息技術和統計學的發展，還湧現了一大批圖表，比如星空圖、散戶線、火焰山等等。信息可視化在這裡將大量的數據進行信息提取，然後通過直觀和形象的圖形表現出來。（想像一下如果股票信息都是以二維表格形式呈現的話，那是多麼恐怖）認知心理學和圖形設計信息可視化的兩大基礎是認知心理學和圖形設計，認知心理學是理論基礎，圖形設計是實踐操作。可視化不僅僅是視覺上的，該領域的研究人員也嘗試著將聽覺、嗅覺和觸覺融合進去（比如針對殘障人士的設計）。在《信息可視化的基本過程和與主要研究領域》一文中，作者將視覺上的可視化變量分為 7 種：位置、形狀、大小、方向、色彩、紋理、灰度，有時候也會將色彩分為色相、亮度和飽和度。基本上所有的信息可視化應用都是一個或多個變量的組合。不同的視覺變量在呈現數據各有優劣（從認知角度），如下表所示：

*　聯繫：數據與數據間的關係等；選擇：數據的識別等；次序：比如時間序列和空間序列；在 Web 設計上的應用信息可視化對於具體的 Web 應用是很有指導意義的，或者說就是信息可視化的應用。基本步驟就是從大量數據中提取元數據，然後對應可視化變量，用圖形設計方法去實現。IBM 有一個相關項目叫做 ManyEyes ，內置了很多常見的可視化模型，可以參考。對於 Web 設計來說，重點是利用認知心理學的理論作引導，比如色彩的暗喻、直覺等，如果是國際化產品，尤其注意文化差異。從色彩的角度講，各個國家或地區因為政治、宗教、環境等不同，對色彩的感受不同。結合上面的表格，舉個例子：TagCloud。TagCloud 的目的是什麼呢？並非是表現出各個 Tag 之間的關係，而是讓用戶能夠更好的進行選擇、識別，所以通過大小和顏色的區分，創造了 TagCloud。所以做設計還是回到了先進行用戶研究這個話題上。其他在 Web 上的應用，比如 Google Analytics、Google Trends。借助於 Flash、Flex、SilverLight 等強大的瀏覽器端圖像渲染，可以將大量的、複雜的數據清晰、直觀、生動的展現給用戶。