數據可視化設計師必備的圖表規範指南

• 2021 年 1 月 26 日
• AI
• 影像描述, 影像生成, 數據挖掘應用, 視覺顯著性

數據可視化，旨在藉助圖形化手段，清晰有效地傳達與溝通訊息。但是，這並不意味著數據可視化就一定令人感到枯燥乏味，為了有效地傳達概念，美學形式與功能需要齊頭並進。然而，設計人員往往並不能很好地把握設計與功能之間的平衡，從而創造出華而不實的數據可視化形式。接下來，我為大家分析數據可視化設計師必備的圖表規範指南。

一、你在工作中是否會為了如何選用可視化圖表而苦惱？

在企業大數據、後台管理面板、金融行業等與數據有關的UI設計中，數據可視化設計是必不可少而且非常重要。

但是很多設計師不懂可視化當中不同用途的圖表規範，只是為了設計出好看的數據圖表，在不停的尋找設計靈感參考，最終發現了即使有漂亮的可視化數據圖表，但卻不能用在自己的項目上非常可惜。

為什麼會出現這樣的情況呢？

原因其實無非就是：設計師除了自身比較少接觸數據設計外，就是對可視化的設計規範不了解。

如果您了解一些數據圖表的相關設計規範，知道什麼數據用什麼圖表，知道顏色的意義，知道數據排版的要點，那麼你就能從這些規則中繪製出優秀又美觀的可視化數據圖表。

二、設計師應該了解的數據可視化圖表設計規範有哪些？

今天我將為大家分享Google2019年6月更新的Material Design數據可視化設計規範指南，這個規範指南基本適用所有數據圖表設計，很有參考價值，建議收藏。

主要從以下幾個方面去歸納：

1. 數據可視化的基本原則？

2. 數據圖表的類型有哪些？

3. 針對不同用途該如何選擇合適的可視化圖表類型？

4. 數據圖表的樣式設計？

5. 數據可視化大屏的用途分類？

三、數據可視化的基本原則

數據可視化是一種以圖形描繪密集和複雜資訊的表現形式。數據可視化的視覺效果旨在使數據容易對比，並用它來講故事，以此來幫助用戶做出決策。數據可視化可以表達不同類型和規模的數據，包括從幾個數據點到有大量變數的數據集。

所以我們在進行數據可視化的時候需要注意三點要求：

1. 準確的

優先考慮數據的準確性、清晰度和完整性、以不會曲解資訊的方式來呈現資訊。

2. 有幫助的

為用戶瀏覽數據時創造便於研究和比較的條件與功能。

3. 可擴展的

預測用戶對數據深度、複雜性和形式的需求，針對不同設備大家可以進行可視化展示內容和形式。

四、數據圖表的類型

數據可視化是可以以不同的形式去表達的，圖表是表達數據的常用方式，因為它們能夠展示和對比多種不同的數據。

圖表類型的選擇主要取決於兩點：

1. 要表現的數據

2. 表現該數據的用意

1. 具體類型

1）隨時間進行變化的圖表

這類圖表主要用來展現一段時間的數據，例如多個類別之間的趨勢或者比較。

常見的用例包括：股價的升降表現、數據統計、年報等。

圖源：網路

2）不同數據間的類別比較

類別比較圖表是多個不同類別數據之間的比較，常見用例包括：不同國家的收入、熱門場的時間、團隊分配。

圖源：網路

3）展現不同數據間的排名圖表

排名圖表顯示項目在有序列表中的位置，常見用例包括：選舉結果、性能統計。

圖源：網路

4）不同部分數據在總體數據中的佔比

佔比類圖表顯示了局部與整體的關係，常見用例包括：產品類別的綜合收入、預算。

圖源：網路

5）兩個數據以上的關聯比較

關聯類圖表顯示兩個或以上變數之間的關係，常見用例包括：收入和預期壽命。

圖源：網路

6）數值間的分布

分布類圖表顯示每個值在數據集中出現的頻率，常見用例包括：人口分布、收入分布。

圖源：網路

7）數據的流程

流程類圖表顯示了多個狀態之間的數據移動，常見用例包括：資金轉移、投票計數和選舉結果。

圖源：網路

8）數據關係

關係圖表顯示多個項目之間的關係，常見用例包括：社交網路、詞圖。

圖源：網路

五、針對不同用途該如何選擇合適的可視化圖表類型？

面對多種類型的圖表，以下表格總結了關於如何選擇合適的圖表。

顯示隨時間的變化，可以使用時間序列圖表來表示隨時間的變化，就是按時間順序表示數據點的圖表。表示隨時間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。

*基準線值是y軸上的起始值。

1. 柱狀圖（條形圖）和餅圖

柱狀圖（條形圖）和餅圖都可用於顯示比例，表示部分與總體的對比。

• 柱狀圖（條形圖）使用共同的基準線，通過條形長度表示數量；

• 餅圖使用圓的圓弧或角度表示整體的一部分。

柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有效地。由於這三個圖表都是使用相同的基準線，因此可以更輕鬆地根據條形長度比較值的差異。

圖源：網路

2. 面積圖

面積圖有多種類型，包括堆疊面積圖和層疊面積圖：

• 堆疊面積圖顯示多個時間序列（在同一時間段內）堆疊在一起

• 層疊面積圖顯示多個時間序列（在同一時間段內）重疊在一起

層疊面積圖建議不要使用超過兩個時間序列，因為這樣做會使數據模糊不清。取而代之，應當使用堆疊面積圖來比較一個時間間隔內的多個值（橫軸表示時間）。

圖源：網路

六、數據圖表的樣式設計

數據可視化使用自定義樣式和形狀，使數據更容易理解，以適合用戶需求。

圖表可以從以下方面進行優化：

• 圖形元素

• 文字排版

• 圖標

• 軸和標籤

• 圖例和注釋

不同類型數據的樣式設計：

可視化編碼：是將數據轉換為可視形式的過程。獨特的圖形屬性可應用於定量數據（如溫度，價格或速度）和定性數據（如類別，風味或表達式）。

這些圖形屬性包括：

• 形狀

• 顏色

• 大小

• 面積

• 體積

• 長度

• 角度

• 位置

• 方向

• 密度

不同屬性的表現：

多個視覺處理方法可以綜合應用於數據點的多個方面，例如：在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數量）。

圖源：網路

形狀可用於表示定性數據。在此圖表中，每個類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕鬆實現特定範圍的比較，同時也可以進行類別之間比較。

1. 形狀

圖表可以運用形狀，以多種方式展示數據。形狀的設計可以是有趣的、曲線的，或者精確和高保真的等等。

形狀精確程度：圖表可以展示不同精度程度的數據。

用於細緻研究的數據應該用適合交互的形狀（在觸摸大小和功能可見性方面）展示，而旨在表達一般概念或趨勢的數據可以使用細節較少的形狀。

圖源：網路

2. 顏色

顏色可用於以四種主要方式區分圖表數據：

• 區分類別

• 表示數量

• 突出特定數據

• 表示含義

1）顏色區分類別

圖源：網路

例：圓環圖中，顏色用於表示類別。

2）顏色突出數據

圖源：網路

例：散點圖中，顏色用於突出特定數據。

3）重點區域

在不濫用的情況下，顏色可以突出焦點區域。不建議大量使用高亮顏色，因為它們會分散用戶注意力，影響用戶的專註力。

4）顏色表示含義

圖源：網路

5）無障礙

為了適應看不到顏色差異的用戶，您可以使用其他方法來強調數據，例如高對比度著色，形狀或紋理。將文本標籤應用於數據還有助於說明其含義，同時消除對圖例的需求。

3. 線

圖表中的線可以表示數據的特性，例如層次結構，突出和比較。線條可以有多種不同的樣式，例如點劃線或不同的不透明度。

線可以應用於特定元素，包括：

• 注釋

• 預測元素

• 比較工具

• 可靠區間

• 異常

圖源：網路

4. 文字排版

文本可用於不同的圖表元素，包括：

• 圖表標題

• 數據標籤

• 軸標籤

• 圖例

圖表標題通常是具有最高層次結構的文本，軸標籤和圖例具有最低級別的層次結構。

圖源：網路

字重：標題和字重的變化可以表達內容在層次結構中的重要程度。但是應該保持克制，使用有限的字體樣式。

圖源：網路

5. 圖標

圖表可以表示圖表中不同類型的數據，並提高圖表的整體可用性。

圖表可用於：

• 分類數據：用於區分組或類別；

• UI控制項和操作：例如篩選、縮放、保存和下載；

• 狀態：例如錯誤、空狀態、完成狀態和危險。

在圖表中使用圖標時，建議使用通用可識別符號，尤其是在表示操作或狀態時，例如：保存、下載、完成、錯誤和危險。

圖源：網路

6. 坐標軸

一個或多個坐標軸顯示數據的比例和範圍，例如，折線圖沿水平和垂直坐標軸顯示一系列值。

1）柱狀圖（條形圖）基準線

柱狀圖（條形圖）應從為零的基準線（y軸上的起始值）開始，從不為零的基準線開始可能導致數據被錯誤地理解。

2）坐標軸標籤

標籤的設計應體現圖表中最重要的數據，應根據需要使用標籤，並在UI中保持一致性，他們的出現不應該妨礙查看圖表。

3）文字方向

為便於閱讀，文本標籤應水平放置在圖表上。

文字標籤不應該：

• 旋轉

• 垂直堆疊

圖源：網路

7. 圖例和注釋

圖例和注釋描述了圖表的資訊，注釋應突出顯示數據點，數據異常值和任何值得注意的內容。

1— 注釋，2.—圖例。

在PC端，建議在圖表下方放置圖例。在移動端，將圖例放在圖表上方，以便在交互過程中保持可見。

1）標籤和圖例

在簡單圖表中，可以使用直接標籤。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。

七、數據可視化大屏的用途分類

在稱為數據大屏的UI介面中，數據可視化通過一系列圖表實現。多個獨立的圖表有時可以比一個複雜的圖表更好地表達故事。

數據大屏設計：數據大屏的目的應在其布局，樣式和交互模式中體現。無論是用來製作演示文稿還是深入研究數據，它的設計應該適合它的使用方式。

數據大屏應該：

• 突出最重要資訊（使用布局）

• 根據資訊層級確定資訊的焦點（使用顏色、位置、大小和視覺權重）

應根據對數據的需求確定資訊的優先順序並進行安排。在此示例中設計儀錶板，考慮了以下用戶問題：

1. 需要注意的問題

2. 發生問題的時間

3. 發生問題的位置

4. 受問題影響的其他變數

1. 分析類數據大屏

分析類數據大屏讓用戶能夠研究多組數據並發現趨勢。通常，這些數據大屏包含能夠深入洞察數據的複雜圖表。

用例包括：

• 隨時間變化的突出趨勢

• 回答「為什麼」和「假設」的問題

• 預測

• 創建有深度的報告

分析類數據大屏示例：

• 跟蹤廣告活動的收效

• 跟蹤產品在其整個生命周期中的銷售額和收入

• 隨時間變化的城市人口趨勢

• 跟蹤隨時間變化氣候數據

分析類數據大屏顯示氣候數據

2. 操作類數據大屏

操作類數據大屏旨在回答一組預設的問題。

它們通常用於完成與監控相關的任務，在大多數情況下，這些類型的數據大屏具有一系列關於當前資訊的簡單圖表。

用例包括：

• 跟蹤目標的當前進度

• 實時跟蹤系統性能

操作類數據大屏示例：

• 跟蹤呼叫中心的活動，例如呼叫音量，等待時間，呼叫長度或呼叫類型

• 監控在雲端應用程式的運行狀況

• 顯示股市情況

• 監控賽車上的遙測數據

操作類數據大屏顯示設備存儲指標

3. 演示類數據大屏

演示類數據大屏是為感興趣的主題提供的展示視圖。

這些數據大屏通常包括一些小圖表或數據卡片，用動態標題描述每個圖表的趨勢和見解。

用例包括：

• 提供關鍵績效指標的總覽

• 創建高級執行情況的概要

演示類數據大屏示例：

• 提供投資賬戶績效的總覽

• 提供產品銷售和市場份額數據的概要

英文原文資料來源：Google / Material Design