同樣的一堆信息擺在面前,展現方式設計的好壞可以讓用戶感覺差異多大?為什么同樣的一個“任務”,一天也能“完成”,一周也可能沒法“完成”?
這個例子是我2007年從Google的一位產品經理那里聽來的,任務的目的是展示美國的幾個城市在不同月份的平均降水量。很自然的,一開始我們就 會想到用一張表格,如下圖,橫軸是一月到十二月,縱軸是城市名稱,分別是San Francisco、Seattle、Chicago、New York、Miami,表格中每個元素就是某城市在那個月的平均降水量,單位是“英寸每月”。
上圖已經把所有的信息都展示出來了,但重點不夠突出,各種信息都用一樣的字體 讓人不知道一開始看哪里,而下圖就優化了很多。首先各種文字用了不一樣的字體,圖表的標題最明顯,讓人一眼就知道這個圖表是說什么的,月份與城市信息稍微 弱化以突出數據內容,特別值得一提的是這里用了不同深淺的顏色來突出數據,讓人很容易解讀出某個城市全年整體的降水情況,降水季節分布等信息。
我常說“字不如表,表不如圖”,再回憶一下上面的圖表,你還能記住Miami在8月的平均降水量么?我是不能,但我記得Miami在 夏季的降水量很大。這給了我們啟發,其實要傳遞的并不是具體的數字,而是每個城市在全年的降水量整體情況與分布,數據只是給極少數做科學研究的人,在需要 的時候可以查到就可以了,在表現形式上,我們可以處理成鼠標懸停在某個水滴上的時候,就展現出相應的數字。于是,我們進一步優化出下圖,用很符合讀者心智 模型的水滴大小、顏色深淺來表示不同的降水量區間。現在更加一目了然了,San Francisco最干,冬天稍微好一些;而New York全年降水很平均……
還可以優化么?是的,還可以。上面幾個城市為什么會有這樣的降水情況呢?我們可以如下圖,把它們放在地圖里,從地理的角度得到解釋,比如San Francisco “因為三面環水,并受太平洋加利福尼亞寒流影響,舊金山是典型的涼夏型地中海式氣候”,所以夏季降雨極少,冬天經常下雨。而Miami則“擁有溫暖、濕潤 的夏雨型暖副熱帶氣候”,所以降水充沛。下圖把時間軸做了個動態展現,拖動時間軸,我們可以看到幾大城市,甚至可以推測出全美國在一年中各地的降水情況。 當然,如此炫的表達也有其弱點,那就是沒法如上圖一次性看到所有信息了,這個需要我們來權衡利弊。
有個細節差點忘記,上圖中左上角的logo,有沒有讓你想到什么?對了,flickr,同樣的配色,同樣的字體,同樣的故意拼寫錯誤,我想這應該是產品經理、產品設計師一種典型的悶騷表現吧。