數(shù)據(jù)可視化主要就是把數(shù)據(jù)用圖形的方式表現(xiàn)出來，讓人們看著更舒服，更快，更便捷，不再需要花費(fèi)大量的時(shí)間去慢慢的琢磨數(shù)據(jù)之間的關(guān)系和起伏，這些東西我們?nèi)慷加脠D形來表現(xiàn)出來，讓人一目了然。

今天文章當(dāng)中主要內(nèi)容就是數(shù)據(jù)可視化的表現(xiàn)，告訴你如何正確的表現(xiàn)，什么情況下用那種表現(xiàn)方式，哪一種表現(xiàn)方式是最好的，等等。里面也穿插了一些數(shù)據(jù)可視化設(shè)計(jì)的呈現(xiàn)效果。

好了，抓緊時(shí)間看一看吧。

原則

數(shù)據(jù)可視化是一種以圖形形式描繪密集和復(fù)雜信息的通信形式。由此產(chǎn)生的視覺效果旨在使比較數(shù)據(jù)并使用它來講述故事變得容易——這兩者都可以幫助用戶做出決策。

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

準(zhǔn)確的

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

有幫助

幫助用戶通過強(qiáng)調(diào)探索和比較的上下文和可供性來導(dǎo)航數(shù)據(jù)。

可擴(kuò)展

針對(duì)不同的設(shè)備尺寸調(diào)整可視化，同時(shí)預(yù)測(cè)用戶對(duì)數(shù)據(jù)深度、復(fù)雜性和模態(tài)的需求。

類型

數(shù)據(jù)可視化可以用不同的形式表達(dá)。圖表是表達(dá)數(shù)據(jù)的常用方式，因?yàn)樗鼈兠枥L了不同的數(shù)據(jù)種類并允許進(jìn)行數(shù)據(jù)比較。

你使用的圖表類型主要取決于兩件事：你想要傳達(dá)的數(shù)據(jù)，以及你想要傳達(dá)的關(guān)于該數(shù)據(jù)的內(nèi)容。這些指南提供了對(duì)各種不同類型的圖表及其用例的描述。

圖表類型

隨著時(shí)間的推移而變化

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

常見用例包括：

• 股價(jià)表現(xiàn)

• 健康統(tǒng)計(jì)

• 年表

隨時(shí)間變化的圖表包括：

品類比較

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

用例包括：

• 不同國家的收入

• 熱門場(chǎng)地時(shí)間

• 團(tuán)隊(duì)分配

類別比較圖包括：

排行

排名圖表顯示項(xiàng)目在有序列表中的位置。

用例包括：

• 選舉結(jié)果

• 性能統(tǒng)計(jì)

部分到整體

部分到整體圖表顯示部分元素如何加總。

用例包括：

• 產(chǎn)品類別的合并收入

• 預(yù)算

部分到整體圖表包括：

相關(guān)性

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

用例包括：

• 收入和預(yù)期壽命

相關(guān)圖包括：

分配

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

用例包括：

• 人口分布

• 收入分配

流動(dòng)

流程圖顯示數(shù)據(jù)在多個(gè)狀態(tài)之間的移動(dòng)。

用例包括：

• 資金轉(zhuǎn)賬

• 票數(shù)和選舉結(jié)果

流程圖包括：

關(guān)系

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

用例包括

• 社交網(wǎng)絡(luò)

• 詞表

關(guān)系圖包括：

1. 網(wǎng)絡(luò)圖
2. 維恩圖
3. 弦圖
4. 旭日?qǐng)D

選擇圖表

顯示隨時(shí)間的變化

可以使用時(shí)間序列圖表來表示隨時(shí)間的變化，該圖表是按時(shí)間順序表示數(shù)據(jù)點(diǎn)的圖表。表達(dá)時(shí)間變化的圖標(biāo)包括：折線圖、條形圖和面積圖。

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

條形圖和餅圖

條形圖和餅圖均可用于顯示比例，它表示與總值相比的部分值。

• 條形圖使用公共基線通過條的長度表示數(shù)量

• 餅圖使用圓內(nèi)的弧線或角度表示整體的一部分

條形圖、折線圖和堆積面積圖比餅圖更能有效地顯示隨時(shí)間的變化。由于所有這三個(gè)圖表共享可能值的相同基線，因此更容易根據(jù)條形長度比較值差異。

按照下面的方式去做

使用條形圖顯示隨時(shí)間的變化或類別之間的差異。

這個(gè)時(shí)候下面的方式就不可取了

不要使用多個(gè)餅圖來顯示隨時(shí)間的變化。很難比較每塊餡餅的大小差異。

面積圖

面積圖有多種類型，包括堆積面積圖和重疊面積圖：

• 堆疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）堆疊在一起

• 重疊面積圖顯示多個(gè)時(shí)間序列（在同一時(shí)間段內(nèi)）相互重疊

不建議使用超過兩個(gè)時(shí)間序列的重疊面積圖，因?yàn)檫@樣做會(huì)掩蓋數(shù)據(jù)。相反，使用堆積面積圖來比較一個(gè)時(shí)間間隔內(nèi)的多個(gè)值（時(shí)間在水平軸上表示）。

重疊堆積一定要按照下圖的方式去做

使用堆積面積圖來表示多個(gè)時(shí)間序列并保持良好的易讀性。

下面的方式不可用

不要使用重疊面積圖，因?yàn)樗鼤?huì)掩蓋數(shù)據(jù)值并降低可讀性。

風(fēng)格

數(shù)據(jù)可視化使用自定義樣式和形狀，以適合用戶需求和上下文的方式使數(shù)據(jù)更易于一目了然地理解。

圖表可以從自定義以下內(nèi)容中受益：

• 圖形元素

• 排版

• 圖像學(xué)

• 軸和標(biāo)簽

• 圖例和注釋

設(shè)計(jì)不同類型的數(shù)據(jù)

視覺編碼是將數(shù)據(jù)轉(zhuǎn)換為視覺形式的過程。獨(dú)特的圖形屬性可以應(yīng)用于定量數(shù)據(jù)（例如溫度、價(jià)格或速度）和定性數(shù)據(jù)（例如類別、風(fēng)味或表達(dá)式）。

這些屬性包括：

• 形狀

• 顏色

• 尺寸

• 區(qū)域

• 體積

• 長度

• 角度

• 位置

• 方向

• 密度

表達(dá)多個(gè)屬性

多個(gè)視覺處理可以應(yīng)用于數(shù)據(jù)點(diǎn)的多個(gè)方面。例如，條形顏色可以表示一個(gè)類別，而條形的長度可以表示一個(gè)值（如人口規(guī)模）。

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

形狀

圖表可以使用形狀以多種方式顯示數(shù)據(jù)。形狀可以設(shè)計(jì)為俏皮和曲線，或精確和高保真，以及介于兩者之間的其他方式。

形狀細(xì)節(jié)級(jí)別

圖表可以表示不同精度級(jí)別的數(shù)據(jù)。用于近距離探索的數(shù)據(jù)應(yīng)由適合交互的形狀表示（在觸摸目標(biāo)大小和相關(guān)可供性方面）。而旨在表達(dá)總體想法或趨勢(shì)的數(shù)據(jù)可以使用細(xì)節(jié)較少的形狀。

柱狀圖按照下面的方式去做

此圖表中的條形具有微妙的圓角，確保條形頂部精確測(cè)量條形的長度。

不要把定不做成圓角，如下圖

不要使用難以閱讀圖表的形狀，例如頂部邊緣不精確的條形。

顏色

顏色可用于通過四種主要方式區(qū)分圖表數(shù)據(jù)：

• 區(qū)分類別

• 代表數(shù)量

• 突出顯示特定數(shù)據(jù)

• 表達(dá)意義

顏色區(qū)分類別

顏色代表數(shù)量

顏色高亮數(shù)據(jù)

重點(diǎn)領(lǐng)域

顏色可以突出一個(gè)焦點(diǎn)區(qū)域，當(dāng)它被謹(jǐn)慎使用時(shí)。不建議使用大量的顏色高光，因?yàn)樗鼈儠?huì)分散和阻礙用戶的注意力。

按照下圖的方式去做

使用高光和中性色的組合來提供對(duì)比和強(qiáng)調(diào)。

不要做成下圖這樣

單個(gè)圖表中的許多顏色可能會(huì)阻礙焦點(diǎn)。

顏色表示含義

提示是用符號(hào)強(qiáng)化

使用其他視覺提示（如圖標(biāo)）強(qiáng)化圖表顏色的含義。

如果只用數(shù)字不是很明顯

不要單獨(dú)使用顏色來表示含義。

無障礙

為了適應(yīng)看不到顏色差異的用戶，你可以使用其他方法來強(qiáng)調(diào)數(shù)據(jù)，例如高對(duì)比度陰影、形狀或紋理。

將文本標(biāo)簽應(yīng)用于數(shù)據(jù)還有助于闡明其含義，同時(shí)消除對(duì)圖例的需求。關(guān)于配色的文章全部都在下面已經(jīng)給你準(zhǔn)備好了

線

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

線條可以應(yīng)用于特定元素，包括：

• 注釋

• 預(yù)測(cè)要素

• 比較工具

• 置信區(qū)間

• 異常

按照下圖方式去做

改變線條的紋理以表示不同的數(shù)據(jù)類型。

不要這樣做，如下圖

不要使用不同的顏色來顯示同一數(shù)據(jù)類別的周期性變化。

排版

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

• 圖表標(biāo)題

• 數(shù)據(jù)標(biāo)簽

• 軸標(biāo)簽

• 傳奇

具有最高層次結(jié)構(gòu)的文本通常是圖表標(biāo)題，軸標(biāo)簽和圖例具有最低層次結(jié)構(gòu)。

文字粗細(xì)

標(biāo)題和不同的字體粗細(xì)可以傳達(dá)哪些內(nèi)容比層次結(jié)構(gòu)中的其他內(nèi)容更重要（或更不重要）。但是，應(yīng)謹(jǐn)慎使用這些處理方法，并使用數(shù)量有限的排版樣式。

按照下圖方式做

僅用于一兩個(gè)關(guān)鍵元素的粗體營造出平衡的設(shè)計(jì)。

不要做成這樣如下圖

在太多元素上使用粗體會(huì)使識(shí)別重要元素變得更加困難。

圖像學(xué)

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

圖像學(xué)可用于：

• 用于區(qū)分組或類別的分類數(shù)據(jù)

• UI 控件和操作，例如過濾、縮放、保存和下載

• 狀態(tài)，例如錯(cuò)誤、無數(shù)據(jù)、已完成狀態(tài)和危險(xiǎn)

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

按照下圖方式去做

使用標(biāo)簽和圖標(biāo)來清楚地表示關(guān)鍵信息。

不要這樣做如下圖

避免僅使用圖標(biāo)和符號(hào)來表示重要信息。

圖標(biāo)在傳達(dá)意義時(shí)補(bǔ)充顏色。

標(biāo)記軸

帶標(biāo)簽的軸或多個(gè)軸表示所顯示數(shù)據(jù)的比例和范圍。例如，折線圖顯示沿水平和垂直標(biāo)記軸的一系列值。

條形圖應(yīng)始終從 x 軸基線值為零開始。

考慮完全刪除軸以將數(shù)據(jù)作為焦點(diǎn)。你可以將值直接放置在其相應(yīng)的圖表元素上。

條形圖基線

條形圖應(yīng)從零基線（y 軸上的起始值）開始。從不為零的基線開始可能會(huì)導(dǎo)致數(shù)據(jù)被錯(cuò)誤地感知。

按照下圖方式去做

從零基線開始的條形圖

不要做成這樣，如下圖

不要從零以外的值開始基線。此基線從 20% 開始，使條形差異看起來更加引人注目。

軸標(biāo)簽

標(biāo)簽使用應(yīng)反映圖表中最重要的數(shù)據(jù)洞察。應(yīng)根據(jù)需要使用軸標(biāo)簽，并在整個(gè) UI 中以一致的方式使用。他們的存在不應(yīng)妨礙閱讀圖表。

按照下圖方式去做

通過使用平衡數(shù)量的軸標(biāo)簽來支持易讀性。

不要這樣做，如下圖

不要用大量軸標(biāo)簽使圖表過載。

文字方向

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

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

• 被輪換

• 垂直堆疊

按照下圖方式去做

在條形圖上水平定位文本，如果需要，旋轉(zhuǎn)條形以騰出空間。

盡量不要做成這樣，如下圖

不要旋轉(zhuǎn)條形標(biāo)簽，因?yàn)檫@會(huì)使它們難以閱讀。

圖例和注釋

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

在桌面上，建議在圖表下方放置圖例。在移動(dòng)設(shè)備上，將圖例放置在圖表上方以使其在交互過程中可見。

標(biāo)簽和圖例

圖表元素可以在簡單的圖表中直接標(biāo)注。但是，密集的圖表（或較大圖表組的一部分）可以在圖例中顯示標(biāo)簽。

使用直接標(biāo)記的折線圖

使用圖例的折線圖

小顯示器

可穿戴設(shè)備（或其他小屏幕）上顯示的圖表應(yīng)該是移動(dòng)或桌面圖表的簡化版本。

按照下圖方式去做

在圖表上標(biāo)注關(guān)鍵點(diǎn)以描述數(shù)據(jù)。在此示例中，顯示了最高和最低數(shù)據(jù)值。

盡量不要做成這樣，如下圖

不要將關(guān)鍵數(shù)據(jù)點(diǎn)放在屏幕外，因?yàn)樗枰脩魸L動(dòng)才能看到它們。

閾值線為用戶提供有關(guān)所顯示數(shù)據(jù)的上下文。

行為

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

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

• 漸進(jìn)式披露為揭示細(xì)節(jié)提供了一條清晰的途徑，可按需訪問。

• 直接操作允許用戶直接對(duì) UI 元素進(jìn)行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括：縮放和平移、分頁和數(shù)據(jù)控件。

• 改變視角使一種設(shè)計(jì)能夠適用于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和運(yùn)動(dòng)。

漸進(jìn)式披露

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

顯示詳細(xì)信息（桌面）

在桌面上，懸停狀態(tài)可以顯示更詳細(xì)的數(shù)據(jù)。

顯示詳細(xì)信息（移動(dòng)設(shè)備）

在移動(dòng)設(shè)備上，觸摸并按住手勢(shì)會(huì)顯示位于圖表上方的工具提示。

縮放和平移

縮放和平移是流行的圖表交互，會(huì)影響用戶研究數(shù)據(jù)和探索圖表 UI 的密切程度。

縮放

縮放會(huì)改變 UI 是從近處還是從遠(yuǎn)處顯示。設(shè)備類型決定了縮放的執(zhí)行方式。

• 在桌面上，通過單擊和拖動(dòng)或滾動(dòng)進(jìn)行縮放

• 在移動(dòng)設(shè)備上，使用捏合進(jìn)行縮放

當(dāng)縮放不是主要操作時(shí)，可以通過單擊和拖動(dòng)（在桌面上）或雙擊（在移動(dòng)設(shè)備上）來實(shí)現(xiàn)。

平移

平移允許用戶探索擴(kuò)展到屏幕之外的 UI。它應(yīng)該以對(duì)顯示的數(shù)據(jù)有意義的方式進(jìn)行約束。例如，如果圖表的一個(gè)維度比另一個(gè)維度更重要，則平移方向可以僅限于該方向。

平移的行為通常與縮放配對(duì)。

在移動(dòng)設(shè)備上，平移通常通過手勢(shì)實(shí)現(xiàn)，例如單指滑動(dòng)。

在桌面上縮放

在桌面上平移

分頁

在移動(dòng)設(shè)備上，分頁是一種常見模式，允許用戶通過向右或向左滑動(dòng)來查看上一個(gè)或下一個(gè)圖表。

在移動(dòng)設(shè)備上，用戶可以向右滑動(dòng)查看前一天。

數(shù)據(jù)控制

可以使用切換控件、選項(xiàng)卡和下拉菜單過濾或更改數(shù)據(jù)。這些控件還可以顯示指標(biāo)，而用戶可以調(diào)整控件。

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

運(yùn)動(dòng)

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

動(dòng)作應(yīng)該感覺合乎邏輯、流暢且反應(yīng)靈敏，不會(huì)妨礙用戶的旅程。

在此示例中，數(shù)據(jù)在按天顯示和按周顯示之間進(jìn)行動(dòng)畫處理。轉(zhuǎn)換期間不會(huì)顯示所選日期范圍之外的數(shù)據(jù)，從而降低了復(fù)雜性。

動(dòng)畫顯示了兩個(gè)不同的圖表是如何相關(guān)的。

空狀態(tài)

空的圖形和圖表可以顯示建議數(shù)據(jù)可用時(shí)的預(yù)期內(nèi)容的內(nèi)容。

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

特色動(dòng)畫增強(qiáng)了原本空白的圖形。

儀表盤

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

儀表盤設(shè)計(jì)

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

儀表板應(yīng)該：

• 優(yōu)先處理最重要的信息（使用布局）

• 顯示根據(jù)層級(jí)排列信息優(yōu)先級(jí)的焦點(diǎn)（使用顏色、位置、大小和視覺權(quán)重）

應(yīng)根據(jù)數(shù)據(jù)提出的問題對(duì)信息進(jìn)行優(yōu)先排序和安排。在此示例操作儀表板中，考慮了以下用戶問題：

1. 需要注意的問題
2. 問題發(fā)生的時(shí)間
3.問題發(fā)生的位置
4. 受問題影響的其他變量

分析儀表板

分析儀表板使用戶能夠探索多組數(shù)據(jù)并發(fā)現(xiàn)趨勢(shì)。通常這些儀表板包括復(fù)雜的圖表，可以發(fā)現(xiàn)數(shù)據(jù)洞察力。

用例包括：

• 隨著時(shí)間的推移突出趨勢(shì)

• 回答“為什么”和“假設(shè)”的問題

• 預(yù)測(cè)

• 創(chuàng)建深度報(bào)告

分析儀表板示例：

• 隨著時(shí)間的推移跟蹤廣告活動(dòng)的表現(xiàn)

• 跟蹤產(chǎn)品在整個(gè)生命周期中產(chǎn)生的銷售額和收入

• 顯示城市人口隨時(shí)間變化的趨勢(shì)

• 隨著時(shí)間的推移跟蹤氣候數(shù)據(jù)

顯示氣候數(shù)據(jù)的分析儀表板

操作儀表板

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

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

用例包括：

• 根據(jù)目標(biāo)跟蹤當(dāng)前進(jìn)度

• 實(shí)時(shí)跟蹤系統(tǒng)性能

操作儀表板示例：

• 跟蹤呼叫中心活動(dòng)，例如呼叫量、等待時(shí)間、呼叫時(shí)長或呼叫類型

• 監(jiān)控在云上運(yùn)行的應(yīng)用程序的運(yùn)行狀況。

• 顯示股市表現(xiàn)

• 監(jiān)控賽車的遙測(cè)數(shù)據(jù)

操作儀表板顯示設(shè)備存儲(chǔ)指標(biāo)

演示儀表板

演示儀表板提供有關(guān)感興趣主題的精選快照。

這些儀表板通常包括一些小圖表或記分卡，帶有動(dòng)態(tài)標(biāo)題，解釋每個(gè)支持圖表中提供的趨勢(shì)和見解。

用例包括：

• 提供關(guān)鍵績效指標(biāo)的概述

• 創(chuàng)建高級(jí)別的執(zhí)行摘要

演示儀表板示例：

• 提供投資賬戶表現(xiàn)概覽

• 提供產(chǎn)品銷售和市場(chǎng)份額數(shù)據(jù)的摘要

顯示網(wǎng)站使用數(shù)據(jù)的分析儀表板

下面還有一些表現(xiàn)得形式

今天就分享到這里了。

各位，加油哦！

—————————————————————

  設(shè)計(jì)師的群  

△

術(shù)心 | 歡迎小伙伴們進(jìn)設(shè)計(jì)師的群，如果喜歡術(shù)心的文章就「把我設(shè)置為星標(biāo)」吧；我們一同前行；各位，明天見?。?！