2017-7-11 資深UI設(shè)計(jì)者
近日星巴克與微信推出的社交禮品功能“用星說(shuō)”，可以說(shuō)刷遍了朋友圈。無(wú)論你愛(ài)不愛(ài)喝咖啡，星巴克似乎都成為了一種文化象征。上班族青睞，小清新喜歡，基本上大家看到綠色的人魚(yú)標(biāo)志就能馬上認(rèn)出它來(lái)。
雖然一直也有喝咖啡的習(xí)慣，但至今不知道星巴克菜單版上列的【摩卡】、【拿鐵】、【美式】、【卡布奇諾】等等有什么區(qū)別。直到看到下列圖，才很直觀的了解到每個(gè)咖啡類別的區(qū)別是什么。
類似上圖示，針對(duì)內(nèi)容復(fù)制，難以形象表達(dá)的信息，通過(guò)圖形簡(jiǎn)單清晰地向受眾呈現(xiàn)出來(lái)，這種圖稱之為信息圖。
信息圖本身是一個(gè)合成詞，由信息和圖兩個(gè)詞組成多稱之為（Infographics或Infographics Graphics），在40年代的時(shí)候就開(kāi)始出現(xiàn)，使用在報(bào)紙及新聞?lì)愲s志方面，其中杰出的代表阿根廷的信息圖先驅(qū)Alejandro Malofiej，在1993年西班牙設(shè)立了以他為名的主要針對(duì)信息圖表設(shè)計(jì)的Malofiej獎(jiǎng)。
在報(bào)紙、雜志等紙質(zhì)媒體中，為了讓讀者感到新奇且直觀容易的理解，運(yùn)用了大量的信息圖解的表現(xiàn)。
如下圖所示：
信息圖早已融入我們的日常生活中，目的為了創(chuàng)造方便舒適的生活環(huán)境，使人們的生活變得更加更加安全舒適。
為什么人們會(huì)對(duì)信息圖的傳播內(nèi)容更有效呢？主要原因是因?yàn)橐曈X(jué)是人類最強(qiáng)的信息輸入方式，人類感知周圍世界最強(qiáng)的方式，在Brain Rules《大腦法則》一書(shū)中，發(fā)展分子生物學(xué)家John Medina寫(xiě)道：“視覺(jué)是迄今我們最主要的感官，占用了我們大腦中一半的資源?！毙畔D提供了一種語(yǔ)境的方法（Language of Context），通過(guò)展示多個(gè)維度數(shù)值并且相互比較來(lái)為受眾提供語(yǔ)境，使我們更的把內(nèi)容反射到大腦中。
后來(lái)隨著技術(shù)的發(fā)展，除了傳統(tǒng)的紙質(zhì)媒體出現(xiàn)了以互聯(lián)網(wǎng)為主的電腦，電視，手機(jī)，大屏終端等更多類型的電子媒體。信息圖的分類也逐步劃分為：圖解（Diagram） 、圖表（Chart） 、 表格（Table） 、統(tǒng)計(jì)圖（Graph） 、 地圖（Map）和圖形符號(hào)（Pictogram）這幾部分。
圖解Diagram – 主要運(yùn)用插圖對(duì)事物進(jìn)行說(shuō)明
圖表 Chart - 運(yùn)用圖形、線條及插圖等，闡明事物的相互關(guān)系
表格 Table – 根據(jù)特定信息標(biāo)準(zhǔn)進(jìn)行區(qū)分，設(shè)置縱軸與橫軸
統(tǒng)計(jì)圖 Graph – 通過(guò)數(shù)值來(lái)表現(xiàn)變化趨勢(shì)或進(jìn)行比較
地圖 Map – 描述在特定區(qū)域和空間里的位置關(guān)系
圖形符號(hào) Pictogram – 不使用文字，運(yùn)用圖畫(huà)直接傳達(dá)信息
在以紙質(zhì)媒體為主的報(bào)刊雜志的傳統(tǒng)行業(yè)中信息圖是對(duì)實(shí)際事物的描述， 而在互聯(lián)網(wǎng)行業(yè)中側(cè)更多的是對(duì)數(shù)據(jù)的描述。將數(shù)據(jù)圖形化的過(guò)程又稱之為數(shù)據(jù)可視化。把數(shù)據(jù)，包括測(cè)量獲得的數(shù)值、圖像或是計(jì)算中涉及、產(chǎn)生的數(shù)字信息變?yōu)橹庇^的、以圖形圖像信息表示的、隨時(shí)間和空間變化的物理現(xiàn)象或物理量呈現(xiàn)出來(lái)。
我們來(lái)看一組簡(jiǎn)單的數(shù)據(jù)，比較下圖形和數(shù)據(jù)對(duì)于人腦感觀的差異。
這組數(shù)據(jù)包括I、II、III、IV，一共四組，每組有X和Y兩個(gè)維度。數(shù)據(jù)很簡(jiǎn)單，但從數(shù)據(jù)上來(lái)看，你能說(shuō)出這四組數(shù)據(jù)的區(qū)別嗎？
從數(shù)據(jù)上很難看出有什么區(qū)別，因?yàn)槊拷M數(shù)據(jù)看上去都十分的相近。下面我們把這四組數(shù)據(jù)轉(zhuǎn)換成圖表來(lái)進(jìn)行對(duì)比下。
通過(guò)圖表的比較，我們很容易就能找出這四組數(shù)據(jù)的區(qū)別了。I組數(shù)據(jù)呈現(xiàn)整體離散向上的趨勢(shì)。II組數(shù)據(jù)呈現(xiàn)弧度上升，然后再下降的趨勢(shì)。III組數(shù)據(jù)呈現(xiàn)線性上漲的趨勢(shì)，但有一個(gè)點(diǎn)突出。IV組數(shù)據(jù)呈現(xiàn)Y坐標(biāo)不變X上升的趨勢(shì)，但有一點(diǎn)突出。
將數(shù)據(jù)圖形化后，大腦天然的會(huì)對(duì)圖形的不同點(diǎn)做出反應(yīng)，從而更的理解數(shù)據(jù)帶來(lái)的意義。
我們?cè)賮?lái)看下其他例子：
將當(dāng)前QQ的在線人數(shù)，通過(guò)可視化的方式展示給用戶。把數(shù)據(jù)置于視覺(jué)控件中，這樣用戶就能很直觀的了解到QQ當(dāng)前使用的人群分布在中國(guó)是怎么樣的，那里的人群分布多，那里的人群少。
Eric Fischer針對(duì)Twitter 發(fā)短消息的位置和Flickr 拍照片的位置為數(shù)據(jù)源做的名為“看圖或說(shuō)話”（SeeSomething or Say Something）的大數(shù)據(jù)可視化展示，通過(guò)簡(jiǎn)單但大量的數(shù)據(jù)，做出非常美的數(shù)據(jù)圖展示。
這種用圖形化對(duì)數(shù)據(jù)進(jìn)行描述設(shè)計(jì)的過(guò)程，我們通常稱為【數(shù)據(jù)可視化】。有時(shí)候，可視化的結(jié)果可能只是一個(gè)條形圖表，但大多數(shù)的時(shí)候可視化的過(guò)程會(huì)很復(fù)雜的，因?yàn)閿?shù)據(jù)本身可能會(huì)很復(fù)雜的。一般流程包括【數(shù)據(jù)收集】-【數(shù)據(jù)分析&清理】-【可視化設(shè)計(jì)】，從抽象的原始數(shù)據(jù)到可視化圖像。
要做出好的【數(shù)據(jù)可視化】，拆分出來(lái)核心要先了解什么是【數(shù)據(jù)】
數(shù)據(jù)是可視化的基礎(chǔ)，它不僅僅是數(shù)字，要想把數(shù)據(jù)可視化，就必須知道它表達(dá)的是什么。根據(jù)Ben Shneiderman的分類，信息可視化的數(shù)據(jù)分為以下幾類：
一維數(shù)據(jù)：X軸一個(gè)維度如果1、2、3、4 ···
二維數(shù)據(jù)：X，Y兩個(gè)二維度（1、2），（3、4），（5、6），（7、8）···
三維數(shù)據(jù)：X，Y，Z三個(gè)維度（1、2、3），（4、5、6），（7、8、9） ···
多維數(shù)據(jù)：X，Y，Z，···多個(gè)維度（1、2、3、4、···），（5、6、7、8、···）
時(shí)態(tài)數(shù)據(jù)：具有數(shù)據(jù)屬性的數(shù)據(jù)集合。
層次數(shù)據(jù)：具有等級(jí)或?qū)哟侮P(guān)系數(shù)據(jù)集合。
數(shù)據(jù)種類劃分是十分多的，但是這些數(shù)據(jù)都描述了現(xiàn)實(shí)的世界中的一部分，是現(xiàn)實(shí)世界的一個(gè)快照。除了類型，數(shù)據(jù)的數(shù)量級(jí)也影響這數(shù)據(jù)的表達(dá)結(jié)果。
小數(shù)據(jù)量（小于100）展示一下靜態(tài)結(jié)果，中數(shù)據(jù)量（1K~100K）呈現(xiàn)數(shù)據(jù)反映的事實(shí)，大數(shù)據(jù)量（大于1M+）用于研究分析，推測(cè)結(jié)果。
我們來(lái)看一個(gè)數(shù)據(jù)：【2017年1月28號(hào)，成都PM2.5值245】，從這個(gè)數(shù)據(jù)里能看出什么，可能只是會(huì)覺(jué)得當(dāng)天成都空氣質(zhì)量不好，我們可能會(huì)聯(lián)想到這個(gè)樣一個(gè)畫(huà)面。
好像就不能得出什么了。其實(shí)從單個(gè)小數(shù)據(jù)上來(lái)看，我們很難得到什么有價(jià)值的信息。
只能匹配出數(shù)據(jù)代表的當(dāng)前的靜態(tài)狀態(tài)結(jié)果。所以要想發(fā)揮出數(shù)據(jù)可視化的作用，首先我們需要大量真實(shí)的數(shù)據(jù)，知道數(shù)據(jù)的來(lái)龍去脈，把它作為一個(gè)整體來(lái)理解，關(guān)注全貌對(duì)原始數(shù)據(jù)了解得越多，打造的基礎(chǔ)就越堅(jiān)實(shí)，也就越可能制作出令人信服的數(shù)據(jù)圖表。
OK，我們繼續(xù)豐富我們的原始數(shù)據(jù)，在中國(guó)環(huán)境監(jiān)測(cè)總站（http://www.cnemc.cn/）的網(wǎng)站獲取到成都2017年整個(gè)1月份的PM2.5的數(shù)據(jù)。
中國(guó)環(huán)境監(jiān)測(cè)總站作為空氣質(zhì)量公開(kāi)的數(shù)據(jù)來(lái)源，它提供了獲取數(shù)據(jù)的API接口。通過(guò)API接口我們可以獲取到原始數(shù)據(jù)。
原始數(shù)據(jù)一般包含的信息都比較多，什么PM2.5,、空氣質(zhì)量指數(shù)、PM10、一氧化碳、二氧化碳、臭氧、二氧化硫等等。我們只需要PM2.5的，所以清理數(shù)據(jù)，把其他不必要的內(nèi)容去掉。然后導(dǎo)入到Excel表中，可以得到我們最終需要的數(shù)據(jù)。
有了【數(shù)據(jù)】下一步就可以開(kāi)始做數(shù)據(jù)的【可視化】。
通俗地說(shuō)，可視化設(shè)計(jì)的目的是“讓數(shù)據(jù)說(shuō)話”，用圖形去講述數(shù)據(jù)的故事?？梢暬且环N表達(dá)數(shù)據(jù)的方式，是現(xiàn)實(shí)世界的抽象表達(dá)。它像文字一樣，為我們講述各種各樣的故事。作為一種媒介，可視化已經(jīng)發(fā)展成為一種很好的故事講述方式。
我們把成都PM2.5的數(shù)據(jù)，按照日期和當(dāng)天的PM2.5指數(shù)做出最簡(jiǎn)單圖形來(lái)，我們可以得到下面這類的圖表來(lái)。
這類的圖用Excel很簡(jiǎn)單就能得到。我們可去修改下柱狀圖的配色，但它依然只是一個(gè)簡(jiǎn)單的圖表，而不是好的可視化作品。
那什么是好的可視化作品呢？
好的可視化設(shè)計(jì)需要具備統(tǒng)計(jì)和設(shè)計(jì)方面的知識(shí)。沒(méi)有前者，可視化只是插圖和美術(shù)練習(xí)；沒(méi)有后者，可視化就只是研究分析結(jié)果。統(tǒng)計(jì)和設(shè)計(jì)的知識(shí)都只能幫助你完成數(shù)據(jù)圖形的一部分。
我們需要去講述數(shù)據(jù)的故事。那PM2.5代表的是什么，是當(dāng)天天氣的情況，所以我們可以用天氣的維度去講述這個(gè)故事。
我們把成都2017年1月份的天氣照片的到，天氣好的時(shí)候天是藍(lán)色，PM2.5超標(biāo)的時(shí)候是灰色。把它圖形化我們可以得到這樣一個(gè)展示，可以看出對(duì)于成都來(lái)說(shuō)一個(gè)月中天氣好的時(shí)間是十分少的。
好的可視化設(shè)計(jì)能讓你有一見(jiàn)鐘情的感覺(jué)，你知道眼前的東西就是你想看到的。既可以是藝術(shù)的，同時(shí)又是真實(shí)的。而不是直接把數(shù)據(jù)轉(zhuǎn)換成圖表，找到數(shù)據(jù)和它所代表事物之間的關(guān)系按照“數(shù)字化敘事”去做設(shè)計(jì)，這是全面分析數(shù)據(jù)的關(guān)鍵，同樣還是深層次理解數(shù)據(jù)的關(guān)鍵。
我們?cè)诰W(wǎng)上可以看到大量的優(yōu)秀的數(shù)據(jù)可視化圖，這些優(yōu)秀的作品都會(huì)以這種“數(shù)字化敘事”的方式，告訴用戶數(shù)據(jù)的意義。
這是哈佛做的一個(gè)數(shù)據(jù)可視化項(xiàng)目，將全球價(jià)15萬(wàn)億美元的大宗交易表現(xiàn)在這里。地圖上的每個(gè)點(diǎn)都代表 1 億美元的進(jìn)出口商品，十分的形象和震撼。
當(dāng)然好的數(shù)據(jù)可視化圖都是不斷迭代優(yōu)化出來(lái)的，判斷是不是一個(gè)好的數(shù)據(jù)可視化可以按照以下的步驟去考慮?！灸阌惺裁磾?shù)據(jù)】 -> 【關(guān)于數(shù)據(jù)你想知道什么】 -> 【數(shù)據(jù)可視化的表現(xiàn)方式】 -> 【你看到了什么？有意義嗎？】。每一個(gè)問(wèn)題的答案都取決于前一個(gè)答案，不斷的去問(wèn)自己，每個(gè)環(huán)節(jié)有沒(méi)有問(wèn)題，這樣才能做出最好的設(shè)計(jì)。
我們一直在講數(shù)據(jù)可視化的目的是有兩個(gè)：一個(gè)是更好地分享和傳達(dá)數(shù)據(jù)信息，二個(gè)是通過(guò)設(shè)計(jì)之美有效地縮短信息的傳達(dá)。這是可視化的最根本的目的，可視化的定義在不同人眼中是不一樣的。作為一個(gè)整體，可視化的廣度每天都在變化，但是這是一個(gè)新的領(lǐng)域，我們可以用一種全新的方式去認(rèn)識(shí)世界的過(guò)程，數(shù)據(jù)可視化，改變對(duì)數(shù)據(jù)的呈現(xiàn)和思考方式。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn