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

5 評論 8675 瀏覽 97 收藏 20 分鐘

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

隨著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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝老板

    來自江蘇 回復
  2. 很詳細,學習到了,謝謝樓主 ??

    來自上海 回復
    1. ??

      回復
  3. 學習了,謝謝樓主;不知道有沒有英文原文鏈接?

    來自北京 回復
    1. 公眾號里面有哈,點擊查看原文即可

      回復