Web端設計語言|數(shù)據(jù)可視化(下)

2 評論 442 瀏覽 1 收藏 20 分鐘

本文介紹了數(shù)據(jù)可視化的基本原則、圖表類型、色板選擇和使用建議,旨在幫助讀者系統(tǒng)地理解和應用數(shù)據(jù)可視化,提升信息傳達的效率。

5. 提示信息

提示信息,是指當鼠標懸?;蚴种更c按在數(shù)據(jù)圖形上時,以交互的方式展示 懸停坐標點 的位置及對應數(shù)據(jù),比如該點的數(shù)據(jù)單位、數(shù)值、顏色形狀、分類等,幫助用戶快速獲取圖形的關(guān)鍵數(shù)據(jù)。

當你希望數(shù)據(jù)可視化作品對用戶的操作有所反饋時,提示信息就可以發(fā)揮作用。

類型

提示信息的展現(xiàn)形式有4種。按不同的圖表類型,分為:懸浮、固定位置、固定在軸上、固定在圖形上。

懸浮

鼠標懸停數(shù)據(jù)列,提示信息以浮層的形式展示 懸停列坐標點 的位置及 X/Y 軸對應數(shù)據(jù)。

優(yōu)點:提示信息離數(shù)據(jù)點較近,便于觀察數(shù)據(jù)點的詳細信息。缺點:提示浮層會遮擋部分數(shù)據(jù)圖形,影響觀察。

使用場景:建議在寬度/空間富裕、圖表功能復雜的 Web 電腦端使用;柱狀圖、條形圖、折線圖、餅圖、環(huán)形圖均可使用,使用場景較為廣泛。

固定位置

鼠標懸停數(shù)據(jù)列,提示信息與圖例組合顯示,顯示區(qū)域固定。(如下圖,提示信息固定顯示在圖表右上角)

優(yōu)點:不會遮擋數(shù)據(jù)圖形,既能縱觀全局,又能查看局部信息。缺點:數(shù)據(jù)點離提示信息較遠,視線來回跳動,易視覺疲勞;懸停的交互及數(shù)值變化容易被忽視;和圖例的篩選功能可能互斥。

使用場景:常用于寬度/空間有限、使用浮層提示易遮擋大部分數(shù)據(jù)圖形的移動端,也可用于Web電腦端;多用于折線圖中。

固定在軸上

當鼠標懸停數(shù)據(jù)圖形關(guān)鍵點時,提示信息會顯示在對應的X/Y軸上。

優(yōu)點:能實時、準確地反映單個數(shù)據(jù)點的具體信息。缺點:提示信息會遮蓋軸標簽;只能提示單個點的信息,不能同時提示同一列多個數(shù)據(jù)點的信息;提示信息離數(shù)據(jù)點距離較遠。

使用場景:多用于連續(xù)/時間軸標簽抽樣顯示的折線圖中(如某個時間周期下的走勢折線圖);不適合用于指向明顯的柱狀圖/條形圖中,也不適合用于極坐標系下的餅圖/環(huán)形圖中。

固定在圖形上

當鼠標懸停在單個數(shù)據(jù)圖形上時,提升信息顯示于圖表固定區(qū)域內(nèi)。鼠標懸停在不同的數(shù)據(jù)圖形上,提示信息的內(nèi)容會發(fā)生對應的切換。

優(yōu)點:所見即所得。缺點:顯示區(qū)域有限,提示文字過長會引起顯示問題。

使用場景:用于Web 電腦端、移動端均可;用于環(huán)形圖中。

6. 圖例

圖例是對數(shù)據(jù)圖形的補充說明,它以不同的形狀、顏色、文字等表示不同數(shù)據(jù)列。用戶通過點擊圖例可以顯示或隱藏該數(shù)據(jù)列,對數(shù)據(jù)列進行篩選、對比。

當出現(xiàn)多個分類的數(shù)據(jù)列時,會通過圖例來對不同的數(shù)據(jù)列進行區(qū)分、說明,以降低圖表的理解難度。

同一個數(shù)據(jù)圖表中只有一個數(shù)據(jù)列時,數(shù)據(jù)信息已足夠清晰明確,無需圖例進行補充說明。

位置

一般位于數(shù)據(jù)圖表卡片的右上方、右方、下方。其中右上方對數(shù)據(jù)圖表的干擾最小、適用場景最多。

類型

根據(jù)數(shù)據(jù)類型不同,分為連續(xù)型圖例和分類型圖例;根據(jù)狀態(tài)不同,圖例可以被設置為靜態(tài)或可交互態(tài)。

帶交互態(tài)的分類圖例,在柱狀圖、條形圖、折線圖、餅圖、環(huán)形圖中最為常見,用法等也容易理解。

靜態(tài)、帶交互態(tài)的連續(xù)圖例的使用(包括其對應的數(shù)據(jù)圖表)則有一定的專業(yè)度及難度。(連續(xù)圖例暫不做深度分析)

使用建議

分類圖例中的圖形是數(shù)據(jù)圖形的縮影。不同的數(shù)據(jù)圖表,對應的圖例也不同。

7. 數(shù)據(jù)圖形

人在視覺上對圖形的獲取及理解效率遠高于文字,區(qū)別于表格和文本信息,數(shù)據(jù)圖形能更有效的表達數(shù)據(jù)特性、傳遞映射關(guān)系。

位置

數(shù)據(jù)圖形是圖表中最重要的組成部分,位于數(shù)據(jù)圖表的中部,坐標軸的內(nèi)部。圖表的構(gòu)成元素均圍繞 數(shù)據(jù)圖形 進行可視化數(shù)據(jù)表達。

類型

按照基礎(chǔ)圖表類型,圖形可分為:柱條、折線、面積、餅/環(huán)、散點、氣泡。

使用建議

  

03 可視化色板

可視化圖表中往往不止一組數(shù)據(jù),當我們需要對比多分類、多分組數(shù)據(jù)時,單一的配色便不能滿足統(tǒng)計需求。因此,基于數(shù)據(jù)可視化原則,我們總結(jié)了一套可視化基礎(chǔ)色板。

首先,色板要有豐富的配色用以區(qū)分信息層級,使得圖表在操作指引、交互反饋上有一定的準確性。其次,可視化色板顏色的灰度需對比明顯,使得圖表對色盲、色弱人士有更好的包容性。

1.0 的可視化色板暫只研究基礎(chǔ)色板部分,其他的色板模式后期進行優(yōu)化深入。

1. 基礎(chǔ)色板

數(shù)據(jù)可視化色板是在基礎(chǔ)色板以及中性色板的基礎(chǔ)上,融合「有效、清晰、準確、美」的原則產(chǎn)生的。

色板以 Dreawer Design 深海藍為起始主色,根據(jù)不同數(shù)據(jù)類型、使用場景整理了——基礎(chǔ)10色、擴展20色,以滿足不同數(shù)據(jù)圖表的需求。

2. 使用建議

顏色不宜過多

圖形顏色過多會給用戶一種眼花繚亂的感覺,不利于數(shù)據(jù)圖表信息的有效傳達,這違背了清晰、準確的可視化原則。

根據(jù)米勒定律(7±2 法則),數(shù)據(jù)圖形的顏色盡量控制在5個以內(nèi),最多不要超過9個。若實際操作中無法避免顏色過多的問題,則可通過圖例進行信息篩選,來達到對比清晰的目的。

配合圖例

僅靠顏色區(qū)分不同的數(shù)據(jù)列是不夠的,我們需要用圖例提示不同顏色代表的數(shù)據(jù)類別。

無障礙設計

色板顏色的灰度需對比明顯,顏色排列需明暗交替,這樣色盲、色弱人士便可根據(jù)不同的明暗度來區(qū)分不同顏色。

04 可視化圖表

目前我們工作中經(jīng)常遇到的數(shù)據(jù)可視化,大多數(shù)是制作數(shù)據(jù)圖表。數(shù)據(jù)圖表可以使復雜的統(tǒng)計數(shù)字簡單化、通俗化、形象化,使人一目了然,便于理解和比較。因此,數(shù)據(jù)圖表在統(tǒng)計資料整理與分析中占有重要地位,并得到廣泛應用。

目前 1.0 版本的可視化圖表主要從最常用的柱狀圖、條形圖、折線圖、餅圖闡述,后期體系完善后再做增改。

1. 柱狀圖

柱狀圖是用豎直的柱子來展現(xiàn)數(shù)據(jù),一般用于展現(xiàn)橫向的數(shù)據(jù)變化及對比。區(qū)別于直方圖,柱狀圖無法顯示數(shù)據(jù)在一個區(qū)間內(nèi)的連續(xù)變化趨勢。

使用垂直的長短柱子對比數(shù)值大小,其中一個軸表示需要對比的分類維度;另一個軸代表相應的數(shù)值。柱狀圖又分為:基礎(chǔ)柱狀圖、分組柱狀圖、堆疊柱狀圖。

基礎(chǔ)柱狀圖

基礎(chǔ)柱狀圖是最常見、最簡單的柱狀圖。

使用建議:基礎(chǔ)柱狀圖中,分類建議在 10 個左右,最多不超過 20 個,分類過多不利于數(shù)據(jù)對比和觀察分析。如:右圖分類過多會影響X軸標簽的展示及閱讀,同時也不利于觀察單個柱子對應的Y軸數(shù)值,只能看到數(shù)值變化的大致波動。

分組柱狀圖

當使用者需要在同一個軸上顯示各個分類下不同的分組時,需要用到分組柱狀圖。用于對比:同一分組內(nèi),不同分類的大??;不同分組間,相同分類的大小。每個分組中的柱子使用不同的顏色區(qū)別各個分類,各個分組之間要保持間隔。在分組柱狀圖中,通常沿垂直軸(Y軸)組織數(shù)值,而沿水平軸(X軸)組織類別。

使用建議:分組個數(shù)不要超過 12 個,每個分組下的分類不要超過 6 個;否則會導致單個柱子過多、過密,從而影響圖表的可讀性。

堆疊柱狀圖

堆疊柱形圖是一種用來分解整體、比較各部分的圖表。它是基礎(chǔ)柱狀圖的擴展,不同的是,基礎(chǔ)柱狀圖的數(shù)據(jù)值為并行排列,堆疊柱圖則是一個個疊加起來的。

它可以對比每個分組的總量,也可以對比某一分組中不同分類的大小及占比,這些子分類一般用不同的顏色來指代。

使用建議:通常每個組包含 2 到 3 個分類即可,最多不要超過 6 個,太多的子分類數(shù)據(jù)會讓人眼花繚亂。

2. 條形圖

條形圖是用橫向的柱子來展現(xiàn)數(shù)據(jù),一般用于縱向的數(shù)據(jù)排名及對比。其中一個軸表示需要對比的分類維度,另一個軸代表相應的數(shù)值。

條形圖分為:基礎(chǔ)條形圖、分組條形圖、堆疊條形圖。

基礎(chǔ)條形圖

分類名稱較長、分類過多時,用條形圖展示數(shù)據(jù)更合適。

在 Web 電腦端頁面中,頁面的寬度是固定的。若分類名稱較長,柱狀圖會因為空間問題而傾斜顯示,或省略標簽名稱,影響閱讀;若分類過多,柱狀圖會因為柱子過細、分布過密,而降低識別度。

使用建議:條形統(tǒng)計圖表,整體高度盡量控制在一屏內(nèi)(高度<=700px),便于觀察數(shù)據(jù)。

分組條形圖

分組條形圖,又叫簇狀條形圖,是一種以不同寬度的橫向柱子為變量的統(tǒng)計圖表。用于對比:同一分組內(nèi),不同分類的大??;不同分組間,相同分類的大小。

每個分組中的柱子使用不同的顏色區(qū)別各個分類,各個分組之間要保持間隔。在分組柱狀圖中,通常沿垂直軸(Y軸)組織類別,而沿水平軸(X軸)組織數(shù)值。

使用建議:分組個數(shù)不要超過 12 個,每個分組下的分類不要超過 6 個;分組條形統(tǒng)計圖表,整體高度盡量控制在一屏內(nèi)(高度 <= 700px),便于觀察數(shù)據(jù)。

堆疊條形圖

堆疊條形圖將每個橫向柱子進行分割,以顯示相同類型下各個數(shù)據(jù)的大小情況。

它可以對比每個分組的總量,也可以對比某一分組中不同分類的大小及占比,這些子分類一般用不同的顏色來指代。

使用建議:通常每個組包含 2 到 3 個分類即可,最多不要超過 6 個,太多的子分類數(shù)據(jù)會讓人眼花繚亂。

3. 折線圖

折線圖是通過線條的波動(上升或下降)來顯示連續(xù)數(shù)據(jù)隨時間或有序類別變化的圖表,常用于反映數(shù)據(jù)隨著時間推移而產(chǎn)生的變化趨勢。

使用場景:橫軸為連續(xù)類別(如時間)且注重變化趨勢、預測,適用于折線圖。

使用建議:折線數(shù)量一般控制在 5 個以內(nèi),最多不要超過 7 個。

下圖為折線圖與柱狀圖的使用場景對比。

左圖是 2020 年商品營業(yè)額在 1 月到 10 月這個時間段的數(shù)值變化及趨勢分析,用折線圖表示;右圖是 2020 年不同品類商品營業(yè)額的數(shù)值對比,用柱狀圖表示。

曲線圖

曲線圖是折線圖的衍生。用平滑的曲線(而非直線)將折線圖中的數(shù)據(jù)點連接起來,就形成了曲線圖。

視覺上,曲線圖比折線圖更流暢、自然。

4. 餅圖

餅圖是用圓形及圓內(nèi)扇形的面積來表示數(shù)值大小的圖形,主要用于表示總體中各組成部分所占的比例。一般通過角度(或面積)來衡量各部分比例的大小不同。

使用建議:扇形分類盡量控制在 5 個以內(nèi),最多不要超過 9 個;當各部分占比差別不大時,可以用柱狀圖表示。

環(huán)形圖

環(huán)形圖,又叫甜甜圈圖,是挖去餅圖中間的部分所構(gòu)成的圖形。與餅圖不同的是,環(huán)形圖通過各個弧形的長度來衡量各部分的大小。

由于環(huán)形圖中部挖空,它的空間利用率會更高,我們可以在空心區(qū)域顯示圖表的標題、數(shù)值等關(guān)鍵信息。

使用建議:環(huán)形分類盡量控制在5個以內(nèi),最多不要超過9個;當各部分弧長差別不大時,可以用柱狀圖表示。

最后

通過總結(jié)數(shù)據(jù)可視化的原則、圖表、色板等方面的內(nèi)容,將零散的知識點串聯(lián)到一起,希望能讓大家對數(shù)據(jù)可視化有一個系統(tǒng)性的認識~

本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】,微信公眾號:【Clip設計夾】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. Web端設計和數(shù)據(jù)可視化太酷了!學完感覺自己能做出超炫界面,技術(shù)力up up!??????

    來自遼寧 回復
  2. 這篇文章對數(shù)據(jù)可視化的介紹太全面了,從圖表類型到色板選擇,再到具體的設計建議,簡直是數(shù)據(jù)可視化的實用指南!

    來自北京 回復