信息可視化整理

可視化認識論整理

一、初級-《連環(huán)15關(guān),玩轉(zhuǎn)數(shù)據(jù)可視化》

無論數(shù)據(jù)總量和復(fù)雜程度如何,數(shù)據(jù)間的關(guān)系大多可分為三類:比較 / 構(gòu)成 / 分布&聯(lián)系。

image.png
image.jpeg
image.png

一、比較類常用圖形總結(jié)

基于分類 / 時間的數(shù)據(jù)對比,通常需用到比較型圖表。比較條目較少時,如5個地區(qū)收件量的對比,可選用柱狀圖表示。

條形圖當(dāng)條目較多,如大于12 條,移動端上的柱狀圖會顯得擁擠不堪,更適合用條形圖。一般數(shù)據(jù)條目不超過 30 條,否則易帶來視覺和記憶負擔(dān)。柱形圖還有許多豐富的應(yīng)用。例如堆積柱形圖,瀑布圖,橫向條形圖,橫軸正負圖等。

看趨勢 – 折線圖當(dāng)X軸為連續(xù)數(shù)值(如時間)且注重變化趨勢時,則適用折線圖。

擴大差異 – 南丁格爾玫瑰圖。由于扇形的半徑和面積是平方的關(guān)系,南丁格爾玫瑰圖會將數(shù)值之間的差異放大,適合對比大小相近的數(shù)值。玫瑰圖也適于表示周期 / 時間概念,比如星期、月份。依然建議數(shù)據(jù)量不超過 30 條,超出可考慮條形圖。

image.jpeg

當(dāng)比較正反兩類甚至更多維度的數(shù)據(jù)時,可試嘗試雙向條形圖。用顏色區(qū)分大區(qū),空心/實心區(qū)分收件量和派件量,既能整體比較大區(qū),又能詳細對比地區(qū)的情況。

image.jpeg

打怪升級,再加點難度。在雙向圖上再增加一個維度,如下表,比較 5 個地區(qū)的利潤及相應(yīng)的收入和成本。請先思考一下,再下滑看推薦圖表。

image.png
image.png

通過圖形一眼就能看出深圳區(qū)的利潤低于廣州區(qū),即使它的收入高于廣州區(qū),但成本相對來說高于廣州區(qū)。

目標(biāo)達成 – 子彈圖考察指標(biāo)的達成情況,如收入達標(biāo)情況及所處區(qū)間(優(yōu)、良、差)。

image.png
image.png

子彈圖,因為像子彈射后帶出的軌道。相較于儀表盤,它能夠在狹小的空間中表達豐富的數(shù)據(jù)信息,在信息傳遞上有更大的效能優(yōu)勢。

若還要比較4個季度的收入情況,只需用不同顏色區(qū)分。如下圖,一眼便知第二季度表現(xiàn)較好,而第一季度則不佳。

image.png

性能 – 雷達圖。多維的性能數(shù)據(jù),如綜合評價,常用雷達圖表示。在游戲中看到它比較多。它在商務(wù)、財務(wù)領(lǐng)域應(yīng)用較大,適合用在固定的框架內(nèi)表達某種已知的結(jié)果。常見于經(jīng)營狀況,財務(wù)健康程度。

指標(biāo)得分接近圓心,說明處于較差狀態(tài),應(yīng)分析改進;指標(biāo)得分接近外邊線,說明處于理想狀態(tài)。比如我對企業(yè)財務(wù)進行分析,劃分出六大類:銷售、市場、研發(fā)、客服、技術(shù)、管理。通過雷達圖繪制出預(yù)算和實際開銷的維度對比,會很清晰。如下圖:

image.jpeg

以上就是“比較”類的常用圖表,歸納如下:

image.png

二、構(gòu)成

一個整體被分成幾個部分。這類情況會用到構(gòu)成型圖表,如五大區(qū)的收件量占比、公司利潤的來源構(gòu)成等。

單層 – 餅狀圖

第1關(guān)中,對比5個地區(qū)的收件量時用到了柱狀圖。若看占比情況,餅狀圖更合適。餅圖是有缺陷的,它擅長表達某一占比較大的類別。但是不擅長對比。30%和35%在餅圖上憑肉眼是難以分辨出區(qū)別的。當(dāng)類別過多,也不適宜在餅圖上表達。

image.png

如果變成 17 個地區(qū),會怎樣?餅圖分類一般不超過 9 個,超過建議用條形圖展示。

除餅圖外,環(huán)形圖(甜甜圈圖)亦可表示占比,其差異是將餅圖的中間區(qū)域挖空,在空心區(qū)域顯示文本信息,比如標(biāo)題,優(yōu)勢是其空間利用率更高。

image.png

分層 – 環(huán)形圖、旭日圖

對于管理層而言,需先把握大局和重點。比如大區(qū)負責(zé)人需一眼看到重點地區(qū)及重點分部的情況(如下圖),如何展示?

image.jpeg
image.jpeg

這個叫旭日圖,逐層下鉆看數(shù)據(jù),大區(qū)的重點地區(qū)及相應(yīng)分部的構(gòu)成情況一目了然。

累計趨勢 – 堆疊面積圖

看數(shù)值構(gòu)成隨時間變化的案例:第一大區(qū)(包含四個重點地區(qū))近四年收入構(gòu)成的趨勢要如何可視化?

image.png
image.jpeg

推薦方案是堆疊面積圖,可以展現(xiàn)分量(地區(qū))對于總量(大區(qū))的貢獻,并顯示總量(大區(qū))的變化過程。需要說明的是,地區(qū)收入的起點并非從 y=0 開始,而是在下面的地區(qū)基礎(chǔ)上逐層疊加,最后組成一個整體。

面積圖最佳設(shè)計指南:波動較大的類別放在最上面、使用透明色、不要超過4個類別,y軸從0開始,不要用面積圖展示離散數(shù)據(jù),只有連續(xù)數(shù)據(jù)有中間值。

累計比較 – 堆疊柱狀圖

如果將上圖X軸的標(biāo)簽文字(即年份)和圖例(即地區(qū))互換(如下圖A),用來看每個地區(qū)近四年的收入構(gòu)成,用哪個圖更合適?

image.jpeg
image.jpeg

堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于,堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)(如時間),堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù),因此用 B 方案更適合。

累計增減 – 瀑布圖

若想表達兩個數(shù)據(jù)點間數(shù)量的演變過程,可使用瀑布圖。開始的一個值,在經(jīng)過不斷的加減后,得到一個值。瀑布圖將這個過程圖示化,常用來展現(xiàn)財務(wù)分析中的收支情況。

image.png

三、分布 & 聯(lián)系

通過分布 & 聯(lián)系型圖表能看到數(shù)據(jù)的分布情況,進而找到某些聯(lián)系,如相關(guān)性、異常值和數(shù)據(jù)集群。

兩個變量 – 散點圖

仍以業(yè)務(wù)為例,下圖為全國網(wǎng)點的單票成本/收入分布情況。

image.jpeg

單單這樣看,可能看不出什么,如果加兩條平均線就不一樣了。

image.jpeg

加了平均線,就知道哪些網(wǎng)點高于平均線,哪些低于平均線。但網(wǎng)點那么多,總不能逐個點擊查看是哪個大區(qū)的,給散點加上顏色后,就很有意義了。

image.jpeg

通過此圖,可以看出哪些大區(qū)單票利潤較低,急需提升,比如廣泛聚集于右下角的第四大區(qū),單票收入低于平均線,單票成本卻高于平均線。

三個變量 – 氣泡圖

大家都知道,網(wǎng)點總利潤除了和單票利潤有關(guān),還和體量(即收件量)有關(guān),用散點的面積大小表示收件量,就變成了氣泡圖。

image.jpeg

結(jié)合地圖 – 熱力圖

一切和空間屬性有關(guān)的分析都可以用到地理圖。比如各地區(qū)銷量,或者某商業(yè)區(qū)域店鋪密集度等。氣泡圖與地圖結(jié)合可演變?yōu)闊崃D。通過熱力圖,能看到哪些網(wǎng)點收派件量較多,需進行資源調(diào)配。

地理圖一定需要用到坐標(biāo)維度??梢允?strong>經(jīng)緯度、也可以是地域名稱(上海市、北京市)。坐標(biāo)粒度即能細到具體某條街道,也能寬到世界各國范圍。POI是很重要的要素。POI是“Point of Information”的縮寫,可以翻譯成信息點,每個POI包含四方面信息,名稱、類別、經(jīng)度緯度、附近的酒店飯店商鋪等信息。借助POI,才能按地理維度展現(xiàn)數(shù)據(jù)

最佳設(shè)計指南:一、使用細的地圖輪廓線;選擇合適的配色;少用填充圖案;選擇合適的數(shù)據(jù)區(qū)間。

image.jpeg

用戶行為分析,將瀏覽、點擊、訪問頁面的操作以高亮的可視化形式表現(xiàn)。下圖就是用戶在Google搜索結(jié)果的點擊行為。

總結(jié):當(dāng)我們拿到數(shù)據(jù)后,先提煉關(guān)鍵信息,明確數(shù)據(jù)關(guān)系及主題再選擇合適的圖表進行可視化。

二、進階-《數(shù)據(jù)可視化之經(jīng)典圖表合集》

好的可視化是會講故事的,它向我們揭示了數(shù)據(jù)背后的規(guī)律。對可視化的使用認知或許來源于下面這張圖。雖然結(jié)構(gòu)清晰,但它只針對Excel圖表,不夠豐富。

基本概念:

維度

數(shù)據(jù)分析中經(jīng)常會提及維度。維度是觀察數(shù)據(jù)的角度和對數(shù)據(jù)的描述。我們可以說地區(qū)是一種維度,這個維度包含上海北京這些城市。也可以認為銷售額是一個維度,里面有各類銷售數(shù)據(jù)。維度可以用時間、數(shù)值表示,也可以用文本,文本常作為類別。數(shù)據(jù)分析的本質(zhì)是各種維度的組合

維度類型和轉(zhuǎn)換

維度主要是三大類的數(shù)據(jù)結(jié)構(gòu):文本、時間、數(shù)值。地區(qū)的上海、北京就是文本維度(也可以稱為類別維度),銷售額度就是數(shù)值維度,時間就是世界

數(shù)值維度可以通過其他維度加工計算得出,例如按地區(qū)維度,count出有多少是上海的,有多少是北京的。維度可以互相轉(zhuǎn)換。比如年齡原本是數(shù)值型的維度,但是可以通過對年齡的劃分,將其分類為小孩、青年、老年三個年齡段,此時就轉(zhuǎn)換為文本維度。

1.箱線圖

箱線圖一般人了解的不多,它能準(zhǔn)確地反映數(shù)據(jù)維度的離散(最大數(shù)、最小數(shù)、中位數(shù)、四分數(shù))情況。凡是離散的數(shù)據(jù)都適用箱線圖。

下圖就是箱線圖的典型應(yīng)用。線的上下兩端表示某組數(shù)據(jù)的最大值和最小值。箱的上下兩端表示這組數(shù)據(jù)中排在前25%位置和75%位置的數(shù)值。箱中間的橫線表示中位數(shù)。

2.關(guān)系圖

展現(xiàn)事物相關(guān)性和關(guān)聯(lián)性的圖表,比如社交關(guān)系鏈、品牌傳播、或者某種信息的流動

有一條微博,現(xiàn)在想研究它的傳播鏈:它是經(jīng)由哪幾個大V分享擴散開來,大V前又有誰分享過等,以此為基礎(chǔ)可以繪制出一幅發(fā)散的網(wǎng)狀圖,分析病毒營銷的過程。關(guān)系圖依賴大量的數(shù)據(jù),它本身沒有維度的概念。

3.矩形樹圖

上文說過,柱形圖不適合表達過多類目(比如上百)的數(shù)據(jù),那應(yīng)該怎么辦?矩形樹圖出現(xiàn)了。它直觀地以面積表示數(shù)值,以顏色表示類目。

下圖中各顏色系代表各個類目維度,類目維度下又有多個二級類目。如果用柱形圖表達,簡直是災(zāi)難。用矩形樹圖則輕輕松松。

電子商務(wù)、產(chǎn)品銷售等涉及大量品類的分析,都可以用到矩形樹圖。

4.桑基圖

比較冷門的圖表,它常表示信息的變化和流動狀態(tài)。

5.0 漏斗圖

大名鼎鼎的轉(zhuǎn)化率可視化,它適用在固定流程的轉(zhuǎn)化分析,你也可以認為它是桑基圖的簡化版。轉(zhuǎn)化率也可以用幾組數(shù)字表示,不一定做成漏斗圖。

三、進階-《報表化圖表制造》

可讀性、客觀性、統(tǒng)一性

可讀性**

圖表的首要功能是解釋,而不是設(shè)計,尤其大部分圖表都會落入到過度設(shè)計的陷阱。

客觀性

數(shù)據(jù)的解讀因為每個人的觀點和視角不同,可以呈現(xiàn)諸多的結(jié)果。這也是我們常說統(tǒng)計學(xué)會撒謊的原因。

下圖是一張銷售額柱形圖,看來銷售額沒有啥特大變化嘛。

換另外一種圖表展示。就看到了變化的增長趨勢。

實際上兩張圖表的數(shù)據(jù)沒有任何差異,為什么呢?區(qū)別只在坐標(biāo)軸。第一張圖的Y坐標(biāo)軸起始為0,第二張圖起始是2.45。第二張是截取了部分的柱形圖。

統(tǒng)一性

如果圖表整體顏色是冷色調(diào),那么就不要再加入暖色。

如果圖表文字是雅黑,就不要再加入宋體。

如果某地區(qū)數(shù)據(jù),用了柱形圖對比,其他地區(qū)也遵循柱形圖樣式。

如果某圖表,女性使用紅色,男性使用藍色,那么這一規(guī)范應(yīng)該在所有圖表體現(xiàn)。除了顏色,其他設(shè)計元素同理。

如果有多張圖表,圖表元素應(yīng)該統(tǒng)一,如標(biāo)題、坐標(biāo)軸刻度、坐標(biāo)軸位置等。

進階-產(chǎn)品經(jīng)理對可視化產(chǎn)品思考

一、問一句為什么?

用戶為啥會有「將數(shù)據(jù)轉(zhuǎn)化成圖表」的需求?

最終的答案一定是回歸到企業(yè)管理的「第一性原理」——開源節(jié)流。企業(yè)需要數(shù)據(jù)去分析如何才能節(jié)省更多錢,如何才能賺更多錢。未來的 BI 的產(chǎn)品不能將自己定位為「工具」,而是應(yīng)該定位為「服務(wù)」。

二、可視化分類

1.0 從流程來看,探索性可視化是這樣的:

此類可視化集中在圖表的微觀功能上,像輔助線、預(yù)警、各種圖表類型等。

2.0 解釋性可視化需求

一般集中在完成了數(shù)據(jù)探索,并且形成一定數(shù)據(jù)洞察后的 story-telling 場景。大家在網(wǎng)上看到的一些「一張圖搞懂 XXX 」、「一張圖了解 XXX」就屬于解釋性可視化。

此類集中在整體的圖表可視化上,比如將多個圖表組合起來,制作成一份報告或者故事版,所以會提供類似標(biāo)題編輯器、排版編輯器等功能。目前市面上的 BI 產(chǎn)品,像網(wǎng)易有數(shù)、BDP、Tableau、PowerBI 都是采取這種模式

三、市面上產(chǎn)品缺陷與不足

1. 這種偏業(yè)務(wù)型的產(chǎn)品框架,并不太適合國內(nèi)市場。

因為這類產(chǎn)品面向的用戶基本上是專業(yè)用戶(數(shù)據(jù)分析師),而忽略了一個事實——大部分中國企業(yè)并沒有設(shè)立專門的數(shù)據(jù)分析崗位。有能力配備數(shù)據(jù)分析師的企業(yè)一般都是中大型企業(yè),他們付費能力可能比較強,但是也意味著用戶量會較少。

專業(yè)用戶對應(yīng)的是數(shù)據(jù)分析師,而半專業(yè)用戶則對應(yīng)的是類似財務(wù)、銷售、HR 等,在業(yè)務(wù)上專業(yè)但數(shù)據(jù)分析上不專業(yè)的用戶。這類用戶的日常工作一般集中在解釋性可視化上面,比如年終總結(jié)、年度規(guī)劃、每月匯報中都需要利用到數(shù)據(jù)可視化。這類用戶的流程是這樣的:

[圖片上傳失敗...(image-e6e0b4-1556103840929)]

用戶導(dǎo)入數(shù)據(jù),無需太復(fù)雜的操作,即可直接生成圖表。存在問題:

  1. 數(shù)據(jù)發(fā)送不及時

  2. 互動性弱(沒有給老板一個激勵下屬的通道)

  3. 制作成本高

四、進階-信息可視化流程和方法

可視化的理解:信息可視化就是用圖形正確的表現(xiàn)復(fù)雜的信息和邏輯關(guān)系

?通過圖片特有的美觀和趣味性,吸引讀者 ?通過最優(yōu)表現(xiàn)形式,使內(nèi)容更易懂

?拉近讀者與產(chǎn)品的距離,提升品牌認知度

案例

作品一:安全產(chǎn)品首頁展示

創(chuàng)作靈感:從需求文檔中看到這些子產(chǎn)品名字有御前衛(wèi)、八卦陣、御城河……當(dāng)時就覺得非常有意思,腦海中立刻浮現(xiàn)出一個古城的畫面,古城周圍有士兵、有八卦 陣、有御城河等。跟視覺設(shè)計師表達這個想法后大家一拍即合,最終產(chǎn)出了這個方案。中間的城樓最開始是紅色的,有點太搶眼,為了避免喧賓奪主又體現(xiàn)出數(shù)據(jù)被 保護的感覺,就把它改成了這種半透明的、很數(shù)據(jù)化的虛擬感覺。

作品二:產(chǎn)品結(jié)構(gòu)圖

創(chuàng)作靈感:通過競品分析發(fā)現(xiàn)國內(nèi)外同行在這方面都非常下功夫,所以我們也要力求用一張圖來把產(chǎn)品結(jié)構(gòu)和關(guān)系描述清楚。下篇文章會講具體的設(shè)計過程。

作品三:使用流程示意圖

創(chuàng)作靈感:產(chǎn)品經(jīng)理給出的這個圖很嚴謹,但是對于用戶來說理解起來比較困難,因此先用線框圖把它簡化為單向的流程圖,但這樣又不夠美觀和直觀。心靈手巧的視覺設(shè)計師經(jīng)過圖形的美化,巧妙解決了這個問題。

修改中(局部):

改良后:

作品四:方案描述示意圖

也是先梳理信息邏輯,用更易懂的方式去表現(xiàn),再通過視覺設(shè)計師美化。

改良圖:

信息可視化的設(shè)計標(biāo)準(zhǔn)**

把一件事情做好,首先要知道做好的標(biāo)準(zhǔn)是什么。把這些失敗的作品放到一起,就可以大概得出失敗的原因是什么,而好的標(biāo)準(zhǔn)又是什么。

[圖片上傳失敗...(image-cf4898-1556103840928)]

五、進階-《信息可視化圖表》

從表現(xiàn)形式的角度“信息圖表”作為視覺工具應(yīng)包括以下六類:圖表、圖解、圖形、表格、地圖、列表。

(一)圖表類型

按照形式特點我們常把圖表分為關(guān)系流程圖、敘事插圖型、樹型結(jié)構(gòu)圖、時間分布類及空間解構(gòu)類五種類型。

1、關(guān)系流程類圖表

image.jpeg

2、敘事插圖型圖表

image.jpeg

敘事性圖表就是強調(diào)時間維度,并隨著時間的推移,信息也不斷有變化的圖表。

3、樹狀結(jié)構(gòu)示意圖

image.jpeg

把繁復(fù)的數(shù)據(jù)通過分支梳理的方式表達清楚。運用分組,每組再次分類的主體框架表示主從結(jié)構(gòu)。

4、時間表述類示意圖

image.jpeg
image.jpeg

時間表述類示意圖只要以時間軸為中心加入文字數(shù)據(jù)即可。從設(shè)計的角度來看,將主題融入圖形設(shè)計中,挑選重要事件點解讀,就可以使畫面精美,加深理解力度。

5、空間結(jié)構(gòu)類示意圖

image.jpeg

運用設(shè)計語言把繁雜結(jié)構(gòu)模型化、虛擬化是空間結(jié)構(gòu)示意圖存在的意義

(二)圖表設(shè)計流程

這個流程需要協(xié)作完成,數(shù)據(jù)需要篩選和整理 ,精準(zhǔn)是首要條件其次是梳理。找出出主線邏輯,篩選次要內(nèi)容從而進行精心的設(shè)計。

1、基礎(chǔ)圖形創(chuàng)意

柱狀圖和餅狀圖是最常用的兩種基礎(chǔ)圖形,但是簡單的幾何形態(tài)很難給人設(shè)計感。對基礎(chǔ)圖形的創(chuàng)意來突出設(shè)計主題,就可以取得一舉多得、事半功倍的效果

image.jpeg
image.jpeg

上面圖片中左右的內(nèi)容是完全一致的,但右圖即使讀者不詳細關(guān)注也可心領(lǐng)神會。

2、高吸引度與視覺亮點

從傳統(tǒng)網(wǎng)頁到社交微博,用戶對信息的瀏覽速度也越來越快,高吸引度便是最寶貴的財富點。

image.jpeg
image.jpeg

3、畫面簡潔明了

image.jpeg

4.象征圖示

image.jpeg

在設(shè)計的上要注重保持風(fēng)格的統(tǒng)一,這樣才能讓人視覺連貫、賞心悅目。

六、進階-可視化圖表10個錯誤表達方式

1、餅圖順序不當(dāng)

餅圖是一種非常簡單的可視化工具,但他們卻常常過于復(fù)雜。份額應(yīng)該直觀排序,而且不要超過5個細分。有兩種排序方法都可以讓你的讀者迅速抓取最多的重要信息

方法一:將份額最大的那部分放在12點方向,逆時針放置第二大份額的部分,以此類推。

image.png

方法二: 最大部分放在12點,然后順時針放置

image.png

2、在線狀圖中使用虛線

虛線會讓人分心,而是用實線搭配合適的顏色更容易彼此區(qū)分

image.png

3、數(shù)據(jù)擺放不直觀

你的內(nèi)容應(yīng)該符合邏輯并于直觀的方式引導(dǎo)讀者閱讀數(shù)據(jù)。對類目進行按字母,次數(shù)或數(shù)值大小進行排序

image.png

4、數(shù)據(jù)模糊化

確保數(shù)據(jù)不會因為設(shè)計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數(shù)據(jù)

image.png

5、耗費讀者更多的精力

要通過輔助的圖形元素來使數(shù)據(jù)更易于理解,比如在散點圖中增加趨勢線

image.png

6、錯誤呈現(xiàn)數(shù)據(jù)

確保任何呈現(xiàn)都是準(zhǔn)確的,比如,氣泡圖的大小應(yīng)該跟數(shù)值一樣,不要隨便標(biāo)注

image.png

7、在熱圖中使用不同顏色

一些顏色比其他顏色突出,賦予了數(shù)據(jù)不必要的重元素。反而你應(yīng)該使用單一顏色,然后通過顏色的深淺來表達

image.png

8、柱狀過寬或過窄

柱子與柱子之間的間隔最好調(diào)整為寬的1/2

image.png

9、數(shù)據(jù)對比困難

對比是呈現(xiàn)差異的有效方式,但如果你的讀者不易對比時,效果就大打折扣了。確保數(shù)據(jù)的呈現(xiàn)方式一致,可以讓你的讀者對比

image.png

10、使用三維圖

盡管這些圖看來讓人振奮,但3D圖也容易分散預(yù)期和擾亂數(shù)據(jù),堅持2D是王道

image.png

七、進階-數(shù)值可視化TIPS

數(shù)值可視化的本質(zhì)就是用各種視覺屬性來表達數(shù)據(jù)值的大小。視覺屬性有這么幾類:位置、長短、面積、顏色。對應(yīng)視覺設(shè)計的點,線、面和色值。

單個數(shù)據(jù)的可視化

其可視化的核心思想在于根據(jù)上下文用擬物的方式,將其與我們現(xiàn)世界中數(shù)值的事物聯(lián)系在一起。

1. 僅將數(shù)字形象化

如果是奔跑的速度15km/h,那么可以畫一個運動員跑步的圖來表達這個數(shù)字。如果是奔跑的速度70km/h,那么就可以畫一只獵豹奔跑,通過模糊的背景來表達奔跑的速度快。如果要描述山的高度5km,就可以畫以座聳入云霄的山,給人一種高山的直觀形象,更多的創(chuàng)意設(shè)計都可以圍繞想象展開

2. 對數(shù)字進行評價

汽車行駛的速度,分為慢速、中等和超速,如下左圖所示。在表達評價信息時,你需要根據(jù)背景展開聯(lián)想。比如說:降水量50毫米,我們可能想象到的就是用一個試管接了50毫米深的水。

一維表格數(shù)據(jù)可視化

image.png

一維表格如下圖所示,數(shù)據(jù)表格中只有一行或者一列數(shù)據(jù)。我們需要對數(shù)據(jù)可視化的目標(biāo)進行分析,跟進目標(biāo)可將數(shù)據(jù)分為以下幾類:

?強調(diào)絕對數(shù)值的數(shù)據(jù);

?強調(diào)趨勢的數(shù)據(jù);

?百分比數(shù)據(jù);

?不同類型的數(shù)據(jù)。

3.1 強調(diào)絕對數(shù)值的數(shù)據(jù)

3.1.1 柱狀圖

收入10000元的就是收入5000元的2倍,GDP一萬億就是五千億的兩倍,這種數(shù)據(jù)稱之為等比數(shù)據(jù)。柱狀圖的閱讀者一般視覺會被柱子本身所吸引,不會去注意縱軸的起點,用戶往往會默認柱子的長度代表絕對數(shù)值的大小。所以柱狀圖的縱軸的起點必須從零開始。

image.png

3.1.2 直方圖

直方圖數(shù)據(jù)本質(zhì)的區(qū)別在于表達連續(xù)的區(qū)間上數(shù)量的分布。統(tǒng)計學(xué)中,直方圖的縱軸要求是計數(shù)數(shù)據(jù),也就是說,直方圖是用于統(tǒng)計某個區(qū)間內(nèi)的對象個數(shù)。

3.1.3 柱狀圖變式:條形圖

條形圖還有一個很大的排版優(yōu)勢,能將文字和條形在一側(cè)顯示,能夠?qū)Ψ诸惛郊诱f明。在中國,如果不是因為排版的原因,請慎用這種橫向的條形圖。

3.1.4 柱狀圖變式:計數(shù)條形圖

3.1.5 柱狀圖變式:徑向柱狀圖、徑向條形圖、螺旋圖

為了適應(yīng)排版的區(qū)域,或者增加圖形的趣味性,會對柱形圖進行扭曲變形。

3.1.6 柱形圖變式:用擬物代替柱子

在平面設(shè)計,海報宣傳頁面中,一般會添加擬物的元素,使得數(shù)據(jù)的表達更加生動。其基本的思路都是圍繞著數(shù)據(jù)主體展開聯(lián)想,用擬物的對象代替柱子。

示例1:如果描述的是足球相關(guān)的內(nèi)容,那么可以用踢球的形象代替柱子。

示例2:如果描述的是星體相關(guān)的內(nèi)容,那么可以用星體的形象代替柱子。

示例3:如果描述的是男女差異,那么可以用男女的形象代替柱子。

示例4:如果是抽煙相關(guān)的數(shù)據(jù),正好用煙頭的形狀代替柱子。

示例5:如果是山的高度,那么可以用山的形態(tài)。

3.1.7 柱形圖變式:按某些維度展開重組設(shè)計

上一節(jié)中,用擬物代替柱子的思路仍然是在柱狀圖的框架下的。但是很多時候,甚至可以拋開柱狀圖的束縛,根據(jù)關(guān)鍵詞展開聯(lián)想。在聯(lián)想的過程中,我們只需要記住第一章中提到的數(shù)據(jù)可視化的本質(zhì):通過位置、長短、大小、顏色四個視覺元素來表示數(shù)據(jù)大小。

示例2:城市和省份PM2.5值(假設(shè)數(shù)據(jù))

這種數(shù)據(jù)只能以地點為關(guān)鍵詞展開,以地圖的方式呈現(xiàn)。

PM2.5是一個沒有形象的概念,所以可視化的時候,不太可能在PM2.5上面展開。那么這種數(shù)據(jù)只能以地點為關(guān)鍵詞展開,以地圖的方式呈現(xiàn)。

省份在地圖上本身就是一個形狀大小固定的面,可以通過顏色熱力圖來表示數(shù)值(下圖,左)。

示例3:各網(wǎng)站訪問量

例4:遷徙地圖

單個城市的遷徙圖的數(shù)據(jù)原型仍然是一維數(shù)組。以地圖為維度展開設(shè)計時,需要表達的是各個城市與北京的連線。連線的長短信息已經(jīng)被城市到北京的距離所用,于是只能用連線的顏色來表示數(shù)值。

3.2 強調(diào)趨勢的數(shù)據(jù)

3.2.2 折線圖的變式:曲線圖

3.2.3 折線圖的變式:均線圖

3.2.4 折線圖的變式:面積圖

3.2.5 折線圖的變式:股指走勢圖

3.3 百分比數(shù)據(jù)

一般來說,百分比的數(shù)據(jù)使用餅圖(或環(huán)形圖)的方式表達,這是最常規(guī)的。

環(huán)形圖與餅圖不同點在于環(huán)形圖可以將主題與圖更好地融合。

3.3.2 餅圖變式:將餅形轉(zhuǎn)化成對象擬物形態(tài)。

示例一:如果是描述人體的成分,那么可視化可以圍繞人形展開,將餅的形狀變成人的形狀。

示例二:如果你想描述各類行業(yè)人群占比,那么你可以考慮畫出100個人,各類行業(yè)的人用不用樣式的圖形,如左下圖所示;而當(dāng)你想描述各類槍殺案件槍支的來源,下右圖所示。

3.4 同一對象不同類型數(shù)據(jù)

八、信息可視化過程+方法(下)

STEP1:確定表意正確

“正確”是信息圖最基本的要求,所以這里首先要確保信息圖的內(nèi)容是正確的。

對于業(yè)務(wù)比較復(fù)雜難理解的產(chǎn)品,可以讓產(chǎn)品經(jīng)理先根據(jù)自己的理解畫一個圖,設(shè)計師和產(chǎn)品經(jīng)理進行溝通,確認雙方的理解是一致的。

STEP2:優(yōu)化展現(xiàn)形式

《淘寶技術(shù)這十年》里有一句話說的好“好的架構(gòu)圖充滿美感”。淘寶工程師用十年的時間證明了這件事。而其實不僅是技術(shù)架構(gòu)圖,好的流程圖、結(jié)構(gòu)圖、信息圖 等都充滿美感。

怎樣優(yōu)化信息圖的表達形式呢?如果是一個邏輯比較復(fù)雜的結(jié)構(gòu)圖,可以這樣:

雖然邏輯沒有錯誤,但是箭頭有交叉,看起來不美觀簡潔,理解起來也比較費勁

首先,從這個圖中找出一個最大的完整的事件,也就是圖中橙色的部分。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容