Material Design最新數據可視化指南

2019-7-15    泥人張 大屏界面設計文章及欣賞

如果您想訂閱本博客內容,每天自動發到您的郵箱中,

2019年6月18日Material Design更新了設計指南中數據可視化部分,這是谷歌數據可視化團隊形成的一套全面的數據可視化指南, 涵蓋了設計原則、圖表分類、圖表的選用、樣式設計、交互設計、儀表板設計等方面。個人閱讀后進行了翻譯,希望能夠分享給更多對數據可視化有興趣的設計同學!


全文章節目錄:

原則

類型

選擇圖表

樣式

行為

儀表板




數據可視化

數據可視化就是用圖形描繪信息。




原則

數據可視化是一種以圖形描繪密集和復雜信息的表現形式。數據可視化的視覺效果旨在使數據容易對比,并用它來講故事,以此來幫助用戶做出決策。


數據可視化可以表達不同類型和規模的數據,包括從幾個數據點到有大量變量的數據集。

Image title





類型

數據可視化可以以不同的形式表達。圖表是表達數據的常用方式,因為它們能夠展示和對比多種不同的數據。


圖表類型的選擇主要取決于兩點:要表現的數據和表現該數據的用意。該指南描述各種類型的圖表及其用例。


圖表類型


1. 隨時間變化

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


常見用例包括:

股價表現、衛生統計、年表

Image title



2. 類別比較

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

常見用例包括:

不同國家的收入、熱門場地時間、團隊分配

Image title



3. 排名

排名圖表顯示項目在有序列表中的位置。

常見用例包括:

選舉結果、性能統計

Image title



4. 占比

占比類圖表顯示了局部與整體的關系。

常見用例包括:

產品類別的綜合收入、預算

Image title



5. 關聯

關聯類圖表顯示兩個或以上變量之間的關系。

常見用例包括:

收入和預期壽命

Image title



6. 分布

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

常見用例包括:

人口分布、收入分布

Image title



7. 流程

流程類圖表顯示了多個狀態之間的數據移動。

常見用例包括:

資金轉移、投票計數和選舉結果

Image title



8. 關系

關系圖表顯示多個項目之間的關系。

常見用例包括:

社交網絡、詞圖

Image title






選擇圖表

面對多種類型的圖表,以下指南提供了關于如何選擇合適的圖表見解。



顯示隨時間的變化

可以使用時間序列圖表來表示隨時間的變化,就是按時間順序表示數據點的圖表。表示隨時間變化的圖表包括:折線圖,柱狀圖(條形圖)和面積圖。


Image title

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



柱狀圖(條形圖)和餅圖

柱狀圖(條形圖)和餅圖都可用于顯示比例,表示部分與總體的對比。

· 柱狀圖(條形圖)使用共同的基線,通過條形長度表示數量

· 餅圖使用圓的圓弧或角度表示整體的一部分


柱狀圖(條形圖),折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有效地。由于這三個圖表都是使用相同的基線,因此可以更輕松地根據條形長度比較值的差異。

Image title



面積圖

面積圖有多種類型,包括堆疊面積圖和層疊面積圖:

· 堆疊面積圖顯示多個時間序列(在同一時間段內)堆疊在一起

· 層疊面積圖顯示多個時間序列(在同一時間段內)重疊在一起


層疊面積圖建議不要使用超過兩個時間序列,因為這樣做會使數據模糊不清。取而代之,應當使用堆疊面積圖來比較一個時間間隔內的多個值(橫軸表示時間)。

Image title





樣式

數據可視化使用自定義樣式和形狀,使數據更容易理解,以適合用戶需求。


圖表可以從以下方面進行優化:

· 圖形元素

· 文字排版

· 圖標

· 軸和標簽

· 圖例和注釋



不同類型數據的樣式設計

可視化編碼是將數據轉換為可視形式的過程。獨特的圖形屬性可應用于定量數據(如溫度,價格或速度)和定性數據(如類別,風味或表達式)。


這些圖形屬性包括:

· 形狀

· 顏色

· 大小

· 面積

· 體積

· 長度

· 角度

· 位置

· 方向

· 密度



不同屬性的表現

多個視覺處理方法可以綜合應用于數據點的多個方面。例如,在條形圖中,條形顏色可以表示類別,而條形長度可以表示值(如人口數量)。

Image title

形狀可用于表示定性數據。在此圖表中,每個類別由特定形狀(圓形,正方形和三角形)表示,這樣可以在一張圖表中輕松實現特定范圍的比較,同時也可以進行類別之間比較。



1. 形狀

圖表可以運用形狀,以多種方式展示數據。形狀的設計可以是有趣的、曲線的,或者精確和高保真的等等。


形狀精確程度

圖表可以展示不同精度程度的數據。用于細致研究的數據應該用適合交互的形狀(在觸摸大小和功能可見性方面)展示。而旨在表達一般概念或趨勢的數據可以使用細節較少的形狀。

Image title



2. 顏色

顏色可用于以四種主要方式區分圖表數據:

· 區分類別

· 表示數量

· 突出特定數據

· 表示含義


顏色區分類別

Image title

例:圓環圖中,顏色用于表示類別。



顏色表示數量

Image title

例:地圖中,顏色用于表示數據值。



顏色突出數據

Image title

例:散點圖中,顏色用于突出特定數據。



重點區域

在不濫用的情況下,顏色可以突出焦點區域。不建議大量使用高亮顏色,因為它們會分散用戶注意力,影響用戶的專注力。

Image title



顏色表示含義

Image title



無障礙

為了適應看不到顏色差異的用戶,您可以使用其他方法來強調數據,例如高對比度著色,形狀或紋理。

將文本標簽應用于數據還有助于說明其含義,同時消除對圖例的需求。



3. 線

圖表中的線可以表示數據的特性,例如層次結構,突出和比較。線條可以有多種不同的樣式,例如點劃線或不同的不透明度。


線可以應用于特定元素,包括:

· 注釋

· 預測元素

· 比較工具

· 可靠區間

· 異常


Image title



4. 文字排版

文本可用于不同的圖表元素,包括:

· 圖表標題

· 數據標簽

· 軸標簽

· 圖例



圖表標題通常是具有最高層次結構的文本,軸標簽和圖例具有最低級別的層次結構。

Image title



字重

標題和字重的變化可以表達內容在層次結構中的重要程度。但是應該保持克制,使用有限的字體樣式。

Image title



5. 圖標

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


圖標可用于:

· 分類數據:用于區分組或類別

· UI控件和操作:例如篩選,縮放,保存和下載

· 狀態:例如錯誤,空狀態,完成狀態和危險


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

Image title




6. 坐標軸

一個或多個坐標軸顯示數據的比例和范圍。例如,折線圖沿水平和垂直坐標軸顯示一系列值。

Image title



柱狀圖(條形圖)基線

柱狀圖(條形圖)應從為零的基線(y軸上的起始值)開始。從不為零的基線開始可能導致數據被錯誤地理解。

Image title



坐標軸標簽

標簽的設計應體現圖表中最重要的數據。應根據需要使用標簽,并在UI中保持一致性。他們的出現不應該妨礙查看圖表。

Image title



文字方向

為便于閱讀,文本標簽應水平放置在圖表上。


文字標簽不應該:

· 旋轉

· 垂直堆疊

Image title



7. 圖例和注釋

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

Image title

1. 注釋

2。 圖例


在PC端,建議在圖表下方放置圖例。在移動端,將圖例放在圖表上方,以便在交互過程中保持可見。



標簽和圖例

在簡單圖表中,可以使用直接標簽。在密集的圖表(或更大的圖表組的一部分)中,可以用圖例。

Image title



8. 小顯示屏

可穿戴設備(或其他小屏幕)上顯示的圖表應該是移動端或PC端圖表的簡化版本。

Image title





行為

圖表具有交互模式,使用戶可以控制圖表數據。這些模式可以使用戶專注于圖表的特定值或范圍。


以下推薦的交互模式,樣式和效果(如觸覺反饋)可以提高用戶對圖表數據的理解:

漸進式披露

提供了按需求逐步展示詳細信息的明確途徑。

直接操作

允許用戶直接對UI元素進行操作,最大限度地減少屏幕上所需的操作數量,包括:縮放和平移,分頁和數據控件。

改變視角

使一種設計可以適用于不同的用戶和數據類型,例如數據控件和動效。


1. 漸進式披露

使用漸進式披露顯示圖表詳細信息,允許用戶根據需要查看特定數據點。

Image title


2. 縮放和平移

縮放和平移是常用的圖表交互,會影響用戶對圖表數據深入的研究和探索。


縮放

縮放改變界面顯示的遠近。設備類型決定了如何執行縮放。

· 在PC端,通過單擊、拖動或滾動進行縮放

· 在移動端,通過捏合進行縮放


當縮放不是主要操作時,可以通過單擊和拖動(在PC端)或雙擊(在移動端)來實現。


平移

平移讓用戶能夠看到屏幕之外的界面。它應該合理的展示數據的價值。例如,如果圖表的一個維度比另一個維度更重要,則平移的方向可以僅限于該維度。

· 平移通常與縮放功能同時使用。

· 在移動端,平移通常通過手勢實現,例如單指滑動。

Image title



3. 分頁

在移動端,分頁是一種常見模式,讓用戶通過向右或向左滑動來查看上一個或下一個圖表。

Image title

在移動端,用戶可以向右滑動以查看前一天。



4. 數據控制

可以使用切換控件,選項卡和下拉菜單篩選或改變數據。

用戶調節控件時,這些控件還可以顯示指標。

Image title

切換控件,選項卡和下拉菜單可以更改或篩選數據。



5. 動效

動效可以強化數據之間的聯系,提升交互體驗。應該有目的地使用運動(不是裝飾性地),表達不同狀態和空間之間的聯系。

運動應該是合理,平穩,反應靈敏,不會妨礙用戶的使用。

Image title在此示例中,圖表數據從按天顯示動態切換到按周顯示。轉換期間不會顯示所選日期范圍之外的數據,從而降低了復雜性。



Image title動畫能夠體現兩個不同圖表的相關性。



6. 空狀態

圖表數據為空的情況下,可以提供相關數據的預期。

在合適的情況下,可以展示角色動畫創造愉悅和鼓勵。



Image title有特色的動畫提升了空狀態的效果。







儀表板

在稱為儀表板的UI界面中,數據可視化通過一系列圖表實現。多個獨立的圖表有時可以比一個復雜的圖表更好地表達故事。



儀表板設計

儀表板的目的應在其布局,樣式和交互模式中體現。無論是用來制作演示文稿還是深入研究數據,它的設計應該適合它的使用方式。


儀表板應該:

· 突出最重要信息(使用布局)

· 根據信息層級確定信息的焦點(使用顏色,位置,大小和視覺權重)


Image title

應根據對數據的需求確定信息的優先級并進行安排。在此示例中設計儀表板,考慮了以下用戶問題:

1. 需要注意的問題
2. 發生問題的時間

3.發生問題的位置

4。受問題影響的其他變量



1. 分析類儀表板

分析儀類表板讓用戶能夠研究多組數據并發現趨勢。通常,這些儀表板包含能夠深入洞察數據的復雜圖表。


用例包括:

· 隨時間變化的突出趨勢

· 回答“為什么”和“假設”的問題

· 預測

· 創建有深度的報告


分析類儀表板示例:

· 跟蹤廣告活動的收效

· 跟蹤產品在其整個生命周期中的銷售額和收入

· 隨時間變化的城市人口趨勢

· 跟蹤隨時間變化氣候數據


Image title

分析類儀表板顯示氣候數據



2. 操作類儀表板

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

在大多數情況下,這些類型的儀表板具有一系列關于當前信息的簡單圖表。


用例包括:

· 跟蹤目標的當前進度

· 實時跟蹤系統性能


操作類儀表板示例:

· 跟蹤呼叫中心的活動,例如呼叫音量,等待時間,呼叫長度或呼叫類型

· 監控在云端應用程序的運行狀況

· 顯示股市情況

· 監控賽車上的遙測數據


Image title

操作類儀表板顯示設備存儲指標



3. 演示類儀表板

演示類儀表板是為感興趣的主題提供的展示視圖。

這些儀表板通常包括一些小圖表或數據卡片,用動態標題描述每個圖表的趨勢和見解。


用例包括:

· 提供關鍵績效指標的總覽

· 創建高級執行情況的概要


演示類儀表板示例:

· 提供投資賬戶績效的總覽

· 提供產品銷售和市場份額數據的概要


Image title演示類儀表板顯示網站使用數據

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

標簽: design Material 數據可視化指南

日歷

鏈接

blogger

藍藍 http://www.thriveonsite.com

存檔

网赚兼职 网赚能赚到钱吗 贵州11选5 网赚论坛是真的吗 什么网赚最赚现在 湖北快3开奖 河南快3 上海快三 利用人人网赚钱 2019网赚游戏