在日常工作中，我們常用視覺化圖表來幫助提升資訊傳遞效率，不過視覺化圖表如果不能第一時間向業務人員清晰地傳遞資料資訊、表達複雜的資料關係，那麼視覺化圖表的存在意義則會被大幅降低。那麼，視覺化圖表設計要怎麼設計，才能更加“有效”？本文總結了幾個視覺化圖表的設計技巧，不妨來看一下。

視覺化圖表是提升資訊傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的資料分析總結的呈現。

我們設計師在設計圖表的過程中，如果沒有系統的視覺化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應資料的情況。

那麼，在複雜的資料關係中如何設計和選用圖表，如何在好看的同時提升資訊傳達效率，看完這篇文章希望對你的設計過程有所幫助。

為什麼要資料視覺化

資料視覺化就是用圖表來表示資料資訊，它所傳達的資訊包括你所拿到的資料來源和你分析後的結果，再透過圖形強化使用者的理解和記憶。能讓使用者簡潔明瞭的獲取更多的資訊，是我們視覺化的最終目的。

舉個例子，同樣一組資料，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的資料聚合以柱圖形式呈現，很容易就能看出各個地區間資料的差異，並從中洞察規律。

關於如何設計好資料視覺化圖表，這邊總結了三個步驟：

選擇適合的圖表，強化視覺層次，圖表響應式適配。

一、選擇適合的圖表

資料視覺化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這麼多型別，要如何選擇正確的圖表呢？

首要依據是考慮所要傳達的資訊意圖，即所要製作的圖表它的任務是什麼，再透過分析資料關係來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據資料的特徵去突出和強化。

1. 分析資料關係

根據資料分析的方式來看，每一種圖表都對應了一種資料關係。從資料的維度出發弄清呈現結構，再結合資料關係作出選擇。瞭解圖表的可能知道，一般圖表的資料關係有構成、比較、分佈，以商業資料為例，常見的還有流轉關係。

1）構成關係

構成關係的圖表表達的是部分和整體的關係，用於分析總體和各部分的佔比比例，構成關係一般區域性元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關係的圖表。

常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。

2）比較關係

比較關係是基礎分析中常用的一種圖表型別。在一定的取值範圍內，透過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用於表示一段時間內資料的變化，分類對比用於比較資料規模。

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

3）分佈關係

利用空間分割槽來展示資料之間的分佈關係，常用於體現兩個或以上資料的相關性。

常用圖表：散點圖、熱力圖、雷達圖等。

4）關聯與流轉

流轉關係是B端資料常用的一種關係，它可以動態的體現相關路徑下物件之間的關係、狀態、資料量的流轉變化等，以面積或顏色深淺展示了多個狀態或物件之間的流動量或流動強度。

常用圖表：關係圖、桑基圖、漏斗圖、進度圖等。

2. 分析資料特徵

按資料關係和分析目的選擇好圖表型別後，第二步是根據資料特徵選擇更加適合的展示方式。從資料分析的角度常見資料特徵有：變數特徵、維度特徵、層級特徵、流程特徵。

1）變數特徵

分辨一個指標通常有兩類特徵，按變數值是否連續可分為連續資料與離散資料兩種。連續資料通常會統計一組資料的變化趨勢，離散資料通常統計各分類下數量的變化。

連續型資料：

指在一定區間內可以任意取值的資料叫連續資料，其數值是連續不斷的。如身高、體重等帶有時間因素變數的資料等，通常用折線圖體現變化趨勢。

離散型資料：

指其數值只能用自然數或整數單位計算的資料。如當天銷量、進店人數等表示分類型別的資料，用柱圖表現更加體現變數的特徵。

2）維度特徵

多維度分析需要將多個變數在同一平面上直觀的表示，可以選擇使用極座標系去展示多個維度變數。如果希望對比多組資料，可使用不同顏色進行分類。

根據分析視角選擇圖表：

對於多維度變數的資料我們需要明確分析的視角，去找準對應的資料對映。如案例中多個班級的科目成績的這組資料，如需要全域性視角檢視個班的綜合素質，推薦使用雷達圖；對比單科成績的變化分佈，則推薦使用堆積圖。

3）層級特徵

多層級資料由多個部分構成一個整體，又稱樹形結構資料。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表型別：

矩形樹圖：

突出子層級佔比大小。最初是用來顯示計算機硬碟驅動器上檔案的結構和大小，它以面積的形式突出展現各個子層級節點的佔比，可幫助使用者看到資料的層次結構以及各層級之間的關係。

例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決於各國家的平均銷售額，透過色調來區分不同型別，顏色的深淺代表分類下的子集，面積體現銷售佔比。對比一般結構樹圖表，它的優勢在於可以有效利用空間。

旭日圖：突出細分層級關係。

由多個圓環圖巢狀而成，也稱為徑向樹圖，它既能像餅圖一樣表現區域性和整體的佔比，又能像矩形樹圖一樣表現層級關係。常用於細分分析方法，將事物從大到小進行拆解。每個級別的資料透過1個圓環表示，離原點越近代表圓環級別越高。 旭日圖在顯示一個環如何被劃分為多個層級時最有效，而矩形樹圖適合比較相對大小。

4）流程特徵

流轉關係是表達資料轉化流程的重要型別，不僅包含統計意義上的資料總和，同時還表達了資訊流轉的路徑；其中桑基圖和漏斗圖都可以表達路徑中流量的變化，不同的是桑基圖重點強調流量的強度和走向，漏斗圖更加註重突出轉化率和效果，根據不同的表達目的選用。

二、強化視覺層次

選擇合適的圖表後，在資訊傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現資料特點。

1. 強化資料特性

使用圖表正確的表達資訊，需要設計師在強化資料特性的同時避免偏差

趨勢易感知：

折線圖數值如過於平均導致趨勢平緩，有時候無法體現偏差；在強調資料趨勢的場景下，推薦用動態取值範圍讓波動保持在一定範圍內，放大波動佔比更突出趨勢。

展示更準確：

柱狀圖依靠柱體面積體現最終數值，使用動態範圍截斷將會導致資料解讀不完整；始終將 y 軸從 0 開始，才能更準確的反映柱圖中的值。

2. 色彩視覺傳達

除了在設計構圖上最佳化以外，顏色的選擇也是圖表重要的的資訊表達元素。顏色會影響我們對資料的感知，錯誤的取色會讓資訊讀取產生誤解。我們可以透過不同的分析目的設定意圖色板，精確傳達資訊同時後續的專案在選用時也可以達到用色的統一。

我們在之前的文章裡有介紹過圖表的取色模型，透過調整顏色HSL值的區間，可以得到以下三種意圖色板：

定性型-分類色板：

用於區分不同的型別，又稱為無序色板。適合區分沒有內在順序的類別。

定量分歧型

-發散色板：

透過兩邊互補色來體現，具有明亮的中間值，然後以不同的色調在刻度的兩端變暗。通常用於視覺化負值和正值。

定量順序型-

順序色板：

從亮到暗或相反的漸變。適合視覺化從低到高的數字。

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

1）定性型：使用色調來進行分類

資料內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等型別。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：

選取儘量少的色調：

取色時無需使用整個色環，使用鄰近色或互補色的取色方式顯得更加專業。

色板適度明暗交替：

一些視障人士無法區分色相，主要靠顏色的明暗差異來識別，透過飽和度和暗度的調整，創造明暗交替的色板。

2）定量型：使用深淺色板強調內在順序

如果在同一個分類下包含子類別，或者資料本身具有排名屬性，那麼建議使用連續色板來突出他們內在的順序，使圖表更加易讀。

順序色板-選擇合適的插值：

根據資料的分佈情況選擇不同的的插值斷點，突出資料的差異。如以下案例中，根據統計學概念設定不同的取值區間，左側示例使用的是平均線性差值，反映的是資料的集中趨勢；右側示例使用的是中位數插值，能更好的體現資料分佈的形態。

發散色板-關注對比色的識別性：

儘量避免紅綠配色，如需使用綠色，偏黃或偏藍的綠色更易分辨，對視障人士也更加友好。

三、圖表中的響應式設計

B端圖表視覺化的資料一般是在網頁或移動端上動態顯示。不同於平面展示或彙報，在基礎設計完成後還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種複雜情況。而動態顯示帶來的互動特性也讓資料展示有了更多的可能性。

1. 佈局框架適配

在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據資料相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏後使用懸浮互動來保證資訊的展示，保持圖表的可讀性同時也避免產生元素的重疊。

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

2. 圖表元素適配

要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機螢幕的尺寸和圖表元素的適配性，去相容相關的互動操作。

資訊浮層：

在圖表中，資訊卡元素是傳達資訊內容的重要元件，在網頁端中懸浮展示，通常會佔據很大空間；圖表適配移動端後，資訊浮層改動到圖表上方常駐顯示，並跟隨手指的滑動變化響應數值，完整展示資訊的同時也避免了頁面抖動。

座標軸標籤：

過長的座標標籤在適配過程中會產生重疊，而省略也會造成資訊展示的不完整。我們需要針對不同的座標軸型別給出響應的規範。如文字類軸標籤我們可以採用省略、換行、旋轉等方式適配，避免資訊的缺失。針對有連續型的資料類座標軸我們可以使用抽樣、轉化單位等方式適配，精簡空間避免堆疊。

3. 極值適配

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

縮放和平移：

在資料範圍過多時增加取值範圍的縮略軸元件，透過限制展示範圍讓資料量顯示可控。

互動切換檢視：

如果折線的類別過多且無法省略的，建議分組檢視。預設狀態僅當前組折線高亮，其他資料以淺色顯示，透過切換的方式檢視其他組別的資訊。

懸浮滑鼠高亮：

在分類過多不好分辨時，可使用懸浮高亮的互動方式突出相關聯的資料組。

還有懸浮放大、點選下鑽、聯動圖表等互動行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以後可獨立介紹。

四、結語

資料視覺化在B端設計場景中發揮著重要作用。設計師在表達資料之美的同時更加準確，才能更直觀地向用戶傳達資料的價值。使業務人員能夠從複雜的業務資料中快速、直接地找到重要資料，確保使用者能夠更好的接收資訊，才是視覺化的關鍵。

*以上圖表中均為虛擬資料，僅作為案例參考。

作者：商業使用者體驗部

本文由人人都是產品經理合作媒體 @百度MEUX 授權釋出，未經許可，禁止轉載。

題圖來自Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。