起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)數(shù)據(jù)可視化設(shè)計(jì)師必備的圖表規(guī)范指南
編輯導(dǎo)語：數(shù)據(jù)可視化，旨在借助圖形化手段，清晰有效地傳達(dá)與溝通信息。但是，這并不意味著數(shù)據(jù)可視化就一定令人感到枯燥乏味，為了有效地傳達(dá)概念，美學(xué)形式與功能需要齊頭并進(jìn)。然而，設(shè)計(jì)人員往往并不能很好地把握設(shè)計(jì)與功能之間的平衡，從而創(chuàng)造出華而不實(shí)的數(shù)據(jù)可視化形式。接下來，本文作者為我們分析了數(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ì)師不懂可視化當(dāng)中不同用途的圖表規(guī)范，只是為了設(shè)計(jì)出好看的數(shù)據(jù)圖表，在不停的尋找設(shè)計(jì)靈感參考，最終發(fā)現(xiàn)了即使有漂亮的可視化數(shù)據(jù)圖表，但卻不能用在自己的項(xiàng)目上非常可惜。
為什么會(huì)出現(xiàn)這樣的情況呢？
原因其實(shí)無非就是：設(shè)計(jì)師除了自身比較少接觸數(shù)據(jù)設(shè)計(jì)外，就是對可視化的設(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月更新的Material Design數(shù)據(jù)可視化設(shè)計(jì)規(guī)范指南，這個(gè)規(guī)范指南基本適用所有數(shù)據(jù)圖表設(shè)計(jì)，很有參考價(jià)值，建議收藏。
主要從以下幾個(gè)方面去歸納：
- 數(shù)據(jù)可視化的基本原則？
- 數(shù)據(jù)圖表的類型有哪些？
- 針對不同用途該如何選擇合適的可視化圖表類型？
- 數(shù)據(jù)圖表的樣式設(shè)計(jì)？
- 數(shù)據(jù)可視化大屏的用途分類？
三、數(shù)據(jù)可視化的基本原則
數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺效果旨在使數(shù)據(jù)容易對比，并用它來講故事，以此來幫助用戶做出決策。數(shù)據(jù)可視化可以表達(dá)不同類型和規(guī)模的數(shù)據(jù)，包括從幾個(gè)數(shù)據(jù)點(diǎn)到有大量變量的數(shù)據(jù)集。
所以我們在進(jìn)行數(shù)據(jù)可視化的時(shí)候需要注意三點(diǎn)要求：
1. 準(zhǔn)確的
優(yōu)先考慮數(shù)據(jù)的準(zhǔn)確性、清晰度和完整性、以不會(huì)曲解信息的方式來呈現(xiàn)信息。
2. 有幫助的
為用戶瀏覽數(shù)據(jù)時(shí)創(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)：
- 要表現(xiàn)的數(shù)據(jù)
- 表現(xiàn)該數(shù)據(jù)的用意
1. 具體類型
1）隨時(shí)間進(jìn)行變化的圖表
這類圖表主要用來展現(xiàn)一段時(shí)間的數(shù)據(jù)，例如多個(gè)類別之間的趨勢或者比較。
常見的用例包括：股價(jià)的升降表現(xiàn)、數(shù)據(jù)統(tǒng)計(jì)、年報(bào)等。
圖源：網(wǎng)絡(luò)
2）不同數(shù)據(jù)間的類別比較
類別比較圖表是多個(gè)不同類別數(shù)據(jù)之間的比較，常見用例包括：不同國家的收入、熱門場的時(shí)間、團(tuán)隊(duì)分配。
圖源：網(wǎng)絡(luò)
3）展現(xiàn)不同數(shù)據(jù)間的排名圖表
排名圖表顯示項(xiàng)目在有序列表中的位置，常見用例包括：選舉結(jié)果、性能統(tǒng)計(jì)。
圖源：網(wǎng)絡(luò)
4）不同部分?jǐn)?shù)據(jù)在總體數(shù)據(jù)中的占比
占比類圖表顯示了局部與整體的關(guān)系，常見用例包括：產(chǎn)品類別的綜合收入、預(yù)算。
圖源：網(wǎng)絡(luò)
5）兩個(gè)數(shù)據(jù)以上的關(guān)聯(lián)比較
關(guān)聯(lián)類圖表顯示兩個(gè)或以上變量之間的關(guān)系，常見用例包括：收入和預(yù)期壽命。
圖源：網(wǎng)絡(luò)
6）數(shù)值間的分布
分布類圖表顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率，常見用例包括：人口分布、收入分布。
圖源：網(wǎng)絡(luò)
7）數(shù)據(jù)的流程
流程類圖表顯示了多個(gè)狀態(tài)之間的數(shù)據(jù)移動(dòng)，常見用例包括：資金轉(zhuǎn)移、投票計(jì)數(shù)和選舉結(jié)果。
圖源：網(wǎng)絡(luò)
8）數(shù)據(jù)關(guān)系
關(guān)系圖表顯示多個(gè)項(xiàng)目之間的關(guān)系，常見用例包括：社交網(wǎng)絡(luò)、詞圖。
圖源：網(wǎng)絡(luò)
五、針對不同用途該如何選擇合適的可視化圖表類型？
面對多種類型的圖表，以下表格總結(jié)了關(guān)于如何選擇合適的圖表。
顯示隨時(shí)間的變化，可以使用時(shí)間序列圖表來表示隨時(shí)間的變化，就是按時(shí)間順序表示數(shù)據(jù)點(diǎn)的圖表。表示隨時(shí)間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。
*基線值是y軸上的起始值。
1. 柱狀圖（條形圖）和餅圖
柱狀圖（條形圖）和餅圖都可用于顯示比例，表示部分與總體的對比。
- 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數(shù)量；
- 餅圖使用圓的圓弧或角度表示整體的一部分。
柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時(shí)間的變化方面比餅圖更有效地。由于這三個(gè)圖表都是使用相同的基線，因此可以更輕松地根據(jù)條形長度比較值的差異。
圖源：網(wǎng)絡(luò)
2. 面積圖
面積圖有多種類型，包括堆疊面積圖和層疊面積圖：
- 堆疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）堆疊在一起
- 層疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）重疊在一起
層疊面積圖建議不要使用超過兩個(gè)時(shí)間序列，因?yàn)檫@樣做會(huì)使數(shù)據(jù)模糊不清。取而代之，應(yīng)當(dāng)使用堆疊面積圖來比較一個(gè)時(shí)間間隔內(nèi)的多個(gè)值（橫軸表示時(shí)間）。
圖源：網(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)換為可視形式的過程。獨(dú)特的圖形屬性可應(yīng)用于定量數(shù)據(jù)（如溫度，價(jià)格或速度）和定性數(shù)據(jù)（如類別，風(fēng)味或表達(dá)式）。
這些圖形屬性包括：
- 形狀
- 顏色
- 大小
- 面積
- 體積
- 長度
- 角度
- 位置
- 方向
- 密度
不同屬性的表現(xiàn)：
多個(gè)視覺處理方法可以綜合應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面，例如：在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數(shù)量）。
圖源：網(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)該用適合交互的形狀（在觸摸大小和功能可見性方面）展示，而旨在表達(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)樗鼈儠?huì)分散用戶注意力，影響用戶的專注力。
4）顏色表示含義
圖源：網(wǎng)絡(luò)
5）無障礙
為了適應(yīng)看不到顏色差異的用戶，您可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù)，例如高對比度著色，形狀或紋理。將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說明其含義，同時(shí)消除對圖例的需求。
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)：例如錯(cuò)誤、空狀態(tài)、完成狀態(tài)和危險(xiǎn)。
在圖表中使用圖標(biāo)時(shí)，建議使用通用可識(shí)別符號(hào)，尤其是在表示操作或狀態(tài)時(shí)，例如：保存、下載、完成、錯(cuò)誤和危險(xiǎn)。
圖源：網(wǎng)絡(luò)
6. 坐標(biāo)軸
一個(gè)或多個(gè)坐標(biāo)軸顯示數(shù)據(jù)的比例和范圍，例如，折線圖沿水平和垂直坐標(biāo)軸顯示一系列值。
1）柱狀圖（條形圖）基線
柱狀圖（條形圖）應(yīng)從為零的基線（y軸上的起始值）開始，從不為零的基線開始可能導(dǎo)致數(shù)據(jù)被錯(cuò)誤地理解。
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)該妨礙查看圖表。
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端，建議在圖表下方放置圖例。在移動(dòng)端，將圖例放在圖表上方，以便在交互過程中保持可見。
1）標(biāo)簽和圖例
在簡單圖表中，可以使用直接標(biāo)簽。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。
七、數(shù)據(jù)可視化大屏的用途分類
在稱為數(shù)據(jù)大屏的UI界面中，數(shù)據(jù)可視化通過一系列圖表實(shí)現(xiàn)。多個(gè)獨(dú)立的圖表有時(shí)可以比一個(gè)復(fù)雜的圖表更好地表達(dá)故事。
數(shù)據(jù)大屏設(shè)計(jì)：數(shù)據(jù)大屏的目的應(yīng)在其布局，樣式和交互模式中體現(xiàn)。無論是用來制作演示文稿還是深入研究數(shù)據(jù)，它的設(shè)計(jì)應(yīng)該適合它的使用方式。
數(shù)據(jù)大屏應(yīng)該：
- 突出最重要信息（使用布局）
- 根據(jù)信息層級確定信息的焦點(diǎn)（使用顏色、位置、大小和視覺權(quán)重）
應(yīng)根據(jù)對數(shù)據(jù)的需求確定信息的優(yōu)先級并進(jìn)行安排。在此示例中設(shè)計(jì)儀表板，考慮了以下用戶問題：
- 需要注意的問題
- 發(fā)生問題的時(shí)間
- 發(fā)生問題的位置
- 受問題影響的其他變量
1. 分析類數(shù)據(jù)大屏
分析類數(shù)據(jù)大屏讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常，這些數(shù)據(jù)大屏包含能夠深入洞察數(shù)據(jù)的復(fù)雜圖表。
用例包括：
- 隨時(shí)間變化的突出趨勢
- 回答“為什么”和“假設(shè)”的問題
- 預(yù)測
- 創(chuàng)建有深度的報(bào)告
分析類數(shù)據(jù)大屏示例：
- 跟蹤廣告活動(dòng)的收效
- 跟蹤產(chǎn)品在其整個(gè)生命周期中的銷售額和收入
- 隨時(shí)間變化的城市人口趨勢
- 跟蹤隨時(shí)間變化氣候數(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í)時(shí)跟蹤系統(tǒng)性能
操作類數(shù)據(jù)大屏示例：
- 跟蹤呼叫中心的活動(dòng)，例如呼叫音量，等待時(shí)間，呼叫長度或呼叫類型
- 監(jiān)控在云端應(yīng)用程序的運(yùn)行狀況
- 顯示股市情況
- 監(jiān)控賽車上的遙測數(shù)據(jù)
操作類數(shù)據(jù)大屏顯示設(shè)備存儲(chǔ)指標(biāo)
3. 演示類數(shù)據(jù)大屏
演示類數(shù)據(jù)大屏是為感興趣的主題提供的展示視圖。
這些數(shù)據(jù)大屏通常包括一些小圖表或數(shù)據(jù)卡片，用動(dòng)態(tài)標(biāo)題描述每個(gè)圖表的趨勢和見解。
用例包括：
- 提供關(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é)議
實(shí)用
感謝分享，還不知道會(huì)不會(huì)用上。