圖表設(shè)計(jì)原則

怎樣設(shè)計(jì)圖表才能準(zhǔn)確傳達(dá)數(shù)據(jù)故事，設(shè)計(jì)的過(guò)程中需要注意什么？總結(jié)了幾個(gè)設(shè)計(jì)圖表的基本原則

1.確保準(zhǔn)確性

數(shù)據(jù)可視化的設(shè)計(jì)首先需要始終保持?jǐn)?shù)據(jù)的準(zhǔn)確性和完整性。通過(guò)使用清晰的標(biāo)簽、準(zhǔn)確的軸線等精準(zhǔn)的的展示數(shù)據(jù)，使數(shù)據(jù)時(shí)刻都是真實(shí)可信未修飾過(guò)的，不能為了修飾美化數(shù)據(jù)而歪曲混淆信息。

2.提升用戶體驗(yàn)

為用戶瀏覽數(shù)據(jù)提供上下文標(biāo)識(shí)有助于用戶快速感知數(shù)據(jù)，設(shè)計(jì)時(shí)要考慮到用戶現(xiàn)有的心智模型——這些心智模型可能由廣泛使用的工具塑造而成，創(chuàng)建出色的可視化體驗(yàn)可使用標(biāo)志性的功能引導(dǎo)用戶找到他們需要的東西。以幫助感知快速響應(yīng)的系統(tǒng)。

3.突出重點(diǎn)

減少認(rèn)知負(fù)擔(dān)使用戶專注于主要的信息上，需要對(duì)整體視覺(jué)進(jìn)行降噪處理。最大化數(shù)據(jù)信息的呈現(xiàn)比率并避免設(shè)計(jì)過(guò)多無(wú)關(guān)的圖形元素。應(yīng)用顏色促進(jìn)圖形的理解：標(biāo)簽、分類、突出顯示或度量；幫助用戶理解層次結(jié)構(gòu)、數(shù)據(jù)方向和關(guān)系。

12種圖表應(yīng)用方式

下面介紹12種圖表，應(yīng)該根據(jù)什么樣的場(chǎng)景結(jié)合哪種數(shù)據(jù)結(jié)構(gòu)使用，以及是否存在可替代的方案等。其中有幾種是在實(shí)際使用中并不常用的類型，大眾對(duì)這類圖表的理解并不多，我們只有在理解圖表的含義及功能才可快速應(yīng)用在設(shè)計(jì)中。

1.氣泡圖

氣泡圖也是散點(diǎn)圖的一種，其擁有多元變量，除 X 軸和 Y 軸所代表的變量值外，每個(gè)氣泡的面積代表第三個(gè)值。

缺點(diǎn)：氣泡的大小是有限的，太多的氣泡會(huì)使圖表難以閱讀。

設(shè)計(jì)時(shí)需注意：

a. 選擇合適的氣泡大小，不可過(guò)大或者過(guò)小，太的氣泡容易遮擋到其他氣泡不便于選擇查看被遮擋的詳細(xì)數(shù)據(jù)；太小的氣泡難以選擇

b. 不要使用奇怪的形狀，均采用同一種氣泡類型僅通過(guò)顏色做區(qū)分即可；無(wú)需做太多造型，多種造型結(jié)合不夠直觀難以區(qū)分種類

2.熱力圖

熱力圖用于指示區(qū)域內(nèi)每個(gè)點(diǎn)的權(quán)重。除了將地圖作為背景層外，還可以使用其他圖像。熱力圖中的顏色通常與密度掛鉤，每個(gè)顏色代表一個(gè)數(shù)據(jù)區(qū)間，通過(guò)使用顏色的對(duì)比來(lái)表示地理區(qū)域或數(shù)據(jù)列表的密度分布信息。

如何設(shè)計(jì)？

a. 使用簡(jiǎn)單的地圖輪廓： 少量的留白輪廓可適當(dāng)區(qū)分個(gè)區(qū)域邊界，大量留白輪廓使邊界過(guò)于清晰使各區(qū)域有割裂感的會(huì)分散注意力。

b. 使用簡(jiǎn)單的圖案：圖案過(guò)多容易干擾閱讀，盡量不使用圖案，如果必須要用使用1-2種即可，過(guò)多則難以駕馭；

c. 使用合適的顏色： 強(qiáng)烈的顏色會(huì)導(dǎo)致視覺(jué)負(fù)擔(dān)，難以區(qū)分輕重緩急。使用單色或相近色，并調(diào)整陰影以區(qū)分區(qū)域更好。

d. 選擇合適的數(shù)據(jù)范圍：數(shù)據(jù)范圍區(qū)間應(yīng)該是均等的，而超出范圍的數(shù)據(jù)可用 +/- 表示。

這些是設(shè)計(jì)熱力圖時(shí)需要注意的地方，適用于大多數(shù)情況，當(dāng)然這也不能作為絕對(duì)的標(biāo)準(zhǔn)，需要具體情況具體分析。

3.桑基圖

?；鶊D顯示了從一個(gè)指標(biāo)到其子級(jí)指標(biāo)的流量及比例。在流程的每個(gè)階段，節(jié)點(diǎn)可以組合或分割路徑。兩端的節(jié)點(diǎn)寬度顯示其數(shù)值大小，因此節(jié)點(diǎn)越寬，占比越大?？捎糜谪?cái)務(wù)、管理和能源分析或代表產(chǎn)品的生命周期。這種類型的可視化可用于描述實(shí)體從源頭到終點(diǎn)的流程

優(yōu)點(diǎn)：對(duì)于文字流尤其有用：金錢、貨物、時(shí)間、選票等，但也可用于許多其他目的。通過(guò)連接流線可以直觀的區(qū)分變量的聚散關(guān)系。

缺點(diǎn)：?；鶊D只能通過(guò)節(jié)點(diǎn)、連接和數(shù)值展示簡(jiǎn)單的數(shù)據(jù)故事。不能從中推導(dǎo)出更復(fù)雜的關(guān)系。

4.華夫餅圖

華夫餅圖是一個(gè)非常有趣的圖表，通常由100 個(gè)方塊組成一個(gè)整體，因此它可以根據(jù)指標(biāo)與整體的關(guān)系進(jìn)行著色或填充顯示指標(biāo)的占比情況，就像餅圖一樣，同時(shí)它也適合顯示單個(gè)百分比。

優(yōu)點(diǎn)：它能夠顯示整體的各個(gè)部分并比較單個(gè)百分比的多樣性，指標(biāo)比例能夠更清楚地通過(guò)色塊面積表示。

缺點(diǎn)：涉及太多指標(biāo)時(shí)顏色區(qū)分變多使展示變得過(guò)于復(fù)雜，無(wú)法直觀看出單個(gè)指標(biāo)的面積結(jié)構(gòu)，因此適合用在只有少數(shù)指標(biāo)的展示

5.矩形樹(shù)圖

當(dāng)畫(huà)面中需要多次出現(xiàn)餅圖或環(huán)形圖展示指標(biāo)間占比情況時(shí)，重復(fù)元素過(guò)多用戶閱讀時(shí)更加如意感覺(jué)到乏味，此時(shí)可以采用矩形樹(shù)圖展示占比，通過(guò)使用色塊面積比例來(lái)區(qū)分指標(biāo)間占比大小情況。

優(yōu)點(diǎn)：使用區(qū)域空間而不是角度顯示數(shù)據(jù)，當(dāng)類別超過(guò)五個(gè)時(shí)（避免有時(shí)難以標(biāo)記的餅圖）以及可視化類別內(nèi)的子類別，樹(shù)形圖比餅圖更有用。

缺點(diǎn)：此類圖表應(yīng)用不夠普遍，可能有大量用戶對(duì)這種圖表形式不太了解。

6.旭日?qǐng)D

旭日?qǐng)D是樹(shù)圖的一種替代方案，采用圓環(huán)形式表示分層數(shù)據(jù)信息。層次結(jié)構(gòu)從內(nèi)圈到外圈擴(kuò)散，其展示形式像太陽(yáng)一樣由中心向四周發(fā)散。圓環(huán)的每個(gè)指標(biāo)被切片對(duì)應(yīng)一個(gè)節(jié)點(diǎn)，圓心是根節(jié)點(diǎn)，在出現(xiàn)多個(gè)層級(jí)換結(jié)構(gòu)時(shí)通過(guò)圓心切換回上一層級(jí)。旭日?qǐng)D在用色上最好采用不同深淺的顏色來(lái)表示父子級(jí)結(jié)構(gòu)在色調(diào)上保持一致性，使用戶能夠直觀的看出層級(jí)間的關(guān)聯(lián)關(guān)系。

優(yōu)點(diǎn)：可以顯示層次流以及整個(gè)關(guān)系的一部分

缺點(diǎn)：如果配色方案不正確，那么理解圖表就會(huì)變得困難。此外，過(guò)多的切片會(huì)使圖表?yè)頂D且難以閱讀。

7.靶心圖

同樣是占比圖的一種，與常見(jiàn)餅圖不同之處在于，該圖的指標(biāo)間沒(méi)有關(guān)聯(lián)即占比百分?jǐn)?shù)相加不等于100，但又需要同時(shí)查看指標(biāo)的占比情況，因此需要采用這種形式進(jìn)行對(duì)比分析

優(yōu)點(diǎn)：適用于指標(biāo)間比較分析，視覺(jué)上較為直觀；

缺點(diǎn)：因?qū)盈B環(huán)形過(guò)多無(wú)法在圖表上加大量文字輔助展示

8.熱詞云

熱詞云是展示文本數(shù)據(jù)的可視化形式，由大量關(guān)鍵詞組成的云狀彩色圖形。通過(guò)關(guān)鍵詞的大小顏色等區(qū)分詞語(yǔ)的使用頻率以及重要性，可以快速幫助用戶感知最突出的關(guān)鍵詞。

優(yōu)點(diǎn)：能夠快速獲取關(guān)鍵詞信息，可通過(guò)熱詞快速檢索所需信息

缺點(diǎn)：因熱詞云需要大量的數(shù)據(jù)支撐，對(duì)數(shù)據(jù)依賴度高，如果數(shù)據(jù)過(guò)少效果則不明顯，不適合精確分析。

9.河流圖

河流圖是顯示指標(biāo)的大小或比例如何隨時(shí)間變化，“流線”的垂直寬度表示該實(shí)體的大小?？梢酝ㄟ^(guò)使用固定比例查看所有指標(biāo)的整體大小的變化；也可以使用相對(duì)比例以某一項(xiàng)指標(biāo)為參照目標(biāo)，其他指標(biāo)的值與此做對(duì)比；若所有指標(biāo)始終達(dá)到 100%呈現(xiàn)的效果類似于面積圖。

優(yōu)點(diǎn)：可查看新指標(biāo)的出現(xiàn)而其他指標(biāo)消退的速度，整體的趨勢(shì)發(fā)展?fàn)顟B(tài)比較直觀。

缺點(diǎn)：雖然看趨勢(shì)發(fā)展方向比較直觀，但是詳細(xì)的信息閱讀起來(lái)較為困難。

10. 瀑布圖

瀑布圖通過(guò)對(duì)初始值進(jìn)行多次加減運(yùn)算來(lái)呈現(xiàn)達(dá)成某個(gè)值的運(yùn)算過(guò)程。在瀑布圖中，需定義好顏色的含義，不同的顏色用于顯示不同的操作過(guò)程，例如綠色表示加法，紅色表示減法，藍(lán)色表示所有操作后收到的總值。這里起始值和最終值之間的所有值都是浮動(dòng)的。

優(yōu)點(diǎn)：快速查看在上一數(shù)據(jù)的基礎(chǔ)上當(dāng)前數(shù)據(jù)的變化情況

缺點(diǎn)：使用此圖表是只能表示過(guò)程的流程

11.儀表盤(pán)

儀表盤(pán)是一種物化圖表常用在時(shí)鐘、汽車儀表等，通過(guò)指針角度代表當(dāng)前數(shù)值進(jìn)度。它可以直觀地表示一個(gè)指標(biāo)的進(jìn)度或?qū)嶋H情況。一個(gè)儀表板僅能表示一種含義，若出現(xiàn)兩種含義的儀表盡量分開(kāi)展示，

優(yōu)點(diǎn)：儀表適用于間隔之間的比較。

缺點(diǎn)：不適合用在具有多個(gè)分量的數(shù)據(jù)結(jié)構(gòu)

12.甘特圖

甘特圖直觀地顯示了任務(wù)的時(shí)間區(qū)間、實(shí)際進(jìn)度以及與需求的比較。因此管理人員可以輕松了解項(xiàng)目的進(jìn)度情況。

優(yōu)點(diǎn)：適合快讀查看項(xiàng)目進(jìn)度、狀態(tài)隨時(shí)間變化、項(xiàng)目流程等時(shí)間管理類信息

缺點(diǎn)：可查看整體情況，詳細(xì)細(xì)節(jié)還需進(jìn)行具體標(biāo)注

總結(jié)

圖表的類型多種多樣，實(shí)際項(xiàng)目中使用何種圖表需要根據(jù)數(shù)據(jù)間的關(guān)系來(lái)決定，如果畫(huà)面出現(xiàn)同類型結(jié)構(gòu)關(guān)系的頻率過(guò)高想要增加畫(huà)面的趣味性減少閱讀的疲憊感可以通過(guò)改變圖表的顏色進(jìn)行區(qū)分，或者變換圖表類型，有部分圖表是可以替換使用的，例如：餅圖表示占比關(guān)系，可以換成南丁格爾玫瑰圖或環(huán)形圖，也可換成上文所提到過(guò)的華夫餅圖、矩形樹(shù)圖。因此在設(shè)計(jì)時(shí)可以不用太過(guò)于局限在圖表的結(jié)構(gòu)上，可以在其他方向進(jìn)行優(yōu)化。