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

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

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

數(shù)據(jù)可視化的設(shè)計(jì)首先需要始終保持?jǐn)?shù)據(jù)的準(zhǔn)確性和完整性。通過使用清晰的標(biāo)簽、準(zhǔn)確的軸線等精準(zhǔn)的的展示數(shù)據(jù)，使數(shù)據(jù)時(shí)刻都是真實(shí)可信未修飾過的，不能為了修飾美化數(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ì)整體視覺進(jìn)行降噪處理。最大化數(shù)據(jù)信息的呈現(xiàn)比率并避免設(shè)計(jì)過多無關(guān)的圖形元素。應(yīng)用顏色促進(jìn)圖形的理解：標(biāo)簽、分類、突出顯示或度量；幫助用戶理解層次結(jié)構(gòu)、數(shù)據(jù)方向和關(guān)系。

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

下面介紹12種圖表，應(yīng)該根據(jù)什么樣的場景結(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. 選擇合適的氣泡大小，不可過大或者過小，太的氣泡容易遮擋到其他氣泡不便于選擇查看被遮擋的詳細(xì)數(shù)據(jù)；太小的氣泡難以選擇

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

2.熱力圖

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

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

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

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

c. 使用合適的顏色： 強(qiáng)烈的顏色會(huì)導(dǎo)致視覺負(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.桑基圖

桑基圖顯示了從一個(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í)間、選票等，但也可用于許多其他目的。通過連接流線可以直觀的區(qū)分變量的聚散關(guān)系。

缺點(diǎn)：桑基圖只能通過節(jié)點(diǎn)、連接和數(shù)值展示簡單的數(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)比例能夠更清楚地通過色塊面積表示。

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

5.矩形樹圖

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

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

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

6.旭日?qǐng)D

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

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

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

7.靶心圖

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

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

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

8.熱詞云

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

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

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

9.河流圖

河流圖是顯示指標(biāo)的大小或比例如何隨時(shí)間變化，“流線”的垂直寬度表示該實(shí)體的大小。可以通過使用固定比例查看所有指標(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ì)的信息閱讀起來較為困難。

10. 瀑布圖

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

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

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

11.儀表盤

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

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