編輯導讀：圖表是可視化的常用表現形式，能夠更直觀地展現數據，洞悉數據背后的真相。但是，很多人在工作中對圖表的設計并不了解。本文作者基于自身工作經驗，梳理了一些圖表設計的知識點，希望對你有幫助。

可視化圖表需要經歷無數次推敲，才能更好得傳遞信息。

圖表是數據可視化的常用表現形式，是對數據的二次加工，可以幫助我們理解數據、洞悉數據背后的真相，讓我們更好地適應這個數據驅動的世界。無論在工作匯報、產品設計、后臺設計以及數據大屏中都能看到它的身影。

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

一、圖表的組成

1.1 圖表結構

當我們把圖表的結構進行拆解后，就會發現一個圖表是由很多個細小構件組成的，這些構件有自己的名字和用途，分別是標題、軸、圖形、圖例、標簽、提示信息。

在平常使用的過程中，會根據場景去修飾刪減一些構件元素，以此來減少冗余信息，用最適量的數據墨水比（Data-ink Ratio），幫助用戶快速達成目標，在最少的時間內獲取更多的信息。

• 標題：描述圖表的主題（包含主標題和副標題）
• 標簽：對當前一組數據進行的內容標注
• 軸：用來定義坐標系中數據在方向和值的映射關系
• 圖例：對圖形本身的概括
• 提示信息：當tap或者hover的時候，以交互提示信息的形式展示該點的數據詳情
• 圖形：統計圖表的視覺通道在形狀上映射的視覺展現

接下來，我會一點一點地為大家講解它們，方便大家合理地使用它們。但在此之前，我們先來了解一個知識點——數據墨水比，以便更好地理解接下來的內容。

1.2 數據墨水比

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

我個人更喜歡用“信噪比”= 信號/(信號+噪音) 這個概念去理解，因為通過可視化傳達的信息不僅僅是數據，還有業務洞察，像觀點、結論性的信息往往需要用文字來呈現的也是至關重要。不過無論使用哪個詞，最終的目的都是突出傳達“信息”部分，去除那些干擾的“噪音”。

因此，圖表中的數據墨水占比越多，那么該圖表的冗余信息就越少，信息傳遞效果就越好。所以，在創建圖表和圖形時，我們的目標應該是在合理范圍內最大化數據墨水比。

二、圖表元素詳解

2.1 標題

好的標題 = 成功了一半。

一個明確、相符的標題可以迅速讓讀者理解圖表要表達的內容。

通常圖表的標題是根據圖表所需要表達的內容決定的，大多數小伙伴可能認為命名沒有太多問題。但當這個圖表的結論是單一且唯一的時候，建議在概括圖表內容的標題中加入結論性的信息點。這樣能減少讀者誤解你的意圖的可能，而且能夠確保他們將注意力集中于你想著重強調的數據上 。

2.2 軸

2.2.1 什么是軸

軸是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。

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

2.2.2 軸的分類

根據對應變量是連續數據還是離散數據，軸可以分為：分類軸，時間軸，連續軸。

現在我們已經知道了軸由哪幾部分構成，那么接下來就來討論下那些容易被忽視的設計細節。

2.2.3 軸的設計細節

軸線一般只考慮是否顯示，結合上面所講的數據墨水比，在有網格線的情況下，柱狀圖/折線圖會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。

2.2.3.1 軸刻度線

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

軸刻度線的使用就是加強映射關系，快速的對應到數據點。分類軸較多出現在柱狀、條形中，對于映射有天然的對應關系，故在分類軸中習慣隱藏軸上的刻度線。

2.3.3.2 網格線

網格線是用來輔助圖表優化映射關系的。使用網格線可以增加數據的可閱讀性，網格線提供了兩種功能：一是延伸數值刻度至可視化對象中，以便觀察數據值之大??；二是增加可視化對象之間的比較基礎，利于比較。

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

2.3.3.3 軸標題

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

2.3.3.4 軸標簽

軸標簽的設計較為復雜，涉及到的細節點比較多。這里將圍繞直角坐標系的X軸和Y軸這兩個方向進行討論。

2.3.3.4.1 X軸標簽

x 軸標簽的設計重點在顯示規則上，在可視化圖表設計中，我們常常會碰到軸標簽內容過長的情況，當空間有限時，軸標簽會重疊在一起。如何處理此類問題，這里根據軸的不同類型給了對應的解決方案 。

連續/時間軸標簽：

在連續軸和時間軸中，我們可以利用抽樣顯示的手段來優化軸標簽重疊的問題。這里不推薦使用旋轉來縮減寬度。一方面從美觀度上，旋轉可能會破壞界面整體協調。

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

分類軸標簽：

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

對于分類軸，這里建議通過標簽旋轉或轉換成其他圖表（條形圖）來縮減寬度。

2.3.3.4.2 Y軸標簽

y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度自適應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。

軸標簽的數量：

軸標簽的數量不建議過多，太多的標簽必定導致橫向網格線變多，造成元素冗余，干擾圖形信息表達。根據 7±2 法則，Y軸標簽數量應盡量控制在這個范圍內。

軸標簽的取值范圍：

一般來說，y 軸標簽的取值應從 0 基線開始，以恰當反映數值。展示被截斷的數據可能會誤導用戶做出錯誤的判斷。比如數據本身沒有那么起伏變化，處理上下限的顆粒度，把刻度拉長，一樣能顯得“長勢喜人”。

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

但存在即合理，對于此類的取值方式不做過多評價。這里主要想講一下我常用的取值方式：對于Y軸的上限即最大值根據實際數據進行動態計算。比如一排數字中最大的為1190，那么軸標簽最高位為1200；一排數字中最大的是1210，那么軸標簽最高位為1400。其中的1400和2100是根據軸上的分段數決定的。

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

但我認為這種方式太刻意了，并且規則定制的比較細。但是得承認這樣子確認會顯的好看，做案例可以，做真實數據不行。因為考慮到實際數據有的時候會出現極限情況，比如有些特別大有些特別小，為了保證用戶能從圖表中準確地獲取信息，不應該為了美感而破壞了它的真實性。因此并不推薦用這種方式來取值。

軸標簽的數據格式：

關于Y軸標簽的數據格式，這里重點講一些比較容易忽視的設計細節。

第一，標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。

第二，正負向的 y 軸標簽，由于負值帶“-”符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上“+”，以達到視覺平衡的效果。

2.3 圖例

2.3.1 什么是圖例

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

2.3.2 圖例的類型

根據數據類型不同，分為連續型圖例和分類型圖例。

根據狀態不同，圖例可以被設置為靜態或可交互態。

2.3.3 圖例的設計要點

2.3.3.1 數字文本取整

正如，倫斯勒理工學院的行為經濟學家高拉夫杰恩(Gaurav Jain)所說：”數字有一種語言的力量，能給予人一種特殊的感覺。當我們使用具體的整數數字時，人的衡量會減少。這種行為沒有明顯的原因?！?/p>

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

2.3.3.2 水平圖例和垂直圖例

帶有連續性的傾向于使用水平圖例，因為更符合人們的閱讀習慣；帶有分類屬性的傾向于使用豎直圖例，圖例的右邊可放置更長的文本。

2.3.3.3 圖例的位置

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

2.3.3.4 多折線圖采用跟隨圖例

當我們在制作多折線圖時，經常會出現個數據系列之間相互交錯的情形，并使得各種數據標記與之前的出現順序不一致，即與圖例排列順序不同情形。

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

2.4 標簽

2.4.1 什么是標簽

在圖表中，標簽是對當前的一組數據進行的內容標注。包括數據點、拉線、文本數值等元素，根據不同的圖表類型選擇使用。

2.4.2 標簽的顯示策略

在繪制的圖表的時候，我們傾向將標簽直接打在圖形外，但在「堆疊類」圖表中，標簽會顯示在圖形內。這樣做會有個后果，標簽的文本和圖形經常需要交疊展示，所以可讀性需要足夠良好，所以通過對 HS 值的判斷，決定文字的顏色是否需要反思。這樣對比度就在可控范圍內，不會出現可讀性的問題。有時，還需要增加描邊，讓標簽更清晰。

當數據特別多并且密的時候會造成全部標簽擠在一起的情況。在標簽重疊時，采用動態計算的抽樣顯示方式，自動隱藏其中一個，同時當 Hover 圖表時，顯示被隱藏的對應的數據。這樣保證了圖表的清晰度，也保證了信息的完整性。

2.5 提示信息

提示信息一般是tap或者hover的時候，圖表以交互的方式吐出該位置的數據，幫助用戶更深入的了解數據。一般由視覺標記圖形，文本標簽，數值標記這3中元素構成。

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

2.6 圖形

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

這里主要想重點講一下，如何通過設計來強化圖表信息的表達，以便簡化用戶獲取信息的成本。關于具體某個圖表的制作規范和運用場景，會在之后的文章中提及。

2.6.1 改變顏色 – 明暗/深淺/色彩對比

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

2.6.2 添加標注

通過添加標注，人為去干預信息的表達，多用于一前一后的標識，便于用戶識別信息。

三、后記

以上就是本篇文章的全部內容，希望對大家有所幫助。

關于折線圖、柱狀圖、條形圖等等這些圖表的制作規范和設計要點，還有如何選擇合適的可視化圖表以及B端儀表盤該如設計，將會在之后為大家一一說明清楚，敬請期待。

參考文獻：

螞蟻數據可視化
設計師要了解的數據可視化 —— 基礎篇
數據可視化指南：那些高手才懂的坐標軸設計細節

本文由 @Nick 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議