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

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

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

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

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

一、選擇適合的圖表

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

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

根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對應(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ù)為例，常見的還有流轉(zhuǎn)關(guān)系。

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

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

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

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

比較關(guān)系

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

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

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

分布關(guān)系

利用空間分區(qū)來展示數(shù)據(jù)之間的分布關(guān)系，常用于體現(xiàn)兩個或以上數(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)系，它可以動態(tài)的體現(xiàn)相關(guān)路徑下對象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個狀態(tài)或?qū)ο笾g的流動量或流動強(qiáng)度。

常用圖表：關(guān)系圖、桑基圖、漏斗圖、進(jìn)度圖等

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

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

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

變量特征

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

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

維度特征

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

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

層級特征

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

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

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

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

流程特征

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

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

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

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

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

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

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

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

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

我們在之前的文章里有介紹過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：

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

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

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

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

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

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

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

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

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

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

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

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

1. 布局框架適配

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

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

2. 圖表元素適配

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

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

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

3. 極值適配

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

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

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

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

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

// 結(jié)語

數(shù)據(jù)可視化在B端設(shè)計(jì)場景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時更加準(zhǔn)確，才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價值。使業(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)載請注明出處，違者必究，謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。也歡迎加入MEUX,視覺/交互/運(yùn)營設(shè)計(jì)師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）

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