作者 | Destiny

來源 | 木東居士

0x00 前言

在之前的文章中，已經(jīng)分享過如何根據(jù)數(shù)據(jù)可視化的目的、數(shù)據(jù)關(guān)系和特征，去選擇合適的圖表類型。當(dāng)確定了要使用哪些圖表進(jìn)行數(shù)據(jù)可視化后，就開始進(jìn)入可視化作品的設(shè)計(jì)階段。從大的方向上來說，影響數(shù)據(jù)可視化最終效果的因素，分為兩個(gè)層面：

• 一是非數(shù)據(jù)層面。
• 不受數(shù)據(jù)影響可視化效果的情況包括：
• 比如說整個(gè)頁面的布局；
• 圖表的輔助元素，如圖表背景、網(wǎng)格線、外邊框；
• 交互方式的設(shè)計(jì)等。
• →不受數(shù)據(jù)影響的情況，是我們在可視化設(shè)計(jì)階段就可以把控的，比如說頁面的整體布局、圖表的設(shè)計(jì)（包含網(wǎng)格線、背景、顏色的選取等）、交互的設(shè)計(jì)等。
• 二是數(shù)據(jù)層面。
• 受數(shù)據(jù)影響可視化效果的情況一般包括：
• 數(shù)據(jù)分布不均勻，存在極端值；
• 某一維度下的屬性值過多，信息繁雜不夠聚焦；
• 不同層級的，數(shù)據(jù)量級差異較大；
• 數(shù)據(jù)條目較多等。
• →以上這些情況的存在，通過可視化映射之后，反映到圖表上就體現(xiàn)為，比如說某個(gè)柱形條的長度過長，餅圖扇區(qū)的個(gè)數(shù)過多等，從而使可視化的最終效果不如人意。

因此，今天這篇文章，主要從以上兩個(gè)層面，來總結(jié)提升可視化效果的一些經(jīng)驗(yàn)，從而使數(shù)據(jù)信息的傳達(dá)更聚焦、有效，可視化作品的視覺呈現(xiàn)更加美觀。

0x01 非數(shù)據(jù)層面

1.布局要強(qiáng)調(diào)最重要的數(shù)據(jù)信息，將用戶注意力集中在可視化結(jié)果的最重要區(qū)域

在進(jìn)行某一主題的可視化作品設(shè)計(jì)時(shí)，我們需要根據(jù)用戶關(guān)注的重點(diǎn)數(shù)據(jù)，對可視化結(jié)果的重要性和優(yōu)先級進(jìn)行排序。通過對可視化空間的合理布局設(shè)計(jì)，將用戶的注意力集中到可視化結(jié)果中最重要的一個(gè)或幾個(gè)區(qū)域上。

通常情況下，用戶的視覺中心，是位于整個(gè)頁面的上方和中心區(qū)域。如果只有一個(gè)重點(diǎn)，放在最顯眼的位置，如果有幾個(gè)重點(diǎn)，盡量集中放置，吸引視覺焦點(diǎn)。除了通過重要信息的位置擺放來吸引用戶視覺焦點(diǎn)，還可以通過突出的顏色編碼來抓住用戶的注意力。

下圖為一個(gè)汽車經(jīng)銷商的客服監(jiān)控大屏，對于他們而言，黃色框選的區(qū)域是他們關(guān)注的重點(diǎn)（1）呼叫量（含在線咨詢和呼入咨詢）。（2）不同客服溝通方式的滿意率。（3）在線咨詢和呼入咨詢?nèi)巳焊髯缘牡赜蚍植肌Ｒ虼?，把這三部分集中放在可視化空間的中心區(qū)域，可以讓客服人員一眼就關(guān)注到重要的信息。

2.圖表設(shè)計(jì)要隱藏不必要元素，弱化輔助元素

在我們進(jìn)行圖表繪制時(shí)，需要去掉無意義的背景色填充和顏色區(qū)分，弱化網(wǎng)格線，突出真正重要的數(shù)據(jù)信息。雖然，網(wǎng)格線或者顏色映射可以輔助我們理解可視化圖表中的信息，但是如果過于凸顯，視覺上會(huì)顯得雜亂、沒有主次，干擾到你真正想展示的信息。對于這類元素，應(yīng)該盡量隱藏和弱化。

3.交互操作要具有直觀性、易理解性

一方面，圖表中柱形條或趨勢點(diǎn)等都代表實(shí)際的數(shù)據(jù)，但是為了可視化作品的簡潔和美觀，通常情況下，這些數(shù)據(jù)標(biāo)簽都會(huì)被隱藏；另一方面，由于人們查看數(shù)據(jù)的習(xí)慣是，先看總體和趨勢，再看局部和細(xì)節(jié)。這兩個(gè)方面的原因，要求可視化產(chǎn)品，需要提供給用戶一系列的交互手段，來讓用戶按照自己的意圖和關(guān)注點(diǎn)去探索數(shù)據(jù)。

常見的交互方式有：

1）移動(dòng)和縮放：當(dāng)前空間只能顯示有限的數(shù)據(jù)時(shí)，或者需要關(guān)注局部數(shù)據(jù)時(shí)，可以使用移動(dòng)和縮放。

一般情況下，移動(dòng)和縮放是同時(shí)使用的兩個(gè)交互動(dòng)作。對于移動(dòng)而言，如果當(dāng)前顯示空間沒有把數(shù)據(jù)展示全，需要把后一數(shù)據(jù)條露出一部分，指引用戶可以進(jìn)行移動(dòng)操作；對于縮放而言，其目的一般是為了在更大的空間去查看局部的細(xì)節(jié)數(shù)據(jù)，一般也需要移動(dòng)圖表來配合。

2）懸?；螯c(diǎn)擊

懸停的的目的，是為了查看某個(gè)對象的詳細(xì)信息，通常會(huì)以彈窗或者「圖例+數(shù)據(jù)」的形式展現(xiàn)。

點(diǎn)擊的目的，通常是為了進(jìn)行數(shù)據(jù)下鉆，在這種情況下，需要通過設(shè)計(jì)傳達(dá)給用戶可以進(jìn)行交互的信息，如鼠標(biāo)懸停變手型、對象的顏色變化或者以文字指引等。

3）圖表聯(lián)動(dòng)

多圖表聯(lián)動(dòng)，是可視化中比較常見的一種交互方式，圖表聯(lián)動(dòng)的前提條件是，多個(gè)圖表的指標(biāo)含有共同的維度屬性，所以當(dāng)聚焦于某個(gè)圖表的某一維度下的屬性值時(shí)，其他圖表會(huì)聯(lián)動(dòng)變化。

其數(shù)據(jù)格式通常如下：按維度1中的屬性值聚合，可以得到左側(cè)的柱狀圖對應(yīng)的數(shù)據(jù)；按維度2中的屬性值聚合，可以得到右側(cè)的餅圖對應(yīng)的數(shù)據(jù)。

0x02 數(shù)據(jù)層面

1.當(dāng)數(shù)據(jù)項(xiàng)較多時(shí)，需要精簡數(shù)據(jù)項(xiàng)，突出重點(diǎn)

• 比例型分類數(shù)據(jù)，分類項(xiàng)建議保持在5～7個(gè)
• 比例型分類數(shù)據(jù)的可視化方式有：餅圖、圓環(huán)圖、百分比堆疊柱狀圖、百分比堆疊面積圖等，其目的是為了展示個(gè)體分類項(xiàng)和總體之間的比例關(guān)系。
• 當(dāng)需要按照某一個(gè)維度進(jìn)行分組時(shí)，若該維度的屬性值數(shù)目較多，那么就需要對屬性值進(jìn)行重新的歸類和分組，通常的做法是，保留占比或?qū)嶋H值TOP5的分類項(xiàng)，剩余分類歸為【其他】。

• 柱狀圖數(shù)據(jù)條過多時(shí)，保留頭部和尾部
• 當(dāng)需要用柱狀圖來對數(shù)據(jù)進(jìn)行排行時(shí)，若數(shù)據(jù)條目較多，此時(shí)建議保留頭部和尾部，中間的可以以省略號(hào)帶過或者折疊起來，放大時(shí)再展開。頭部和尾部的具體數(shù)目，可以依據(jù)具體需要來定，比如前5名和后5名、前10名和后3名等。

2.對于趨勢圖，若趨勢不明顯時(shí)，坐標(biāo)軸數(shù)值可以不從0開始

當(dāng)數(shù)據(jù)差異較小，導(dǎo)致折線的波動(dòng)范圍比較小，走勢起伏不明顯，此時(shí)如果為了更清楚的看到數(shù)據(jù)的波動(dòng)情況，坐標(biāo)軸起始數(shù)值可以不從0開始，但是此時(shí)需要在頁面提示用戶，否則用戶會(huì)誤以為波動(dòng)很大。

雖然，趨勢圖的主要目的，是查看數(shù)據(jù)的態(tài)勢和波動(dòng)規(guī)律，設(shè)置坐標(biāo)軸不從0開始，可以更清晰的看到數(shù)據(jù)的起伏波動(dòng)。但是，同時(shí)會(huì)給用戶帶來理解的成本，也有夸大差異的嫌疑，因此，不建議頻繁使用。

注意：柱狀圖的坐標(biāo)軸起點(diǎn)，必須從0開始，否則柱形條的高度就不能代表數(shù)據(jù)間的差異。

3.當(dāng)排行數(shù)據(jù)的類別名稱較長時(shí)，可以用條形圖替換柱狀圖

當(dāng)類別名稱太長時(shí)，雖然斜放可以避免重疊，但歪著頭查看內(nèi)容，和用戶閱讀的視覺習(xí)慣不符，此時(shí)可以考慮把柱條橫向放置，把類別的名稱置于柱條空隙之間或者柱形條左側(cè)。

4.坐標(biāo)軸需要做對應(yīng)的單位轉(zhuǎn)化

圖表坐標(biāo)軸的數(shù)值，受數(shù)據(jù)的大小影響，當(dāng)數(shù)據(jù)較大時(shí)，一方面將坐標(biāo)軸數(shù)值單位轉(zhuǎn)化為我們熟知的K、W、M、億需要一定的反應(yīng)時(shí)間，另一方面較大的數(shù)值也會(huì)占用有限的可視化空間。因此，建議，在一個(gè)數(shù)據(jù)可視化平臺(tái)內(nèi)部，需要建立一套公共的單位轉(zhuǎn)化規(guī)則，保證圖表坐標(biāo)軸單位轉(zhuǎn)化規(guī)則的一致性。具體做法如下：

注意：一個(gè)圖表中，坐標(biāo)軸的數(shù)值單位需保持一致，一般是以最大數(shù)值的單位作為整個(gè)坐標(biāo)軸的統(tǒng)一單位。

0xFF 總結(jié)

回顧上文的內(nèi)容，提升可視化效果的Tips總結(jié)如下：

• 非數(shù)據(jù)層面：
• 布局需要凸顯和強(qiáng)調(diào)可視化中最重要的信息；
• 弱化或隱藏圖表設(shè)計(jì)中的輔助元素；
• 通過交互來給予用戶探索數(shù)據(jù)的權(quán)利；
• 數(shù)據(jù)層面：
• 精簡數(shù)據(jù)項(xiàng)，突出重點(diǎn)；
• 趨勢圖坐標(biāo)軸可以不從0開始，但是要慎用；
• 系列名稱較長時(shí)，需用條形圖，橫向擺放系列名稱；
• 確立統(tǒng)一規(guī)則，對圖表坐標(biāo)軸數(shù)值進(jìn)行單位轉(zhuǎn)化；

如若大家對提升數(shù)據(jù)可視化效果這方面，有一些自己的總結(jié)，歡迎評論區(qū)補(bǔ)充和交流～