數(shù)據(jù)可視化--如何應(yīng)用這12種圖表

2021-8-5    資深UI設(shè)計者

怎樣設(shè)計圖表才能準(zhǔn)確傳達數(shù)據(jù)故事,設(shè)計的過程中需要注意什么?下面介紹這12種圖表是如何應(yīng)用的以及它們的優(yōu)缺點

圖表設(shè)計原則

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

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

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

2.提升用戶體驗

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

3.突出重點

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


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

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

1.氣泡圖

氣泡圖也是散點圖的一種,其擁有多元變量,除 X 軸和 Y 軸所代表的變量值外,每個氣泡的面積代表第三個值。

缺點:氣泡的大小是有限的,太多的氣泡會使圖表難以閱讀。

設(shè)計時需注意:

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

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


2.熱力圖

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

如何設(shè)計?

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

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

c. 使用合適的顏色: 強烈的顏色會導(dǎo)致視覺負擔(dān),難以區(qū)分輕重緩急。使用單色或相近色,并調(diào)整陰影以區(qū)分區(qū)域更好。

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

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


3.?;鶊D

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

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

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


4.華夫餅圖

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

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

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


5.矩形樹圖

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

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

缺點:此類圖表應(yīng)用不夠普遍,可能有大量用戶對這種圖表形式不太了解。


6.旭日圖

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

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

缺點:如果配色方案不正確,那么理解圖表就會變得困難。此外,過多的切片會使圖表擁擠且難以閱讀。


7.靶心圖

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

優(yōu)點:適用于指標(biāo)間比較分析,視覺上較為直觀;

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


8.熱詞云

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

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

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


9.河流圖

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

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

缺點:雖然看趨勢發(fā)展方向比較直觀,但是詳細的信息閱讀起來較為困難。


10. 瀑布圖

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

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

缺點:使用此圖表是只能表示過程的流程


11.儀表盤

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

優(yōu)點:儀表適用于間隔之間的比較。

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


12.甘特圖

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

優(yōu)點:適合快讀查看項目進度、狀態(tài)隨時間變化、項目流程等時間管理類信息

缺點:可查看整體情況,詳細細節(jié)還需進行具體標(biāo)注


總結(jié)

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



藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷    作者:胖kuan 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)






分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔