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

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

苦惱？

在企業大數據、后臺管理面板、金融行業等與數據有關的UI設計中，數據可視

化設計是必不可少而且非常重要。

但是很多設計師不懂可視化步中不同用途的圖表規范，只是為了設計出好看的

數據圖表，在不停的尋找他計靈感參考，最終發現了國使有漂亮的可視化數據

圖表，但卻不能用在自己的項目上非?？上А?/p>

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

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

設計規范不了解。

如果您了解一些數據圖表的相關設計規范，知道什么數據用什么圖表，知道顏

色的意義，知道數據排版的要點，那么你就能從這些規則中繪制出優秀乂美觀

的可視化數據圖表。

二、設計師應該了解的數據可視化圖表設計規范有

哪些？

今天我將為大家分享谷歌2019年6月更新的MaterialDesign數據可視化設計

規范指南，這個規范指南基本適用所有數據圖表設計，很有參考價值，建議收

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

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

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

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

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

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

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

數據可視化是一種以圖形描繪密集和復雜信息的表現形式。數據可視化的視覺

效果旨在使數據容易對比，并用它來講故事，以此來幫助用戶做出決策。數據

可視化可以表達不同類型和規模的數據，包括從幾個數據點到有大量變量的數

據集。

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

1.準確的

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

息。

2.有幫助的

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

3.可擴展的

預測用戶對數據深度、復雜性和形式的需求，針對不同設備大家可以進行可視

化展示內容和形式。

四、數據圖表的類型

數據可視化是可以以不同的形式去表達的，圖表是表達數據的常用方式，因為

它們能夠展示和對比多種不同的數據。

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

1.要表現的數據

2.表現該數據的用意

1.具體類型

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

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

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

?

Illi

LineBarStackedbar

折線圖柱狀圖堆?柱狀圖

w

CandlestickAreaTimeline

蠟燭圖面積圖時間線圖

O

HorizonWaterfall

地平線圖瀑布圖

圖源：網絡

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

類別比較圖表是多個不同類別數據之間的比較，常見用例包括：不同國家的收

入、熱門場的時間、團隊分配。

o?

IlliMil

BarGroupedbarBubble

柱狀圖分組柱狀圖氣泡圖

ParallelcoordinatesMulti-lineBullet

平行坐標圖多條折線圖子彈圖

圖源:網絡

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

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

計。

?

llh

OrderedbarOrderedcolumnParallelcoordinates

有序條形圖有序柱狀圖平行坐標圖

圖源：網絡

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

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

預算。

O?

StackedbarPieDonut

堆金柱狀圖餅圖圓環圖

O

StackedareaTreemapSunburst

堆總面積圖樹狀圖旭日圖

圖源：網絡

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

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

命。

ScatterplotBubbleColumn/LineHeatmap

散點圖氣泡圖柱狀圖/折線圖熱力圖

圖源：網絡

6）數值間的分布

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

入分布。

圖源：網絡

7）數據的流程

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

計數和選舉結果。

?

SankeyGanttChord

?；鶊D甘特圖和弦圖

圖源：網絡

8）數據關系

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

?

NetworkVenndiagramChord

網絡圖維恩圖和弦圖

圖源：網絡

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

型？

血對多種類型的圖表，以卜表格總結了關于如何選擇合適的圖表。

顯示隨時間的變化，可以使用時間序列圖表來表示隨時間的變化，就是按時間

順序表示數據點的圖表。表示隨時間變化的圖表包括：折線圖，柱狀圖（條形

圖）和面積圖。

圖表類型用法基線值*時間序列白

折線圖表達數據的微小變化任何值任何時間F

柱狀圖/條形圖表達數據的較大變化，各個數據點與整04個以下1

體的關系，對比和排名

總結數據集之間的關系，各個數

面積圖0（當有多個系列時）8個以下?

據點與整體的關系

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

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

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

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

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

柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有

效地。由于這三個圖表都是使用相同的基線，因此可以更輕松地根據條形長度

比較值的差異。

SalesbyproductSalesbyproduct

ThisquarterLastquarter

?Thisquarter?Lastquarter?Alpha?Beta?GammaDelta

要不要

便用條形圖顯示隨時間的變化或類別之間的差異。不要使用多個餅圖來顯示隨時間的變化。這樣彳

比較每個切片的大小差異C

圖源：網絡

2.面積圖

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

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

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

層疊面積圖建議不要使用超過兩個時間序列，因為這樣做會使數據模糊不清。

取而代之，應當使用堆疊面積圖來比較一個時間間隔內的多個值（橫軸表示時

間）。

Usersinthelast30daysUsersinthelast30days

Users

600

400

200

0

Nov51525Dec5Nov51525

?CategoryA?CalegoryB-CategoryC?CategoryA?CategoryB■

要不要

使用堆積面積圖表示多個時間序列并保持良好的易不要使用層疊面積圖，因為它會遮

讀性?？勺x性C

圖源：網絡

六、數據圖表的樣式設計

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

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

?圖形元素

?文字排版

?圖標

?軸和標簽

?圖例和注釋

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

可視化編碼：是將數據轉換為可視形式的過程。獨特的圖形屬性

可應用于定量數據（如溫度，價格或速度）和定性數據（如類

別，風味或表達式）。

這些圖形屬性包括:

狀

形

色

顏

小

大

積

面

積

體

度

長

度

角

位

置

方

向

密

度

不同屬性的表現:

多個視覺處理方法可以綜合應用于數據點的多個方面，例如：在條形圖中，條

形顏色可以表示類別，而條形長度可以表示值（如人口數量）。

Revenuebyproduct

$15millions

$10

$5

$0

0

Units

ProductAProductBProductC

圖源：網絡

形狀可用于表不定性數據。在此圖表中，每個類別由特定形狀（圓形，止方形

和三角形）表示，這樣可以在一張圖表中輕松實現特定范圍的比較，同時也可

以進行類別之間比較。

1.形狀

圖表可以運用形狀，以多種方式展示數據。形狀的設計可以是有趣的、曲線

的，或者精確和高保真的等等。

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

用于細致研究的數據應該用適合交互的形狀（在觸摸大小和功能可見性方面）

展示，而旨在表達一般概念或趨勢的數據可以使用細節較少的形狀。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

40%40%

30%30%

20%20%

10%10%

00

IQ2IQ3IQ4IlQ2liQ4

翳

圖源：網絡

2.顏色

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

?區分類別

?表示數量

?突出特定數據

?表示含義

1）顏色區分類別

?Photos&Videos?Music&Audio?Games

?Movies&TVOtherapps

圖源：網絡

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

2）顏色突出數據

Revenueanalysis

AllUScustomers

Revenue

圖源：網絡

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

3）重點區域

在小濫用的情況下，顏色可以突出焦點區域。小建議大量使用高亮顏色，因為

它們會分散用戶注意力，影響用戶的專注力。

Usersinthelast30daysUsersinthelast30days

Usersu

1.000i.

00

Aug1,2019Aug15Aug31Aug1,2019Aug15Aug31

要注意

運用高亮顏色和中性色的對比，達到強調的目的。過多顏色可能會影響用戶的專注力。

4）顏色表示含義

EngagementEngagement

19%A19%

4%belowforecast4%belowforecast

要不要

使用其他視覺元素（如圖標）強化圖表中顏色的含不要僅使用顏色來表示含義。

義。

圖源：網絡

5）無障礙

為了適應看不到顏色差異的用戶，您可以使用其他方法來強調數據，例如高對

比度著色，形狀或紋理。將文本標簽應用于數據還有助于說明其含義，同時消

除對圖例的需求。

3.線

圖表中的線可以表示數據的特性，例如層次結構，突出和比較。線條可以有多

種不同的樣式，例如點劃線或不同的不透明度。

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

?注釋

?預測元素

?比較工具

?可靠區間

?異常

AllCampaigns

1,000

750

500

250

0

Aug1,2017Aug15Aug31

-A-B

-Thismonth…Lastmonth

要不目

改變線條的紋理來表示不同的數據類型。不與

變］

圖源：網絡

4.文字排版

文本可用于不同的圖表兀索，包括：

?圖表標題

?數據標簽

?軸標簽

?圖例

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

結構。

OAveragetemperature

inFahrenheitg^o

August

100°

80

、60

X

，40

20

JanMarMay

JulSepNovO

o___High-Low—Avg

類別

字體

字形大小

圖表標題

1.Roboto

常規18pt

圖表小標題

Roboto

常規14pt

2.數據標簽

Roboto

常規22pt

子標簽

Roboto

常規14pt

3.軸標簽

Roboto

常規12pt

4.圖例標簽

Roboto

常規12pt

圖源：網絡

字重：標題和字重的變化可以表達內容在層次結構中的更要程度。但是應該保

持克制，使用有限的字體樣式。

CitypopulationCitypopulation

EstimatedbyboroughEstimatedbyborough

PopulationPopulatii

July3,000kJuly3,000k

4.000k

MayJuneJulyAugSept

StatenIsland-Bronx-ManhattanStatenIsland-Bronx-Manhattan

Queens-BrooklynQueens-Brooklyn

不要

為創造出具有平衡感的設計，粗體僅用于一個或兩太多元素使用粗體會使識別重要元素變得困難

個關鍵元素C

圖源：網絡

5.圖標

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

圖表可用于：

?分類數據：用于區分組或類別；

?UI控件和操作：例如篩選、縮放、保存和下載；

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

在圖表中使用圖標時，建議使用通用可識別符號，尤其是在表示操作或狀態

時，例如：保存、下載、完成、錯誤和危險。

Mynetwork1IMynetwork

*1勤

Devices(4)1

SalesEngagement

345.4M19%

"+8%S-11%

圖源:網絡

6.坐標軸

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

顯示一系列值。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

40%

30%

20%

10%

0

Q2Q3Q4

柱狀圖應始終從X軸基線值零開始。可以考慮刪除坐標軸，將值直接放在相應的圖

素上，以將數據保持為焦點。

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

柱狀圖（條形圖）應從為零的基線（y軸上的起始值）開始，從不為零的基線

開始可能導致數據被錯誤地理解。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

2）坐標軸標簽

標簽的設計應體現圖表中最重要的數據，應根據需要使用標簽，并在UI中保持

一致性，他們的出現不應該妨礙查看圖表。

AllCampaignsAllCampaigns

1,0001,000

900

0

Aug1Aug10Aug15Aug21Aug31

—Impressions-Clicks—Impressions-Clicks

要不要

通過使用合適數量的坐標軸標簽以保證易讀性。不要使用過多坐標軸標簽使圖表過于復雜。

3）文字方向

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

文字標簽不應該：

?旋轉

?垂直堆疊

Salesbyregion

40%

30%

20%

10%

0%

要注意

根據需要旋轉柱狀圖為條形圖，增加空間，水平排不要旋轉柱狀圖標簽，降低易讀性。

列文本。

圖源：網絡

7.圖例和注釋

圖例和注釋描述了圖表的信息，注釋應突出顯示數據點.，數據異常值和任何值

得注意的內容。

Averagetemperature

inFahrenheit

o

?High-Low

1—注釋，2.一圖例。

在PC端，建議在圖表下方放置圖例。在移動端，將圖例放在圖表上方，以便在

交互過程中保持可見。

1）標簽和圖例

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

分）中，可以用圖例。

AveragetemperatureAveragetemperature

inFahrenheitinFahrenheit

20

JanMarMayJulSepNov

使用直接標簽的折線圖使用圖例的折線圖

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

在稱為數據大屏的II界面中，數據可視化通過一系列圖表實現。多個獨立的圖

表有時可以比一個復雜的圖表更好地表達故事。

數據大屏設計：數據大屏的目的應在其布局，樣式和交互模式中體現。無論是

用來制作演示文稿還是深入研究數據，它的設計應該適合它的使用方式。

數據大屏應該：

?突出最重要信息（使用布局）

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

—什么問題需要我注意？

?-問題什么時間出現的？

應根據對數據的需求確定信息的優先級并進行安排。在此示例中設計儀表板，

考慮了以下用戶問題：

1.需要注意的問題

2.發生問題的時間

3.發生問題的位置

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

1.分析類數據大屏

分析類數據大屏讓用戶能夠研究多組數據并發現趨勢。通常，這些數據大屏包

含能夠深入洞察數據的復雜圖表。

用例包括：

?隨時間變化的突出趨勢

?回答“為什么”和“假設”的問題

?預測

?創建有深度的報告

分析類數據大屏示例：

?跟蹤廣告活動的收效

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

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

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

=ClimateDataExplorer

Averagehightemperature

inFahrenheitQ-I0

20

JanMarMayJulSepNov

-RegionA-RegionB-RegionC

Monthlyraintotals

RegionA

RegionC

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

2.操作類數據大屏

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

它們通常用于完成與監控相關的任務，在大多數情況下，這些類型的數據大屏

具有一系列關于當前信息的簡單圖表。

川例包括：

?跟蹤目標的當前進度

?實時跟蹤系統性能

操作類數據大屏示例:

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

?監控在云端應