B 端圖表如何設計？這篇5000字的總結超全面！

前言

無論是數據展示設計還是工作匯報中，都離不開圖表的運用。相較于繁瑣的數據內容，用戶可以更好更快了解大小、位置、顏色、形狀等視覺信息。可視化過后的數據可以加深人們對數據的理解和記憶。

本章主要講一些關于制作圖表的基礎知識和注意點，希望這些內容能在你設計業務過程中有所幫助。

常見圖表特征

*以下內容僅供參考和交流，圖片內容不代表真實尺寸，請結合特定產品靈活使用。

圖表簡介

1. 圖表與表格的區別

表格

在數據可視化中，表格是最常見的一種，可以查看和處理大量的數據。不同類別的標簽可以傳達特定的信息內容，顯示準確而具體的數據，并有助于發現個體數據的價值。

圖表

圖表可以呈現數據的整體形態(如形態、趨勢、對比等)，更加直觀明了，同時也不會分散人的注意力，有利于快速展示大量的數據關系。

2. 圖表設計流程

正如上圖所示，圖表是展現數據的一種重要展現形式，可以將數據以及數據關系直觀的展示出來，能幫助我們更加快速、直觀的傳達數據信息。

那如何挑選合適的圖表呢？在我看來大致分為三步：

1. 數據分析：對需要可視化的數據進行分析，明確需要傳達的核心信息；
2. 數據編碼：將抽象的數據轉化適用圖表類型（如形態，趨勢，對比等）；
3. 用戶理解：將可視化完成圖表呈現給用戶傳達數據信息；

在數據編碼階段設計師需要通過設計 (比如突出重點、減少視覺干擾等）來助力數據的表現，提升用戶對圖表理解的效率和準確性。

接下來我將從圖表主要構成元素的角度來分析如何在數據編碼階段通過設計提高用戶對信息的理解與傳達。

圖表元素詳解

1. 圖表的構成

先簡單地介紹一下圖表構成，圖表是由：標題、坐標軸、圖形、圖例、信息標簽組成。

1. 標題：描述圖表的展示內容主題，包括主標題和副標題；
2. 信息標簽：對當前數據的內容提示信息，常見交互形式：鼠標在懸停時出現、固定在圖形上；
3. 圖例：當圖表多內容與數據時，對內容與數據的說明；
4. 坐標軸：數據關系映射在坐標系的視覺展示，包括軸線和標尺。
5. 圖形：數據在視覺展示中映射出來的圖形，可以反映數據差異與關系，例如常見的折線圖、柱狀圖；

每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來，精簡化顯示想要展示的內容即可。

2. 標題

一個好的標題是從過稿開始。

簡潔明了、表達準確的標題可以迅速讓讀者理解圖表的主題，而且當圖表的結論是單一且唯一時，可以將其作為展示數據的元素，用于呈現數據的結論或總量，讓用戶在初次瀏覽圖表就能通曉圖表在說什么。如下圖所示在標題中直接顯示圖表的數據結果。

3. 圖表的選擇

一個合理正確圖表可以呈現數據的整體形態(如形態、趨勢、對比等)，讓數據更加直觀、突出重點。

了解圖表的分類和概念是進行設計和根據數據展示來選擇圖表的依據。那如何選擇合適的圖表？

安德魯·阿伯拉（Andrew Abela）制作的一份圖表類型選擇指南（This Guide），將圖表展示關系可大致分為 4 類：比較、分布、構成、聯系四種類型（見下圖）。

但考慮到日常使用的數據分析以及常用圖表組件庫，上圖中存在有些圖表使用頻率低。所以我參考了上圖的部分內容，再結合個人工作經驗重新對其總結，重新整合成三個維度（見下圖）。

補充：在給大家整理分享素材的時候才發現，阿里的 Antv 制作了更詳細的圖表分類目錄，包含比較、趨勢、組成、占比、分布、排名、關系、空間等 8 個大類。（這樣顯得我很呆，建議大家收藏一下網站！）

訪問鏈接： https://antv.vision/zh

比較

圖表在表達比較關系最常用就是柱狀圖（條形圖）和折線圖。在展示相同類別之間比較關系常用柱狀圖（多個類別時則常用條形圖），在展示關于時間變化關系是常用折線圖。

折線圖

折線圖通過各個數據節點相互連接而成線條，通過線條的波動來顯示數據隨有序元素變化的圖表。常用于反映數據隨著有序元素變化（常用于時間）推移而產生的變化趨勢。比如：

1. 近 10 年全球溫度的變化情況；
2. 本學期，某某某學生語文成績變化情況；
3. 事故數量隨著時間推移的變化情況：

折線圖注意

（1）為了圖表展示的可讀性，折線圖中線條的數量建議應當控制 3 條內，至多不用超過 7 條。

（2）為了圖表視覺效果的易讀性，線條應當使用實線，來突出視覺重點。

（3）當圖表展示不需要精確呈現時，而且重視整體變化的趨勢，可以使用曲線，反之折線。

柱狀圖

柱狀圖是通過矩形高度的差異展示的數據比較關系的圖標。主要作用是將多個數據在同一條件下，進行數據值的比較以此來判斷多個數據值哪些數據值相對比較大或相對比較小。比如：

• 各專業方向 2020 年工程師的工資信息圖表報告；
• 2021 年全球各國世界人口的增長：

補充：在需要顯示準確數值時使用，最好不要用柱狀圖來比較。

柱狀圖注意

（1）在使用圖表展示時應當選擇合適的間距寬度去適配柱條的寬度，來增加數據易讀性。

推薦：間距寬度可以使用在 1/2 柱寬到 1 柱寬之間。

（2）圖表避免使用過多的顏色，降低用戶獲取數據的認知成本。

說明：當需要強調某個數據時，可以使用顏色來突出顯示有意義的數據點。

條狀圖

在視覺上條形圖與柱狀圖比較類似，看上去只是交換了 X 軸與 Y 軸的位置，而且圖表功能也較為類似，但不同的是，條形圖對內容承載相對于柱狀圖而更多，而且由于視覺動效是縱向延展性，從上到下的閱讀方式符合用戶閱讀習慣。比如：各種排行榜。

其實在大多數情況下，條形圖和柱形圖是可以互相替換的，但存在以下情況建議使用條形圖：

• 在涉及到排行時最好使用條形圖，視覺動效從上到下的閱讀方式符合用戶閱讀習慣；
• 標尺標簽較名字長時，建議條形圖。例如：省份名稱加城市名稱；

條形圖注意點

（1）在使用條形圖，應當對數據有序排列，且統一視覺動線軸標簽右對齊。

說明：條形圖本質是一種比較關系圖表，進行照邏輯排序可以引導用戶更好地閱讀數據。

構成

餅圖

餅圖是通過扇形角度占總圓的大小展示的數據構成的圖標。在餅圖中，每個扇形角度的大小表示部分和整體的關系。適合用于展示單一維度數據的占比，比如：

• 70 億人在做什么；
• 2021 年廣東營業額構成情況；

環形圖

環形圖在定義和作用上和餅圖相同，其實本質上就是餅圖中間區域挖空，但是環圖的視覺降噪會比餅圖好。

餅圖&環形圖注意

（1）在數據占整體的百分比時，餅圖&環形圖扇形角度大小與其相應的值成比例，所有全部相加必須為 100%。

（2） 餅圖&環形圖不適用分類過多的場景，分塊數量盡量控制在 5 個以內，最多不要超過 9 個，否則閱讀體驗會很差。

解決方法：當數據類別較多時，可以將不重要的數據類別合并為“其它”，可以有效避免分類數量過多，或者直接改為使用條形圖或者表格展示數據。

聯系&分布

散點圖

散點圖是將數據點展示在直角坐標系平面上的的圖表。表示數據隨變量而變化的分布趨勢，比如：

今年的單品成本和收入分布情況；

氣泡圖

氣泡圖可以看作是散點圖的變形，但與散點圖不同的是，氣泡圖增加了第三個變化量（氣泡大小的變化），較大氣泡就表示較大的值。可以通過氣泡的位置分布和大小，來分析數據的分布規律。

散點圖&氣泡圖注意

（1）當數據量過少時，不推薦使用散點圖&氣泡圖

（2）在圖表上添加趨勢線可以幫助用戶直接獲取數據結果

地圖

通過視覺重點顯示數據集中區域或者數據所在地區來展示的圖表。通常使用地圖作為背景，對數據的所在地理分布通過顏色深淺等元素的變化來容易判斷數據分布大小情況。比如：

• 2020 年全國各地土豆產量統計；
• 某某某企業在全國各地的門店數量；

地圖圖表使用建議

（1）數據內容需要和地理位置相關；

（2）當你通過顏色深淺變化來展示數據時，要遵循顏色梯度變化和數值增減同步變化，數據越大顏色越深；

（3）超級重要：由于圖表需要使用地圖為背景，需要使用標準地圖。下載推薦： http://bzdt.ch.mnr.gov.cn/

圖表字典

上面介紹了常用的圖表以及使用注意事項，但是圖表類型遠遠不止于此，還有很多非常用的圖表類型，這次我先給大家列出來：雷達圖，K 線圖，盒須圖，熱力圖，旭日圖，桑基圖，樹圖，漏斗圖，儀表盤等。

更多圖表類型

4. 圖例

圖例是對內容與數據的說明，是圖表中不可或缺的部分。由于不同圖表展示樣式差異很大，圖例的位置需要考慮整體布局進行擺放，避免圖例位置導致頁面統一性差，增加用戶的閱讀成本。

在這里推薦兩處位置放置圖例，分別為圖表的左上角和右側。當圖表是折線圖、柱狀圖時，圖表整體是左右兩端對齊的類型，建議將圖例放置在圖表頂部。當圖表是餅圖時，圖表整體存在空余空間時，建議將圖例放置在圖表右側，縮短用戶對照圖例和圖表的路徑，提高信息獲取效率。而且根據人視覺“F 型“動線，圖例應該是從上至下，從左往右的方式進行排序。

注意點 Q&A

為什么圖表構成細節元素沒有詳細去講解，卻放在注意點環節，因為我們大多數工作中，其實很多使用的插件或者組件庫，他們已經對圖表細節進行了視覺規范，所以關于圖表相關知識，理解遠遠大于實操。

1. 坐標軸

坐標軸是大部分圖表的重要構成部分，是定義坐標系和數據的映射關系的展示。

（1）為了提高用戶閱讀體驗，坐標軸需要區別于其他的網格線突出顯示。

（2）為了能夠讓用戶快速準確獲取到的數據信息，在設計時應該減少視覺干擾，突出主圖形，弱化網格線。

推薦：元素與背景顏色的明度對比在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。

2. 顏色無障礙

顏色作為常見的數據表達手段，是數據可視化設計中重要的一部分，通過不同顏色明確體現數據的分類、數值大小等。雖然現在存在很多配色工具和設計組件庫來選擇使用，但是往往在這些色板看起來還不錯情況下，卻存在著顏色在黑白稿辨識度不夠高的問題，因為我們在設計時我們還需要考慮到色盲和色弱群體。

為了改善這個情況，我們可以參考大廠的顏色規范，除了使用不同顏色來做出差異，還可以在同顏色下對明度改變形成對比，提高顏色在黑白稿辨識度，提高設計的無障礙化。

推薦：在配色方面建議，可以多參考一下大廠的組件庫。

常用的圖表資源統計

1. 組件庫

AntV G2（sketch）

訪問鏈接： https://antv.vision/zh

G2 一套面向常規統計圖表，以數據驅動的高交互可視化圖形語法，具有高度的易用性和擴展性。使用 G2，你無需關注圖表各種繁瑣的實現細節，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統計圖表。

figma 圖表合集

訪問鏈接： https://www.figma.cool/resources/2

sketch 圖表合集

下載鏈接： https://pan.baidu.com/s/1pL6iY4F

XD 圖表合集

訪問鏈接： https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD

訪問鏈接： https://psdrepo.com/free-psd/analytics-charts-freebie/

2. 數據圖表生成網站

CHARTCUBE

訪問鏈接： https://chartcube.alipay.com/

AntV 在線圖表制作工具，拖拽之間快速搞定圖表制作。

ECharts

訪問鏈接： https://echarts.apache.org/en/index.html

ECharts 是一款基于 JavaScript 的數據可視化圖表庫，提供直觀、生動、可交互、可個性化定制的數據可視化圖表。ECharts 最初由百度團隊開源，并于 2018 年初捐贈給 Apache 基金會，成為 ASF 孵化級項目。

鏑數圖表目圖片

訪問鏈接： https://dycharts.com/appv2/#/pages/home/index

花火數圖

訪問鏈接： https://hanabi.data-viz.cn/index?lang=zh-CN

3. 常用的圖表插件

PS 拉框助手(支持 Figma、Sketch、XD、PS)

訪問鏈接： https://www.pslkzs.com/ps/index.php

它能夠快速的生成：折線圖、柱狀圖、餅圖、雷達圖、散點圖、氣泡圖、玉玨圖、國內外省市的地圖。

還有很多其它好用的插件，麻煩給我收藏，錯過今天，后悔每一天！！！Figma、Sketch、XD 插件在頁面下方！！！

Figma 插件推薦

訪問鏈接：https://www.figma.com/community/plugin/731451122947612104/Charts

 

訪問鏈接：https://www.figma.com/community/plugin/734590934750866002/Chart

Sketch 插件

訪問鏈接： https://kitchen.alipay.com/

訪問鏈接： https://github.com/pavelkuligin/chart

XD 插件

訪問鏈接： https://www.vizzycharts.com/

總結

以上就是本篇文章的全部內容，如果這對于你的工作有一點幫助那么備感榮幸，很感謝你能夠耐心看到最后，希望留下你的交流意見，我們下篇再見。

提問：如果需要以“2021 我國各地區成年人單身人口增長數量”為數據，應該選擇什么圖表？（別想了，去談戀愛啊～）

參考文獻：

1. 能分清直方圖和柱狀圖，你就是圖表屆的“頭號”玩家 —— 鏑次元數據傳媒實驗室
2. 數據的力量遠不止“好看”這么簡單 —— 網易UEDC
3. 數據可視化是什么 —— DecemberCafe
4. 如何讓自動算色提升你的工作效率—— KID商業化
5. 如何設計實用易讀的圖表 —— 劉穎
6. 螞蟻數據可視化

歡迎關注作者微信公眾號：「白紙黑字UXD」