原則
數(shù)據(jù)可視化是一種用圖形形式來(lái)描述密集和復(fù)雜信息的通訊方式。由此產(chǎn)生的視覺視覺效果使得數(shù)據(jù)比較和用數(shù)據(jù)講來(lái)故事都變得更加容易——這兩種方法都有助于用戶做出決策。
數(shù)據(jù)可視化可以表示不同類型和大小的數(shù)據(jù)：從少量數(shù)據(jù)點(diǎn)到大型多元數(shù)據(jù)集都可以表示。
類型
數(shù)據(jù)可視化可以用不同的形式來(lái)傳達(dá)。圖表是一種常用的數(shù)據(jù)傳達(dá)方法，因?yàn)樗鼈儾粌H描述了不同的數(shù)據(jù)類型，還能進(jìn)行數(shù)據(jù)比較。
圖表類型的使用主要取決于兩個(gè)方面：想要傳達(dá)的數(shù)據(jù)，以及想要傳達(dá)的數(shù)據(jù)有關(guān)的內(nèi)容。以下指南提供并描述了各種不同類型的圖表及其用例。
圖表類型
隨時(shí)間變化
隨時(shí)間變化的圖表顯示一段時(shí)間內(nèi)的數(shù)據(jù)，如多個(gè)類別的變化趨勢(shì)及其對(duì)比。
使用情況包括：
- 股票價(jià)格表現(xiàn)
- 健康統(tǒng)計(jì)
- 年度報(bào)表
隨時(shí)間變化的圖表包括
- 折線圖
- 柱狀圖
- 堆積柱狀圖
- 燭臺(tái)圖
- 面積圖
- 時(shí)間軸
- 地平線圖
- 瀑布流圖
類別比較
類別比較圖比較多個(gè)不同類別之間的數(shù)據(jù)。
使用情況包括：
- 不同國(guó)家間的收入對(duì)比
- 熱門場(chǎng)次對(duì)比
- 團(tuán)隊(duì)分配
類別比較圖包括：
- 柱狀圖
- 分組柱狀圖
- 氣泡圖
- 平行線圖
- 多條折線圖
- 子彈圖
排序
排序圖表示一個(gè)項(xiàng)目在有序列表中的位置。
使用情況包括：
- 選舉結(jié)果
- 表現(xiàn)統(tǒng)計(jì)
排序圖包括：
- 排序條形圖
- 排序柱狀圖
- 平行線圖
部分-整體
部分-整體圖表示部分元素是如何加總為整體的。
使用情況包括：
- 產(chǎn)品類別綜合收益
- 預(yù)算
部分-整體圖包括：
- 堆積柱狀圖
- 餅狀圖
- 堆積面積圖
- 矩陣樹圖
- 太陽(yáng)輻射圖
相關(guān)
相關(guān)圖展示兩個(gè)或多個(gè)變量之間的相關(guān)性。
使用情況包括：
- 收入和預(yù)期壽命
相關(guān)圖包括：
- 散點(diǎn)圖
- 氣泡圖
- 柱狀和折線圖
- 熱力圖
分布
分布圖展示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率。
使用情況有：
- 人口分布
- 收入分布
分布圖包括：
- 直方圖
- 線箱圖
- 小提琴圖
- 密度圖
流
流圖顯示數(shù)據(jù)在多種狀態(tài)之間的流動(dòng)。
使用情況包括：
- 資金轉(zhuǎn)移
- 投票統(tǒng)計(jì)和選舉結(jié)果
流圖包括：
- 桑基圖
- 甘特圖
- 和弦圖
- 網(wǎng)狀圖
關(guān)系
關(guān)系圖顯示多個(gè)項(xiàng)目之間是如何彼此關(guān)聯(lián)的。
使用情況有：
- 社交網(wǎng)絡(luò)
- 文字圖
關(guān)系圖包括：
- 網(wǎng)狀圖
- 維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
- 和弦圖
- 太陽(yáng)輻射圖
選擇圖表
許多類型的圖表都可以用于描述數(shù)據(jù)。下面的指導(dǎo)方針提供了如何選擇圖表的見解。
顯示隨時(shí)間產(chǎn)生的變化
隨時(shí)間產(chǎn)生的變化可以用時(shí)間序列圖來(lái)表示，這是一種按照時(shí)間順序來(lái)表示數(shù)據(jù)點(diǎn)的圖表。
可以表示隨時(shí)間變化的圖表包括：折線圖、條形圖和面積圖。
| 圖表類型 | 用法 | 基線值 | 時(shí)間系列的數(shù)量 | 數(shù)據(jù)類型 |
| 線性圖 | 傳達(dá)數(shù)據(jù)中的細(xì)微變化 | 任何值 | 任何時(shí)間序列（適用于8個(gè)及以上的時(shí)間列） | 連續(xù)型 |
| 條形圖 | 傳達(dá)數(shù)據(jù)中較大的差異，單個(gè)數(shù)據(jù)點(diǎn)如何與整體數(shù)據(jù)關(guān)聯(lián)、比較和排序 | 0 | 4個(gè)或以下 | 離散型或類別數(shù)據(jù) |
| 面積圖 | 總結(jié)數(shù)據(jù)集之間的關(guān)系，單個(gè)數(shù)據(jù)點(diǎn)是如何與整體數(shù)據(jù)關(guān)聯(lián)的 | 0（當(dāng)有多個(gè)時(shí)間列時(shí)） | 8個(gè)或更少 | 連續(xù)型 |
*基線值是指y軸上的起始值。
條形圖和餅狀圖
條形圖和餅狀圖都可以用于顯示比例，表示部分值與整體值之間的比較。
- 條形圖使用一條共同的基線，通過條柱的長(zhǎng)度表達(dá)數(shù)量
- 餅狀圖使用圓內(nèi)的圓弧或圓角表示整體的一部分
條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達(dá)隨時(shí)間產(chǎn)生的變化。因?yàn)檫@三種類型的圖表中，可能的值共享同一條基線，所以比基于條柱長(zhǎng)度的條形圖更容易比較值之間的差異。
面積圖
面積圖有多種類型，包括堆積面積圖和重疊面積圖：
- 堆積面積圖表示（在同一時(shí)間段內(nèi)）多個(gè)時(shí)間序列堆積在一起
- 重疊面積圖表示（在同一時(shí)間段內(nèi)）多個(gè)時(shí)間序列重疊在一起
重疊面積圖中不建議包含兩個(gè)以上的時(shí)間序列，以免模糊數(shù)據(jù)。相反，可以使用堆積面積圖在一個(gè)時(shí)間間隔內(nèi)比較多個(gè)值（橫軸表示時(shí)間）。
樣式
數(shù)據(jù)可視化使用自定義的樣式和形狀，以適應(yīng)用戶需求和上下文的方式使得數(shù)據(jù)一目了然。
下列有益于圖表自定義：
- 圖形元素
- 排版
- 圖標(biāo)
- 軸和標(biāo)簽
- 說(shuō)明和注釋
設(shè)置不同類型數(shù)據(jù)的樣式
視覺編碼是將數(shù)據(jù)轉(zhuǎn)換成視覺形式的過程。獨(dú)特的圖形屬性可以應(yīng)用于定量數(shù)據(jù)（如溫度，價(jià)格或速度）和定性數(shù)據(jù)（如類別，風(fēng)味和表達(dá)式）。
這些圖形屬性包括：
- 形狀
- 顏色
- 尺寸
- 面積
- 體積（容積/量）
- 長(zhǎng)度
- 角度
- 位置
- 方向
- 密度
表達(dá)不同屬性
多種視覺處理方式可以應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面。例如，條柱的色彩可以表示一個(gè)類別，與此同時(shí)條柱的長(zhǎng)度可以表示一個(gè)值（如人口大小）。
形狀可以用來(lái)表示定性數(shù)據(jù)。在該圖表中，每個(gè)類別由一種特定形狀代替（圓形，方形和三角形），這使得比較特定范圍內(nèi)的數(shù)據(jù)或與其他類別數(shù)據(jù)進(jìn)行比較都很容易。
形狀
圖表可以通過形狀來(lái)以多種不同的方式表達(dá)數(shù)據(jù)。形狀可以被設(shè)計(jì)為一條有趣的曲線，或一個(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ù)的方式：
- 區(qū)分不同的類別
- 表示數(shù)量
- 突出特定數(shù)據(jù)
- 表達(dá)意義
顏色區(qū)分類別
在環(huán)形圖中顏色被用于定義類別。
顏色表示數(shù)量
在地圖中顏色被用于表示數(shù)據(jù)值。
顏色突出數(shù)據(jù)
在散點(diǎn)圖中顏色被用于突出特殊數(shù)據(jù)。
焦點(diǎn)區(qū)域
當(dāng)顏色被少量使用時(shí)，它可以突出焦點(diǎn)區(qū)域。不建議使用大量的高光顏色，因?yàn)樗鼈儠?huì)分散用戶的注意力。
顏色表示意義
無(wú)障礙
為了適應(yīng)無(wú)法區(qū)別色彩差異的用戶，可以使用其他的方法來(lái)強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)比度著色、形狀或紋理。
將文本標(biāo)簽應(yīng)用于數(shù)據(jù)也有助于澄清其含義，同時(shí)消除了對(duì)說(shuō)明的需要。
線條
圖表中的線條可以傳達(dá)數(shù)據(jù)的質(zhì)量，例如層次結(jié)構(gòu)、突出強(qiáng)調(diào)和對(duì)比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。
線條可以應(yīng)用于特定的元素中，包括：
- 注釋
- 預(yù)測(cè)元素
- 比較工具
- 置信區(qū)間
- 異常
排版
文本可以用于標(biāo)記不同的圖表元素，包括：
- 圖表標(biāo)題
- 數(shù)據(jù)標(biāo)簽
- 軸標(biāo)簽
- 說(shuō)明
層次結(jié)構(gòu)中級(jí)別最高的文本通常是圖表標(biāo)題，最低的是軸標(biāo)簽和說(shuō)明。
| 范圍類型 | 字體 | 字型 | 大小 |
| 1.圖表標(biāo)題 | 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.說(shuō)明標(biāo)簽 | Roboto | 常規(guī) | 12pt |
文本粗細(xì)
標(biāo)題和不同的字體粗細(xì)在層次結(jié)構(gòu)中可以傳達(dá)哪些內(nèi)容比另一些更重要（或更不重要）。然而這種處理方式應(yīng)該有節(jié)制地使用，即采用數(shù)量有限的字體樣式。
圖標(biāo)
圖標(biāo)可以表示圖表中不同類型的數(shù)據(jù)，以提高圖表的整體可用性。
圖標(biāo)可以被用于：
- 分類數(shù)據(jù)，以區(qū)分組或類別
- UI控件及操作，如篩選，縮放，保存和下載
- 狀態(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ī)模或范圍。例如，折線圖展示的是沿水平和豎直方向標(biāo)記的軸的范圍內(nèi)的值。
條形圖基線
條形圖應(yīng)該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會(huì)導(dǎo)致數(shù)據(jù)被錯(cuò)誤地感知。
軸標(biāo)簽
標(biāo)簽的使用應(yīng)該反映圖表中最重要的數(shù)據(jù)細(xì)節(jié)。軸的標(biāo)簽應(yīng)該根據(jù)需要，并在用戶界面中以一致的方式使用。它們的存在不應(yīng)該妨礙圖表的閱讀。
文本方向
在圖表中文本標(biāo)簽應(yīng)該按水平方向放置，以保證其易于閱讀。
文本標(biāo)簽不應(yīng)該：
- 被旋轉(zhuǎn)
- 垂直堆疊
說(shuō)明和注釋
說(shuō)明和注釋描述圖表的信息。注釋應(yīng)該突出顯示數(shù)據(jù)點(diǎn)、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。
- 注釋
- 說(shuō)明
在桌面設(shè)備上，建議在圖表下方放置說(shuō)明。而在移動(dòng)設(shè)備中，建議將說(shuō)明放置在圖表上方，以便在交互過程中保持說(shuō)明可見。
標(biāo)簽和說(shuō)明
在簡(jiǎn)單的圖表中，圖表元素可以被直接標(biāo)記。但是，密集的圖表（或較大圖表組中的部分）可以在說(shuō)明中顯示標(biāo)簽。
小型顯示器
在可穿戴設(shè)備（或其他小型顯示屏）上顯示的圖表應(yīng)該是桌面端或移動(dòng)端圖表的簡(jiǎn)化版。
行為
圖表為用戶提供了可以控制所展示數(shù)據(jù)的交互模式。這些模式讓用戶關(guān)注圖表中的特定值或特定范圍。
以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對(duì)圖表數(shù)據(jù)的理解：
- 逐級(jí)展開 提供了一種清晰的途徑來(lái)揭示細(xì)節(jié)，可按需展示。
- 直接操作允許用戶直接對(duì)UI元素進(jìn)行操作，以減少屏幕上所需的操作步數(shù)，直接操作包括：縮放和平移，分頁(yè)，數(shù)據(jù)控件。
- 改變透視圖可以使一項(xiàng)設(shè)計(jì)服務(wù)于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和移動(dòng)。
逐級(jí)展開
使用逐級(jí)展開的方式顯示圖表細(xì)節(jié)，能夠允許用戶根據(jù)需要查看特定的數(shù)據(jù)點(diǎn)。
縮放和平移
縮放和平移是圖表中流行的交互方式，它們影響用戶研究數(shù)據(jù)和探索圖表UI的密切程度。
縮放
縮放改變了UI顯示的距離。而設(shè)備類型則決定縮放的執(zhí)行方式。
- 在桌面端，通過點(diǎn)擊并拖動(dòng)或滾動(dòng)的方式實(shí)現(xiàn)縮放
- 在移動(dòng)端，使用雙指捏放的手勢(shì)來(lái)實(shí)現(xiàn)縮放
當(dāng)縮放不是主要操作時(shí)，（在桌面端）可以通過單擊并拖動(dòng)或（在移動(dòng)端）通過雙擊來(lái)實(shí)現(xiàn)相同效果。
平移
平移能夠讓用戶探索超出屏幕之外的UI。應(yīng)該以對(duì)顯示數(shù)據(jù)有意義的方式對(duì)其進(jìn)行約束。例如，如果一張圖表的一個(gè)維度比另一個(gè)維度更重要，那么平移的方向可以僅限于更重要的維度方向上。
平移操作通常與縮放配合使用。
在移動(dòng)端，通常通過手勢(shì)進(jìn)行平移，例如單指滑動(dòng)。
分頁(yè)
在移動(dòng)端上，分頁(yè)是一種常見的模式，允許用戶通過左右滑動(dòng)查看上一張或下一張圖表。
在移動(dòng)端，用戶可以向右滑動(dòng)查看前一天的內(nèi)容。
數(shù)據(jù)控件
可以使用切換控件、選項(xiàng)卡和下拉列表篩選或更改數(shù)據(jù)。
當(dāng)用戶調(diào)整控件時(shí)，這些控件也可以顯示度量。
切換控件、選項(xiàng)卡和下拉列表意味著可以篩選或更改數(shù)據(jù)。
動(dòng)效
動(dòng)效可以加強(qiáng)并鞏固數(shù)據(jù)間的關(guān)系以及用戶和數(shù)據(jù)的交互方式。動(dòng)效應(yīng)該有目的地（而不是裝飾性地）被使用，以表達(dá)不同狀態(tài)和空間之間的關(guān)系。
動(dòng)效應(yīng)該合乎邏輯，平穩(wěn)且能夠快速響應(yīng)，不妨礙用戶的體驗(yàn)旅程。
在這一案例中，數(shù)據(jù)的動(dòng)效設(shè)置在切換按天顯示和按周顯示的時(shí)候。在切換的過程中不顯示所選日期范圍之外的數(shù)據(jù)，從而降低了圖表復(fù)雜性。
此處的動(dòng)效顯示了兩張不同圖表之間的聯(lián)系。
空狀態(tài)
空白的圖片和表格可以顯示一些表明在數(shù)據(jù)可用時(shí)期望發(fā)生的內(nèi)容。
在適用的情況下，角色動(dòng)畫能夠帶來(lái)愉悅感和激勵(lì)。
角色動(dòng)畫豐富了空白圖片。
儀表盤
數(shù)據(jù)可視化可以在一系列的多個(gè)圖表中展現(xiàn)，這在UI中被稱為儀表盤。多個(gè)單獨(dú)的圖表有時(shí)比一個(gè)復(fù)雜的圖表能夠更好地傳達(dá)一個(gè)故事。
儀表盤設(shè)計(jì)
儀表盤的目的應(yīng)反映在其布局、樣式和交互模式中。儀表盤的設(shè)計(jì)應(yīng)該適應(yīng)它的使用方式，無(wú)論它是一個(gè)演示工具還是一個(gè)深入研究數(shù)據(jù)的工具。
一個(gè)儀表盤應(yīng)該：
- （通過布局）優(yōu)先考慮最重要的信息
- 顯示根據(jù)層次結(jié)構(gòu)（使用顏色、位置、大小和視覺權(quán)重）排序的信息焦點(diǎn)
應(yīng)該根據(jù)數(shù)據(jù)提出的問題對(duì)信息進(jìn)行優(yōu)先級(jí)排序。在本案例所示的操作儀表盤中，考慮了以下的用戶問題：
- 需要被注意的問題
- 問題發(fā)生的時(shí)間
- 問題發(fā)生的位置
- 受問題影響的其他變量
分析型儀表盤
分析型儀表盤能夠讓用戶探索多個(gè)數(shù)據(jù)集并發(fā)現(xiàn)趨勢(shì)。通常這些儀表盤包括復(fù)雜的圖表，這些圖表能夠發(fā)現(xiàn)數(shù)據(jù)細(xì)節(jié)。
使用情況包括：
- 強(qiáng)調(diào)隨時(shí)間變化的趨勢(shì)
- 回答“為什么”和“如果……怎樣”的問題
- 預(yù)測(cè)
- 創(chuàng)建深入的報(bào)告
分析型儀表盤的案例有：
- 跟蹤隨時(shí)間變化的廣告活動(dòng)表現(xiàn)
- 跟蹤產(chǎn)品在整個(gè)生命周期中的銷售和收益
- 顯示城市人口隨時(shí)間改變的趨勢(shì)
- 跟蹤隨時(shí)間變化的氣候數(shù)據(jù)
操作型儀表盤
操作型儀表板旨在回答一組預(yù)定義的問題。它們通常用于完成與監(jiān)視相關(guān)的任務(wù)。
在大多數(shù)情況下，這種類型的儀表盤會(huì)把當(dāng)前信息安排在一組簡(jiǎn)單的圖表中。
使用情況包括：
- 根據(jù)目標(biāo)跟蹤當(dāng)前進(jìn)度
- 實(shí)時(shí)跟蹤系統(tǒng)表現(xiàn)
操作型儀表盤的案例有：
- 跟蹤呼叫中心活動(dòng)，如呼叫量、等待時(shí)間、呼叫長(zhǎng)度或呼叫類型
- 監(jiān)視云端應(yīng)用程序的運(yùn)行情況
- 顯示股票市場(chǎng)表現(xiàn)
- 監(jiān)視賽車的遙測(cè)數(shù)據(jù)
演示型儀表盤
演示型儀表板提供了關(guān)于感興趣主題的詳細(xì)快照。
這些儀表板通常包括一些小圖表或記分卡，通過動(dòng)態(tài)標(biāo)題來(lái)解釋每個(gè)支持圖表中提供的趨勢(shì)和見解。
使用情況包括：
- 提供關(guān)鍵績(jī)效的指標(biāo)概述
- 創(chuàng)建高級(jí)執(zhí)行摘要
展示型儀表盤的案例有：
- 提供投資帳戶表現(xiàn)的概述
- 提供產(chǎn)品銷售和市場(chǎng)份額數(shù)據(jù)摘要
原文地址：Material Design
譯者：杜雅黎
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》Material Design Data Visualization 數(shù)據(jù)可視化
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(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咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司