B端可視化：圖表設(shè)計(jì)

作者：nick （轉(zhuǎn)載已取得作者授權(quán)）

可視化圖表需要經(jīng)歷無數(shù)次推敲，才能更好得傳遞信息。

圖表是數(shù)據(jù)可視化的常用表現(xiàn)形式，是對(duì)數(shù)據(jù)的二次加工，可以幫助我們理解數(shù)據(jù)、洞悉數(shù)據(jù)背后的真相，讓我們更好地適應(yīng)這個(gè)數(shù)據(jù)驅(qū)動(dòng)的世界。無論在工作匯報(bào)、產(chǎn)品設(shè)計(jì)、后臺(tái)設(shè)計(jì)以及數(shù)據(jù)大屏中都能看到它的身影。

然而，在實(shí)際工作中我發(fā)現(xiàn)很多初入行的設(shè)計(jì)師對(duì)于圖表設(shè)計(jì)并不是很了解，同時(shí)市面上對(duì)于這方面的資料相對(duì)零散，不成體系。所以我結(jié)合了平時(shí)工作中的理解，梳理了這篇文章，希望能幫助到大家。

一、圖表的組成

1.1 圖表結(jié)構(gòu)

當(dāng)我們把圖表的結(jié)構(gòu)進(jìn)行拆解后，就會(huì)發(fā)現(xiàn)一個(gè)圖表是由很多個(gè)細(xì)小構(gòu)件組成的，這些構(gòu)件有自己的名字和用途，分別是標(biāo)題、軸、圖形、圖例、標(biāo)簽、提示信息。

在平常使用的過程中，會(huì)根據(jù)場(chǎng)景去修飾刪減一些構(gòu)件元素，以此來減少冗余信息，用最適量的數(shù)據(jù)墨水比（Data-ink Ratio），幫助用戶快速達(dá)成目標(biāo)，在最少的時(shí)間內(nèi)獲取更多的信息。

• 標(biāo)題：描述圖表的主題（包含主標(biāo)題和副標(biāo)題）
• 標(biāo)簽：對(duì)當(dāng)前一組數(shù)據(jù)進(jìn)行的內(nèi)容標(biāo)注
• 軸：用來定義坐標(biāo)系中數(shù)據(jù)在方向和值的映射關(guān)系
• 圖例：對(duì)圖形本身的概括
• 提示信息：當(dāng)tap或者h(yuǎn)over的時(shí)候，以交互提示信息的形式展示該點(diǎn)的數(shù)據(jù)詳情
• 圖形：統(tǒng)計(jì)圖表的視覺通道在形狀上映射的視覺展現(xiàn)

接下來，我會(huì)一點(diǎn)一點(diǎn)地為大家講解它們，方便大家合理地使用它們。但在此之前，我們先來了解一個(gè)知識(shí)點(diǎn)——數(shù)據(jù)墨水比，以便更好地理解接下來的內(nèi)容。

1.2 數(shù)據(jù)墨水比

數(shù)據(jù)墨水比——”data-ink ratio”，是1983年視覺大師愛德華·塔夫特（Edward Tufte）在《The Visual Display of Quantitative Information》中提出的一個(gè)概念：一幅圖表的絕大部分筆墨應(yīng)該用于展示數(shù)據(jù)信息，數(shù)據(jù)變化則筆墨也變化。他將數(shù)據(jù)油墨比定義為圖表中用于數(shù)據(jù)的墨水量除以總油墨量。其中數(shù)據(jù)墨水指的是圖表中不可刪除的核心內(nèi)容。比如，我可以刪除圖例、刪除坐標(biāo)軸、刪除網(wǎng)格線，這可能不會(huì)影響你從圖表中讀取相關(guān)的信息。但如果我刪除柱形圖、餅圖這些圖表的映射關(guān)系，那么圖表就沒有內(nèi)容了。

我個(gè)人更喜歡用“信噪比”= 信號(hào)/(信號(hào)+噪音) 這個(gè)概念去理解，因?yàn)橥ㄟ^可視化傳達(dá)的信息不僅僅是數(shù)據(jù)，還有業(yè)務(wù)洞察，像觀點(diǎn)、結(jié)論性的信息往往需要用文字來呈現(xiàn)的也是至關(guān)重要。不過無論使用哪個(gè)詞，最終的目的都是突出傳達(dá)“信息”部分，去除那些干擾的“噪音”。

因此，圖表中的數(shù)據(jù)墨水占比越多，那么該圖表的冗余信息就越少，信息傳遞效果就越好。所以，在創(chuàng)建圖表和圖形時(shí)，我們的目標(biāo)應(yīng)該是在合理范圍內(nèi)最大化數(shù)據(jù)墨水比。

二、圖表元素詳解

2.1 標(biāo)題

好的標(biāo)題 = 成功了一半。

一個(gè)明確、相符的標(biāo)題可以迅速讓讀者理解圖表要表達(dá)的內(nèi)容。

通常圖表的標(biāo)題是根據(jù)圖表所需要表達(dá)的內(nèi)容決定的，大多數(shù)小伙伴可能認(rèn)為命名沒有太多問題。但當(dāng)這個(gè)圖表的結(jié)論是單一且唯一的時(shí)候，建議在概括圖表內(nèi)容的標(biāo)題中加入結(jié)論性的信息點(diǎn)。這樣能減少讀者誤解你的意圖的可能，而且能夠確保他們將注意力集中于你想著重強(qiáng)調(diào)的數(shù)據(jù)上 。

2.2 軸

2.2.1 什么是軸

軸是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。

換句話說，軸的功能像是把可視化對(duì)象置于共同的基準(zhǔn)上，再以標(biāo)尺進(jìn)行數(shù)值量測(cè)。在數(shù)據(jù)可視化中，一般存在于笛卡爾坐標(biāo)系（直角坐標(biāo)系）和極坐標(biāo)系中。對(duì)軸進(jìn)行「原子」要素的拆分，我們可以得到以下幾種元素，分別為：軸線、軸刻度線、軸標(biāo)簽、軸標(biāo)題（單位）以及網(wǎng)格線。

2.2.2 軸的分類

根據(jù)對(duì)應(yīng)變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，軸可以分為：分類軸，時(shí)間軸，連續(xù)軸。

現(xiàn)在我們已經(jīng)知道了軸由哪幾部分構(gòu)成，那么接下來就來討論下那些容易被忽視的設(shè)計(jì)細(xì)節(jié)。

2.2.3 軸的設(shè)計(jì)細(xì)節(jié)

軸線一般只考慮是否顯示，結(jié)合上面所講的數(shù)據(jù)墨水比，在有網(wǎng)格線的情況下，柱狀圖/折線圖會(huì)隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達(dá)到信息降噪，突出視覺重點(diǎn)的目的。

2.2.3.1 軸刻度線

軸刻度線是軸線上的小線段， 可以提供數(shù)值標(biāo)簽在坐標(biāo)軸上的明確位置。軸刻度線有3種類型，分別為：置內(nèi)、置中（即交叉方式）、置外。但刻度應(yīng)置于數(shù)值坐標(biāo)軸外側(cè)，不建議刻度采用置中或置內(nèi)方式顯示。

軸刻度線的使用就是加強(qiáng)映射關(guān)系，快速的對(duì)應(yīng)到數(shù)據(jù)點(diǎn)。分類軸較多出現(xiàn)在柱狀、條形中，對(duì)于映射有天然的對(duì)應(yīng)關(guān)系，故在分類軸中習(xí)慣隱藏軸上的刻度線。

2.3.3.2 網(wǎng)格線

網(wǎng)格線是用來輔助圖表優(yōu)化映射關(guān)系的。使用網(wǎng)格線可以增加數(shù)據(jù)的可閱讀性，網(wǎng)格線提供了兩種功能：一是延伸數(shù)值刻度至可視化對(duì)象中，以便觀察數(shù)據(jù)值之大小；二是增加可視化對(duì)象之間的比較基礎(chǔ)，利于比較。

網(wǎng)格線一般跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。在使用網(wǎng)格線時(shí)，應(yīng)該注意遵從主次原則，以軸線為主，網(wǎng)格線為輔，樣式上可采用實(shí)線或者虛線。避免顏色過重，不要使用純黑或者純白，在視覺層級(jí)上不能搶了圖表中的信息。

2.3.3.3 軸標(biāo)題

軸標(biāo)題（單位）主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表的其他部分內(nèi)容（標(biāo)題、圖例、軸標(biāo)簽等）已經(jīng)能充分表達(dá)數(shù)據(jù)含義，根據(jù)奧卡姆剃刀定律，可以略去軸標(biāo)題，近一步增大數(shù)據(jù)油墨比，精簡(jiǎn)畫面元素。

2.3.3.4 軸標(biāo)簽

軸標(biāo)簽的設(shè)計(jì)較為復(fù)雜，涉及到的細(xì)節(jié)點(diǎn)比較多。這里將圍繞直角坐標(biāo)系的X軸和Y軸這兩個(gè)方向進(jìn)行討論。

2.3.3.4.1 X軸標(biāo)簽

x 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上，在可視化圖表設(shè)計(jì)中，我們常常會(huì)碰到軸標(biāo)簽內(nèi)容過長(zhǎng)的情況，當(dāng)空間有限時(shí)，軸標(biāo)簽會(huì)重疊在一起。如何處理此類問題，這里根據(jù)軸的不同類型給了對(duì)應(yīng)的解決方案 。

連續(xù)/時(shí)間軸標(biāo)簽：

在連續(xù)軸和時(shí)間軸中，我們可以利用抽樣顯示的手段來優(yōu)化軸標(biāo)簽重疊的問題。這里不推薦使用旋轉(zhuǎn)來縮減寬度。一方面從美觀度上，旋轉(zhuǎn)可能會(huì)破壞界面整體協(xié)調(diào)。

另一方面，連續(xù)/時(shí)間軸并不需要顯示所有的軸標(biāo)簽，參考格式塔中的[連續(xù)性原理]，盡管軸標(biāo)簽未能完全展示，但用戶會(huì)在腦海中把缺失的部分補(bǔ)齊，軸標(biāo)簽仍然會(huì)像連續(xù)著的一樣。

分類軸標(biāo)簽：

在分類軸中，由于標(biāo)簽與標(biāo)簽之間并沒有緊密的邏輯關(guān)聯(lián)關(guān)系。若采用抽樣規(guī)則，隱藏了一些標(biāo)簽，則加大了用戶對(duì)圖表信息的提取難度，這是我們不想看到的。

對(duì)于分類軸，這里建議通過標(biāo)簽旋轉(zhuǎn)或轉(zhuǎn)換成其他圖表（條形圖）來縮減寬度。

2.3.3.4.2 Y軸標(biāo)簽

y 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長(zhǎng)標(biāo)簽寬度自適應(yīng)縮放。如果數(shù)組是固定的，就寫成固定寬度，節(jié)省圖表計(jì)算量，提高渲染速度。

軸標(biāo)簽的數(shù)量：

軸標(biāo)簽的數(shù)量不建議過多，太多的標(biāo)簽必定導(dǎo)致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達(dá)。根據(jù) 7±2 法則，Y軸標(biāo)簽數(shù)量應(yīng)盡量控制在這個(gè)范圍內(nèi)。

軸標(biāo)簽的取值范圍：

一般來說，y 軸標(biāo)簽的取值應(yīng)從 0 基線開始，以恰當(dāng)反映數(shù)值。展示被截?cái)嗟臄?shù)據(jù)可能會(huì)誤導(dǎo)用戶做出錯(cuò)誤的判斷。比如數(shù)據(jù)本身沒有那么起伏變化，處理上下限的顆粒度，把刻度拉長(zhǎng)，一樣能顯得“長(zhǎng)勢(shì)喜人”。

從上圖就能明白，在看圖表的時(shí)候千萬不要被表面給欺騙，僅僅觀看柱狀圖的高低趨勢(shì)往往不能得出正確結(jié)論，需要注意坐標(biāo)軸起始位置有沒有被人做過虛假處理。

但存在即合理，對(duì)于此類的取值方式不做過多評(píng)價(jià)。這里主要想講一下我常用的取值方式：對(duì)于Y軸的上限即最大值根據(jù)實(shí)際數(shù)據(jù)進(jìn)行動(dòng)態(tài)計(jì)算。比如一排數(shù)字中最大的為1190，那么軸標(biāo)簽最高位為1200；一排數(shù)字中最大的是1210，那么軸標(biāo)簽最高位為1400。其中的1400和2100是根據(jù)軸上的分段數(shù)決定的。

但有些人對(duì)Y軸標(biāo)簽的取值給出了如下建議：在折線圖中，取值一般保證圖形約占繪圖區(qū)域的2/3，或者將柱狀的高度控制在圖表高度的85%左右。

但我認(rèn)為這種方式太刻意了，并且規(guī)則定制的比較細(xì)。但是得承認(rèn)這樣子確認(rèn)會(huì)顯的好看，做案例可以，做真實(shí)數(shù)據(jù)不行。因?yàn)榭紤]到實(shí)際數(shù)據(jù)有的時(shí)候會(huì)出現(xiàn)極限情況，比如有些特別大有些特別小，為了保證用戶能從圖表中準(zhǔn)確地獲取信息，不應(yīng)該為了美感而破壞了它的真實(shí)性。因此并不推薦用這種方式來取值。

軸標(biāo)簽的數(shù)據(jù)格式：

關(guān)于Y軸標(biāo)簽的數(shù)據(jù)格式，這里重點(diǎn)講一些比較容易忽視的設(shè)計(jì)細(xì)節(jié)。

第一，標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因?yàn)槟承┹S標(biāo)簽是整數(shù)值，就略去小數(shù)點(diǎn)。

第二，正負(fù)向的 y 軸標(biāo)簽，由于負(fù)值帶“-”符號(hào)，整個(gè) y 軸看起來會(huì)有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負(fù)向 y 軸給正值標(biāo)簽帶上“+”，以達(dá)到視覺平衡的效果。

2.3 圖例

2.3.1 什么是圖例

圖例是對(duì)圖形本身的概括，在圖表元素中屬于輔助內(nèi)容。它提供讀者以對(duì)照的方式來理解可視化對(duì)象的項(xiàng)目歸類。由映射圖形形狀和文本組成。

2.3.2 圖例的類型

根據(jù)數(shù)據(jù)類型不同，分為連續(xù)型圖例和分類型圖例。

根據(jù)狀態(tài)不同，圖例可以被設(shè)置為靜態(tài)或可交互態(tài)。

2.3.3 圖例的設(shè)計(jì)要點(diǎn)

2.3.3.1 數(shù)字文本取整

正如，倫斯勒理工學(xué)院的行為經(jīng)濟(jì)學(xué)家高拉夫杰恩(Gaurav Jain)所說：”數(shù)字有一種語(yǔ)言的力量，能給予人一種特殊的感覺。當(dāng)我們使用具體的整數(shù)數(shù)字時(shí)，人的衡量會(huì)減少。這種行為沒有明顯的原因。”

當(dāng)人們的大腦在處理不以零結(jié)尾的不規(guī)則數(shù)字時(shí)，需要更多的腦力來處理，加大了獲取信息的難度。因此在使用數(shù)字時(shí)，應(yīng)該考慮這種偏好，傾向于一些取整的數(shù)字。同樣的，這不僅僅適用于圖例中的數(shù)字，同樣適用于坐標(biāo)軸上下限的數(shù)字。

2.3.3.2 水平圖例和垂直圖例

帶有連續(xù)性的傾向于使用水平圖例，因?yàn)楦先藗兊拈喿x習(xí)慣；帶有分類屬性的傾向于使用豎直圖例，圖例的右邊可放置更長(zhǎng)的文本。

2.3.3.3 圖例的位置

默認(rèn)把圖例放在左上角去做一個(gè)通用的方案看起來沒毛病。但考慮到人的視覺動(dòng)線是從上至下，從左到右。這里有一個(gè)更好的做法：縮短用戶對(duì)照?qǐng)D例看圖形的本能路徑，可以提升對(duì)信息的獲取效率。如下圖所示：

2.3.3.4 多折線圖采用跟隨圖例

當(dāng)我們?cè)谥谱鞫嗾劬€圖時(shí)，經(jīng)常會(huì)出現(xiàn)個(gè)數(shù)據(jù)系列之間相互交錯(cuò)的情形，并使得各種數(shù)據(jù)標(biāo)記與之前的出現(xiàn)順序不一致，即與圖例排列順序不同情形。

因此觀眾的眼睛必須在圖例與折線之間進(jìn)行連連看，最佳的做法是采用跟隨圖例形式，去標(biāo)識(shí)出折線所屬于的維值信息，這樣會(huì)更直觀有效。

2.4 標(biāo)簽

2.4.1 什么是標(biāo)簽

在圖表中，標(biāo)簽是對(duì)當(dāng)前的一組數(shù)據(jù)進(jìn)行的內(nèi)容標(biāo)注。包括數(shù)據(jù)點(diǎn)、拉線、文本數(shù)值等元素，根據(jù)不同的圖表類型選擇使用。

2.4.2 標(biāo)簽的顯示策略

在繪制的圖表的時(shí)候，我們傾向?qū)?biāo)簽直接打在圖形外，但在「堆疊類」圖表中，標(biāo)簽會(huì)顯示在圖形內(nèi)。這樣做會(huì)有個(gè)后果，標(biāo)簽的文本和圖形經(jīng)常需要交疊展示，所以可讀性需要足夠良好，所以通過對(duì) HS 值的判斷，決定文字的顏色是否需要反思。這樣對(duì)比度就在可控范圍內(nèi)，不會(huì)出現(xiàn)可讀性的問題。有時(shí)，還需要增加描邊，讓標(biāo)簽更清晰。

當(dāng)數(shù)據(jù)特別多并且密的時(shí)候會(huì)造成全部標(biāo)簽擠在一起的情況。在標(biāo)簽重疊時(shí)，采用動(dòng)態(tài)計(jì)算的抽樣顯示方式，自動(dòng)隱藏其中一個(gè)，同時(shí)當(dāng) Hover 圖表時(shí)，顯示被隱藏的對(duì)應(yīng)的數(shù)據(jù)。這樣保證了圖表的清晰度，也保證了信息的完整性。

2.5 提示信息

提示信息一般是tap或者h(yuǎn)over的時(shí)候，圖表以交互的方式吐出該位置的數(shù)據(jù)，幫助用戶更深入的了解數(shù)據(jù)。一般由視覺標(biāo)記圖形，文本標(biāo)簽，數(shù)值標(biāo)記這3中元素構(gòu)成。

提示信息的展現(xiàn)形式有4種。按不同的圖表類型，分為懸浮、固定位置、固定在軸上、固定在圖形上。

2.6 圖形

人類從圖形中獲取信息的效率遠(yuǎn)高于文本，可以說如今人類早已進(jìn)入了讀圖時(shí)代。圖形是統(tǒng)計(jì)圖表的視覺通道在形狀上映射的視覺展現(xiàn)，是圖表的必備元素，承載著數(shù)據(jù)背后蘊(yùn)含的信息。按照組件原子化的思路來定義現(xiàn)在千奇百怪的圖表，大致可以分為六種基礎(chǔ)樣式：折線，面積，散點(diǎn)，氣泡，餅/環(huán)，柱形，條形。

這里主要想重點(diǎn)講一下，如何通過設(shè)計(jì)來強(qiáng)化圖表信息的表達(dá)，以便簡(jiǎn)化用戶獲取信息的成本。關(guān)于具體某個(gè)圖表的制作規(guī)范和運(yùn)用場(chǎng)景，會(huì)在之后的文章中提及。

2.6.1 改變顏色 – 明暗/深淺/色彩對(duì)比

通過明暗對(duì)比、顏色對(duì)比以及色彩對(duì)比等手段可以有效的區(qū)分信息，在視覺層級(jí)上也是明顯的處理了視覺噪音，便于用戶區(qū)分信息。

2.6.2 添加標(biāo)注

通過添加標(biāo)注，人為去干預(yù)信息的表達(dá)，多用于一前一后的標(biāo)識(shí)，便于用戶識(shí)別信息。

三、后記

以上就是本篇文章的全部?jī)?nèi)容，希望對(duì)大家有所幫助。

關(guān)于折線圖、柱狀圖、條形圖等等這些圖表的制作規(guī)范和設(shè)計(jì)要點(diǎn)，還有如何選擇合適的可視化圖表以及B端儀表盤該如設(shè)計(jì)，將會(huì)在之后為大家一一說明清楚，敬請(qǐng)期待。

參考文獻(xiàn)：

螞蟻數(shù)據(jù)可視化
設(shè)計(jì)師要了解的數(shù)據(jù)可視化 —— 基礎(chǔ)篇
數(shù)據(jù)可視化指南：那些高手才懂的坐標(biāo)軸設(shè)計(jì)細(xì)節(jié)

最后，也歡迎有問題的小伙伴加微信：yw5201a1 溝通交流。

此外我們的官方網(wǎng)站也上線了，每日分享高質(zhì)量的文章、原型素材和行業(yè)報(bào)告，小伙伴可自行前往索取，支持搜索，需要的小伙伴可點(diǎn)擊底部的閱讀原文直接查看，或者復(fù)制網(wǎng)址：www.dadaghp.com 打開。

更多干貨可關(guān)注微信公眾號(hào)：產(chǎn)品劉

想學(xué)習(xí)更多關(guān)于產(chǎn)品、職場(chǎng)、心理、認(rèn)知等干貨，可長(zhǎng)按右邊二維碼，關(guān)注我們。

··················END··················

RECOMMEND

推薦閱讀

產(chǎn)品經(jīng)理如何寫好MRD文檔

手把手教你做產(chǎn)品經(jīng)理1.0

分享一篇關(guān)于騰訊會(huì)議的PRD文檔

什么樣的企業(yè)適合建設(shè)中臺(tái)

點(diǎn)擊“閱讀原文”

查看更多干貨