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 協議
謝老板
很詳細,學習到了,謝謝樓主 ??
??
學習了,謝謝樓主;不知道有沒有英文原文鏈接?
公眾號里面有哈,點擊查看原文即可