本文總結(jié)了數(shù)據(jù)可視化設(shè)計(jì)的五個(gè)要點(diǎn)，分別為：原則、類型、樣式、行為、儀表板。

隨著5G時(shí)代的到來(lái)，物聯(lián)網(wǎng)的興起，可視化設(shè)計(jì)在移動(dòng)端的應(yīng)用越來(lái)越多了。

在行業(yè)內(nèi)還沒(méi)有一個(gè)標(biāo)準(zhǔn)的規(guī)范可參考之前，谷歌的可視化團(tuán)隊(duì)于2019年6月率先開(kāi)發(fā)了數(shù)據(jù)可視化設(shè)計(jì)指南。

數(shù)據(jù)可視化：主要是借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。

在行業(yè)內(nèi)還沒(méi)有一個(gè)標(biāo)準(zhǔn)的規(guī)范可參考之前，谷歌的可視化團(tuán)隊(duì)于2019年6月率先開(kāi)發(fā)了數(shù)據(jù)可視化設(shè)計(jì)指南。

數(shù)據(jù)可視化：主要是借助于圖形化手段，清晰有效地傳達(dá)與溝通信息。

一、原則

數(shù)據(jù)可視化，是將數(shù)據(jù)信息以直觀的圖標(biāo)、圖形展示出來(lái)的一種表現(xiàn)形式。旨在讓用戶更容易看懂和理解數(shù)據(jù)，以及傳達(dá)的信息更明確。因?yàn)檫@能夠讓用戶快速分析，并迅速做出判斷和決策。

數(shù)據(jù)可視化可以表達(dá)不同類型和大小的數(shù)據(jù)：從幾個(gè)數(shù)據(jù)點(diǎn)到大型多變量數(shù)據(jù)集。

1. 準(zhǔn)確

優(yōu)先考慮數(shù)據(jù)的準(zhǔn)確性、清晰度和完整性，以不會(huì)扭曲信息的方式呈現(xiàn)信息

2. 有用

幫助用戶通過(guò)上下文理解數(shù)據(jù)，并且讓用戶更有興趣探索其它內(nèi)容。

3. 擴(kuò)展

適應(yīng)不同設(shè)備大小的可視化，同時(shí)預(yù)測(cè)用戶對(duì)數(shù)據(jù)深度、復(fù)雜性和形式的需求。

二、類型

數(shù)據(jù)可視化能以不同的形式表達(dá)。圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)閳D表可以描述了不同的數(shù)據(jù)種類，同時(shí)讓數(shù)據(jù)之間可以比較。

使用的圖表類型主要取決于這兩點(diǎn)：你要傳達(dá)的數(shù)據(jù)和傳達(dá)有關(guān)該數(shù)據(jù)的內(nèi)容。

1. 時(shí)間變化

隨時(shí)間變化圖表顯示一段時(shí)間內(nèi)的數(shù)據(jù)，例如多個(gè)類別的趨勢(shì)或比較。

例如：

• 股價(jià)表
• 衛(wèi)生統(tǒng)計(jì)
• 年表

2. 類別比較

類別比較圖表比較多個(gè)不同類別之間的數(shù)據(jù)。

例如：

• 不同國(guó)家的收入
• 熱門場(chǎng)地時(shí)間
• 團(tuán)隊(duì)分配

3. 排行

排行圖表主要用于展示項(xiàng)目在有序列表中的位置。

例如：

• 產(chǎn)品類別的綜合收入
• 預(yù)算

4. 相關(guān)性

相關(guān)圖顯示兩個(gè)或多個(gè)變量之間的相關(guān)性。

例如：

收入與壽命的關(guān)聯(lián)性

5. 分布

分布圖表顯示每個(gè)值在數(shù)據(jù)集中出現(xiàn)的頻率。

例如：

• 人口分布
• 收入分布

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

補(bǔ)充：條形圖可以叫柱狀圖，但直方圖與條形圖有很大不同，條形圖通常關(guān)聯(lián)兩個(gè)變量，但直方圖只涉及一個(gè)。直方圖用于連續(xù)數(shù)據(jù)，其中區(qū)間表示數(shù)據(jù)范圍，而條形圖是分類變量圖。

6. 流程

流程圖表示多個(gè)狀態(tài)之間的數(shù)據(jù)的轉(zhuǎn)移和變化。

例如：

• 資金轉(zhuǎn)移
• 投票計(jì)數(shù)和選舉結(jié)果

7. 關(guān)系

關(guān)系圖用于表示多個(gè)項(xiàng)目是如何相互關(guān)聯(lián)的。

例如：

• 社交網(wǎng)絡(luò)
• 單詞圖表

三、樣式

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

不同的視覺(jué)處理可以分別代表不同的數(shù)據(jù)。

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

形狀可用于表示定性的數(shù)據(jù)。在上圖中，每個(gè)類別由特定的形狀（圓形、正方形和三角形）表示，這樣可以輕松比較特定范圍內(nèi)的數(shù)據(jù)或其他類別的數(shù)據(jù)。

1. 形狀

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

形狀細(xì)節(jié)水平

圖表可以以不同的精度表示數(shù)據(jù)。用于近距離觀看的數(shù)據(jù)應(yīng)該以適合交互的形狀表示（根據(jù)觸摸目標(biāo)大小和可用性方面）。而用來(lái)表達(dá)一般想法或趨勢(shì)的數(shù)據(jù)可以使用細(xì)節(jié)較少的簡(jiǎn)單形狀。

2. 顏色

顏色可用于區(qū)分以下四種形式的圖表數(shù)據(jù)：

• 區(qū)分彼此的類別
• 代表數(shù)量
• 突出顯示特定數(shù)據(jù)
• 表達(dá)意義

顏色區(qū)分類別

顏色區(qū)分?jǐn)?shù)量

顏色突出顯示數(shù)據(jù)

顏色還可以突出顯示焦點(diǎn)區(qū)域。不建議使用大量的高亮色，因?yàn)樗鼈儠?huì)分散注意力并妨礙用戶聚焦。

顏色表示含義

特別注意

無(wú)障礙設(shè)計(jì)– 考慮紅綠色盲等存在視覺(jué)障礙的用戶，用適合的方式來(lái)強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)比度著色、形狀或紋理。還可將文本標(biāo)簽注釋數(shù)據(jù)以闡明其含義，從而不用完全依賴于圖形。

3. 線

圖表線可以表示有關(guān)數(shù)據(jù)的質(zhì)量，例如層次結(jié)構(gòu)、突出顯示和比較。線條樣式可以采用不同的方式，例如使用破折號(hào)或各種不透明度。

線可以應(yīng)用于特定場(chǎng)景，包括：

• 注釋
• 預(yù)測(cè)要素
• 比較工具
• 置信區(qū)間
• 異常

4. 文本

文本可用于標(biāo)記不同的圖表元素，包括：

• 圖表標(biāo)題
• 數(shù)據(jù)標(biāo)簽
• 坐標(biāo)軸標(biāo)簽
• 圖例標(biāo)簽

具有最高優(yōu)先級(jí)的文本通常是圖表標(biāo)題，其中坐標(biāo)軸標(biāo)簽和圖例屬于最低級(jí)別的層次結(jié)構(gòu)。

標(biāo)題和不同的字體權(quán)重可以傳達(dá)哪些內(nèi)容的層級(jí)比其他內(nèi)容更重要（或更不重要）。然而，這種樣式處理方法應(yīng)謹(jǐn)慎使用，因?yàn)樽煮w樣式的數(shù)量是有限的。

5. 圖標(biāo)

圖標(biāo)可以表示圖表中不同類型的數(shù)據(jù)，并提高圖表的整體可用性。

圖標(biāo)可用于：

• 區(qū)分組或類別的分類數(shù)據(jù)
• UI控件和操作，例如篩選、縮放、保存和下載
• 區(qū)分狀態(tài)，例如錯(cuò)誤、沒(méi)有數(shù)據(jù)、完成狀態(tài)和危險(xiǎn)

在圖表中放置圖標(biāo)時(shí)，建議使用通用且可識(shí)別符號(hào)，尤其是在表示操作或狀態(tài)時(shí)，例如：保存、下載、完成、錯(cuò)誤和危險(xiǎn)。

6. 坐標(biāo)軸

坐標(biāo)軸標(biāo)簽或多個(gè)軸表示所顯示數(shù)據(jù)的比例和范圍。例如，折線圖X軸和Y軸的文本標(biāo)簽顯示一系列值。

條形圖基線

條形圖應(yīng)從基線（y軸上的起始值）的零開(kāi)始。從非零的基線開(kāi)始可能會(huì)給用戶對(duì)數(shù)據(jù)的理解造成混淆。

坐標(biāo)軸標(biāo)簽

坐標(biāo)軸標(biāo)簽的使用是反映圖表中重要的數(shù)據(jù)最直接的。應(yīng)根據(jù)實(shí)際需要使用坐標(biāo)軸標(biāo)簽，并在UI中以一致的方式使用。

文字方向

文本標(biāo)簽應(yīng)水平放置在圖表上，以便于閱讀。

文字標(biāo)簽不應(yīng)該：

• 旋轉(zhuǎn)
• 垂直堆疊

7. 圖例和注釋

圖例和注釋描述了圖表的信息。注釋?xiě)?yīng)突出顯示數(shù)據(jù)點(diǎn)、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。

在桌面端，建議把圖例放置在圖表下方。在移動(dòng)設(shè)備上，則將圖例放在圖表上方，以便于在交互期間保持可見(jiàn)狀態(tài)。

在簡(jiǎn)單圖表中圖表元素可以直接用文本進(jìn)行標(biāo)記。但是，在密集的圖表則需要使用圖例說(shuō)明會(huì)更清晰。

8. 迷你屏幕

可穿戴設(shè)備（或其他小屏幕）上顯示的圖表應(yīng)該是手機(jī)端或桌面端圖表的簡(jiǎn)化版本。

四、行為

圖表提供交互模式，使用戶可以控制顯示的數(shù)據(jù)。這些交互模式使用戶可以專注于圖表的特定值或范圍。

以下推薦的交互模式、樣式和效果（如觸覺(jué)反饋）可以提高用戶對(duì)圖表數(shù)據(jù)的理解：

• 逐漸展開(kāi) 提供了一條明確的途徑，可以按需提供詳細(xì)信息。
• 直接操作 允許用戶直接對(duì)UI元素進(jìn)行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括：縮放、平移、分頁(yè)和數(shù)據(jù)控件。
• 更改透視圖 可以使一種設(shè)計(jì)可以適用于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和動(dòng)畫(huà)。

1. 漸進(jìn)式展示

使用漸進(jìn)式展示顯示圖表詳細(xì)信息，允許用戶根據(jù)實(shí)際需要查看特定的數(shù)據(jù)點(diǎn)。

2. 縮放和平移

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

縮放

縮放會(huì)更改用戶界面是從近還是遠(yuǎn)顯示。設(shè)備類型決定如何執(zhí)行縮放。

• 在桌面端，通過(guò)單擊和拖動(dòng)或滾動(dòng)進(jìn)行縮放
• 在移動(dòng)端，使用手指捏合進(jìn)行縮放

如果縮放不是主要操作時(shí)，則可以通過(guò)單擊和拖動(dòng)（在桌面端）或雙擊（在移動(dòng)端）來(lái)實(shí)現(xiàn)。

平移

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

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

在移動(dòng)設(shè)備上，平移通常是通過(guò)手勢(shì)來(lái)實(shí)現(xiàn)的，比如單手指滑動(dòng)平移。

4. 數(shù)據(jù)控件

可以使用切換控件、選項(xiàng)卡和下拉菜單過(guò)濾/更改數(shù)據(jù)。

當(dāng)用戶也可以調(diào)整控件時(shí)，這些控件還可以衡量指標(biāo)。

5. 動(dòng)畫(huà)

動(dòng)畫(huà)可以增強(qiáng)數(shù)據(jù)與用戶交互方式之間的關(guān)系。應(yīng)該有目的地使用動(dòng)畫(huà)（不是裝飾性地），來(lái)表達(dá)不同狀態(tài)和空間之間的聯(lián)系。

動(dòng)畫(huà)應(yīng)該感覺(jué)合理、平穩(wěn)、反應(yīng)靈敏，不會(huì)妨礙用戶的體驗(yàn)和進(jìn)程。

6. 空狀態(tài)

空?qǐng)D形和圖表可以顯示在數(shù)據(jù)可用時(shí)用戶期望的內(nèi)容。

在適用的情況下，可以顯示角色動(dòng)畫(huà)以提供樂(lè)趣和鼓勵(lì)。

五、儀表板

數(shù)據(jù)可視化可以在一系列多個(gè)圖表中顯示，在稱為儀表板的 UI中。多個(gè)單獨(dú)的圖表有時(shí)可以更好地傳達(dá)故事，而不是把一個(gè)圖表做得很復(fù)雜。

儀表板的用途應(yīng)反映在其布局、樣式和交互模式中。它的設(shè)計(jì)應(yīng)該適合它的使用方式，無(wú)論是制作演示文稿還是深入探索數(shù)據(jù)的工具。

儀表板的用途應(yīng)該反映在其布局、樣式和交互模式中。不管它是一個(gè)進(jìn)行演示的工具還是深入研究數(shù)據(jù)的工具，其設(shè)計(jì)都應(yīng)該服務(wù)于它的使用方式。

儀表板應(yīng)該：

• 確定最重要信息的優(yōu)先級(jí)（通過(guò)布局）
• 顯示根據(jù)層次結(jié)構(gòu)（通過(guò)顏色、位置、大小和視覺(jué)權(quán)重）確定信息優(yōu)先級(jí)的焦點(diǎn)

根據(jù)對(duì)數(shù)據(jù)的具體需求進(jìn)行信息的優(yōu)先級(jí)規(guī)劃。在以下示例儀表板中，考慮的用戶問(wèn)題有：

1. 分析儀表板

分析儀表板使用戶能夠探索多組數(shù)據(jù)并發(fā)現(xiàn)其中趨勢(shì)。通常，這些儀表板包含能夠通過(guò)數(shù)據(jù)洞察事物的復(fù)雜圖表。

例如：

• 隨著時(shí)間的推移突出趨勢(shì)
• 回答“為什么”和“假設(shè)”問(wèn)題
• 預(yù)測(cè)
• 創(chuàng)建深入的報(bào)告

分析儀表板示例：

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

2. 操作儀表板

操作儀表板旨在回答一組預(yù)定義的問(wèn)題。它們通常被用于與監(jiān)控相關(guān)的任務(wù)。

在大多數(shù)情況下，這些類型的儀表板具有排列一組簡(jiǎn)單圖表的當(dāng)前信息。

例如：

• 跟蹤目標(biāo)的當(dāng)前進(jìn)度
• 實(shí)時(shí)跟蹤系統(tǒng)性能
• 操作儀表板示例：
• 跟蹤呼叫中心活動(dòng)，例如呼叫量、等待時(shí)間、呼叫長(zhǎng)度或呼叫類型
• 監(jiān)控云上運(yùn)行的應(yīng)用程序的運(yùn)行狀況
• 顯示股市表現(xiàn)
• 監(jiān)控賽車上的遙測(cè)數(shù)據(jù)

3. 演示儀表板

演示儀表板為感興趣的主題提供展示和說(shuō)明。

這些儀表盤通常包括幾個(gè)小圖表或記分卡，其中動(dòng)態(tài)標(biāo)題解釋了每個(gè)圖表中提供的趨勢(shì)和見(jiàn)解。

例如：

• 提供關(guān)鍵績(jī)效指標(biāo)的概述
• 創(chuàng)建高級(jí)執(zhí)行摘要

演示儀表板示例：

• 提供投資賬戶績(jī)效的概述
• 提供產(chǎn)品銷售和市場(chǎng)份額數(shù)據(jù)的摘要

作者：宛蘇，微信：wansuer，公眾號(hào)：宛蘇

本文由 @宛蘇 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議