數(shù)據(jù)可視化規(guī)范簡(jiǎn)介和構(gòu)成要素探討

郭志武

深圳市中醫(yī)院，518033 廣東 深圳

在大數(shù)據(jù)時(shí)代，數(shù)據(jù)分析與數(shù)據(jù)可視化已廣泛應(yīng)用于各行業(yè)，為管理與決策提供了有力的支持。數(shù)據(jù)可視化是將數(shù)據(jù)以圖、表和文字說(shuō)明等形式直觀地展現(xiàn)出來(lái)，便于閱讀者理解及洞察其中隱含的規(guī)律，獲取有價(jià)值的參考信息。數(shù)據(jù)可視化是數(shù)據(jù)分析結(jié)果的呈現(xiàn)形式，其效果對(duì)于數(shù)據(jù)分析結(jié)果的解讀與洞察至關(guān)重要。

目前，業(yè)界并未發(fā)布數(shù)據(jù)可視化的統(tǒng)一標(biāo)準(zhǔn)與規(guī)范，數(shù)據(jù)可視化在實(shí)際應(yīng)用中也存在許多爭(zhēng)議與分歧。鑒于此，一些組織和商業(yè)公司自行發(fā)布了關(guān)于數(shù)據(jù)可視化的規(guī)范或指南，用于產(chǎn)品設(shè)計(jì)及應(yīng)用指引。IBCS協(xié)會(huì)發(fā)布了國(guó)際商務(wù)交流標(biāo)準(zhǔn)(international business communication standards)，對(duì)設(shè)計(jì)報(bào)告、演示文稿、儀表板以及其中包含的圖表和表格的應(yīng)用提出了建議與規(guī)范[1]。Google于2019年6月發(fā)布了Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南，在數(shù)據(jù)可視化設(shè)計(jì)原則、圖標(biāo)類型與選擇、可視化樣式、動(dòng)態(tài)圖表與儀表板等方面提出了指引[2]。阿里巴巴于2016年發(fā)布了支付寶數(shù)據(jù)可視化規(guī)范，目前已更新為AntV螞蟻數(shù)據(jù)可視化解決方案，包括圖表分類與使用指引、設(shè)計(jì)原則以及一系列產(chǎn)品[3]。百度推出了開(kāi)源的數(shù)據(jù)可視化產(chǎn)品ECharts，并提出了數(shù)據(jù)可視化規(guī)范[4]。此外，一些商業(yè)公司(如Tableau)盡管沒(méi)有發(fā)布數(shù)據(jù)可視化規(guī)范，但其開(kāi)發(fā)的產(chǎn)品也遵循著內(nèi)部的規(guī)則與獨(dú)特的風(fēng)格；一些報(bào)刊雜志(如商業(yè)周刊、華爾街日?qǐng)?bào)、經(jīng)濟(jì)學(xué)人等)的圖表制作，具有其特有的樣式與配色，隱含了某種可視化規(guī)范。這些隱性的規(guī)范也具有一定的影響力。

本文重點(diǎn)介紹IBCS、Google以及AntV 3種數(shù)據(jù)可視化規(guī)范的主要內(nèi)容，并探討數(shù)據(jù)可視化規(guī)范的構(gòu)成要素。

1 數(shù)據(jù)可視化規(guī)范

1.1 IBCS

IBCS是一套應(yīng)用于商務(wù)交流及圖表設(shè)計(jì)的規(guī)則與建議標(biāo)準(zhǔn)，由IBCS協(xié)會(huì)管理及更新，目前版本為1.1版。IBCS協(xié)會(huì)成立于2014年，是一個(gè)非營(yíng)利的組織。IBCS包含了7類規(guī)則，35個(gè)小節(jié)，總共105條細(xì)則。

1.1.1IBCS的7類規(guī)則

7類規(guī)則的首字母為SUCCESS，規(guī)則含義和釋義見(jiàn)表1。7類規(guī)則又可被歸納為3個(gè)部分，概念規(guī)則(conceptual rules)包括SAY和STRUCTURE；感知規(guī)則(perceptual rules)包括EXPRESS、SIMPLIFY、CONDENSE和CHECK；語(yǔ)義規(guī)則(semantic rules)包括UNIFY。

表1 IBCS的7類規(guī)則

1.1.2IBCS常用的10條規(guī)則

IBCS 105條細(xì)則詳細(xì)闡述了不同場(chǎng)景、不同類型的數(shù)據(jù)可視化規(guī)則，提出了具體建議與要求。以下是IBCS常用的10條規(guī)則，稱為IBCS TOP TEN。

規(guī)則1：報(bào)告和演示文稿如要傳達(dá)信息，應(yīng)該將它們置于在每個(gè)幻燈片或報(bào)告頁(yè)面的頂部。

規(guī)則2：每個(gè)頁(yè)面、圖表或表格都應(yīng)具有一個(gè)唯一標(biāo)題。標(biāo)題應(yīng)該標(biāo)明組織、單位、度量和時(shí)間段。

規(guī)則3：時(shí)間和結(jié)構(gòu)是最重要的分析類型。時(shí)間按水平方向由左到右排布，結(jié)構(gòu)按垂直方向由上到下排布。

規(guī)則4：“年”和“月”等時(shí)間段應(yīng)該用不同的類別寬度標(biāo)識(shí)。

規(guī)則5：圖表是感知的關(guān)鍵。盡量使用柱狀圖、條形圖和線圖，而不是餅圖或儀表。

規(guī)則6：采用標(biāo)簽指明數(shù)據(jù)。在圖表中用標(biāo)簽指示數(shù)據(jù)系列和值。避免使用值坐標(biāo)或網(wǎng)格線。

規(guī)則7：采用不同的場(chǎng)景展示要比較的數(shù)據(jù)類別。對(duì)實(shí)際、計(jì)劃和預(yù)測(cè)的數(shù)據(jù)應(yīng)使用(提前定義的)標(biāo)準(zhǔn)的符號(hào)。

規(guī)則8：差異是不同場(chǎng)景之間的差值，應(yīng)該用統(tǒng)一顏色表示差異的好壞。采用指針來(lái)標(biāo)示相對(duì)差異。

規(guī)則9：不同圖表比較時(shí)應(yīng)該保持一致的縮放。禁止截?cái)嘧鴺?biāo)軸，對(duì)同一單位使用相同的刻度，必要時(shí)添加縮放指示器。

規(guī)則10：使用高亮顯示以促進(jìn)理解，但必須使用統(tǒng)一的標(biāo)記，如用于注釋的橢圓、趨勢(shì)箭頭和差異標(biāo)記等。

許多知名公司(如SAP、Microsoft等)都支持IBCS，眾多軟件產(chǎn)品也接受IBCS認(rèn)證。IBCS對(duì)商務(wù)交流的統(tǒng)一規(guī)范具有明顯的益處，遵循統(tǒng)一標(biāo)準(zhǔn)的視覺(jué)元素可以傳達(dá)明確的含義，以便于理解與交流。

1.2 Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南

Material Design是Google在2014年發(fā)布的UI設(shè)計(jì)庫(kù)，至今已演變成一整套設(shè)計(jì)標(biāo)準(zhǔn)，包括組件對(duì)象、圖標(biāo)、顏色、形狀、視覺(jué)設(shè)計(jì)語(yǔ)言、數(shù)據(jù)可視化等內(nèi)容。Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南于2019年6月發(fā)布，是Material Design規(guī)范的一個(gè)分支，主要針對(duì)數(shù)據(jù)圖表設(shè)計(jì)。Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范為數(shù)據(jù)可視化提供了詳盡的指南，可用于可視化設(shè)計(jì)與實(shí)踐應(yīng)用，該指南主要內(nèi)容包括設(shè)計(jì)原則、圖表類型、圖表選擇、圖表式樣、交互、儀表板。

1.2.1設(shè)計(jì)原則

數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺(jué)效果旨在使數(shù)據(jù)容易對(duì)比，并用它來(lái)講故事，以此來(lái)幫助用戶做出決策。數(shù)據(jù)可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù)，包括從幾個(gè)數(shù)據(jù)點(diǎn)到有大量變量的數(shù)據(jù)集。數(shù)據(jù)可視化設(shè)計(jì)原則如下。

(1)準(zhǔn)確 優(yōu)先考慮數(shù)據(jù)的準(zhǔn)確性、清晰度和完整性，以不會(huì)令人曲解的方式呈現(xiàn)信息

(2)幫助 強(qiáng)化探索和比較能力，以幫助用戶瀏覽數(shù)據(jù)。

(3)可擴(kuò)展 數(shù)據(jù)可視化須適應(yīng)不同的設(shè)備尺寸，同時(shí)預(yù)估用戶對(duì)數(shù)據(jù)深度、復(fù)雜性和各種場(chǎng)景的需求。

1.2.2圖表類型

(1)時(shí)間趨勢(shì) 顯示一段時(shí)間內(nèi)的數(shù)據(jù)，例如趨勢(shì)或多個(gè)類別的比較。常用圖表有折線圖(line charts)、柱狀圖(bar charts)、堆疊柱狀圖(stacked bar charts)、蠟燭圖(candlestick charts)、面積圖(area charts)、時(shí)間線圖(timelines)、地平線圖(horizon charts)和瀑布圖(waterfall charts)等。

(2)類別比較 多個(gè)不同類別數(shù)據(jù)之間的比較。常用圖表有柱狀圖(bar charts)、分組柱狀圖(grouped bar charts)、氣泡圖(bubble charts)、多線圖(multi-line charts)、平行坐標(biāo)圖(parallel coordinate charts)、子彈圖(bullet charts)等。

(3)排名 顯示項(xiàng)目在有序列表中的位置。常用圖表包括有序條形圖(ordered bar charts)、有序柱狀圖(ordered column charts)、平行坐標(biāo)圖(parallel coordinate charts)等。

(4)部分與整體 顯示局部與整體的關(guān)系。常用圖表有堆疊柱狀圖(stacked bar charts)、餅圖(pie charts)、圓環(huán)圖(donut charts)、堆疊面積圖(stacked area charts)、樹(shù)狀圖(treemap charts)、旭日?qǐng)D(sunburst charts)等。

(5)相關(guān) 顯示兩個(gè)或以上變量之間的關(guān)系。常用圖表有散點(diǎn)圖(scatterplot charts)、氣泡圖(bubble charts)、柱狀-線圖復(fù)合圖(column and line charts)、熱力圖(heatmap charts)等。

(6)分布 顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率。常用圖表有直方圖(histogram charts)、箱形圖(box plot charts)、小提琴圖(violin charts)、密度圖(density charts)等。

(7)流向 顯示多個(gè)狀態(tài)之間的數(shù)據(jù)流動(dòng)。常用圖表有?；鶊D(sankey charts)、甘特圖(gantt charts)、和弦圖(chord charts)、網(wǎng)絡(luò)圖(network charts)等。

(8)關(guān)系 顯示多個(gè)項(xiàng)目之間的關(guān)系。常用圖表有網(wǎng)絡(luò)圖(network charts)、韋恩圖(venn diagrams)、和弦圖(chord charts)、旭日?qǐng)D(sunburst charts)等。

1.2.3圖表選擇

Material Design指南詳述了各種圖表選擇的場(chǎng)景和細(xì)微差別，為數(shù)據(jù)可視化圖表選擇提供了指引。例如針對(duì)時(shí)間趨勢(shì)類圖表的使用場(chǎng)景提出建議，見(jiàn)表2。

表2 時(shí)間趨勢(shì)類圖表的使用場(chǎng)景

1.2.4圖表樣式

數(shù)據(jù)可視化可以使用多種樣式和形狀，使數(shù)據(jù)更容易理解，以適應(yīng)用戶需求。圖表樣式包括圖形元素、文字排版、圖標(biāo)、軸和標(biāo)簽、圖例和注釋等，均可自定義及優(yōu)化。視覺(jué)個(gè)性化元素包括形狀、顏色、大小、面積、體積、長(zhǎng)度、角度、位置、方向、密度等，這些元素的綜合應(yīng)用提供了豐富的可視化效果。

1.2.5交互

具有交互模式的圖表可讓用戶隨意控制圖表數(shù)據(jù)，這種模式可以使用戶專注于圖表的特定值或某一范圍。推薦以下交互模式，可以提高用戶對(duì)圖表數(shù)據(jù)的理解。

(1)漸進(jìn)式披露 提供了按需求逐步展示詳細(xì)信息的明確途徑。

(2)直接操作 允許用戶直接對(duì)UI元素進(jìn)行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括縮放和平移、分頁(yè)和數(shù)據(jù)控制。

(3)改變視角 通過(guò)數(shù)據(jù)篩選、鉆取或動(dòng)畫(huà)效果，可使同一可視化設(shè)計(jì)從不同的視角來(lái)呈現(xiàn)數(shù)據(jù)，以適應(yīng)于不同的用戶和數(shù)據(jù)類型。

1.2.6儀表板

儀表板是將一系列圖表整合在一起的數(shù)據(jù)可視化界面，多個(gè)獨(dú)立的圖表有時(shí)可以比一個(gè)復(fù)雜的圖表更好地表達(dá)故事。儀表板設(shè)計(jì)應(yīng)考慮整體布局、圖表樣式及交互，通過(guò)設(shè)計(jì)布局突出最重要信息，使用顏色、位置、大小和視覺(jué)權(quán)重來(lái)確定信息的焦點(diǎn)。儀表板分為分析類、操作類和展示類，適用于不同的場(chǎng)景。

1.3 AntV螞蟻數(shù)據(jù)可視化規(guī)范

AntV螞蟻數(shù)據(jù)可視化規(guī)范的前身為支付寶數(shù)據(jù)可視化規(guī)范，于2016年發(fā)布。其作為一套數(shù)據(jù)可視化設(shè)計(jì)語(yǔ)言，對(duì)數(shù)據(jù)圖形進(jìn)行了拆解、提煉，從色彩搭配、組件規(guī)范、基礎(chǔ)元素、功能上進(jìn)行了歸納總結(jié)。該規(guī)范提供了一套簡(jiǎn)單方便、專業(yè)可靠、無(wú)限可能的數(shù)據(jù)可視化解決方案和數(shù)據(jù)可視化最佳實(shí)踐，超過(guò)2 000家公司正在使用AntV產(chǎn)品。最新版的螞蟻數(shù)據(jù)可視化規(guī)范的內(nèi)容主要包括設(shè)計(jì)原則和圖表用法。

1.3.1設(shè)計(jì)原則

AntV數(shù)據(jù)可視化設(shè)計(jì)有4條核心原則，以重要等級(jí)進(jìn)行排序，4條原則相輔相成且呈遞進(jìn)關(guān)系。

(1)準(zhǔn)確 從數(shù)據(jù)轉(zhuǎn)化到可視表達(dá)時(shí)不歪曲，不誤導(dǎo)，不遺漏，忠實(shí)反映數(shù)據(jù)里包含的信息。

(2)有效 信息傳達(dá)有重點(diǎn)，克制不冗余，避免信息過(guò)載，用最適量的數(shù)據(jù)-油墨比(Data-ink Ratio)表達(dá)對(duì)用戶最有用的信息。

(3)清晰 表現(xiàn)方式清楚易讀，具條理性，可以幫助用戶快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息。

(4)美 對(duì)數(shù)據(jù)的完美表達(dá)，合理利用視覺(jué)元素進(jìn)行藝術(shù)創(chuàng)作，不過(guò)度修飾，給用戶優(yōu)雅的體驗(yàn)。

此外，AntV還對(duì)配色、交互方式以及移動(dòng)端可視化設(shè)計(jì)原則提出了建議，在圖表組件設(shè)計(jì)方面做了指引。

1.3.2圖表用法

圖表用法是整個(gè)規(guī)范的核心部分。AntV針對(duì)每一種圖形做了介紹，提出了該圖形適合的數(shù)據(jù)、功能、數(shù)據(jù)與圖形的映射、適合的數(shù)據(jù)條數(shù)，并建議了適合的場(chǎng)景與不適合的場(chǎng)景。AntV從功能角度將圖表分為9類。

(1)比較類 包括柱狀圖、雙向柱狀圖、氣泡圖、子彈圖、色塊圖、漏斗圖、直方圖、K線圖、馬賽克圖、分組柱狀圖、雷達(dá)圖、玉塊圖、南丁格爾玫瑰圖、螺旋圖、堆疊面積圖、堆疊柱狀圖、矩形樹(shù)狀圖、詞云等。

(2)分布類 包括箱形圖、氣泡圖、色塊圖、等高線、分布曲線圖、點(diǎn)描法地圖、熱力圖、直方圖、散點(diǎn)圖等。

(3)流程類 包括漏斗圖、?；鶊D。

(4)占比類 包括環(huán)圖、馬賽克圖、餅圖、堆疊面積圖、堆疊柱狀圖、矩形樹(shù)圖。

(5)區(qū)間類 包括儀表盤(pán)、堆疊面積圖。

(6)關(guān)聯(lián)類 包括弧長(zhǎng)鏈接圖、和弦圖、?；鶊D、矩形樹(shù)圖、韋恩圖。

(7)趨勢(shì)類 包括面積圖、K線圖、卡吉圖、折線圖、回歸曲線圖、堆疊面積圖。

(8)時(shí)間類 包括面積圖、K線圖、卡吉圖、折線圖、螺旋圖、堆疊面積圖。

(9)地圖類 包括帶氣泡的地圖、分級(jí)統(tǒng)計(jì)地圖、點(diǎn)描法地圖。

2 數(shù)據(jù)可視化規(guī)范的構(gòu)成要素

出于交流與共享、便于理解的目的，制訂一整套數(shù)據(jù)可視化規(guī)范十分必要的。數(shù)據(jù)可視化規(guī)范的范疇非常廣泛，涉及到數(shù)據(jù)可視化的定義、可視化對(duì)象與設(shè)計(jì)等多個(gè)層面，有必要對(duì)數(shù)據(jù)可視化規(guī)范的構(gòu)成要素進(jìn)行探討。本文綜合業(yè)界已有的數(shù)據(jù)可視化規(guī)范，并考慮數(shù)據(jù)可視化的實(shí)際應(yīng)用要求，提出數(shù)據(jù)可視化規(guī)范的構(gòu)成要素如下。

2.1 數(shù)據(jù)可視化的定義

目前尚無(wú)數(shù)據(jù)可視化的權(quán)威定義，已有的各種定義在表述上、內(nèi)涵上存在差異，因此有必要明確數(shù)據(jù)可視化的定義，界定其范疇。

2.2 數(shù)據(jù)可視化的原則

數(shù)據(jù)可視化的本質(zhì)是通過(guò)視覺(jué)對(duì)象揭示數(shù)據(jù)規(guī)律，其目的是為了更方便閱讀和理解數(shù)據(jù)。為實(shí)現(xiàn)這一目的，數(shù)據(jù)可視化必須遵循一些原則。數(shù)據(jù)可視化規(guī)范須明確制定數(shù)據(jù)可視化原則。

2.3 可視化對(duì)象及選擇

可視化對(duì)象包括圖形、表格、文字說(shuō)明等?？梢暬瘜?duì)象種類繁多，有必要對(duì)其進(jìn)行精選和分類，并界定每一可視化對(duì)象的功能、適用場(chǎng)景與條件、數(shù)據(jù)類型及最佳實(shí)踐案例。必須按照數(shù)據(jù)可視化原則來(lái)選擇可視化對(duì)象，以達(dá)到最佳的可視化效果。

2.4 可視化對(duì)象設(shè)計(jì)

每一個(gè)可視化對(duì)象均應(yīng)得到合理設(shè)計(jì)。為了達(dá)到最佳的可視化效果，針對(duì)可視化對(duì)象的設(shè)計(jì)須制訂相應(yīng)規(guī)范。可視化對(duì)象設(shè)計(jì)包含如下內(nèi)容。

(1)組件與元素 如圖形的標(biāo)題、圖例、坐標(biāo)軸、網(wǎng)格、標(biāo)簽等。

(2)形狀 可視化對(duì)象的幾何形狀、比例、尺寸、邊框、陰影等。

(3)顏色 各個(gè)組件的顏色，包括前景色和背景色。

(4)字體字號(hào) 對(duì)象中所有文字的字體字號(hào)。

(5)突出顯示 采用高亮、加粗或指針等方式突出顯示某一個(gè)元素。

(6)動(dòng)畫(huà)效果 可視化對(duì)象的顯示方式及動(dòng)態(tài)效果。

2.5 可視化界面設(shè)計(jì)

可視化界面是最終展示的整體界面，其設(shè)計(jì)包括4個(gè)方面。

(1)界面大小 考慮可視化界面顯示終端設(shè)備的多樣性，可視化界面應(yīng)自適應(yīng)各種尺寸、比例及滾動(dòng)方向。

(2)整體布局 根據(jù)需要展示的內(nèi)容設(shè)計(jì)整體布局。常見(jiàn)的布局有左右布局、上下布局，在此基礎(chǔ)上可以任意分割及排列組合，形成各式布局。布局方案也需要遵循一定的原則。

(3)配色方案 色彩的運(yùn)用是可視化設(shè)計(jì)的一個(gè)重要內(nèi)容。從理論上來(lái)說(shuō)，配色方案是無(wú)窮的，但最佳的配色一定遵循某種原則，數(shù)據(jù)可視化規(guī)范應(yīng)具體闡述并給出最佳實(shí)踐案例。

(4)交互操 從某種意義上來(lái)說(shuō)，數(shù)據(jù)可視化是用數(shù)據(jù)講故事，呈現(xiàn)的是多個(gè)具有關(guān)聯(lián)關(guān)系的可視化對(duì)象，因此可以通過(guò)交互操作來(lái)改變展示內(nèi)容以及進(jìn)行鉆取、深化、篩選等操作。交互操作的設(shè)計(jì)影響最終的展示效果

3小結(jié)

IBCS、Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南以及AntV螞蟻數(shù)據(jù)可視化規(guī)范作為業(yè)界具有影響力的規(guī)范，為數(shù)據(jù)可視化的設(shè)計(jì)與實(shí)踐提供了詳細(xì)的指引和有益的參考。但3個(gè)規(guī)范各有其側(cè)重點(diǎn)，在某些方面甚至存在分歧。因此，有必要參照數(shù)據(jù)可視化規(guī)范的構(gòu)成要素，從各個(gè)層面對(duì)數(shù)據(jù)可視化制訂完整而詳盡的規(guī)范。