信息展現的設計

同樣的一堆信息擺在面前，展現方式設計的好壞可以讓用戶感覺差異多大？為什麼同樣的一個“任務”，一天也能“完成”，一周也可能沒法“完成”？

這個例子是我2007年從Google的一位產品經理那裡聽來的，任務的目的是展示美國的幾個城市在不同月份的平均降水量。很自然的，一開始我們就 會想到用一張表格，如下圖，橫軸是一月到十二月，縱軸是城市名稱，分別是San Francisco、Seattle、Chicago、New York、Miami，表格中每個元素就是某城市在那個月的平均降水量，單位是“英寸每月”。

上圖已經把所有的信息都展示出來瞭，但重點不夠突出，各種信息都用一樣的字體 讓人不知道一開始看哪裡，而下圖就優化瞭很多。首先各種文字用瞭不一樣的字體，圖表的標題最明顯，讓人一眼就知道這個圖表是說什麼的，月份與城市信息稍微 弱化以突出數據內容，特別值得一提的是這裡用瞭不同深淺的顏色來突出數據，讓人很容易解讀出某個城市全年整體的降水情況，降水季節分佈等信息。

我常說“字不如表，表不如圖”，再回憶一下上面的圖表，你還能記住Miami在8月的平均降水量麼？我是不能，但我記得Miami在 夏季的降水量很大。這給瞭我們啟發，其實要傳遞的並不是具體的數字，而是每個城市在全年的降水量整體情況與分佈，數據隻是給極少數做科學研究的人，在需要 的時候可以查到就可以瞭，在表現形式上，我們可以處理成鼠標懸停在某個水滴上的時候，就展現出相應的數字。於是，我們進一步優化出下圖，用很符合讀者心智 模型的水滴大小、顏色深淺來表示不同的降水量區間。現在更加一目瞭然瞭，San Francisco最幹，冬天稍微好一些；而New York全年降水很平均……

還可以優化麼？是的，還可以。上面幾個城市為什麼會有這樣的降水情況呢？我們可以如下圖，把它們放在地圖裡，從地理的角度得到解釋，比如San Francisco “因為三面環水，並受太平洋加利福尼亞寒流影響，舊金山是典型的涼夏型地中海式氣候”，所以夏季降雨極少，冬天經常下雨。而Miami則“擁有溫暖、濕潤 的夏雨型暖副熱帶氣候”，所以降水充沛。下圖把時間軸做瞭個動態展現，拖動時間軸，我們可以看到幾大城市，甚至可以推測出全美國在一年中各地的降水情況。 當然，如此炫的表達也有其弱點，那就是沒法如上圖一次性看到所有信息瞭，這個需要我們來權衡利弊。

有個細節差點忘記，上圖中左上角的logo，有沒有讓你想到什麼？對瞭，flickr，同樣的配色，同樣的字體，同樣的故意拼寫錯誤，我想這應該是產品經理、產品設計師一種典型的悶騷表現吧。

作者：iamsujie——信息展現的設計