原則

數據可視化是一種用圖形形式來描述密集和復雜信息的通訊方式。由此產生的視覺視覺效果使得數據比較和用數據講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

數據可視化可以表示不同類型和大小的數據：從少量數據點到大型多元數據集都可以表示。

類型

數據可視化可以用不同的形式來傳達。圖表是一種常用的數據傳達方法，因為它們不僅描述了不同的數據類型，還能進行數據比較。

圖表類型的使用主要取決于兩個方面：想要傳達的數據，以及想要傳達的數據有關的內容。以下指南提供并描述了各種不同類型的圖表及其用例。

圖表類型

隨時間變化

隨時間變化的圖表顯示一段時間內的數據，如多個類別的變化趨勢及其對比。

使用情況包括：

1. 股票價格表現
2. 健康統計
3. 年度報表

隨時間變化的圖表包括

1. 折線圖
2. 柱狀圖
3. 堆積柱狀圖
4. 燭臺圖
5. 面積圖
6. 時間軸
7. 地平線圖
8. 瀑布流圖

類別比較

類別比較圖比較多個不同類別之間的數據。

使用情況包括：

1. 不同國家間的收入對比
2. 熱門場次對比
3. 團隊分配

類別比較圖包括：

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

排序

排序圖表示一個項目在有序列表中的位置。

使用情況包括：

1. 選舉結果
2. 表現統計

排序圖包括：

1. 排序條形圖
2. 排序柱狀圖
3. 平行線圖

部分-整體

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

使用情況包括：

1. 產品類別綜合收益
2. 預算

部分-整體圖包括：

1. 堆積柱狀圖
2. 餅狀圖
3. 堆積面積圖
4. 矩陣樹圖
5. 太陽輻射圖

相關

相關圖展示兩個或多個變量之間的相關性。

使用情況包括：

1. 收入和預期壽命

相關圖包括：

1. 散點圖
2. 氣泡圖
3. 柱狀和折線圖
4. 熱力圖

分布

分布圖展示每個值在數據集中出現的頻率。

使用情況有：

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

分布圖包括：

1. 直方圖
2. 線箱圖
3. 小提琴圖
4. 密度圖

流

流圖顯示數據在多種狀態之間的流動。

使用情況包括：

1. 資金轉移
2. 投票統計和選舉結果

流圖包括：

1. 桑基圖
2. 甘特圖
3. 和弦圖
4. 網狀圖

關系

關系圖顯示多個項目之間是如何彼此關聯的。

使用情況有：

1. 社交網絡
2. 文字圖

關系圖包括：

1. 網狀圖
2. 維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
3. 和弦圖
4. 太陽輻射圖

選擇圖表

許多類型的圖表都可以用于描述數據。下面的指導方針提供了如何選擇圖表的見解。

顯示隨時間產生的變化

隨時間產生的變化可以用時間序列圖來表示，這是一種按照時間順序來表示數據點的圖表。

可以表示隨時間變化的圖表包括：折線圖、條形圖和面積圖。

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

條形圖和餅狀圖

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

1. 條形圖使用一條共同的基線，通過條柱的長度表達數量
2. 餅狀圖使用圓內的圓弧或圓角表示整體的一部分

條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達隨時間產生的變化。因為這三種類型的圖表中，可能的值共享同一條基線，所以比基于條柱長度的條形圖更容易比較值之間的差異。

面積圖

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

1. 堆積面積圖表示（在同一時間段內）多個時間序列堆積在一起
2. 重疊面積圖表示（在同一時間段內）多個時間序列重疊在一起

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

樣式

數據可視化使用自定義的樣式和形狀，以適應用戶需求和上下文的方式使得數據一目了然。

下列有益于圖表自定義：

1. 圖形元素
2. 排版
3. 圖標
4. 軸和標簽
5. 說明和注釋

設置不同類型數據的樣式

視覺編碼是將數據轉換成視覺形式的過程。獨特的圖形屬性可以應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味和表達式）。

這些圖形屬性包括：

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

表達不同屬性

多種視覺處理方式可以應用于數據點的多個方面。例如，條柱的色彩可以表示一個類別，與此同時條柱的長度可以表示一個值（如人口大小）。

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

形狀

圖表可以通過形狀來以多種不同的方式表達數據。形狀可以被設計為一條有趣的曲線，或一個精確的高保真圖形，以及介于二者之間的其他方式。

形狀的精確程度

圖表可以以不同的精度來表示數據。用于深入研究的數據應該（根據觸摸目標的尺寸和相關可視化要求）使用適合交互的形狀來表示。而用于表達大致想法或趨勢的數據可以使用細節較少的形狀。

顏色

顏色有四種主要的區分數據的方式：

1. 區分不同的類別
2. 表示數量
3. 突出特定數據
4. 表達意義

顏色區分類別

在環形圖中顏色被用于定義類別。

顏色表示數量

在地圖中顏色被用于表示數據值。

顏色突出數據

在散點圖中顏色被用于突出特殊數據。

焦點區域

當顏色被少量使用時，它可以突出焦點區域。不建議使用大量的高光顏色，因為它們會分散用戶的注意力。

顏色表示意義

無障礙

為了適應無法區別色彩差異的用戶，可以使用其他的方法來強調數據，例如高對比度著色、形狀或紋理。

將文本標簽應用于數據也有助于澄清其含義，同時消除了對說明的需要。

線條

圖表中的線條可以傳達數據的質量，例如層次結構、突出強調和對比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。

線條可以應用于特定的元素中，包括：

1. 注釋
2. 預測元素
3. 比較工具
4. 置信區間
5. 異常

排版

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

1. 圖表標題
2. 數據標簽
3. 軸標簽
4. 說明

層次結構中級別最高的文本通常是圖表標題，最低的是軸標簽和說明。

文本粗細

標題和不同的字體粗細在層次結構中可以傳達哪些內容比另一些更重要（或更不重要）。然而這種處理方式應該有節制地使用，即采用數量有限的字體樣式。

圖標

圖標可以表示圖表中不同類型的數據，以提高圖表的整體可用性。

圖標可以被用于：

1. 分類數據，以區分組或類別
2. UI控件及操作，如篩選，縮放，保存和下載
3. 狀態，例如錯誤狀態，無數據狀態，完成狀態和危險狀態

當在圖表中使用圖標時，建議使用普遍可識別的圖標，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

在傳達意義時圖標補充了顏色的意義。

有標記的軸

有標記的軸或多個軸能夠指示數據所展示的規模或范圍。例如，折線圖展示的是沿水平和豎直方向標記的軸的范圍內的值。

條形圖基線

條形圖應該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會導致數據被錯誤地感知。

軸標簽

標簽的使用應該反映圖表中最重要的數據細節。軸的標簽應該根據需要，并在用戶界面中以一致的方式使用。它們的存在不應該妨礙圖表的閱讀。

文本方向

在圖表中文本標簽應該按水平方向放置，以保證其易于閱讀。

文本標簽不應該：

1. 被旋轉
2. 垂直堆疊

說明和注釋

說明和注釋描述圖表的信息。注釋應該突出顯示數據點、數據異常值和任何值得注意的內容。

1. 注釋
2. 說明

在桌面設備上，建議在圖表下方放置說明。而在移動設備中，建議將說明放置在圖表上方，以便在交互過程中保持說明可見。

標簽和說明

在簡單的圖表中，圖表元素可以被直接標記。但是，密集的圖表（或較大圖表組中的部分）可以在說明中顯示標簽。

小型顯示器

在可穿戴設備（或其他小型顯示屏）上顯示的圖表應該是桌面端或移動端圖表的簡化版。

行為

圖表為用戶提供了可以控制所展示數據的交互模式。這些模式讓用戶關注圖表中的特定值或特定范圍。

以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

1. 逐級展開 提供了一種清晰的途徑來揭示細節，可按需展示。
2. 直接操作允許用戶直接對UI元素進行操作，以減少屏幕上所需的操作步數，直接操作包括：縮放和平移，分頁，數據控件。
3. 改變透視圖可以使一項設計服務于不同的用戶和數據類型，例如數據控件和移動。

逐級展開

使用逐級展開的方式顯示圖表細節，能夠允許用戶根據需要查看特定的數據點。

縮放和平移

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

縮放

縮放改變了UI顯示的距離。而設備類型則決定縮放的執行方式。

1. 在桌面端，通過點擊并拖動或滾動的方式實現縮放
2. 在移動端，使用雙指捏放的手勢來實現縮放

當縮放不是主要操作時，（在桌面端）可以通過單擊并拖動或（在移動端）通過雙擊來實現相同效果。

平移

平移能夠讓用戶探索超出屏幕之外的UI。應該以對顯示數據有意義的方式對其進行約束。例如，如果一張圖表的一個維度比另一個維度更重要，那么平移的方向可以僅限于更重要的維度方向上。

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

在移動端，通常通過手勢進行平移，例如單指滑動。

分頁

在移動端上，分頁是一種常見的模式，允許用戶通過左右滑動查看上一張或下一張圖表。

在移動端，用戶可以向右滑動查看前一天的內容。

數據控件

可以使用切換控件、選項卡和下拉列表篩選或更改數據。

當用戶調整控件時，這些控件也可以顯示度量。

切換控件、選項卡和下拉列表意味著可以篩選或更改數據。

動效

動效可以加強并鞏固數據間的關系以及用戶和數據的交互方式。動效應該有目的地（而不是裝飾性地）被使用，以表達不同狀態和空間之間的關系。

動效應該合乎邏輯，平穩且能夠快速響應，不妨礙用戶的體驗旅程。

在這一案例中，數據的動效設置在切換按天顯示和按周顯示的時候。在切換的過程中不顯示所選日期范圍之外的數據，從而降低了圖表復雜性。

此處的動效顯示了兩張不同圖表之間的聯系。

空狀態

空白的圖片和表格可以顯示一些表明在數據可用時期望發生的內容。

在適用的情況下，角色動畫能夠帶來愉悅感和激勵。

角色動畫豐富了空白圖片。

儀表盤

數據可視化可以在一系列的多個圖表中展現，這在UI中被稱為儀表盤。多個單獨的圖表有時比一個復雜的圖表能夠更好地傳達一個故事。

儀表盤設計

儀表盤的目的應反映在其布局、樣式和交互模式中。儀表盤的設計應該適應它的使用方式，無論它是一個演示工具還是一個深入研究數據的工具。

一個儀表盤應該：

1. （通過布局）優先考慮最重要的信息
2. 顯示根據層次結構（使用顏色、位置、大小和視覺權重）排序的信息焦點

應該根據數據提出的問題對信息進行優先級排序。在本案例所示的操作儀表盤中，考慮了以下的用戶問題：

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

分析型儀表盤

分析型儀表盤能夠讓用戶探索多個數據集并發現趨勢。通常這些儀表盤包括復雜的圖表，這些圖表能夠發現數據細節。

使用情況包括：

1. 強調隨時間變化的趨勢
2. 回答“為什么”和“如果……怎樣”的問題
3. 預測
4. 創建深入的報告

分析型儀表盤的案例有：

1. 跟蹤隨時間變化的廣告活動表現
2. 跟蹤產品在整個生命周期中的銷售和收益
3. 顯示城市人口隨時間改變的趨勢
4. 跟蹤隨時間變化的氣候數據

操作型儀表盤

操作型儀表板旨在回答一組預定義的問題。它們通常用于完成與監視相關的任務。

在大多數情況下，這種類型的儀表盤會把當前信息安排在一組簡單的圖表中。

使用情況包括：

1. 根據目標跟蹤當前進度
2. 實時跟蹤系統表現

操作型儀表盤的案例有：

1. 跟蹤呼叫中心活動，如呼叫量、等待時間、呼叫長度或呼叫類型
2. 監視云端應用程序的運行情況
3. 顯示股票市場表現
4. 監視賽車的遙測數據

演示型儀表盤

演示型儀表板提供了關于感興趣主題的詳細快照。

這些儀表板通常包括一些小圖表或記分卡，通過動態標題來解釋每個支持圖表中提供的趨勢和見解。

使用情況包括：

1. 提供關鍵績效的指標概述
2. 創建高級執行摘要

展示型儀表盤的案例有：

1. 提供投資帳戶表現的概述
2. 提供產品銷售和市場份額數據摘要

原文地址：Material Design

譯者：杜雅黎

 轉載請注明：學UI網》Material Design Data Visualization 數據可視化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司