Material Design設計語言-數據可視化

本文總結了數據可視化設計的五個要點，分別為：原則、類型、樣式、行為、儀錶板。

隨著5G時代的到來，物聯網的興起，可視化設計在移動端的應用越來越多了。

在行業內還沒有一個標準的規範可參考之前，谷歌的可視化團隊於2019年6月率先開發了數據可視化設計指南。

數據可視化：主要是藉助於圖形化手段，清晰有效地傳達與溝通信息。

在行業內還沒有一個標準的規範可參考之前，谷歌的可視化團隊於2019年6月率先開發了數據可視化設計指南。

數據可視化：主要是藉助於圖形化手段，清晰有效地傳達與溝通信息。

一、原則

數據可視化，是將數據信息以直觀的圖標、圖形展示出來的一種表現形式。旨在讓用戶更容易看懂和理解數據，以及傳達的信息更明確。因為這能夠讓用戶快速分析，並迅速做出判斷和決策。

數據可視化可以表達不同類型和大小的數據：從幾個數據點到大型多變量數據集。

1. 準確

優先考慮數據的準確性、清晰度和完整性，以不會扭曲信息的方式呈現信息

2. 有用

幫助用戶通過上下文理解數據，並且讓用戶更有興趣探索其它內容。

3. 擴展

適應不同設備大小的可視化，同時預測用戶對數據深度、複雜性和形式的需求。

二、類型

數據可視化能以不同的形式表達。圖表是表達數據的常用方式，因為圖表可以描述了不同的數據種類，同時讓數據之間可以比較。

使用的圖表類型主要取決於這兩點：你要傳達的數據和傳達有關該數據的內容。

1. 時間變化

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

例如：

2. 類別比較

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

例如：

3. 排行

排行圖表主要用於展示項目在有序列表中的位置。

例如：

4. 相關性

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

例如：

收入與壽命的關聯性

5. 分布

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

例如：

（以上箱形圖顯示了NBA前9名球員得分情況）

補充：條形圖可以叫柱狀圖，但直方圖與條形圖有很大不同，條形圖通常關聯兩個變量，但直方圖只涉及一個。直方圖用於連續數據，其中區間表示數據範圍，而條形圖是分類變量圖。

6. 流程

流程圖表示多個狀態之間的數據的轉移和變化。

例如：

7. 關係

關係圖用於表示多個項目是如何相互關聯的。

例如：

三、樣式

數據可視化可以自定義樣式和形狀等屬性，使數據更容易理解，以適合用戶需求和上下文表現的方式。

不同的視覺處理可以分別代表不同的數據。

例如：條形的顏色可以表示類別，而長度可以表示值（如種群大小）。

形狀可用於表示定性的數據。在上圖中，每個類別由特定的形狀（圓形、正方形和三角形）表示，這樣可以輕鬆比較特定範圍內的數據或其他類別的數據。

1. 形狀

圖表可以使用形狀以多種方式顯示數據。一個形狀可以被設計成有趣的曲線形狀、或者精確和逼真的形狀。

形狀細節水平

圖表可以以不同的精度表示數據。用於近距離觀看的數據應該以適合交互的形狀表示（根據觸摸目標大小和可用性方面）。而用來表達一般想法或趨勢的數據可以使用細節較少的簡單形狀。

2. 顏色

顏色可用於區分以下四種形式的圖表數據：

• 區分彼此的類別
• 代表數量
• 突出顯示特定數據
• 表達意義

顏色區分類別

顏色區分數量

顏色突出顯示數據

顏色還可以突出顯示焦點區域。不建議使用大量的高亮色，因為它們會分散注意力並妨礙用戶聚焦。

顏色表示含義

特別注意

無障礙設計– 考慮紅綠色盲等存在視覺障礙的用戶，用適合的方式來強調數據，例如高對比度著色、形狀或紋理。還可將文本標籤注釋數據以闡明其含義，從而不用完全依賴於圖形。

3. 線

圖表線可以表示有關數據的質量，例如層次結構、突出顯示和比較。線條樣式可以採用不同的方式，例如使用破折號或各種不透明度。

線可以應用於特定場景，包括：

4. 文本

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

具有最高優先級的文本通常是圖表標題，其中坐標軸標籤和圖例屬於最低級別的層次結構。

標題和不同的字體權重可以傳達哪些內容的層級比其他內容更重要（或更不重要）。然而，這種樣式處理方法應謹慎使用，因為字體樣式的數量是有限的。

5. 圖標

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

圖標可用於：

• 區分組或類別的分類數據
• UI控制項和操作，例如篩選、縮放、保存和下載
• 區分狀態，例如錯誤、沒有數據、完成狀態和危險

在圖表中放置圖標時，建議使用通用且可識別符號，尤其是在表示操作或狀態時，例如：保存、下載、完成、錯誤和危險。

6. 坐標軸

坐標軸標籤或多個軸表示所顯示數據的比例和範圍。例如，折線圖X軸和Y軸的文本標籤顯示一系列值。

條形圖基線

條形圖應從基線（y軸上的起始值）的零開始。從非零的基線開始可能會給用戶對數據的理解造成混淆。

坐標軸標籤

坐標軸標籤的使用是反映圖表中重要的數據最直接的。應根據實際需要使用坐標軸標籤，並在UI中以一致的方式使用。

文字方向

文本標籤應水平放置在圖表上，以便於閱讀。

文字標籤不應該：

7. 圖例和注釋

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

在桌面端，建議把圖例放置在圖表下方。在行動裝置上，則將圖例放在圖表上方，以便於在交互期間保持可見狀態。

在簡單圖表中圖表元素可以直接用文本進行標記。但是，在密集的圖表則需要使用圖例說明會更清晰。

8. 迷你屏幕

可穿戴設備（或其他小屏幕）上顯示的圖表應該是手機端或桌面端圖表的簡化版本。

四、行為

圖表提供交互模式，使用戶可以控制顯示的數據。這些交互模式使用戶可以專注於圖表的特定值或範圍。

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

• 逐漸展開 提供了一條明確的途徑，可以按需提供詳細信息。
• 直接操作 允許用戶直接對UI元素進行操作，最大限度地減少屏幕上所需的操作數量，包括：縮放、平移、分頁和數據控制項。
• 更改透視圖 可以使一種設計可以適用於不同的用戶和數據類型，例如數據控制項和動畫。

1. 漸進式展示

使用漸進式展示顯示圖表詳細信息，允許用戶根據實際需要查看特定的數據點。

2. 縮放和平移

縮放和平移是常見的圖表交互，它們影響用戶研究數據和瀏覽圖表用戶界面的緊密程度。

縮放

縮放會更改用戶界面是從近還是遠顯示。設備類型決定如何執行縮放。

• 在桌面端，通過單擊和拖動或滾動進行縮放
• 在移動端，使用手指捏合進行縮放

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

平移

平移讓用戶瀏覽屏幕之外的用戶界面。它應該根據數據的具體意義進行約束。例如，如果圖表的一個維度比另一個更重要，則平移的方向只能限制為該方向。

平移交互通常與縮放配合使用。

在行動裝置上，平移通常是通過手勢來實現的，比如單手指滑動平移。

4. 數據控制項

可以使用切換控制項、選項卡和下拉菜單過濾/更改數據。

當用戶也可以調整控制項時，這些控制項還可以衡量指標。

5. 動畫

動畫可以增強數據與用戶交互方式之間的關係。應該有目的地使用動畫（不是裝飾性地），來表達不同狀態和空間之間的聯繫。

動畫應該感覺合理、平穩、反應靈敏，不會妨礙用戶的體驗和進程。

6. 空狀態

空圖形和圖表可以顯示在數據可用時用戶期望的內容。

在適用的情況下，可以顯示角色動畫以提供樂趣和鼓勵。

五、儀錶板

數據可視化可以在一系列多個圖表中顯示，在稱為儀錶板的 UI中。多個單獨的圖表有時可以更好地傳達故事，而不是把一個圖表做得很複雜。

儀錶板的用途應反映在其布局、樣式和交互模式中。它的設計應該適合它的使用方式，無論是製作演示文稿還是深入探索數據的工具。

儀錶板的用途應該反映在其布局、樣式和交互模式中。不管它是一個進行演示的工具還是深入研究數據的工具，其設計都應該服務於它的使用方式。

儀錶板應該：

• 確定最重要信息的優先級（通過布局）
• 顯示根據層次結構（通過顏色、位置、大小和視覺權重）確定信息優先級的焦點

根據對數據的具體需求進行信息的優先級規劃。在以下示例儀錶板中，考慮的用戶問題有：

1. 分析儀錶板

分析儀錶板使用戶能夠探索多組數據並發現其中趨勢。通常，這些儀錶板包含能夠通過數據洞察事物的複雜圖表。

例如：

• 隨著時間的推移突出趨勢
• 回答「為什麼」和「假設」問題
• 預測
• 創建深入的報告

分析儀錶板示例：

• 跟蹤廣告系列的效果
• 跟蹤產品在其生命周期中產生的銷售額和收入
• 隨時間顯示城市人口趨勢
• 隨時跟蹤氣候數據

2. 操作儀錶板

操作儀錶板旨在回答一組預定義的問題。它們通常被用於與監控相關的任務。

在大多數情況下，這些類型的儀錶板具有排列一組簡單圖表的當前信息。

例如：

• 跟蹤目標的當前進度
• 實時跟蹤系統性能
• 操作儀錶板示例：
• 跟蹤呼叫中心活動，例如呼叫量、等待時間、呼叫長度或呼叫類型
• 監控雲上運行的應用程式的運行狀況
• 顯示股市表現
• 監控賽車上的遙測數據

3. 演示儀錶板

演示儀錶板為感興趣的主題提供展示和說明。

這些儀錶盤通常包括幾個小圖表或記分卡，其中動態標題解釋了每個圖表中提供的趨勢和見解。

例如：

演示儀錶板示例：

• 提供投資帳戶績效的概述
• 提供產品銷售和市場份額數據的摘要

 

作者：宛蘇，微信：wansuer，公眾號：宛蘇

本文由 @宛蘇 翻譯發布於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議