2019年6月18日Material Design更新了設(shè)計(jì)指南中數(shù)據(jù)可視化部分笼裳，這是谷歌數(shù)據(jù)可視化團(tuán)隊(duì)形成的一套全面的數(shù)據(jù)可視化指南， 涵蓋了設(shè)計(jì)原則、圖表分類昙篙、圖表的選用秘豹、樣式設(shè)計(jì)携御、交互設(shè)計(jì)、儀表板設(shè)計(jì)等方面既绕。（轉(zhuǎn)載啄刹，原文地址：https://www.ui.cn/detail/477349.html）https://material.io/design/communication/data-visualization.html#dashboards

全文章節(jié)目錄：

原則

類型

選擇圖表

樣式

行為

儀表板

數(shù)據(jù)可視化

數(shù)據(jù)可視化就是用圖形描繪信息。

原則

數(shù)據(jù)可視化是一種以圖形描繪密集和復(fù)雜信息的表現(xiàn)形式岸更。數(shù)據(jù)可視化的視覺效果旨在使數(shù)據(jù)容易對(duì)比鸵膏，并用它來講故事，以此來幫助用戶做出決策怎炊。

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

類型

數(shù)據(jù)可視化可以以不同的形式表達(dá)评肆。圖表是表達(dá)數(shù)據(jù)的常用方式债查，因?yàn)樗鼈兡軌蛘故竞蛯?duì)比多種不同的數(shù)據(jù)。

圖表類型的選擇主要取決于兩點(diǎn)：要表現(xiàn)的數(shù)據(jù)和表現(xiàn)該數(shù)據(jù)的用意瓜挽。該指南描述各種類型的圖表及其用例盹廷。

圖表類型

1. 隨時(shí)間變化

隨時(shí)間變化的圖表顯示一段時(shí)間的數(shù)據(jù)，例如多個(gè)類別之間的趨勢(shì)或比較久橙。

常見用例包括：

股價(jià)表現(xiàn)俄占、衛(wèi)生統(tǒng)計(jì)管怠、年表

2. 類別比較

類別比較圖表是多個(gè)不同類別數(shù)據(jù)之間的比較。

常見用例包括：

不同國(guó)家的收入缸榄、熱門場(chǎng)地時(shí)間渤弛、團(tuán)隊(duì)分配

3. 排名

排名圖表顯示項(xiàng)目在有序列表中的位置。

常見用例包括：

選舉結(jié)果甚带、性能統(tǒng)計(jì)

4. 占比

占比類圖表顯示了局部與整體的關(guān)系她肯。

常見用例包括：

產(chǎn)品類別的綜合收入、預(yù)算

5. 關(guān)聯(lián)

關(guān)聯(lián)類圖表顯示兩個(gè)或以上變量之間的關(guān)系鹰贵。

常見用例包括：

收入和預(yù)期壽命

6. 分布

分布類圖表顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率晴氨。

常見用例包括：

人口分布、收入分布

7. 流程

流程類圖表顯示了多個(gè)狀態(tài)之間的數(shù)據(jù)移動(dòng)碉输。

常見用例包括：

資金轉(zhuǎn)移籽前、投票計(jì)數(shù)和選舉結(jié)果

8. 關(guān)系

關(guān)系圖表顯示多個(gè)項(xiàng)目之間的關(guān)系。

常見用例包括：

社交網(wǎng)絡(luò)腊瑟、詞圖

選擇圖表

面對(duì)多種類型的圖表聚假，以下指南提供了關(guān)于如何選擇合適的圖表見解。

顯示隨時(shí)間的變化

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

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

柱狀圖（條形圖）和餅圖

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

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

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

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

面積圖

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

·?堆疊面積圖顯示多個(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í)間）共螺。

樣式

數(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á)式）涎嚼。

這些圖形屬性包括：

·?形狀

·?顏色

·?大小

·?面積

·?體積

·?長(zhǎng)度

·?角度

·?位置

·?方向

·?密度

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

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

形狀可用于表示定性數(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ì)的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀互广。

2. 顏色

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

·?區(qū)分類別

·?表示數(shù)量

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

·?表示含義

顏色區(qū)分類別

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

顏色表示數(shù)量

例：地圖中惫皱，顏色用于表示數(shù)據(jù)值像樊。

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

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

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

在不濫用的情況下生棍，顏色可以突出焦點(diǎn)區(qū)域。不建議大量使用高亮顏色媳谁，因?yàn)樗鼈儠?huì)分散用戶注意力涂滴，影響用戶的專注力。

顏色表示含義

無障礙

為了適應(yīng)看不到顏色差異的用戶韩脑，您可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù)氢妈，例如高對(duì)比度著色，形狀或紋理段多。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于說明其含義首量，同時(shí)消除對(duì)圖例的需求。

3. 線

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

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

·?注釋

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

·?比較工具

·?可靠區(qū)間

·?異常

4. 文字排版

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

·?圖表標(biāo)題

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

·?軸標(biāo)簽

·?圖例

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

字重

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

5. 圖標(biāo)

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

圖標(biāo)可用于：

· 分類數(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)。

6. 坐標(biāo)軸

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

柱狀圖（條形圖）基線

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

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

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

文字方向

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

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

·?旋轉(zhuǎn)

·?垂直堆疊

7. 圖例和注釋

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

1. 注釋

2. 圖例

在PC端空厌，建議在圖表下方放置圖例。在移動(dòng)端银酬，將圖例放在圖表上方嘲更，以便在交互過程中保持可見。

標(biāo)簽和圖例

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

8. 小顯示屏

可穿戴設(shè)備（或其他小屏幕）上顯示的圖表應(yīng)該是移動(dòng)端或PC端圖表的簡(jiǎn)化版本。

行為

圖表具有交互模式违孝，使用戶可以控制圖表數(shù)據(jù)。這些模式可以使用戶專注于圖表的特定值或范圍琳拨。

以下推薦的交互模式，樣式和效果（如觸覺反饋）可以提高用戶對(duì)圖表數(shù)據(jù)的理解：

漸進(jìn)式披露

提供了按需求逐步展示詳細(xì)信息的明確途徑屯曹。

直接操作

允許用戶直接對(duì)UI元素進(jìn)行操作，最大限度地減少屏幕上所需的操作數(shù)量惊畏，包括：縮放和平移恶耽，分頁(yè)和數(shù)據(jù)控件。

改變視角

使一種設(shè)計(jì)可以適用于不同的用戶和數(shù)據(jù)類型颜启，例如數(shù)據(jù)控件和動(dòng)效偷俭。

1. 漸進(jìn)式披露

使用漸進(jìn)式披露顯示圖表詳細(xì)信息，允許用戶根據(jù)需要查看特定數(shù)據(jù)點(diǎn)缰盏。

2. 縮放和平移

縮放和平移是常用的圖表交互涌萤，會(huì)影響用戶對(duì)圖表數(shù)據(jù)深入的研究和探索。

縮放

縮放改變界面顯示的遠(yuǎn)近口猜。設(shè)備類型決定了如何執(zhí)行縮放负溪。

·?在PC端，通過單擊济炎、拖動(dòng)或滾動(dòng)進(jìn)行縮放

·?在移動(dòng)端川抡，通過捏合進(jìn)行縮放

當(dāng)縮放不是主要操作時(shí)，可以通過單擊和拖動(dòng)（在PC端）或雙擊（在移動(dòng)端）來實(shí)現(xiàn)须尚。

平移

平移讓用戶能夠看到屏幕之外的界面崖堤。它應(yīng)該合理的展示數(shù)據(jù)的價(jià)值。例如耐床，如果圖表的一個(gè)維度比另一個(gè)維度更重要密幔，則平移的方向可以僅限于該維度。

·?平移通常與縮放功能同時(shí)使用撩轰。

·?在移動(dòng)端胯甩，平移通常通過手勢(shì)實(shí)現(xiàn)昧廷，例如單指滑動(dòng)。

3. 分頁(yè)

在移動(dòng)端蜡豹，分頁(yè)是一種常見模式麸粮，讓用戶通過向右或向左滑動(dòng)來查看上一個(gè)或下一個(gè)圖表。

在移動(dòng)端镜廉，用戶可以向右滑動(dòng)以查看前一天弄诲。

4. 數(shù)據(jù)控制

可以使用切換控件，選項(xiàng)卡和下拉菜單篩選或改變數(shù)據(jù)娇唯。

用戶調(diào)節(jié)控件時(shí)齐遵，這些控件還可以顯示指標(biāo)。

切換控件塔插，選項(xiàng)卡和下拉菜單可以更改或篩選數(shù)據(jù)梗摇。

5. 動(dòng)效

動(dòng)效可以強(qiáng)化數(shù)據(jù)之間的聯(lián)系，提升交互體驗(yàn)想许。應(yīng)該有目的地使用運(yùn)動(dòng)（不是裝飾性地）伶授，表達(dá)不同狀態(tài)和空間之間的聯(lián)系。

運(yùn)動(dòng)應(yīng)該是合理流纹，平穩(wěn)糜烹，反應(yīng)靈敏，不會(huì)妨礙用戶的使用漱凝。

在此示例中疮蹦，圖表數(shù)據(jù)從按天顯示動(dòng)態(tài)切換到按周顯示。轉(zhuǎn)換期間不會(huì)顯示所選日期范圍之外的數(shù)據(jù)茸炒，從而降低了復(fù)雜性愕乎。

動(dòng)畫能夠體現(xiàn)兩個(gè)不同圖表的相關(guān)性。

6. 空狀態(tài)

圖表數(shù)據(jù)為空的情況下壁公，可以提供相關(guān)數(shù)據(jù)的預(yù)期感论。

在合適的情況下，可以展示角色動(dòng)畫創(chuàng)造愉悅和鼓勵(lì)紊册。

有特色的動(dòng)畫提升了空狀態(tài)的效果笛粘。

儀表板

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

儀表板設(shè)計(jì)

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

儀表板應(yīng)該：

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

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

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

1. 需要注意的問題

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

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

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

1. 分析類儀表板

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

用例包括：

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

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

·?預(yù)測(cè)

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

分析類儀表板示例：

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

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

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

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

分析類儀表板顯示氣候數(shù)據(jù)

2. 操作類儀表板

操作類儀表板旨在回答一組預(yù)設(shè)的問題凿可。它們通常用于完成與監(jiān)控相關(guān)的任務(wù)惑折。

在大多數(shù)情況下，這些類型的儀表板具有一系列關(guān)于當(dāng)前信息的簡(jiǎn)單圖表枯跑。

用例包括：

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

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

操作類儀表板示例：

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

·?監(jiān)控在云端應(yīng)用程序的運(yùn)行狀況

·?顯示股市情況

·?監(jiān)控賽車上的遙測(cè)數(shù)據(jù)

操作類儀表板顯示設(shè)備存儲(chǔ)指標(biāo)

3. 演示類儀表板

演示類儀表板是為感興趣的主題提供的展示視圖粗卜。

這些儀表板通常包括一些小圖表或數(shù)據(jù)卡片，用動(dòng)態(tài)標(biāo)題描述每個(gè)圖表的趨勢(shì)和見解纳击。

用例包括：

·?提供關(guān)鍵績(jī)效指標(biāo)的總覽

·?創(chuàng)建高級(jí)執(zhí)行情況的概要

演示類儀表板示例：

· 提供投資賬戶績(jī)效的總覽

· 提供產(chǎn)品銷售和市場(chǎng)份額數(shù)據(jù)的概要

演示類儀表板顯示網(wǎng)站使用數(shù)據(jù)