7個可視化圖表設計技巧,百度設計師經驗分享

Sponsor

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

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

那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。

為什么要數據可視化？

數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。

能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。

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

關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。

一、選擇適合的圖表

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

首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。

1. 分析數據關系

根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。

了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。

構成關系

構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。

如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。

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

關鍵詞：“占比、比例、百分比”

比較關系

比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。

對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。

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

關鍵詞：“增減、升降、漲跌、波動”

分布關系

利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。

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

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

關聯與流轉

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

常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等

關鍵詞：“流程步驟、留存、轉化、關系”

2. 分析數據特征

按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。

從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。

變量特征

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

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

維度特征

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

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

層級特征

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

• 矩形樹圖：突出子層級占比大小。最初是用來顯示計算機硬盤驅動器上文件的結構和大小，它以面積的形式突出展現各個子層級節點的占比，可幫助用戶看到數據的層次結構以及各層級之間的關系。

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

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

流程特征

流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑。

其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。

二、強化視覺層次

選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。

1. 強化數據特性

使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差。

• 趨勢易感知：折線圖數值如過于平均導致趨勢平緩，有時候無法體現偏差；在強調數據趨勢的場景下，推薦用動態取值范圍讓波動保持在一定范圍內，放大波動占比更突出趨勢。

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

2. 色彩視覺傳達

除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。

我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。

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

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

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

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

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

• 選取盡量少的色調：取色時無需使用整個色環，使用鄰近色或互補色的取色方式顯得更加專業。

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

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

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

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

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

三、圖表中的響應式設計

B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。

而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。

1. 布局框架適配

在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間。

元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。

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

2. 圖表元素適配

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

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

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

3. 極值適配

因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。

這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。

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

• 互動切換視圖：如果折線的類別過多且無法省略的，建議分組查看。默認狀態僅當前組折線高亮，其他數據以淺色顯示，通過切換的方式查看其他組別的信息。

• 懸浮鼠標高亮：在分類過多不好分辨時，可使用懸浮高亮的交互方式突出相關聯的數據組。

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

結語

數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。

使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。

作者：商業用戶體驗部
來源：百度MUEX

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。