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

本章主要講一些關(guān)于制作圖表的基礎(chǔ)知識和注意點(diǎn)，希望這些內(nèi)容能在你設(shè)計(jì)業(yè)務(wù)過程中有所幫助。

常見圖表特征

想做好數(shù)據(jù)可視化？先掌握常見 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

"數(shù)據(jù)可視化的目的，是要對數(shù)據(jù)進(jìn)行可視化處理，以能夠明確地、有效地傳遞信息。

*以下內(nèi)容僅供參考和交流，圖片內(nèi)容不代表真實(shí)尺寸，請結(jié)合特定產(chǎn)品靈活使用。

圖表簡介

1. 圖表與表格的區(qū)別

表格

在數(shù)據(jù)可視化中，表格是最常見的一種，可以查看和處理大量的數(shù)據(jù)。不同類別的標(biāo)簽可以傳達(dá)特定的信息內(nèi)容，顯示準(zhǔn)確而具體的數(shù)據(jù)，并有助于發(fā)現(xiàn)個(gè)體數(shù)據(jù)的價(jià)值。

圖表

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

2. 圖表設(shè)計(jì)流程

正如上圖所示，圖表是展現(xiàn)數(shù)據(jù)的一種重要展現(xiàn)形式，可以將數(shù)據(jù)以及數(shù)據(jù)關(guān)系直觀的展示出來，能幫助我們更加快速、直觀的傳達(dá)數(shù)據(jù)信息。

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

1. 數(shù)據(jù)分析：對需要可視化的數(shù)據(jù)進(jìn)行分析，明確需要傳達(dá)的核心信息；
2. 數(shù)據(jù)編碼：將抽象的數(shù)據(jù)轉(zhuǎn)化適用圖表類型（如形態(tài)，趨勢，對比等）；
3. 用戶理解：將可視化完成圖表呈現(xiàn)給用戶傳達(dá)數(shù)據(jù)信息；

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

接下來我將從圖表主要構(gòu)成元素的角度來分析如何在數(shù)據(jù)編碼階段通過設(shè)計(jì)提高用戶對信息的理解與傳達(dá)。

圖表元素詳解

1. 圖表的構(gòu)成

先簡單地介紹一下圖表構(gòu)成，圖表是由：標(biāo)題、坐標(biāo)軸、圖形、圖例、信息標(biāo)簽組成。

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

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

2. 標(biāo)題

一個(gè)好的標(biāo)題是從過稿開始。

簡潔明了、表達(dá)準(zhǔn)確的標(biāo)題可以迅速讓讀者理解圖表的主題，而且當(dāng)圖表的結(jié)論是單一且唯一時(shí)，可以將其作為展示數(shù)據(jù)的元素，用于呈現(xiàn)數(shù)據(jù)的結(jié)論或總量，讓用戶在初次瀏覽圖表就能通曉圖表在說什么。如下圖所示在標(biāo)題中直接顯示圖表的數(shù)據(jù)結(jié)果。

3. 圖表的選擇

一個(gè)合理正確圖表可以呈現(xiàn)數(shù)據(jù)的整體形態(tài)(如形態(tài)、趨勢、對比等)，讓數(shù)據(jù)更加直觀、突出重點(diǎn)。

了解圖表的分類和概念是進(jìn)行設(shè)計(jì)和根據(jù)數(shù)據(jù)展示來選擇圖表的依據(jù)。那如何選擇合適的圖表？

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

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

補(bǔ)充：在給大家整理分享素材的時(shí)候才發(fā)現(xiàn)，阿里的 Antv 制作了更詳細(xì)的圖表分類目錄，包含比較、趨勢、組成、占比、分布、排名、關(guān)系、空間等 8 個(gè)大類。（這樣顯得我很呆，建議大家收藏一下網(wǎng)站?。?

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

比較

圖表在表達(dá)比較關(guān)系最常用就是柱狀圖（條形圖）和折線圖。在展示相同類別之間比較關(guān)系常用柱狀圖（多個(gè)類別時(shí)則常用條形圖），在展示關(guān)于時(shí)間變化關(guān)系是常用折線圖。

折線圖

折線圖通過各個(gè)數(shù)據(jù)節(jié)點(diǎn)相互連接而成線條，通過線條的波動來顯示數(shù)據(jù)隨有序元素變化的圖表。常用于反映數(shù)據(jù)隨著有序元素變化（常用于時(shí)間）推移而產(chǎn)生的變化趨勢。比如：

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

折線圖注意

（1）為了圖表展示的可讀性，折線圖中線條的數(shù)量建議應(yīng)當(dāng)控制 3 條內(nèi)，至多不用超過 7 條。

（2）為了圖表視覺效果的易讀性，線條應(yīng)當(dāng)使用實(shí)線，來突出視覺重點(diǎn)。

（3）當(dāng)圖表展示不需要精確呈現(xiàn)時(shí)，而且重視整體變化的趨勢，可以使用曲線，反之折線。

柱狀圖

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

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

補(bǔ)充：在需要顯示準(zhǔn)確數(shù)值時(shí)使用，最好不要用柱狀圖來比較。

柱狀圖注意

（1）在使用圖表展示時(shí)應(yīng)當(dāng)選擇合適的間距寬度去適配柱條的寬度，來增加數(shù)據(jù)易讀性。

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

（2）圖表避免使用過多的顏色，降低用戶獲取數(shù)據(jù)的認(rèn)知成本。

說明：當(dāng)需要強(qiáng)調(diào)某個(gè)數(shù)據(jù)時(shí)，可以使用顏色來突出顯示有意義的數(shù)據(jù)點(diǎn)。

條狀圖

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

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

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

條形圖注意點(diǎn)

（1）在使用條形圖，應(yīng)當(dāng)對數(shù)據(jù)有序排列，且統(tǒng)一視覺動線軸標(biāo)簽右對齊。

說明：條形圖本質(zhì)是一種比較關(guān)系圖表，進(jìn)行照邏輯排序可以引導(dǎo)用戶更好地閱讀數(shù)據(jù)。

構(gòu)成

餅圖

餅圖是通過扇形角度占總圓的大小展示的數(shù)據(jù)構(gòu)成的圖標(biāo)。在餅圖中，每個(gè)扇形角度的大小表示部分和整體的關(guān)系。適合用于展示單一維度數(shù)據(jù)的占比，比如：

• 70 億人在做什么；
• 2021 年廣東營業(yè)額構(gòu)成情況；

環(huán)形圖

環(huán)形圖在定義和作用上和餅圖相同，其實(shí)本質(zhì)上就是餅圖中間區(qū)域挖空，但是環(huán)圖的視覺降噪會比餅圖好。

餅圖&環(huán)形圖注意

（1）在數(shù)據(jù)占整體的百分比時(shí)，餅圖&環(huán)形圖扇形角度大小與其相應(yīng)的值成比例，所有全部相加必須為 100%。

（2） 餅圖&環(huán)形圖不適用分類過多的場景，分塊數(shù)量盡量控制在 5 個(gè)以內(nèi)，最多不要超過 9 個(gè)，否則閱讀體驗(yàn)會很差。

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

聯(lián)系&分布

散點(diǎn)圖

散點(diǎn)圖是將數(shù)據(jù)點(diǎn)展示在直角坐標(biāo)系平面上的的圖表。表示數(shù)據(jù)隨變量而變化的分布趨勢，比如：

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

氣泡圖

氣泡圖可以看作是散點(diǎn)圖的變形，但與散點(diǎn)圖不同的是，氣泡圖增加了第三個(gè)變化量（氣泡大小的變化），較大氣泡就表示較大的值?？梢酝ㄟ^氣泡的位置分布和大小，來分析數(shù)據(jù)的分布規(guī)律。

散點(diǎn)圖&氣泡圖注意

（1）當(dāng)數(shù)據(jù)量過少時(shí)，不推薦使用散點(diǎn)圖&氣泡圖

（2）在圖表上添加趨勢線可以幫助用戶直接獲取數(shù)據(jù)結(jié)果

地圖

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

• 2020 年全國各地土豆產(chǎn)量統(tǒng)計(jì)；
• 某某某企業(yè)在全國各地的門店數(shù)量；

地圖圖表使用建議

（1）數(shù)據(jù)內(nèi)容需要和地理位置相關(guān)；

（2）當(dāng)你通過顏色深淺變化來展示數(shù)據(jù)時(shí)，要遵循顏色梯度變化和數(shù)值增減同步變化，數(shù)據(jù)越大顏色越深；

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

圖表字典

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

更多圖表類型

如何做好視覺可視化設(shè)計(jì)？我總結(jié)了這72種圖表類型

視覺學(xué)習(xí)者（Visual learner）是那些用圖像進(jìn)行思考的人[1]，這些人將腦中的畫面轉(zhuǎn)述成詞語去與他人進(jìn)行溝通。

4. 圖例

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

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

注意點(diǎn) Q&A

為什么圖表構(gòu)成細(xì)節(jié)元素沒有詳細(xì)去講解，卻放在注意點(diǎn)環(huán)節(jié)，因?yàn)槲覀兇蠖鄶?shù)工作中，其實(shí)很多使用的插件或者組件庫，他們已經(jīng)對圖表細(xì)節(jié)進(jìn)行了視覺規(guī)范，所以關(guān)于圖表相關(guān)知識，理解遠(yuǎn)遠(yuǎn)大于實(shí)操。

1. 坐標(biāo)軸

坐標(biāo)軸是大部分圖表的重要構(gòu)成部分，是定義坐標(biāo)系和數(shù)據(jù)的映射關(guān)系的展示。

（1）為了提高用戶閱讀體驗(yàn)，坐標(biāo)軸需要區(qū)別于其他的網(wǎng)格線突出顯示。

（2）為了能夠讓用戶快速準(zhǔn)確獲取到的數(shù)據(jù)信息，在設(shè)計(jì)時(shí)應(yīng)該減少視覺干擾，突出主圖形，弱化網(wǎng)格線。

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

2. 顏色無障礙

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

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

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

常用的圖表資源統(tǒng)計(jì)

1. 組件庫

AntV G2（sketch）

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

G2 一套面向常規(guī)統(tǒng)計(jì)圖表，以數(shù)據(jù)驅(qū)動的高交互可視化圖形語法，具有高度的易用性和擴(kuò)展性。使用 G2，你無需關(guān)注圖表各種繁瑣的實(shí)現(xiàn)細(xì)節(jié)，一條語句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計(jì)圖表。

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. 數(shù)據(jù)圖表生成網(wǎng)站

CHARTCUBE

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

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

ECharts

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

ECharts 是一款基于 Javascript 的數(shù)據(jù)可視化圖表庫，提供直觀、生動、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts 最初由百度團(tuán)隊(duì)開源，并于 2018 年初捐贈給 Apache 基金會，成為 ASF 孵化級項(xiàng)目。

鏑數(shù)圖表目圖片

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

花火數(shù)圖

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

3. 常用的圖表插件

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

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

它能夠快速的生成：折線圖、柱狀圖、餅圖、雷達(dá)圖、散點(diǎn)圖、氣泡圖、玉玨圖、國內(nèi)外省市的地圖。

還有很多其它好用的插件，麻煩給我收藏，錯(cuò)過今天，后悔每一天?。。igma、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/

總結(jié)

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

提問：如果需要以"2021 我國各地區(qū)成年人單身人口增長數(shù)量"為數(shù)據(jù)，應(yīng)該選擇什么圖表？（別想了，去談戀愛啊～）

參考文獻(xiàn)：

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

作者：白紙黑字UXD