超全面！一份詳盡實(shí)用的信息可視化繪制指南

編者按：今天這篇文章不僅介紹了6種常見(jiàn)可視化圖表的類(lèi)型，包括每種圖表的適用場(chǎng)景和優(yōu)劣勢(shì)分析，而且附上了10個(gè)簡(jiǎn)單好用的數(shù)據(jù)可視化使用小貼士和制作信息可視化的5個(gè)流程，特別實(shí)用，一起來(lái)學(xué)習(xí)。

我們常常迷失在數(shù)據(jù)中，紛繁復(fù)雜的數(shù)據(jù)讓我們無(wú)所適從?？梢暬鳛榻鉀Q這問(wèn)題的有效手段，通過(guò)視覺(jué)的方式讓數(shù)字易于理解。

數(shù)據(jù)可視化和信息可視化都是可視化的一種方式，數(shù)據(jù)可視化將數(shù)據(jù)庫(kù)中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元元素表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。

信息可視化，旨在把數(shù)據(jù)資料以視覺(jué)化的方式表現(xiàn)出。信息可視化是一種將數(shù)據(jù)與設(shè)計(jì)結(jié)合起來(lái)的圖片，有利于個(gè)人或組織簡(jiǎn)短有效地向受眾傳播信息的數(shù)據(jù)表現(xiàn)形式。

本文梳理了可視化相關(guān)內(nèi)容，并且根據(jù)數(shù)據(jù)平臺(tái)組同仁們?cè)诳梢暬?xiàng)目過(guò)程中使用經(jīng)驗(yàn)，總結(jié)一些可視化使用注意事項(xiàng)，與大家分享。

數(shù)據(jù)可視化的圖表類(lèi)型簡(jiǎn)介

數(shù)據(jù)可視化有很多既定的圖表類(lèi)型，下面我們分別來(lái)談?wù)勥@些圖表類(lèi)型，他們的適用場(chǎng)景，以及使用的優(yōu)勢(shì)和劣勢(shì)。

1. 柱狀圖

適用場(chǎng)景：它的適用場(chǎng)合是二維數(shù)據(jù)集（每個(gè)數(shù)據(jù)點(diǎn)包括兩個(gè)值x和y），但只有一個(gè)維度需要比較。
優(yōu)勢(shì)：柱狀圖利用柱子的高度，反映數(shù)據(jù)的差異。肉眼對(duì)高度差異很敏感，辨識(shí)效果非常好。
劣勢(shì)：柱狀圖的局限在于只適用中小規(guī)模的數(shù)據(jù)集。

2. 折線(xiàn)圖

適用場(chǎng)景: 折線(xiàn)圖適合二維的大數(shù)據(jù)集，尤其是那些趨勢(shì)比單個(gè)數(shù)據(jù)點(diǎn)更重要的場(chǎng)合。它還適合多個(gè)二維數(shù)據(jù)集的比較。
優(yōu)勢(shì)：容易反應(yīng)出數(shù)據(jù)變化的趨勢(shì)。

3. 餅圖

適用場(chǎng)景：適用簡(jiǎn)單的占比圖，在不要求數(shù)據(jù)精細(xì)的情況下可以適用。
劣勢(shì)：餅圖是一種應(yīng)該避免使用的圖表，因?yàn)槿庋蹖?duì)面積大小不敏感。

4. 漏斗圖

適用場(chǎng)景：漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長(zhǎng)、環(huán)節(jié)多的流程分析，通過(guò)漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說(shuō)明問(wèn)題所在。
優(yōu)勢(shì):能夠直觀地發(fā)現(xiàn)和說(shuō)明問(wèn)題所在。在網(wǎng)站分析中，通常用于轉(zhuǎn)化率比較，它不僅能展示用戶(hù)從進(jìn)入網(wǎng)站到實(shí)現(xiàn)購(gòu)買(mǎi)的最終轉(zhuǎn)化率，還可以展示每個(gè)步驟的轉(zhuǎn)化率。
劣勢(shì):單一漏斗圖無(wú)法評(píng)價(jià)網(wǎng)站某個(gè)關(guān)鍵流程中各步驟轉(zhuǎn)化率的好壞。

6. 雷達(dá)圖

適用場(chǎng)景：雷達(dá)圖適用于多維數(shù)據(jù)（四維以上），且每個(gè)維度必須可以排序。但是，它有一個(gè)局限，就是數(shù)據(jù)點(diǎn)最多6個(gè)，否則無(wú)法辨別，因此適用場(chǎng)合有限。
劣勢(shì)：需要注意的時(shí)候，用戶(hù)不熟悉雷達(dá)圖，解讀有困難。使用時(shí)盡量加上說(shuō)明，減輕解讀負(fù)擔(dān)。

數(shù)據(jù)可視化使用小貼士

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

（最好的做法是將份額最大的那部分放在12點(diǎn)方向，順時(shí)針?lè)胖玫诙蠓蓊~的部分，以此類(lèi)推。）

2. 在線(xiàn)狀圖中使用虛線(xiàn)

（虛線(xiàn)會(huì)讓人分心，用實(shí)線(xiàn)搭配合適的顏色更容易區(qū)分。）

3. 數(shù)據(jù)被遮蓋

（確保數(shù)據(jù)不會(huì)因?yàn)樵O(shè)計(jì)而丟失或被覆蓋。例如在面積圖中使用透明效果來(lái)確保用戶(hù)可以看到全部數(shù)據(jù)。）

4. 耗費(fèi)用戶(hù)更多的精力

（通過(guò)輔助的圖形元素來(lái)使數(shù)據(jù)更易于理解，比如在散點(diǎn)圖中增加趨勢(shì)線(xiàn)。）

5. 柱狀過(guò)寬或過(guò)窄

（經(jīng)過(guò)調(diào)研，柱子的間隔最好調(diào)整為寬的1/2。）

6. 數(shù)據(jù)對(duì)比困難

（選擇合適的圖表，讓數(shù)據(jù)對(duì)比更明顯直接。上圖的數(shù)據(jù)作用是為了比較，顯然，柱狀圖比餅圖在視覺(jué)上更易于比較。）

7. 錯(cuò)誤呈現(xiàn)數(shù)據(jù)

（確保任何呈現(xiàn)都是準(zhǔn)確的，比如，上圖氣泡圖的面積大小應(yīng)該跟數(shù)值一樣。）

8. 不要過(guò)分設(shè)計(jì)

（清楚標(biāo)明各個(gè)圖形表示的數(shù)據(jù)，避免用與主要數(shù)據(jù)不相關(guān)的顏色，形狀干擾視覺(jué)。）

9. 數(shù)據(jù)沒(méi)有很好歸類(lèi)，沒(méi)有重點(diǎn)區(qū)分

（將同類(lèi)數(shù)據(jù)歸類(lèi)，簡(jiǎn)化色彩，幫助用戶(hù)更快理解數(shù)據(jù)。上圖的第一張沒(méi)有屬于同類(lèi)型手機(jī)中不同系統(tǒng)進(jìn)行顏色上的歸類(lèi)，從而減少了比較的作用。下圖就通過(guò)藍(lán)色系很好的把iPhone,Android,WP版歸為一類(lèi)，很好的與iPad版，其他比較。）

10. 誤導(dǎo)用戶(hù)的圖表

（要客觀反映真實(shí)數(shù)據(jù)，縱坐標(biāo)不能被截?cái)?，否則視覺(jué)感受和實(shí)際數(shù)據(jù)相差很大。左圖的數(shù)據(jù)起始點(diǎn)被截?cái)鄰?0開(kāi)始。）

信息可視化案例

信息可視化囊括了數(shù)據(jù)可視化，信息圖形，知識(shí)可視化，科學(xué)可視化，以及視覺(jué)設(shè)計(jì)方面的所有發(fā)展與進(jìn)步。下面是信息可視化的案例分享。

(上圖為關(guān)系網(wǎng)——基于60000封電子郵件存檔數(shù)據(jù)，用不同顏色深度的線(xiàn)條呈現(xiàn)了地址簿中用戶(hù)和個(gè)體之間的關(guān)系，比如回復(fù)、發(fā)送、抄送。)

（上圖通過(guò)數(shù)據(jù)化的比較，用變形的柱狀圖等圖形，形象的展示了不同國(guó)家老師的收入水平，社會(huì)包括學(xué)生和公眾對(duì)其的尊重度。）

如何制作信息可視化？

第一步：確定表意正確明確信息圖表達(dá)內(nèi)容，確定最主要的表現(xiàn)內(nèi)容。

第二步：優(yōu)化展現(xiàn)形式內(nèi)容正確還不夠，還要易懂。我們需要在這個(gè)步驟里尋找信息圖最優(yōu)表現(xiàn)形式，讓讀者 一目了然，降低理解難度。

第三步：探索視覺(jué)風(fēng)格在探索視覺(jué)風(fēng)格時(shí)要注意抓大放小，先定下來(lái)最主要模塊的風(fēng)格，再做延展。

第四步：完善細(xì)節(jié)視覺(jué)風(fēng)格確定后，可根據(jù)需要添加、完善細(xì)節(jié)。

第五步：風(fēng)格延展“一致”的視覺(jué)設(shè)定有助于用戶(hù)理解，也能更好的提升品牌形象。所以主風(fēng)格確定后，我們需要把它延展到其它有需要的頁(yè)面上。

以上是分享了數(shù)據(jù)可視化和信息可視化相關(guān)內(nèi)容，不過(guò)信息可視化和數(shù)據(jù)可視化是兩個(gè)容易混淆的概念，基于數(shù)據(jù)生成的數(shù)據(jù)可視化和信息可視化這兩者在現(xiàn)實(shí)應(yīng)用中非常接近，并且有時(shí)能夠互相替換使用。但是這兩者其實(shí)是不同的，數(shù)據(jù)可視化是指那些用程序生成的圖形圖像，這個(gè)程序可以被應(yīng)用到很多不同的數(shù)據(jù)上。

信息可視化是指為某一數(shù)據(jù)定制的圖形圖像，它往往是設(shè)計(jì)者手工定制的，只能應(yīng)用在那個(gè)數(shù)據(jù)中。信息可視化的代表特征：具體化的，自解釋性的和獨(dú)立的。為了滿(mǎn)足這些特征，這個(gè)圖是需要手工定制的。 并沒(méi)有任何一個(gè)可視化程序能夠基于任一數(shù)據(jù)生成這樣具體化的圖片并在上面標(biāo)注所有的解釋性文字。

數(shù)據(jù)可視化則是普適的，比如平行坐標(biāo)圖并不因?yàn)閿?shù)據(jù)的不同而改變自己的可視化設(shè)計(jì)?？梢暬膹?qiáng)大的普適性能夠使用戶(hù)快速應(yīng)用某種可視化技術(shù)在一些新的數(shù)據(jù)上，并且通過(guò)可視化結(jié)果圖像理解新數(shù)據(jù)，與針對(duì)已知特定數(shù)據(jù)進(jìn)行信息可視化設(shè)計(jì)繪制相比，用戶(hù)更像是通過(guò)對(duì)數(shù)據(jù)進(jìn)行可視化的應(yīng)用來(lái)學(xué)習(xí)和挖掘數(shù)據(jù)，而普適性的數(shù)據(jù)可視化技術(shù)本身并沒(méi)有解釋數(shù)據(jù)的功能。

（感謝數(shù)據(jù)平臺(tái)組同仁們對(duì)此文章的貢獻(xiàn)，感謝魏茜璐的視覺(jué)配圖。）

【優(yōu)秀專(zhuān)題頁(yè)速成三部曲】

Step 1：搞定標(biāo)題文字！實(shí)戰(zhàn)好文一篇！
《經(jīng)典教程！商業(yè)BANNER設(shè)計(jì)實(shí)戰(zhàn)：標(biāo)題文字篇》

Step 2：搞定設(shè)計(jì)創(chuàng)意！網(wǎng)易高手實(shí)例教學(xué)！
《高手教你做BANNER！如何把BANNER做得傳情達(dá)意》

Step 3：搞定效率！專(zhuān)題圖的速成技巧！
《編輯也能快速做出漂亮BANNER！專(zhuān)題頭圖的秘密武器》

原文地址：jdc.jd

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量160萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com