同樣的一堆信息擺在面前,展現(xiàn)方式設(shè)計(jì)的好壞可以讓用戶(hù)感覺(jué)差異多大?為什么同樣的一個(gè)“任務(wù)”,一天也能“完成”,一周也可能沒(méi)法“完成”?
這個(gè)例子是我2007年從Google的一位產(chǎn)品經(jīng)理那里聽(tīng)來(lái)的,任務(wù)的目的是展示美國(guó)的幾個(gè)城市在不同月份的平均降水量。很自然的,一開(kāi)始我們就 會(huì)想到用一張表格,如下圖,橫軸是一月到十二月,縱軸是城市名稱(chēng),分別是San Francisco、Seattle、Chicago、New York、Miami,表格中每個(gè)元素就是某城市在那個(gè)月的平均降水量,單位是“英寸每月”。

上圖已經(jīng)把所有的信息都展示出來(lái)了,但重點(diǎn)不夠突出,各種信息都用一樣的字體 讓人不知道一開(kāi)始看哪里,而下圖就優(yōu)化了很多。首先各種文字用了不一樣的字體,圖表的標(biāo)題最明顯,讓人一眼就知道這個(gè)圖表是說(shuō)什么的,月份與城市信息稍微 弱化以突出數(shù)據(jù)內(nèi)容,特別值得一提的是這里用了不同深淺的顏色來(lái)突出數(shù)據(jù),讓人很容易解讀出某個(gè)城市全年整體的降水情況,降水季節(jié)分布等信息。

我常說(shuō)“字不如表,表不如圖”,再回憶一下上面的圖表,你還能記住Miami在8月的平均降水量么?我是不能,但我記得Miami在 夏季的降水量很大。這給了我們啟發(fā),其實(shí)要傳遞的并不是具體的數(shù)字,而是每個(gè)城市在全年的降水量整體情況與分布,數(shù)據(jù)只是給極少數(shù)做科學(xué)研究的人,在需要 的時(shí)候可以查到就可以了,在表現(xiàn)形式上,我們可以處理成鼠標(biāo)懸停在某個(gè)水滴上的時(shí)候,就展現(xiàn)出相應(yīng)的數(shù)字。于是,我們進(jìn)一步優(yōu)化出下圖,用很符合讀者心智 模型的水滴大小、顏色深淺來(lái)表示不同的降水量區(qū)間。現(xiàn)在更加一目了然了,San Francisco最干,冬天稍微好一些;而New York全年降水很平均……

還可以?xún)?yōu)化么?是的,還可以。上面幾個(gè)城市為什么會(huì)有這樣的降水情況呢?我們可以如下圖,把它們放在地圖里,從地理的角度得到解釋?zhuān)热鏢an Francisco “因?yàn)槿姝h(huán)水,并受太平洋加利福尼亞寒流影響,舊金山是典型的涼夏型地中海式氣候”,所以夏季降雨極少,冬天經(jīng)常下雨。而Miami則“擁有溫暖、濕潤(rùn) 的夏雨型暖副熱帶氣候”,所以降水充沛。下圖把時(shí)間軸做了個(gè)動(dòng)態(tài)展現(xiàn),拖動(dòng)時(shí)間軸,我們可以看到幾大城市,甚至可以推測(cè)出全美國(guó)在一年中各地的降水情況。 當(dāng)然,如此炫的表達(dá)也有其弱點(diǎn),那就是沒(méi)法如上圖一次性看到所有信息了,這個(gè)需要我們來(lái)權(quán)衡利弊。

有個(gè)細(xì)節(jié)差點(diǎn)忘記,上圖中左上角的logo,有沒(méi)有讓你想到什么?對(duì)了,flickr,同樣的配色,同樣的字體,同樣的故意拼寫(xiě)錯(cuò)誤,我想這應(yīng)該是產(chǎn)品經(jīng)理、產(chǎn)品設(shè)計(jì)師一種典型的悶騷表現(xiàn)吧。