可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過(guò)程中，如果沒(méi)有系統(tǒng)的可視化知識(shí)，會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么，在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表，如何在好看的同時(shí)提升信息傳達(dá)效率，看完這篇文章希望對(duì)你的設(shè)計(jì)過(guò)程有所幫助。

// 為什么要數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖表來(lái)表示數(shù)據(jù)信息，它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過(guò)圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息，是我們可視化的最終目的。

舉個(gè)例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律

關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個(gè)步驟：選擇適合的圖表，強(qiáng)化視覺(jué)層次，圖表響應(yīng)式適配。

一、選擇適合的圖表

數(shù)據(jù)可視化的圖表種類(lèi)繁多，當(dāng)我們真的開(kāi)始作圖，往往會(huì)遇到一個(gè)困境：有這么多類(lèi)型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達(dá)的信息意圖，即所要制作的圖表它的任務(wù)是什么，再通過(guò)分析數(shù)據(jù)關(guān)系來(lái)選擇表達(dá)方式；第二層意圖是圖表傳達(dá)內(nèi)容，這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。

1. 分析數(shù)據(jù)關(guān)系

根據(jù)數(shù)據(jù)分析的方式來(lái)看，每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見(jiàn)的還有流轉(zhuǎn)關(guān)系。

構(gòu)成關(guān)系

構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系，用于分析總體和各部分的占比比例，構(gòu)成關(guān)系一般局部元素加起來(lái)為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小，也可以使用比較關(guān)系的圖表。

常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級(jí)結(jié)構(gòu)，還會(huì)用矩形樹(shù)圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。

關(guān)鍵詞：“占比、比例、百分比”

比較關(guān)系

比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類(lèi)型。在一定的取值范圍內(nèi)，通過(guò)對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析，可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類(lèi)對(duì)比兩種形式，趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化，分類(lèi)對(duì)比用于比較數(shù)據(jù)規(guī)模。

常用圖表：趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等；分類(lèi)對(duì)比常用條形圖、柱狀圖、氣泡圖等。

關(guān)鍵詞：“增減、升降、漲跌、波動(dòng)”

分布關(guān)系

利用空間分區(qū)來(lái)展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。

常用圖表：散點(diǎn)圖、熱力圖、雷達(dá)圖等

關(guān)鍵詞：“隨著……而變化、A/B之間的相關(guān)性、交/并集”等

關(guān)聯(lián)與流轉(zhuǎn)

流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系，它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。

常用圖表：關(guān)系圖、?；鶊D、漏斗圖、進(jìn)度圖等

關(guān)鍵詞：“流程步驟、留存、轉(zhuǎn)化、關(guān)系”

2. 分析數(shù)據(jù)特征

按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類(lèi)型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見(jiàn)數(shù)據(jù)特征有：變量特征、維度特征、層級(jí)特征、流程特征。

變量特征

分辨一個(gè)指標(biāo)通常有兩類(lèi)特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì)，離散數(shù)據(jù)通常統(tǒng)計(jì)各分類(lèi)下數(shù)量的變化。

• 連續(xù)型數(shù)據(jù)：指在一定區(qū)間內(nèi)可以任意取值的數(shù)據(jù)叫連續(xù)數(shù)據(jù)，其數(shù)值是連續(xù)不斷的。如身高、體重等帶有時(shí)間因素變量的數(shù)據(jù)等，通常用折線圖體現(xiàn)變化趨勢(shì)。
• 離散型數(shù)據(jù)：指其數(shù)值只能用自然數(shù)或整數(shù)單位計(jì)算的數(shù)據(jù)。如當(dāng)天銷(xiāo)量、進(jìn)店人數(shù)等表示分類(lèi)類(lèi)型的數(shù)據(jù)，用柱圖表現(xiàn)更加體現(xiàn)變量的特征。

維度特征

多維度分析需要將多個(gè)變量在同一平面上直觀的表示，可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù)，可使用不同顏色進(jìn)行分類(lèi)

• 根據(jù)分析視角選擇圖表：對(duì)于多維度變量的數(shù)據(jù)我們需要明確分析的視角，去找準(zhǔn)對(duì)應(yīng)的數(shù)據(jù)映射。如案例中多個(gè)班級(jí)的科目成績(jī)的這組數(shù)據(jù)，如需要全局視角查看個(gè)班的綜合素質(zhì)，推薦使用雷達(dá)圖；對(duì)比單科成績(jī)的變化分布，則推薦使用堆積圖。

層級(jí)特征

多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體，又稱(chēng)樹(shù)形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹(shù)圖表表現(xiàn)以外，還可以考慮以下兩種圖表類(lèi)型：

• 矩形樹(shù)圖：突出子層級(jí)占比大小。最初是用來(lái)顯示計(jì)算機(jī)硬盤(pán)驅(qū)動(dòng)器上文件的結(jié)構(gòu)和大小，它以面積的形式突出展現(xiàn)各個(gè)子層級(jí)節(jié)點(diǎn)的占比，可幫助用戶看到數(shù)據(jù)的層次結(jié)構(gòu)以及各層級(jí)之間的關(guān)系。

例如：上圖顯示了市場(chǎng)銷(xiāo)售額的來(lái)源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷(xiāo)售額，通過(guò)色調(diào)來(lái)區(qū)分不同類(lèi)型，顏色的深淺代表分類(lèi)下的子集，面積體現(xiàn)銷(xiāo)售占比。對(duì)比一般結(jié)構(gòu)樹(shù)圖表，它的優(yōu)勢(shì)在于可以有效利用空間。

• 旭日?qǐng)D：突出細(xì)分層級(jí)關(guān)系。由多個(gè)圓環(huán)圖嵌套而成，也稱(chēng)為徑向樹(shù)圖，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹(shù)圖一樣表現(xiàn)層級(jí)關(guān)系。常用于細(xì)分分析方法，將事物從大到小進(jìn)行拆解。每個(gè)級(jí)別的數(shù)據(jù)通過(guò)1個(gè)圓環(huán)表示，離原點(diǎn)越近代表圓環(huán)級(jí)別越高。 旭日?qǐng)D在顯示一個(gè)環(huán)如何被劃分為多個(gè)層級(jí)時(shí)最有效，而矩形樹(shù)圖適合比較相對(duì)大小。

流程特征

流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類(lèi)型，不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和，同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達(dá)路徑中流量的變化，不同的是?；鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達(dá)目的選用。

二、強(qiáng)化視覺(jué)層次

選擇合適的圖表后，在信息傳達(dá)上也需要正確的表達(dá)，展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。

1. 強(qiáng)化數(shù)據(jù)特性

使用圖表正確的表達(dá)信息，需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差

• 趨勢(shì)易感知：折線圖數(shù)值如過(guò)于平均導(dǎo)致趨勢(shì)平緩，有時(shí)候無(wú)法體現(xiàn)偏差；在強(qiáng)調(diào)數(shù)據(jù)趨勢(shì)的場(chǎng)景下，推薦用動(dòng)態(tài)取值范圍讓波動(dòng)保持在一定范圍內(nèi)，放大波動(dòng)占比更突出趨勢(shì)。

• 展示更準(zhǔn)確：柱狀圖依靠柱體面積體現(xiàn)最終數(shù)值，使用動(dòng)態(tài)范圍截?cái)鄬?huì)導(dǎo)致數(shù)據(jù)解讀不完整；始終將 y 軸從 0 開(kāi)始，才能更準(zhǔn)確的反映柱圖中的值。

2. 色彩視覺(jué)傳達(dá)

除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知，錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過(guò)不同的分析目的設(shè)置意圖色板，精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。

我們?cè)谥暗奈恼吕镉薪榻B過(guò)圖表的取色模型，通過(guò)調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：

• 定性型-分類(lèi)色板：用于區(qū)分不同的類(lèi)型，又稱(chēng)為無(wú)序色板。適合區(qū)分沒(méi)有內(nèi)在順序的類(lèi)別
• 定量分歧型-發(fā)散色板：通過(guò)兩邊互補(bǔ)色來(lái)體現(xiàn)，具有明亮的中間值，然后以不同的色調(diào)在刻度的兩端變暗。通常用于可視化負(fù)值和正值
• 定量順序型-順序色板：從亮到暗或相反的漸變。適合可視化從低到高的數(shù)字。

那么我們要怎么樣去使用這些色板呢？下面幾個(gè)案例將帶你了解其中的差異。

定性型：使用色調(diào)來(lái)進(jìn)行分類(lèi)

數(shù)據(jù)內(nèi)在沒(méi)有順序差別時(shí)，建議使用色調(diào)值（H）進(jìn)行區(qū)分；如定義國(guó)家、行業(yè)等類(lèi)型。如果希望圖表看起來(lái)更加專(zhuān)業(yè)，以下有幾項(xiàng)分類(lèi)色板的小建議：

• 選取盡量少的色調(diào)：取色時(shí)無(wú)需使用整個(gè)色環(huán)，使用鄰近色或互補(bǔ)色的取色方式顯得更加專(zhuān)業(yè)。

• 色板適度明暗交替：一些視障人士無(wú)法區(qū)分色相，主要靠顏色的明暗差異來(lái)識(shí)別，通過(guò)飽和度和暗度的調(diào)整，創(chuàng)造明暗交替的色板。

定量型：使用深淺色板強(qiáng)調(diào)內(nèi)在順序

如果在同一個(gè)分類(lèi)下包含子類(lèi)別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來(lái)突出他們內(nèi)在的順序，使圖表更加易讀。

• 順序色板-選擇合適的插值：根據(jù)數(shù)據(jù)的分布情況選擇不同的的插值斷點(diǎn)，突出數(shù)據(jù)的差異。如以下案例中，根據(jù)統(tǒng)計(jì)學(xué)概念設(shè)定不同的取值區(qū)間，左側(cè)示例使用的是平均線性差值，反映的是數(shù)據(jù)的集中趨勢(shì)；右側(cè)示例使用的是中位數(shù)插值，能更好的體現(xiàn)數(shù)據(jù)分布的形態(tài)。

• 發(fā)散色板-關(guān)注對(duì)比色的識(shí)別性：盡量避免紅綠配色，如需使用綠色，偏黃或偏藍(lán)的綠色更易分辨，對(duì)視障人士也更加友好。

三、圖表中的響應(yīng)式設(shè)計(jì)

B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào)，在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來(lái)的交互特性也讓數(shù)據(jù)展示有了更多的可能性。

1. 布局框架適配

在網(wǎng)頁(yè)端顯示時(shí)，有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應(yīng)當(dāng)前空間；元素隱藏后使用懸浮交互來(lái)保證信息的展示，保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。

如案例中的圖表，在不同尺寸下通過(guò)改變和隱藏圖表元素，以達(dá)到適配當(dāng)前空間的效果。

2. 圖表元素適配

要適配移動(dòng)端，網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性，去兼容相關(guān)的交互操作。

• 信息浮層：在圖表中，信息卡元素是傳達(dá)信息內(nèi)容的重要組件，在網(wǎng)頁(yè)端中懸浮展示，通常會(huì)占據(jù)很大空間；圖表適配移動(dòng)端后，信息浮層改動(dòng)到圖表上方常駐顯示，并跟隨手指的滑動(dòng)變化響應(yīng)數(shù)值，完整展示信息的同時(shí)也避免了頁(yè)面抖動(dòng)。

• 坐標(biāo)軸標(biāo)簽：過(guò)長(zhǎng)的坐標(biāo)標(biāo)簽在適配過(guò)程中會(huì)產(chǎn)生重疊，而省略也會(huì)造成信息展示的不完整。我們需要針對(duì)不同的坐標(biāo)軸類(lèi)型給出響應(yīng)的規(guī)范。如文本類(lèi)軸標(biāo)簽我們可以采用省略、換行、旋轉(zhuǎn)等方式適配，避免信息的缺失。針對(duì)有連續(xù)型的數(shù)據(jù)類(lèi)坐標(biāo)軸我們可以使用抽樣、轉(zhuǎn)化單位等方式適配，精簡(jiǎn)空間避免堆疊。

3. 極值適配

因B端平臺(tái)的特性，我們無(wú)法預(yù)知客戶傳入的數(shù)據(jù)量，可能會(huì)遇到因數(shù)據(jù)量過(guò)多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問(wèn)題。這種情況下，提前考慮數(shù)據(jù)極限場(chǎng)景，通過(guò)交互的形式變化的方式讓用戶獲取完整信息，提升理解同時(shí)信息展示更靈活。

• 縮放和平移：在數(shù)據(jù)范圍過(guò)多時(shí)增加取值范圍的縮略軸組件，通過(guò)限制展示范圍讓數(shù)據(jù)量顯示可控。

• 互動(dòng)切換視圖：如果折線的類(lèi)別過(guò)多且無(wú)法省略的，建議分組查看。默認(rèn)狀態(tài)僅當(dāng)前組折線高亮，其他數(shù)據(jù)以淺色顯示，通過(guò)切換的方式查看其他組別的信息。

• 懸浮鼠標(biāo)高亮：在分類(lèi)過(guò)多不好分辨時(shí)，可使用懸浮高亮的交互方式突出相關(guān)聯(lián)的數(shù)據(jù)組。

還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨(dú)立介紹。

// 結(jié)語(yǔ)

數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關(guān)鍵。

* 以上圖表中均為虛擬數(shù)據(jù)，僅作為案例參考

---

感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺(jué)/交互/運(yùn)營(yíng)設(shè)計(jì)師，可投簡(jiǎn)歷至MEUX@BAIDU.COM (注明信息獲取來(lái)源如：站酷）

關(guān)于我們：
MEUX,百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。服務(wù)的產(chǎn)品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業(yè)產(chǎn)品等。MEUX以「簡(jiǎn)單極致」為設(shè)計(jì)理念，創(chuàng)造極致用戶體驗(yàn)的同時(shí)賦能商業(yè)，推動(dòng)設(shè)計(jì)行業(yè)的價(jià)值和影響力，讓生活因設(shè)計(jì)而更美好。