編輯導(dǎo)語：數(shù)據(jù)可視化，旨在借助圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不意味著數(shù)據(jù)可視化就一定令人感到枯燥乏味，為了有效地傳達(dá)概念，美學(xué)形式與功能需要齊頭并進(jìn)。然而，設(shè)計人員往往并不能很好地把握設(shè)計與功能之間的平衡，從而創(chuàng)造出華而不實(shí)的數(shù)據(jù)可視化形式。接下來，本文作者為我們分析了數(shù)據(jù)可視化設(shè)計師必備的圖表規(guī)范指南。

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

在企業(yè)大數(shù)據(jù)、后臺管理面板、金融行業(yè)等與數(shù)據(jù)有關(guān)的UI設(shè)計中，數(shù)據(jù)可視化設(shè)計是必不可少而且非常重要。

但是很多設(shè)計師不懂可視化當(dāng)中不同用途的圖表規(guī)范，只是為了設(shè)計出好看的數(shù)據(jù)圖表，在不停的尋找設(shè)計靈感參考，最終發(fā)現(xiàn)了即使有漂亮的可視化數(shù)據(jù)圖表，但卻不能用在自己的項目上非?？上?。

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

原因其實(shí)無非就是：設(shè)計師除了自身比較少接觸數(shù)據(jù)設(shè)計外，就是對可視化的設(shè)計規(guī)范不了解。

如果您了解一些數(shù)據(jù)圖表的相關(guān)設(shè)計規(guī)范，知道什么數(shù)據(jù)用什么圖表，知道顏色的意義，知道數(shù)據(jù)排版的要點(diǎn)，那么你就能從這些規(guī)則中繪制出優(yōu)秀又美觀的可視化數(shù)據(jù)圖表。

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

今天我將為大家分享谷歌2019年6月更新的Material Design數(shù)據(jù)可視化設(shè)計規(guī)范指南，這個規(guī)范指南基本適用所有數(shù)據(jù)圖表設(shè)計，很有參考價值，建議收藏。

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

1. 數(shù)據(jù)可視化的基本原則？
2. 數(shù)據(jù)圖表的類型有哪些？
3. 針對不同用途該如何選擇合適的可視化圖表類型？
4. 數(shù)據(jù)圖表的樣式設(shè)計？
5. 數(shù)據(jù)可視化大屏的用途分類？

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

數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺效果旨在使數(shù)據(jù)容易對比，并用它來講故事，以此來幫助用戶做出決策。數(shù)據(jù)可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù)，包括從幾個數(shù)據(jù)點(diǎn)到有大量變量的數(shù)據(jù)集。

所以我們在進(jìn)行數(shù)據(jù)可視化的時候需要注意三點(diǎn)要求：

1. 準(zhǔn)確的

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

2. 有幫助的

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

3. 可擴(kuò)展的

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

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

數(shù)據(jù)可視化是可以以不同的形式去表達(dá)的，圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)樗鼈兡軌蛘故竞蛯Ρ榷喾N不同的數(shù)據(jù)。

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

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

1. 具體類型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

流程類圖表顯示了多個狀態(tài)之間的數(shù)據(jù)移動，常見用例包括：資金轉(zhuǎn)移、投票計數(shù)和選舉結(jié)果。

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

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

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

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

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

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

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

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

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

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

• 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數(shù)量；
• 餅圖使用圓的圓弧或角度表示整體的一部分。

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

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

2. 面積圖

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

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

層疊面積圖建議不要使用超過兩個時間序列，因?yàn)檫@樣做會使數(shù)據(jù)模糊不清。取而代之，應(yīng)當(dāng)使用堆疊面積圖來比較一個時間間隔內(nèi)的多個值（橫軸表示時間）。

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

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

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

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

• 圖形元素
• 文字排版
• 圖標(biāo)
• 軸和標(biāo)簽
• 圖例和注釋

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

可視化編碼：是將數(shù)據(jù)轉(zhuǎn)換為可視形式的過程。獨(dú)特的圖形屬性可應(yīng)用于定量數(shù)據(jù)（如溫度，價格或速度）和定性數(shù)據(jù)（如類別，風(fēng)味或表達(dá)式）。

這些圖形屬性包括：

• 形狀
• 顏色
• 大小
• 面積
• 體積
• 長度
• 角度
• 位置
• 方向
• 密度

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

多個視覺處理方法可以綜合應(yīng)用于數(shù)據(jù)點(diǎn)的多個方面，例如：在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數(shù)量）。

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

形狀可用于表示定性數(shù)據(jù)。在此圖表中，每個類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕松實(shí)現(xiàn)特定范圍的比較，同時也可以進(jìn)行類別之間比較。

1. 形狀

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

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

用于細(xì)致研究的數(shù)據(jù)應(yīng)該用適合交互的形狀（在觸摸大小和功能可見性方面）展示，而旨在表達(dá)一般概念或趨勢的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

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

2. 顏色

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

• 區(qū)分類別
• 表示數(shù)量
• 突出特定數(shù)據(jù)
• 表示含義

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

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

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

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

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

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

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

在不濫用的情況下，顏色可以突出焦點(diǎn)區(qū)域。不建議大量使用高亮顏色，因?yàn)樗鼈儠稚⒂脩糇⒁饬?，影響用戶的專注力?img data-action="zoom" class="syl-page-img aligncenter" src="https://p6-tt.byteimg.com/origin/pgc-image/02bd127fab564d728f26c1ccfb645100?from=pc" alt="了解數(shù)據(jù)可視化設(shè)計規(guī)范指南，你在設(shè)計時便不會苦惱" width="721" height="434" />

4）顏色表示含義

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

5）無障礙

為了適應(yīng)看不到顏色差異的用戶，您可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù)，例如高對比度著色，形狀或紋理。將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說明其含義，同時消除對圖例的需求。

3. 線

圖表中的線可以表示數(shù)據(jù)的特性，例如層次結(jié)構(gòu)，突出和比較。線條可以有多種不同的樣式，例如點(diǎn)劃線或不同的不透明度。

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

• 注釋
• 預(yù)測元素
• 比較工具
• 可靠區(qū)間
• 異常

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

4. 文字排版

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

• 圖表標(biāo)題
• 數(shù)據(jù)標(biāo)簽
• 軸標(biāo)簽
• 圖例

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

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

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

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

5. 圖標(biāo)

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

圖表可用于：

• 分類數(shù)據(jù)：用于區(qū)分組或類別；
• UI控件和操作：例如篩選、縮放、保存和下載；
• 狀態(tài)：例如錯誤、空狀態(tài)、完成狀態(tài)和危險。

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

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

6. 坐標(biāo)軸

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

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

柱狀圖（條形圖）應(yīng)從為零的基線（y軸上的起始值）開始，從不為零的基線開始可能導(dǎo)致數(shù)據(jù)被錯誤地理解。

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

標(biāo)簽的設(shè)計應(yīng)體現(xiàn)圖表中最重要的數(shù)據(jù)，應(yīng)根據(jù)需要使用標(biāo)簽，并在UI中保持一致性，他們的出現(xiàn)不應(yīng)該妨礙查看圖表。

3）文字方向

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

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

• 旋轉(zhuǎn)
• 垂直堆疊

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

7. 圖例和注釋

圖例和注釋描述了圖表的信息，注釋應(yīng)突出顯示數(shù)據(jù)點(diǎn)，數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

1— 注釋，2.—圖例。

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

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

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

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

在稱為數(shù)據(jù)大屏的UI界面中，數(shù)據(jù)可視化通過一系列圖表實(shí)現(xiàn)。多個獨(dú)立的圖表有時可以比一個復(fù)雜的圖表更好地表達(dá)故事。

數(shù)據(jù)大屏設(shè)計：數(shù)據(jù)大屏的目的應(yīng)在其布局，樣式和交互模式中體現(xiàn)。無論是用來制作演示文稿還是深入研究數(shù)據(jù)，它的設(shè)計應(yīng)該適合它的使用方式。

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

• 突出最重要信息（使用布局）
• 根據(jù)信息層級確定信息的焦點(diǎn)（使用顏色、位置、大小和視覺權(quán)重）

應(yīng)根據(jù)對數(shù)據(jù)的需求確定信息的優(yōu)先級并進(jìn)行安排。在此示例中設(shè)計儀表板，考慮了以下用戶問題：

1. 需要注意的問題
2. 發(fā)生問題的時間
3. 發(fā)生問題的位置
4. 受問題影響的其他變量

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

分析類數(shù)據(jù)大屏讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常，這些數(shù)據(jù)大屏包含能夠深入洞察數(shù)據(jù)的復(fù)雜圖表。

用例包括：

• 隨時間變化的突出趨勢
• 回答“為什么”和“假設(shè)”的問題
• 預(yù)測
• 創(chuàng)建有深度的報告

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

• 跟蹤廣告活動的收效
• 跟蹤產(chǎn)品在其整個生命周期中的銷售額和收入
• 隨時間變化的城市人口趨勢
• 跟蹤隨時間變化氣候數(shù)據(jù)

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

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

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

它們通常用于完成與監(jiān)控相關(guān)的任務(wù)，在大多數(shù)情況下，這些類型的數(shù)據(jù)大屏具有一系列關(guān)于當(dāng)前信息的簡單圖表。

用例包括：

• 跟蹤目標(biāo)的當(dāng)前進(jìn)度
• 實(shí)時跟蹤系統(tǒng)性能

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

• 跟蹤呼叫中心的活動，例如呼叫音量，等待時間，呼叫長度或呼叫類型
• 監(jiān)控在云端應(yīng)用程序的運(yùn)行狀況
• 顯示股市情況
• 監(jiān)控賽車上的遙測數(shù)據(jù)

操作類數(shù)據(jù)大屏顯示設(shè)備存儲指標(biāo)

3. 演示類數(shù)據(jù)大屏

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

這些數(shù)據(jù)大屏通常包括一些小圖表或數(shù)據(jù)卡片，用動態(tài)標(biāo)題描述每個圖表的趨勢和見解。

用例包括：

• 提供關(guān)鍵績效指標(biāo)的總覽
• 創(chuàng)建高級執(zhí)行情況的概要

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

• 提供投資賬戶績效的總覽
• 提供產(chǎn)品銷售和市場份額數(shù)據(jù)的概要

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

本文由 @數(shù)據(jù)可視化那些事 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議