原則

數(shù)據(jù)可視化是一種用圖形形式來(lái)描述密集和復(fù)雜信息的通訊方式。由此產(chǎn)生的視覺(jué)視覺(jué)效果使得數(shù)據(jù)比較和用數(shù)據(jù)講來(lái)故事都變得更加容易——這兩種方法都有助于用戶(hù)做出決策。

數(shù)據(jù)可視化可以表示不同類(lèi)型和大小的數(shù)據(jù)：從少量數(shù)據(jù)點(diǎn)到大型多元數(shù)據(jù)集都可以表示。

類(lèi)型

數(shù)據(jù)可視化可以用不同的形式來(lái)傳達(dá)。圖表是一種常用的數(shù)據(jù)傳達(dá)方法，因?yàn)樗鼈儾粌H描述了不同的數(shù)據(jù)類(lèi)型，還能進(jìn)行數(shù)據(jù)比較。

圖表類(lèi)型的使用主要取決于兩個(gè)方面：想要傳達(dá)的數(shù)據(jù)，以及想要傳達(dá)的數(shù)據(jù)有關(guān)的內(nèi)容。以下指南提供并描述了各種不同類(lèi)型的圖表及其用例。

圖表類(lèi)型

隨時(shí)間變化

隨時(shí)間變化的圖表顯示一段時(shí)間內(nèi)的數(shù)據(jù)，如多個(gè)類(lèi)別的變化趨勢(shì)及其對(duì)比。

使用情況包括：

1. 股票價(jià)格表現(xiàn)
2. 健康統(tǒng)計(jì)
3. 年度報(bào)表

隨時(shí)間變化的圖表包括

1. 折線(xiàn)圖
2. 柱狀圖
3. 堆積柱狀圖
4. 燭臺(tái)圖
5. 面積圖
6. 時(shí)間軸
7. 地平線(xiàn)圖
8. 瀑布流圖

類(lèi)別比較

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

使用情況包括：

1. 不同國(guó)家間的收入對(duì)比
2. 熱門(mén)場(chǎng)次對(duì)比
3. 團(tuán)隊(duì)分配

類(lèi)別比較圖包括：

1. 柱狀圖
2. 分組柱狀圖
3. 氣泡圖
4. 平行線(xiàn)圖
5. 多條折線(xiàn)圖
6. 子彈圖

排序

排序圖表示一個(gè)項(xiàng)目在有序列表中的位置。

使用情況包括：

1. 選舉結(jié)果
2. 表現(xiàn)統(tǒng)計(jì)

排序圖包括：

1. 排序條形圖
2. 排序柱狀圖
3. 平行線(xiàn)圖

部分-整體

部分-整體圖表示部分元素是如何加總為整體的。

使用情況包括：

1. 產(chǎn)品類(lèi)別綜合收益
2. 預(yù)算

部分-整體圖包括：

1. 堆積柱狀圖
2. 餅狀圖
3. 堆積面積圖
4. 矩陣樹(shù)圖
5. 太陽(yáng)輻射圖

相關(guān)

相關(guān)圖展示兩個(gè)或多個(gè)變量之間的相關(guān)性。

使用情況包括：

1. 收入和預(yù)期壽命

相關(guān)圖包括：

1. 散點(diǎn)圖
2. 氣泡圖
3. 柱狀和折線(xiàn)圖
4. 熱力圖

分布

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

使用情況有：

1. 人口分布
2. 收入分布

分布圖包括：

1. 直方圖
2. 線(xiàn)箱圖
3. 小提琴圖
4. 密度圖

流

流圖顯示數(shù)據(jù)在多種狀態(tài)之間的流動(dòng)。

使用情況包括：

1. 資金轉(zhuǎn)移
2. 投票統(tǒng)計(jì)和選舉結(jié)果

流圖包括：

1. ?；鶊D
2. 甘特圖
3. 和弦圖
4. 網(wǎng)狀圖

關(guān)系

關(guān)系圖顯示多個(gè)項(xiàng)目之間是如何彼此關(guān)聯(lián)的。

使用情況有：

1. 社交網(wǎng)絡(luò)
2. 文字圖

關(guān)系圖包括：

1. 網(wǎng)狀圖
2. 維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
3. 和弦圖
4. 太陽(yáng)輻射圖

選擇圖表

許多類(lèi)型的圖表都可以用于描述數(shù)據(jù)。下面的指導(dǎo)方針提供了如何選擇圖表的見(jiàn)解。

顯示隨時(shí)間產(chǎn)生的變化

隨時(shí)間產(chǎn)生的變化可以用時(shí)間序列圖來(lái)表示，這是一種按照時(shí)間順序來(lái)表示數(shù)據(jù)點(diǎn)的圖表。

可以表示隨時(shí)間變化的圖表包括：折線(xiàn)圖、條形圖和面積圖。

*基線(xiàn)值是指y軸上的起始值。

條形圖和餅狀圖

條形圖和餅狀圖都可以用于顯示比例，表示部分值與整體值之間的比較。

1. 條形圖使用一條共同的基線(xiàn)，通過(guò)條柱的長(zhǎng)度表達(dá)數(shù)量
2. 餅狀圖使用圓內(nèi)的圓弧或圓角表示整體的一部分

條形圖、折線(xiàn)圖和堆積面積圖比餅狀圖更能夠表達(dá)隨時(shí)間產(chǎn)生的變化。因?yàn)檫@三種類(lèi)型的圖表中，可能的值共享同一條基線(xiàn)，所以比基于條柱長(zhǎng)度的條形圖更容易比較值之間的差異。

面積圖

面積圖有多種類(lèi)型，包括堆積面積圖和重疊面積圖：

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

重疊面積圖中不建議包含兩個(gè)以上的時(shí)間序列，以免模糊數(shù)據(jù)。相反，可以使用堆積面積圖在一個(gè)時(shí)間間隔內(nèi)比較多個(gè)值（橫軸表示時(shí)間）。

樣式

數(shù)據(jù)可視化使用自定義的樣式和形狀，以適應(yīng)用戶(hù)需求和上下文的方式使得數(shù)據(jù)一目了然。

下列有益于圖表自定義：

1. 圖形元素
2. 排版
3. 圖標(biāo)
4. 軸和標(biāo)簽
5. 說(shuō)明和注釋

設(shè)置不同類(lèi)型數(shù)據(jù)的樣式

視覺(jué)編碼是將數(shù)據(jù)轉(zhuǎn)換成視覺(jué)形式的過(guò)程。獨(dú)特的圖形屬性可以應(yīng)用于定量數(shù)據(jù)（如溫度，價(jià)格或速度）和定性數(shù)據(jù)（如類(lèi)別，風(fēng)味和表達(dá)式）。

這些圖形屬性包括：

1. 形狀
2. 顏色
3. 尺寸
4. 面積
5. 體積（容積/量）
6. 長(zhǎng)度
7. 角度
8. 位置
9. 方向
10. 密度

表達(dá)不同屬性

多種視覺(jué)處理方式可以應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面。例如，條柱的色彩可以表示一個(gè)類(lèi)別，與此同時(shí)條柱的長(zhǎng)度可以表示一個(gè)值（如人口大?。?。

形狀可以用來(lái)表示定性數(shù)據(jù)。在該圖表中，每個(gè)類(lèi)別由一種特定形狀代替（圓形，方形和三角形），這使得比較特定范圍內(nèi)的數(shù)據(jù)或與其他類(lèi)別數(shù)據(jù)進(jìn)行比較都很容易。

形狀

圖表可以通過(guò)形狀來(lái)以多種不同的方式表達(dá)數(shù)據(jù)。形狀可以被設(shè)計(jì)為一條有趣的曲線(xiàn)，或一個(gè)精確的高保真圖形，以及介于二者之間的其他方式。

形狀的精確程度

圖表可以以不同的精度來(lái)表示數(shù)據(jù)。用于深入研究的數(shù)據(jù)應(yīng)該（根據(jù)觸摸目標(biāo)的尺寸和相關(guān)可視化要求）使用適合交互的形狀來(lái)表示。而用于表達(dá)大致想法或趨勢(shì)的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

顏色

顏色有四種主要的區(qū)分?jǐn)?shù)據(jù)的方式：

1. 區(qū)分不同的類(lèi)別
2. 表示數(shù)量
3. 突出特定數(shù)據(jù)
4. 表達(dá)意義

顏色區(qū)分類(lèi)別

在環(huán)形圖中顏色被用于定義類(lèi)別。

顏色表示數(shù)量

在地圖中顏色被用于表示數(shù)據(jù)值。

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

在散點(diǎn)圖中顏色被用于突出特殊數(shù)據(jù)。

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

當(dāng)顏色被少量使用時(shí)，它可以突出焦點(diǎn)區(qū)域。不建議使用大量的高光顏色，因?yàn)樗鼈儠?huì)分散用戶(hù)的注意力。

顏色表示意義

無(wú)障礙

為了適應(yīng)無(wú)法區(qū)別色彩差異的用戶(hù)，可以使用其他的方法來(lái)強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)比度著色、形狀或紋理。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)也有助于澄清其含義，同時(shí)消除了對(duì)說(shuō)明的需要。

線(xiàn)條

圖表中的線(xiàn)條可以傳達(dá)數(shù)據(jù)的質(zhì)量，例如層次結(jié)構(gòu)、突出強(qiáng)調(diào)和對(duì)比。線(xiàn)條的樣式可以采用不同方式，如使用虛線(xiàn)或不同的不透明度。

線(xiàn)條可以應(yīng)用于特定的元素中，包括：

1. 注釋
2. 預(yù)測(cè)元素
3. 比較工具
4. 置信區(qū)間
5. 異常

排版

文本可以用于標(biāo)記不同的圖表元素，包括：

1. 圖表標(biāo)題
2. 數(shù)據(jù)標(biāo)簽
3. 軸標(biāo)簽
4. 說(shuō)明

層次結(jié)構(gòu)中級(jí)別最高的文本通常是圖表標(biāo)題，最低的是軸標(biāo)簽和說(shuō)明。

文本粗細(xì)

標(biāo)題和不同的字體粗細(xì)在層次結(jié)構(gòu)中可以傳達(dá)哪些內(nèi)容比另一些更重要（或更不重要）。然而這種處理方式應(yīng)該有節(jié)制地使用，即采用數(shù)量有限的字體樣式。

圖標(biāo)

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

圖標(biāo)可以被用于：

1. 分類(lèi)數(shù)據(jù)，以區(qū)分組或類(lèi)別
2. UI控件及操作，如篩選，縮放，保存和下載
3. 狀態(tài)，例如錯(cuò)誤狀態(tài)，無(wú)數(shù)據(jù)狀態(tài)，完成狀態(tài)和危險(xiǎn)狀態(tài)

當(dāng)在圖表中使用圖標(biāo)時(shí)，建議使用普遍可識(shí)別的圖標(biāo)，尤其是在表示操作或狀態(tài)時(shí)，例如：保存，下載，完成，錯(cuò)誤和危險(xiǎn)。

在傳達(dá)意義時(shí)圖標(biāo)補(bǔ)充了顏色的意義。

有標(biāo)記的軸

有標(biāo)記的軸或多個(gè)軸能夠指示數(shù)據(jù)所展示的規(guī)?；蚍秶＠?，折線(xiàn)圖展示的是沿水平和豎直方向標(biāo)記的軸的范圍內(nèi)的值。

條形圖基線(xiàn)

條形圖應(yīng)該從基線(xiàn)（y軸上的起始值）上的0開(kāi)始。從不為0的基線(xiàn)開(kāi)始可能會(huì)導(dǎo)致數(shù)據(jù)被錯(cuò)誤地感知。

軸標(biāo)簽

標(biāo)簽的使用應(yīng)該反映圖表中最重要的數(shù)據(jù)細(xì)節(jié)。軸的標(biāo)簽應(yīng)該根據(jù)需要，并在用戶(hù)界面中以一致的方式使用。它們的存在不應(yīng)該妨礙圖表的閱讀。

文本方向

在圖表中文本標(biāo)簽應(yīng)該按水平方向放置，以保證其易于閱讀。

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

1. 被旋轉(zhuǎn)
2. 垂直堆疊

說(shuō)明和注釋

說(shuō)明和注釋描述圖表的信息。注釋?xiě)?yīng)該突出顯示數(shù)據(jù)點(diǎn)、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

1. 注釋
2. 說(shuō)明

在桌面設(shè)備上，建議在圖表下方放置說(shuō)明。而在移動(dòng)設(shè)備中，建議將說(shuō)明放置在圖表上方，以便在交互過(guò)程中保持說(shuō)明可見(jiàn)。

標(biāo)簽和說(shuō)明

在簡(jiǎn)單的圖表中，圖表元素可以被直接標(biāo)記。但是，密集的圖表（或較大圖表組中的部分）可以在說(shuō)明中顯示標(biāo)簽。

小型顯示器

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

行為

圖表為用戶(hù)提供了可以控制所展示數(shù)據(jù)的交互模式。這些模式讓用戶(hù)關(guān)注圖表中的特定值或特定范圍。

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

1. 逐級(jí)展開(kāi) 提供了一種清晰的途徑來(lái)揭示細(xì)節(jié)，可按需展示。
2. 直接操作允許用戶(hù)直接對(duì)UI元素進(jìn)行操作，以減少屏幕上所需的操作步數(shù)，直接操作包括：縮放和平移，分頁(yè)，數(shù)據(jù)控件。
3. 改變透視圖可以使一項(xiàng)設(shè)計(jì)服務(wù)于不同的用戶(hù)和數(shù)據(jù)類(lèi)型，例如數(shù)據(jù)控件和移動(dòng)。

逐級(jí)展開(kāi)

使用逐級(jí)展開(kāi)的方式顯示圖表細(xì)節(jié)，能夠允許用戶(hù)根據(jù)需要查看特定的數(shù)據(jù)點(diǎn)。

縮放和平移

縮放和平移是圖表中流行的交互方式，它們影響用戶(hù)研究數(shù)據(jù)和探索圖表UI的密切程度。

縮放

縮放改變了UI顯示的距離。而設(shè)備類(lèi)型則決定縮放的執(zhí)行方式。

1. 在桌面端，通過(guò)點(diǎn)擊并拖動(dòng)或滾動(dòng)的方式實(shí)現(xiàn)縮放
2. 在移動(dòng)端，使用雙指捏放的手勢(shì)來(lái)實(shí)現(xiàn)縮放

當(dāng)縮放不是主要操作時(shí)，（在桌面端）可以通過(guò)單擊并拖動(dòng)或（在移動(dòng)端）通過(guò)雙擊來(lái)實(shí)現(xiàn)相同效果。

平移

平移能夠讓用戶(hù)探索超出屏幕之外的UI。應(yīng)該以對(duì)顯示數(shù)據(jù)有意義的方式對(duì)其進(jìn)行約束。例如，如果一張圖表的一個(gè)維度比另一個(gè)維度更重要，那么平移的方向可以?xún)H限于更重要的維度方向上。

平移操作通常與縮放配合使用。

在移動(dòng)端，通常通過(guò)手勢(shì)進(jìn)行平移，例如單指滑動(dòng)。

分頁(yè)

在移動(dòng)端上，分頁(yè)是一種常見(jiàn)的模式，允許用戶(hù)通過(guò)左右滑動(dòng)查看上一張或下一張圖表。

在移動(dòng)端，用戶(hù)可以向右滑動(dòng)查看前一天的內(nèi)容。

數(shù)據(jù)控件

可以使用切換控件、選項(xiàng)卡和下拉列表篩選或更改數(shù)據(jù)。

當(dāng)用戶(hù)調(diào)整控件時(shí)，這些控件也可以顯示度量。

切換控件、選項(xiàng)卡和下拉列表意味著可以篩選或更改數(shù)據(jù)。

動(dòng)效

動(dòng)效可以加強(qiáng)并鞏固數(shù)據(jù)間的關(guān)系以及用戶(hù)和數(shù)據(jù)的交互方式。動(dòng)效應(yīng)該有目的地（而不是裝飾性地）被使用，以表達(dá)不同狀態(tài)和空間之間的關(guān)系。

動(dòng)效應(yīng)該合乎邏輯，平穩(wěn)且能夠快速響應(yīng)，不妨礙用戶(hù)的體驗(yàn)旅程。

在這一案例中，數(shù)據(jù)的動(dòng)效設(shè)置在切換按天顯示和按周顯示的時(shí)候。在切換的過(guò)程中不顯示所選日期范圍之外的數(shù)據(jù)，從而降低了圖表復(fù)雜性。

此處的動(dòng)效顯示了兩張不同圖表之間的聯(lián)系。

空狀態(tài)

空白的圖片和表格可以顯示一些表明在數(shù)據(jù)可用時(shí)期望發(fā)生的內(nèi)容。

在適用的情況下，角色動(dòng)畫(huà)能夠帶來(lái)愉悅感和激勵(lì)。

角色動(dòng)畫(huà)豐富了空白圖片。

儀表盤(pán)

數(shù)據(jù)可視化可以在一系列的多個(gè)圖表中展現(xiàn)，這在UI中被稱(chēng)為儀表盤(pán)。多個(gè)單獨(dú)的圖表有時(shí)比一個(gè)復(fù)雜的圖表能夠更好地傳達(dá)一個(gè)故事。

儀表盤(pán)設(shè)計(jì)

儀表盤(pán)的目的應(yīng)反映在其布局、樣式和交互模式中。儀表盤(pán)的設(shè)計(jì)應(yīng)該適應(yīng)它的使用方式，無(wú)論它是一個(gè)演示工具還是一個(gè)深入研究數(shù)據(jù)的工具。

一個(gè)儀表盤(pán)應(yīng)該：

1. （通過(guò)布局）優(yōu)先考慮最重要的信息
2. 顯示根據(jù)層次結(jié)構(gòu)（使用顏色、位置、大小和視覺(jué)權(quán)重）排序的信息焦點(diǎn)

應(yīng)該根據(jù)數(shù)據(jù)提出的問(wèn)題對(duì)信息進(jìn)行優(yōu)先級(jí)排序。在本案例所示的操作儀表盤(pán)中，考慮了以下的用戶(hù)問(wèn)題：

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

分析型儀表盤(pán)

分析型儀表盤(pán)能夠讓用戶(hù)探索多個(gè)數(shù)據(jù)集并發(fā)現(xiàn)趨勢(shì)。通常這些儀表盤(pán)包括復(fù)雜的圖表，這些圖表能夠發(fā)現(xiàn)數(shù)據(jù)細(xì)節(jié)。

使用情況包括：

1. 強(qiáng)調(diào)隨時(shí)間變化的趨勢(shì)
2. 回答“為什么”和“如果……怎樣”的問(wèn)題
3. 預(yù)測(cè)
4. 創(chuàng)建深入的報(bào)告

分析型儀表盤(pán)的案例有：

1. 跟蹤隨時(shí)間變化的廣告活動(dòng)表現(xiàn)
2. 跟蹤產(chǎn)品在整個(gè)生命周期中的銷(xiāo)售和收益
3. 顯示城市人口隨時(shí)間改變的趨勢(shì)
4. 跟蹤隨時(shí)間變化的氣候數(shù)據(jù)

操作型儀表盤(pán)

操作型儀表板旨在回答一組預(yù)定義的問(wèn)題。它們通常用于完成與監(jiān)視相關(guān)的任務(wù)。

在大多數(shù)情況下，這種類(lèi)型的儀表盤(pán)會(huì)把當(dāng)前信息安排在一組簡(jiǎn)單的圖表中。

使用情況包括：

1. 根據(jù)目標(biāo)跟蹤當(dāng)前進(jìn)度
2. 實(shí)時(shí)跟蹤系統(tǒng)表現(xiàn)

操作型儀表盤(pán)的案例有：

1. 跟蹤呼叫中心活動(dòng)，如呼叫量、等待時(shí)間、呼叫長(zhǎng)度或呼叫類(lèi)型
2. 監(jiān)視云端應(yīng)用程序的運(yùn)行情況
3. 顯示股票市場(chǎng)表現(xiàn)
4. 監(jiān)視賽車(chē)的遙測(cè)數(shù)據(jù)

演示型儀表盤(pán)

演示型儀表板提供了關(guān)于感興趣主題的詳細(xì)快照。

這些儀表板通常包括一些小圖表或記分卡，通過(guò)動(dòng)態(tài)標(biāo)題來(lái)解釋每個(gè)支持圖表中提供的趨勢(shì)和見(jiàn)解。

使用情況包括：

1. 提供關(guān)鍵績(jī)效的指標(biāo)概述
2. 創(chuàng)建高級(jí)執(zhí)行摘要

展示型儀表盤(pán)的案例有：

1. 提供投資帳戶(hù)表現(xiàn)的概述
2. 提供產(chǎn)品銷(xiāo)售和市場(chǎng)份額數(shù)據(jù)摘要

原文地址：Material Design

譯者：杜雅黎

 轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》Material Design Data Visualization 數(shù)據(jù)可視化

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話(huà)，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司