數(shù)據(jù)可視化設(shè)計(jì)師必備的圖表規(guī)范指南/>

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

苦惱？

在企業(yè)大數(shù)據(jù)、后臺(tái)管理面板、金融行業(yè)等與數(shù)據(jù)有關(guān)的UI設(shè)計(jì)中，數(shù)據(jù)可視

化設(shè)計(jì)是必不可少而且非常重要。

但是很多設(shè)計(jì)師不懂可視化步中不同用途的圖表規(guī)范，只是為了設(shè)計(jì)出好看的

數(shù)據(jù)圖表，在不停的尋找他計(jì)靈感參考，最終發(fā)現(xiàn)了國(guó)使有漂亮的可視化數(shù)據(jù)

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

為什么會(huì)出現(xiàn)這樣的情況呢？

原因其實(shí)無(wú)非就是：設(shè)計(jì)師除了自身比較少接觸數(shù)據(jù)設(shè)計(jì)外，就是對(duì)可視化的

設(shè)計(jì)規(guī)范不了解。

如果您了解一些數(shù)據(jù)圖表的相關(guān)設(shè)計(jì)規(guī)范，知道什么數(shù)據(jù)用什么圖表，知道顏

色的意義，知道數(shù)據(jù)排版的要點(diǎn)，那么你就能從這些規(guī)則中繪制出優(yōu)秀乂美觀

的可視化數(shù)據(jù)圖表。

二、設(shè)計(jì)師應(yīng)該了解的數(shù)據(jù)可視化圖表設(shè)計(jì)規(guī)范有

哪些？

今天我將為大家分享谷歌2019年6月更新的MaterialDesign數(shù)據(jù)可視化設(shè)計(jì)

規(guī)范指南，這個(gè)規(guī)范指南基本適用所有數(shù)據(jù)圖表設(shè)計(jì)，很有參考價(jià)值，建議收

主要從以下幾個(gè)方面去歸納：

1.數(shù)據(jù)可視化的基本原則？

2.數(shù)據(jù)圖表的類型有哪些？

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

4.數(shù)據(jù)圖表的樣式設(shè)計(jì)？

5.數(shù)據(jù)可視化大屏的用途分類？

三、數(shù)據(jù)可視化的基本原則

數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺(jué)

效果旨在使數(shù)據(jù)容易對(duì)比，并用它來(lái)講故事，以此來(lái)幫助用戶做出決策。數(shù)據(jù)

可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù)，包括從幾個(gè)數(shù)據(jù)點(diǎn)到有大量變量的數(shù)

據(jù)集。

所以我們?cè)谶M(jìn)行數(shù)據(jù)可視化的時(shí)候需要注意三點(diǎn)要求：

1.準(zhǔn)確的

優(yōu)先考慮數(shù)據(jù)的準(zhǔn)確性、清晰度和完整性、以不會(huì)曲解信息的方式來(lái)呈現(xiàn)信

息。

2.有幫助的

為用戶瀏覽數(shù)據(jù)時(shí)創(chuàng)造便于研究和比較的條件與功能。

3.可擴(kuò)展的

預(yù)測(cè)用戶對(duì)數(shù)據(jù)深度、復(fù)雜性和形式的需求，針對(duì)不同設(shè)備大家可以進(jìn)行可視

化展示內(nèi)容和形式。

四、數(shù)據(jù)圖表的類型

數(shù)據(jù)可視化是可以以不同的形式去表達(dá)的，圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)?/p>

它們能夠展示和對(duì)比多種不同的數(shù)據(jù)。

圖表類型的選擇主要取決于兩點(diǎn)：

1.要表現(xiàn)的數(shù)據(jù)

2.表現(xiàn)該數(shù)據(jù)的用意

1.具體類型

1）隨時(shí)間進(jìn)行變化的圖表

這類圖表主要用來(lái)展現(xiàn)一段時(shí)間的數(shù)據(jù)，例如多個(gè)類別之間的趨勢(shì)或者比較。

常見(jiàn)的用例包括：股價(jià)的升降表現(xiàn)、數(shù)據(jù)統(tǒng)計(jì)、年報(bào)等。

?

Illi

LineBarStackedbar

折線圖柱狀圖堆?柱狀圖

w

CandlestickAreaTimeline

蠟燭圖面積圖時(shí)間線圖

O

HorizonWaterfall

地平線圖瀑布圖

圖源：網(wǎng)絡(luò)

2）不同數(shù)據(jù)間的類別比較

類別比較圖表是多個(gè)不同類別數(shù)據(jù)之間的比較，常見(jiàn)用例包括：不同國(guó)家的收

入、熱門(mén)場(chǎng)的時(shí)間、團(tuán)隊(duì)分配。

o?

IlliMil

BarGroupedbarBubble

柱狀圖分組柱狀圖氣泡圖

ParallelcoordinatesMulti-lineBullet

平行坐標(biāo)圖多條折線圖子彈圖

圖源:網(wǎng)絡(luò)

3）展現(xiàn)不同數(shù)據(jù)間的排名圖表

排名圖表顯示項(xiàng)目在有序列表中的位置,常見(jiàn)用例包括：選舉結(jié)果、性能統(tǒng)

計(jì)。

?

llh

OrderedbarOrderedcolumnParallelcoordinates

有序條形圖有序柱狀圖平行坐標(biāo)圖

圖源：網(wǎng)絡(luò)

4）不同部分?jǐn)?shù)據(jù)在總體數(shù)據(jù)中的占比

占比類圖表顯示了局部與整體的關(guān)系，常見(jiàn)用例包括：產(chǎn)品類別的綜合收入、

預(yù)算。

O?

StackedbarPieDonut

堆金柱狀圖餅圖圓環(huán)圖

O

StackedareaTreemapSunburst

堆總面積圖樹(shù)狀圖旭日?qǐng)D

圖源：網(wǎng)絡(luò)

5）兩個(gè)數(shù)據(jù)以上的關(guān)聯(lián)比較

關(guān)聯(lián)類圖表顯示兩個(gè)或以上變量之間的關(guān)系，常見(jiàn)用例包括：收入和預(yù)期壽

命。

ScatterplotBubbleColumn/LineHeatmap

散點(diǎn)圖氣泡圖柱狀圖/折線圖熱力圖

圖源：網(wǎng)絡(luò)

6）數(shù)值間的分布

分布類圖表顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率，常見(jiàn)用例包括：人口分布、收

入分布。

圖源：網(wǎng)絡(luò)

7）數(shù)據(jù)的流程

流程類圖表顯示了多個(gè)狀態(tài)之間的數(shù)據(jù)移動(dòng)，常見(jiàn)用例包括?：資金轉(zhuǎn)移、投票

計(jì)數(shù)和選舉結(jié)果。

?

SankeyGanttChord

?；鶊D甘特圖和弦圖

圖源：網(wǎng)絡(luò)

8）數(shù)據(jù)關(guān)系

關(guān)系圖表顯示多個(gè)項(xiàng)目之間的關(guān)系，常見(jiàn)用例包括：社交網(wǎng)絡(luò)、詞圖。

?

NetworkVenndiagramChord

網(wǎng)絡(luò)圖維恩圖和弦圖

圖源：網(wǎng)絡(luò)

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

型？

血對(duì)多種類型的圖表，以卜表格總結(jié)了關(guān)于如何選擇合適的圖表。

顯示隨時(shí)間的變化，可以使用時(shí)間序列圖表來(lái)表示隨時(shí)間的變化，就是按時(shí)間

順序表示數(shù)據(jù)點(diǎn)的圖表。表示隨時(shí)間變化的圖表包括：折線圖，柱狀圖（條形

圖）和面積圖。

圖表類型用法基線值*時(shí)間序列白

折線圖表達(dá)數(shù)據(jù)的微小變化任何值任何時(shí)間F

柱狀圖/條形圖表達(dá)數(shù)據(jù)的較大變化，各個(gè)數(shù)據(jù)點(diǎn)與整04個(gè)以下1

體的關(guān)系，對(duì)比和排名

總結(jié)數(shù)據(jù)集之間的關(guān)系，各個(gè)數(shù)

面積圖0（當(dāng)有多個(gè)系列時(shí)）8個(gè)以下?

據(jù)點(diǎn)與整體的關(guān)系

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

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

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

?柱狀圖（條形圖）使用共同的基線，通過(guò)條形長(zhǎng)度表示數(shù)量；

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

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

效地。由于這三個(gè)圖表都是使用相同的基線，因此可以更輕松地根據(jù)條形長(zhǎng)度

比較值的差異。

SalesbyproductSalesbyproduct

ThisquarterLastquarter

?Thisquarter?Lastquarter?Alpha?Beta?GammaDelta

要不要

便用條形圖顯示隨時(shí)間的變化或類別之間的差異。不要使用多個(gè)餅圖來(lái)顯示隨時(shí)間的變化。這樣彳

比較每個(gè)切片的大小差異C

圖源：網(wǎng)絡(luò)

2.面積圖

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

?堆疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）堆疊在一起

?層疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）重疊在一起

層疊面積圖建議不要使用超過(guò)兩個(gè)時(shí)間序列，因?yàn)檫@樣做會(huì)使數(shù)據(jù)模糊不清。

取而代之，應(yīng)當(dāng)使用堆疊面積圖來(lái)比較一個(gè)時(shí)間間隔內(nèi)的多個(gè)值（橫軸表示時(shí)

間）。

Usersinthelast30daysUsersinthelast30days

Users

600

400

200

0

Nov51525Dec5Nov51525

?CategoryA?CalegoryB-CategoryC?CategoryA?CategoryB■

要不要

使用堆積面積圖表示多個(gè)時(shí)間序列并保持良好的易不要使用層疊面積圖，因?yàn)樗鼤?huì)遮

讀性?？勺x性C

圖源：網(wǎng)絡(luò)

六、數(shù)據(jù)圖表的樣式設(shè)計(jì)

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

圖表可以從以下方面進(jìn)行優(yōu)化:

?圖形元素

?文字排版

?圖標(biāo)

?軸和標(biāo)簽

?圖例和注釋

不同類型數(shù)據(jù)的樣式設(shè)計(jì)：

可視化編碼：是將數(shù)據(jù)轉(zhuǎn)換為可視形式的過(guò)程。獨(dú)特的圖形屬性

可應(yīng)用于定量數(shù)據(jù)（如溫度，價(jià)格或速度）和定性數(shù)據(jù)（如類

別，風(fēng)味或表達(dá)式）。

這些圖形屬性包括:

狀

形

色

顏

小

大

積

面

積

體

度

長(zhǎng)

度

角

位

置

方

向

密

度

不同屬性的表現(xiàn):

多個(gè)視覺(jué)處理方法可以綜合應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面，例如：在條形圖中，條

形顏色可以表示類別，而條形長(zhǎng)度可以表示值（如人口數(shù)量）。

Revenuebyproduct

$15millions

$10

$5

$0

0

Units

ProductAProductBProductC

圖源：網(wǎng)絡(luò)

形狀可用于表不定性數(shù)據(jù)。在此圖表中，每個(gè)類別由特定形狀（圓形，止方形

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

以進(jìn)行類別之間比較。

1.形狀

圖表可以運(yùn)用形狀，以多種方式展示數(shù)據(jù)。形狀的設(shè)計(jì)可以是有趣的、曲線

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

形狀精確程度：圖表可以展示不同精度程度的數(shù)據(jù)。

用于細(xì)致研究的數(shù)據(jù)應(yīng)該用適合交互的形狀（在觸摸大小和功能可見(jiàn)性方面）

展示，而旨在表達(dá)一般概念或趨勢(shì)的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

40%40%

30%30%

20%20%

10%10%

00

IQ2IQ3IQ4IlQ2liQ4

翳

圖源：網(wǎng)絡(luò)

2.顏色

顏色可用于以四種主要方式區(qū)分圖表數(shù)據(jù):

?區(qū)分類別

?表示數(shù)量

?突出特定數(shù)據(jù)

?表示含義

1）顏色區(qū)分類別

?Photos&Videos?Music&Audio?Games

?Movies&TVOtherapps

圖源：網(wǎng)絡(luò)

例：圓環(huán)圖中，顏色用于?表示類別。

2）顏色突出數(shù)據(jù)

Revenueanalysis

AllUScustomers

Revenue

圖源：網(wǎng)絡(luò)

例：散點(diǎn)圖中，顏色用于突出特定數(shù)據(jù)。

3）重點(diǎn)區(qū)域

在小濫用的情況下，顏色可以突出焦點(diǎn)區(qū)域。小建議大量使用高亮顏色，因?yàn)?/p>

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

Usersinthelast30daysUsersinthelast30days

Usersu

1.000i.

00

Aug1,2019Aug15Aug31Aug1,2019Aug15Aug31

要注意

運(yùn)用高亮顏色和中性色的對(duì)比，達(dá)到強(qiáng)調(diào)的目的。過(guò)多顏色可能會(huì)影響用戶的專注力。

4）顏色表示含義

EngagementEngagement

19%A19%

4%belowforecast4%belowforecast

要不要

使用其他視覺(jué)元素（如圖標(biāo)）強(qiáng)化圖表中顏色的含不要僅使用顏色來(lái)表示含義。

義。

圖源：網(wǎng)絡(luò)

5）無(wú)障礙

為了適應(yīng)看不到顏色差異的用戶，您可以使用其他方法來(lái)強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)

比度著色，形狀或紋理。將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說(shuō)明其含義，同時(shí)消

除對(duì)圖例的需求。

3.線

圖表中的線可以表示數(shù)據(jù)的特性，例如層次結(jié)構(gòu)，突出和比較。線條可以有多

種不同的樣式，例如點(diǎn)劃線或不同的不透明度。

線可以應(yīng)用于特定元素，包括：

?注釋

?預(yù)測(cè)元素

?比較工具

?可靠區(qū)間

?異常

AllCampaigns

1,000

750

500

250

0

Aug1,2017Aug15Aug31

-A-B

-Thismonth…Lastmonth

要不目

改變線條的紋理來(lái)表示不同的數(shù)據(jù)類型。不與

變］

圖源：網(wǎng)絡(luò)

4.文字排版

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

?圖表標(biāo)題

?數(shù)據(jù)標(biāo)簽

?軸標(biāo)簽

?圖例

圖表標(biāo)題通常是具有最高層次結(jié)構(gòu)的文本，軸標(biāo)簽和圖例具有最低級(jí)別的層次

結(jié)構(gòu)。

OAveragetemperature

inFahrenheitg^o

August

100°

80

、60

X

，40

20

JanMarMay

JulSepNovO

o___High-Low—Avg

類別

字體

字形大小

圖表標(biāo)題

1.Roboto

常規(guī)18pt

圖表小標(biāo)題

Roboto

常規(guī)14pt

2.數(shù)據(jù)標(biāo)簽

Roboto

常規(guī)22pt

子標(biāo)簽

Roboto

常規(guī)14pt

3.軸標(biāo)簽

Roboto

常規(guī)12pt

4.圖例標(biāo)簽

Roboto

常規(guī)12pt

圖源：網(wǎng)絡(luò)

字重：標(biāo)題和字重的變化可以表達(dá)內(nèi)容在層次結(jié)構(gòu)中的更要程度。但是應(yīng)該保

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

CitypopulationCitypopulation

EstimatedbyboroughEstimatedbyborough

PopulationPopulatii

July3,000kJuly3,000k

4.000k

MayJuneJulyAugSept

StatenIsland-Bronx-ManhattanStatenIsland-Bronx-Manhattan

Queens-BrooklynQueens-Brooklyn

不要

為創(chuàng)造出具有平衡感的設(shè)計(jì)，粗體僅用于一個(gè)或兩太多元素使用粗體會(huì)使識(shí)別重要元素變得困難

個(gè)關(guān)鍵元素C

圖源：網(wǎng)絡(luò)

5.圖標(biāo)

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

圖表可用于：

?分類數(shù)據(jù)：用于區(qū)分組或類別；

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

?狀態(tài)：例如錯(cuò)誤、空狀態(tài)、完成狀態(tài)和危險(xiǎn)。

在圖表中使用圖標(biāo)時(shí)，建議使用通用可識(shí)別符號(hào)，尤其是在表示操作或狀態(tài)

時(shí)，例如：保存、下載、完成、錯(cuò)誤和危險(xiǎn)。

Mynetwork1IMynetwork

*1勤

Devices(4)1

SalesEngagement

345.4M19%

"+8%S-11%

圖源:網(wǎng)絡(luò)

6.坐標(biāo)軸

一個(gè)或多個(gè)坐標(biāo)軸顯示數(shù)據(jù)的比例和范圍，例如，折線圖沿水平和垂直坐標(biāo)軸

顯示一系列值。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

40%

30%

20%

10%

0

Q2Q3Q4

柱狀圖應(yīng)始終從X軸基線值零開(kāi)始?？梢钥紤]刪除坐標(biāo)軸，將值直接放在相應(yīng)的圖

素上，以將數(shù)據(jù)保持為焦點(diǎn)。

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

柱狀圖（條形圖）應(yīng)從為零的基線（y軸上的起始值）開(kāi)始，從不為零的基線

開(kāi)始可能導(dǎo)致數(shù)據(jù)被錯(cuò)誤地理解。

CustomerfeedbackCustomerfeedback

PositivecommentsPositivecomments

2）坐標(biāo)軸標(biāo)簽

標(biāo)簽的設(shè)計(jì)應(yīng)體現(xiàn)圖表中最重要的數(shù)據(jù)，應(yīng)根據(jù)需要使用標(biāo)簽，并在UI中保持

一致性，他們的出現(xiàn)不應(yīng)該妨礙查看圖表。

AllCampaignsAllCampaigns

1,0001,000

900

0

Aug1Aug10Aug15Aug21Aug31

—Impressions-Clicks—Impressions-Clicks

要不要

通過(guò)使用合適數(shù)量的坐標(biāo)軸標(biāo)簽以保證易讀性。不要使用過(guò)多坐標(biāo)軸標(biāo)簽使圖表過(guò)于復(fù)雜。

3）文字方向

為便于閱讀，文本標(biāo)簽應(yīng)水平放置在圖表上。

文字標(biāo)簽不應(yīng)該：

?旋轉(zhuǎn)

?垂直堆疊

Salesbyregion

40%

30%

20%

10%

0%

要注意

根據(jù)需要旋轉(zhuǎn)柱狀圖為條形圖，增加空間，水平排不要旋轉(zhuǎn)柱狀圖標(biāo)簽，降低易讀性。

列文本。

圖源：網(wǎng)絡(luò)

7.圖例和注釋

圖例和注釋描述了圖表的信息，注釋?xiě)?yīng)突出顯示數(shù)據(jù)點(diǎn).，數(shù)據(jù)異常值和任何值

得注意的內(nèi)容。

Averagetemperature

inFahrenheit

o

?High-Low

1—注釋，2.一圖例。

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

交互過(guò)程中保持可見(jiàn)。

1）標(biāo)簽和圖例

在簡(jiǎn)單圖表中，可以使用直接標(biāo)簽。在密集的圖表（或更大的圖表組的一部

分）中，可以用圖例。

AveragetemperatureAveragetemperature

inFahrenheitinFahrenheit

20

JanMarMayJulSepNov

使用直接標(biāo)簽的折線圖使用圖例的折線圖

七、數(shù)據(jù)可視化大屏的用途分類

在稱為數(shù)據(jù)大屏的II界面中，數(shù)據(jù)可視化通過(guò)一系列圖表實(shí)現(xiàn)。多個(gè)獨(dú)立的圖

表有時(shí)可以比一個(gè)復(fù)雜的圖表更好地表達(dá)故事。

數(shù)據(jù)大屏設(shè)計(jì)：數(shù)據(jù)大屏的目的應(yīng)在其布局，樣式和交互模式中體現(xiàn)。無(wú)論是

用來(lái)制作演示文稿還是深入研究數(shù)據(jù)，它的設(shè)計(jì)應(yīng)該適合它的使用方式。

數(shù)據(jù)大屏應(yīng)該：

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

?根據(jù)信息層級(jí)確定信息的焦點(diǎn)（使用顏色、位置、大小和視覺(jué)權(quán)重）

—什么問(wèn)題需要我注意？

?-問(wèn)題什么時(shí)間出現(xiàn)的？

應(yīng)根據(jù)對(duì)數(shù)據(jù)的需求確定信息的優(yōu)先級(jí)并進(jìn)行安排。在此示例中設(shè)計(jì)儀表板，

考慮了以下用戶問(wèn)題：

1.需要注意的問(wèn)題

2.發(fā)生問(wèn)題的時(shí)間

3.發(fā)生問(wèn)題的位置

4.受問(wèn)題影響的其他變量

1.分析類數(shù)據(jù)大屏

分析類數(shù)據(jù)大屏讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢(shì)。通常，這些數(shù)據(jù)大屏包

含能夠深入洞察數(shù)據(jù)的復(fù)雜圖表。

用例包括：

?隨時(shí)間變化的突出趨勢(shì)

?回答“為什么”和“假設(shè)”的問(wèn)題

?預(yù)測(cè)

?創(chuàng)建有深度的報(bào)告

分析類數(shù)據(jù)大屏示例：

?跟蹤廣告活動(dòng)的收效

?跟蹤產(chǎn)品在其整個(gè)生命周期中的銷售額和收入

?隨時(shí)間變化的城市人口趨勢(shì)

?跟蹤隨時(shí)間變化氣候數(shù)據(jù)

=ClimateDataExplorer

Averagehightemperature

inFahrenheitQ-I0

20

JanMarMayJulSepNov

-RegionA-RegionB-RegionC

Monthlyraintotals

RegionA

RegionC

分析類數(shù)據(jù)大屏顯示氣候數(shù)據(jù)

2.操作類數(shù)據(jù)大屏

操作類數(shù)據(jù)大屏旨在回答一組預(yù)設(shè)的問(wèn)題。

它們通常用于完成與監(jiān)控相關(guān)的任務(wù)，在大多數(shù)情況下，這些類型的數(shù)據(jù)大屏

具有一系列關(guān)于當(dāng)前信息的簡(jiǎn)單圖表。

川例包括：

?跟蹤目標(biāo)的當(dāng)前進(jìn)度

?實(shí)時(shí)跟蹤系統(tǒng)性能

操作類數(shù)據(jù)大屏示例:

?跟蹤呼叫中心的活動(dòng)，例如呼叫音量，等待時(shí)IH,呼叫長(zhǎng)度或呼叫類型

?監(jiān)控在云端應(yīng)