圖表的作用在于對(duì)數(shù)據(jù)的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應(yīng)解釋方便大家理解～
1.1 圖表是什么
在今天，隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心，圖表在 B 端設(shè)計(jì)的地位越發(fā)重要。
那么什么叫圖表呢？
圖表指的是可以直觀展示統(tǒng)計(jì)信息屬性和數(shù)值的圖形表格，對(duì)于多數(shù)人來說第一次接觸圖表概念都源自中小學(xué)計(jì)算機(jī)課程中的 Office Excel 表格教學(xué)。
要理解圖表，你就繞不開 Excel 這個(gè)軟件或其功能形式。我們都知道 Excel 是一個(gè)表格工具，可以任意填寫表格化的信息內(nèi)容進(jìn)去。
但那只是呈現(xiàn)出來的表象，Excel 的真實(shí)身份應(yīng)該是一個(gè)數(shù)據(jù)記錄工具，通過這種表格形式記錄，比如班級(jí)學(xué)生成績、客戶聯(lián)系方式、倉庫進(jìn)銷記錄等等。每一條記錄下的信息都是一條獨(dú)立的 “數(shù)據(jù)”。
盯著表格看，我們確實(shí)可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是，數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已？顯然是否定的。
我們統(tǒng)計(jì)數(shù)據(jù)的目的，還包括要從眾多的數(shù)據(jù)條目中獲得反映真實(shí)情況的 “規(guī)律”、“趨勢”，如果我們只盯著數(shù)據(jù)條目一條條的瀏覽，是很難找出這些信息的。
于是，人類就發(fā)明了圖表這種可視化工具，幫助我們對(duì)數(shù)據(jù)進(jìn)行總結(jié)，用更直觀的視覺方式來認(rèn)識(shí)數(shù)據(jù)和找出規(guī)律和趨勢，這也是為什么 Excel 是最強(qiáng)大的圖表生產(chǎn)軟件的原因之一。
總結(jié)：圖表是統(tǒng)計(jì)學(xué)的子學(xué)科，它幫助我們更好的找到數(shù)據(jù)背后的真相，并做出正確的決定。
1.2 圖表的內(nèi)容構(gòu)成
圖表既然由數(shù)據(jù)內(nèi)容生成，這個(gè)生成和轉(zhuǎn)化的過程當(dāng)然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。
它們是組成絕大多數(shù)圖表的基石，比如看下面的表格，一次體檢中有三個(gè)班級(jí)的5個(gè)同學(xué)，他們的身高、體重、體脂率、肌肉含量、視力各不相同。
我們可以從中挑選維度和數(shù)值，比如姓名做緯度（X軸），體脂率作為數(shù)值（Y軸），那么就可以生成基礎(chǔ)柱狀圖表。
從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對(duì)象，縱向數(shù)值則表示你要顯示該維度的哪一類數(shù)據(jù)。
緯度通常指某個(gè)具體的人、日期、事件、分類，通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類型，重點(diǎn)要記得數(shù)值是指 “數(shù)據(jù)類型”，而不是指具體的參數(shù)值。
再進(jìn)一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數(shù)值的情況，但顯然對(duì)于不了解數(shù)據(jù)背景的人來說太簡陋了，不知道它們代表的意義。所以，一個(gè)完整的圖表還會(huì)包含一些 “解釋” 性元素，來讓觀看者更好的理解圖表內(nèi)容。
所以，一個(gè)完整的圖表中除了中心圖形，還會(huì)包含標(biāo)題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容，用來提升其閱讀性。
以上只是最基礎(chǔ)的示例，不同圖表、內(nèi)容，對(duì)說明信息的要求各有不同，我們會(huì)在下方做出一定的解釋。一個(gè)優(yōu)秀的設(shè)計(jì)師要學(xué)會(huì)如何因地制宜，優(yōu)化圖表的內(nèi)容構(gòu)成，并對(duì)展示的信息進(jìn)行取舍。
1.3 圖表的類型認(rèn)識(shí)
隨著統(tǒng)計(jì)學(xué)的發(fā)展，圖表也經(jīng)歷了一系列的增長與創(chuàng)新，除了我們常見的幾種圖表外，還發(fā)展出了大量平常看不到，只存在于各自專業(yè)領(lǐng)域的特殊種類。但是，它們對(duì)我們的生活和工作也起到產(chǎn)生了重要的影響。
比如在新冠危機(jī)中，政府和專業(yè)機(jī)構(gòu)對(duì)民眾開放的數(shù)據(jù)就大量使用了圖表進(jìn)行解釋，讓我們可以很清晰的了解事情的走勢和真相。
之所以有這么多不同圖表，讓人眼花繚亂，在于數(shù)據(jù)所包含的信息和特性不同，導(dǎo)致了它們所總結(jié)的規(guī)律類型也不同。
業(yè)界將圖表展示類型分成了四個(gè)大類，包含比較、分布、構(gòu)成、聯(lián)系，雖然比較簡陋，但這是新手認(rèn)識(shí)圖表最簡單的方式。
我們簡單解釋下這四個(gè)分類代表的作用：
之后我們就會(huì)以這個(gè)框架，來解釋不同分類下的圖表，幫助大家建立對(duì)圖表的正確認(rèn)識(shí)和設(shè)計(jì)方式。除了這種標(biāo)準(zhǔn)分類以外，我還額外做了一個(gè)歸類，就是基礎(chǔ)和高級(jí)圖表。
前面提到，一般圖表就只反映緯度、數(shù)值兩個(gè)方面的圖表類型，很容易理解。但復(fù)雜的圖表，就會(huì)超過這個(gè)范圍，它可能包含了多個(gè)維度、多種數(shù)值、甚至第三、第四。
比如下面這個(gè)散點(diǎn)圖，除了身高（緯度）、體重（數(shù)值）外，還表現(xiàn)了個(gè)體（圓點(diǎn)）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區(qū)域、最大最小值標(biāo)識(shí)、體重/身高均值。
這已經(jīng)超出一個(gè)沒有接觸過統(tǒng)計(jì)的新手認(rèn)知范疇了，是需要具體學(xué)習(xí)才能學(xué)會(huì)如何閱讀和應(yīng)用的圖表。
這還是比較簡單的高級(jí)圖表，往后還有類似桑基圖、K線圖（韭菜的自我修養(yǎng)）、和弦圖等類型，它們有各自使用的規(guī)范、參數(shù)，以及應(yīng)用的場景。
高級(jí)圖表的復(fù)雜度和抽象性，決定了它的使用門檻較高，識(shí)別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升，對(duì)圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上，而是提供了視覺效果更精美，制作過程更復(fù)雜，閱讀門檻更低的可視化數(shù)據(jù)展示內(nèi)容。
雖然我們?cè)诒酒恼虏粫?huì)拓展到大屏可視化的領(lǐng)域，但是掌握好平面二維的統(tǒng)計(jì)圖表，提升對(duì)統(tǒng)計(jì)目的的認(rèn)識(shí)，是深入學(xué)習(xí)可視化的必要條件。
接下來，我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(qū)別，但它們有很多細(xì)節(jié)是具有統(tǒng)一規(guī)范的。優(yōu)先掌握這些一致的內(nèi)容，再理解不同圖表的具體繪制差異，可以幫助設(shè)計(jì)師快速上手圖表設(shè)計(jì)工作。
2.1 基本內(nèi)容繪制思路
上面我們提了，一個(gè)成熟的圖表會(huì)包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們?cè)谠O(shè)計(jì)時(shí)的第一個(gè)考慮要素。
常見的抽象圖表都有一個(gè)完整的矩形區(qū)域，我們要先確定該圖表的具體占比尺寸。然后，對(duì)這個(gè)區(qū)域進(jìn)行布局的規(guī)劃，而這個(gè)布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。
比如，你需要在圖表中增加標(biāo)題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會(huì)增加一個(gè)默認(rèn)存在的文本型解釋模塊，那么還會(huì)再右側(cè)再切割出一個(gè)區(qū)域出來。
除了解釋信息外，我們?cè)谠O(shè)計(jì)中有時(shí)候還不能忽視交互內(nèi)容，比如要包含分類篩選、時(shí)間線控制、開關(guān)等控件時(shí)，它們準(zhǔn)備放在哪里，也要在這個(gè)階段確定出來。
經(jīng)過前面的切割，其實(shí)我們就能確定出中間的圖形區(qū)域了。在開始繪制前，我們還要對(duì)圖形具備的信息做進(jìn)一步的確認(rèn)，XY 軸坐標(biāo)是否包含文字解釋，餅圖類是否包含延長指示線說明。
將這些區(qū)域先確定出來，減去它們的空間，就留下了最終要圖形展示的區(qū)域了。
合理的圖表繪制流程變是先布局 ，確定信息內(nèi)容，最后才集中處理圖形元素。如果對(duì)于前端適配有一定了解的同學(xué)，也就知道在完成這些步驟以后，圖表的適配規(guī)則制定就暢通無阻了。
2.2 圖形分布和比例映射
有了圖形區(qū)域，接著就可以開始動(dòng)手畫圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形，你想要讓自己輸出的作品嚴(yán)謹(jǐn)、質(zhì)量高，就需要應(yīng)用專業(yè)的繪制方法。
圖表圖形的繪制類似尺寸作圖，需要應(yīng)用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創(chuàng)意的地方，而是要以準(zhǔn)確的方式繪制出來。它包含兩個(gè)重點(diǎn)，分布和比例映射。
以一個(gè)柱狀圖表舉例，該圖表中維度包含了 7 個(gè)對(duì)象，即應(yīng)該出現(xiàn) 7 個(gè)柱形。那么首先就要通過等分圖形區(qū)域，來確定柱形的分布，XY軸文字的對(duì)齊對(duì)象。
如果你不羅列對(duì)象具體數(shù)值的話，到這步也就結(jié)束了，但如果對(duì)象數(shù)值是必要顯示內(nèi)容的話，那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。
假設(shè)在上方案例中，Y軸總高是 100px，那么數(shù)值中每 1 小時(shí)的高度就是 100/16 = 6.25px，我們就要用你寫下來的數(shù)值 * 6.25，保證柱狀圖高度比例和你的數(shù)值一致。
而類似餅圖這樣的圖形中，只要添加了具體數(shù)值內(nèi)容，那么餅圖中不同的扇形角度，也要符合對(duì)應(yīng)的比例。比如占比 10%、20%、30%、40% 的四個(gè)對(duì)象，它們的角度就分別為 36、72、108、144。
這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據(jù)數(shù)值在區(qū)域中進(jìn)行繪制，就一定會(huì)受到數(shù)值的影響。不管學(xué)習(xí)什么新的圖表，都只要確定這兩個(gè)步驟就可以輕松準(zhǔn)確的完成繪制。
至于具體該怎么實(shí)現(xiàn)，用插件還是參考線，就是軟件基礎(chǔ)的問題了，不在這里展開。
2.3 圖表配色的基本原理
在圖表設(shè)計(jì)中的最后一個(gè)問題，就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點(diǎn)，選色邏輯和搭配方法。
選色邏輯，就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜，或者頁面一屏中會(huì)包含大量的圖表。
在這個(gè)基礎(chǔ)上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中 。在選色面板中，它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高，圖表要和主色統(tǒng)一，也建議在主色基礎(chǔ)上做適當(dāng)調(diào)節(jié)，在色系上接近即可。
并且，建議新手在繪制圖表的過程中千萬不要用漸變色。即使在各類飛機(jī)稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。
有了選色邏輯，多色搭配的思路也就變得而非常簡單了，只要重點(diǎn)關(guān)注色環(huán)的配色模式即可。
配色模式多種多樣，包括補(bǔ)色、三角對(duì)立、類似、四元、方形、臨近等等，不用想的那么復(fù)雜，只要牢記根據(jù)你的設(shè)計(jì)風(fēng)格需要，你是要相鄰配色，還是等分配色。
相鄰配色，即以一個(gè)色系的臨近色系為標(biāo)準(zhǔn)的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準(zhǔn)，飽和度和明度數(shù)值基本不變的情況下，小幅度變更色相。
等分配色，也是保持飽和度、明度的一致，根據(jù)需要的色彩數(shù)量（大于三個(gè)）在色環(huán)中按角度等分，獲得均勻的色彩過度。
配色的方法很簡單，難的是你們?nèi)绾胃鶕?jù)頁面的需要、視覺的體驗(yàn)，合理的運(yùn)用配色的方案，這沒有統(tǒng)一的標(biāo)準(zhǔn)。要記得圖表配色不是僅僅針對(duì)自身，會(huì)和頁面其它色彩產(chǎn)生聯(lián)系。
保證相對(duì)平緩、不太激進(jìn)的圖表配色思路，是最安全的做法。
首先解釋第一類圖表 —— 比較。
比較圖表的作用，是用來對(duì)緯度的數(shù)值做對(duì)比的圖表類型，直觀對(duì)比不同對(duì)象的強(qiáng)弱、排序、趨勢。
3.1 柱狀類圖表
3.1.1 基本認(rèn)識(shí)：
柱狀圖，是一個(gè)使用柱狀圖形反映緯度數(shù)值的二維坐標(biāo)軸圖表，也是我們最常見的圖表類型。
在這個(gè)二維坐標(biāo)軸中，我們可以用縱軸代表數(shù)值，也可以用橫軸代表數(shù)值，另一個(gè)軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。
柱狀圖除了每個(gè)對(duì)象包含一類數(shù)值的做法以外，也允許包含多個(gè)數(shù)值類型，每個(gè)類型使用一種顏色表示，這種圖表叫分組柱狀。
并且，柱狀圖作為最基礎(chǔ)的圖形，衍生了非常多下級(jí)的柱狀類型。包括：堆疊柱狀、子彈圖、正負(fù)混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對(duì)比來使用的。后續(xù)會(huì)有進(jìn)一步提示。
3.1.2 設(shè)計(jì)建議：
柱狀圖通過柱體的長短，可以直接對(duì)比不同緯度數(shù)值的高低，但使用也有一定的差別。
緯度之間關(guān)聯(lián)性不是太強(qiáng)，或者按時(shí)間順序排列的就適合用橫向排列的方式 ，比如下方記錄我隨時(shí)可能猝死的打工人一周睡眠時(shí)間（見左圖）。而涉及排名或者時(shí)間的數(shù)據(jù)組，就適合使用縱向排列的 ，比如 Geekbench 展現(xiàn)不同 Mac 處理器強(qiáng)弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。
兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān)，在APP中，橫向排列的柱狀圖可以顯示的數(shù)量非常有限，想放更多緯度就要左右滾動(dòng)，體驗(yàn)不佳。而使用縱向排列則對(duì)空間的要求沒那么高。
3.2 折線類圖表
3.2.1 基本認(rèn)識(shí)
折線圖也是基礎(chǔ)圖表，通過創(chuàng)建端點(diǎn)并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區(qū)別的。
當(dāng)我們要選擇使用柱狀圖的時(shí)候，往往關(guān)注數(shù)值的總量，或者維度代表的是不同的對(duì)象，比如不同 CPU 之間的跑分對(duì)比。但是折線圖的使用就沒有那么單一，它主要應(yīng)用在單一對(duì)象的單個(gè)維度變化對(duì)比中。
比如，我們監(jiān)控 CPU 的占用頻率，那么維度使用時(shí)間，數(shù)值用百分比，這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開，但如果維度改成了當(dāng)前時(shí)間不同核心的占用數(shù)值、溫度，那么我們就肯定不會(huì)用折線圖來表示。
折線圖的使用是要通過線段的曲折來反映數(shù)值的波動(dòng)，在應(yīng)用過程中往往不作為一個(gè)靜態(tài)的圖表展示，而是應(yīng)用于監(jiān)控的場景，比如監(jiān)控股市市值、網(wǎng)站在線人數(shù)、CPU溫度、同一地區(qū)降水量等等。
3.2.2 設(shè)計(jì)建議：
在折線圖中，最大的認(rèn)知誤區(qū)就是對(duì)于曲線線段的應(yīng)用了。在數(shù)之不盡的網(wǎng)上飛機(jī)稿中，使用曲線的折線圖表 90% 以上都是錯(cuò)誤的。
這要回歸本質(zhì)來探討，折線圖也是進(jìn)行對(duì)比的圖形，如果沒有直觀的波動(dòng)，那么這個(gè)圖形帶來的信息量就非常有限。曲線會(huì)因?yàn)閳A角的緣故而降低波動(dòng)帶來的沖擊力，甚至抹平這種對(duì)比。
只有在必定會(huì)連續(xù)出現(xiàn)極大波動(dòng)的圖表中才適合使用曲線，例如圍繞在會(huì)有一個(gè)中間值數(shù)值，曲線進(jìn)行正負(fù)兩端移動(dòng)的類型，比如監(jiān)控呼吸中含氧量（呼和吸一個(gè)周期的維度）。
所以，盡量避免曲線的應(yīng)用，不僅畫起來麻煩，而且實(shí)際使用效果極差。
作為折線圖，在一些數(shù)值代表完成、占滿、填充的概念時(shí)，往往就會(huì)覺得單純的線段表示不夠直觀，于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個(gè)數(shù)值類型不夠要加入多個(gè)數(shù)值和線段的就叫折線堆疊圖。
3.3 雷達(dá)類圖表
3.3.1 基本認(rèn)識(shí)
雷達(dá)圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達(dá)圖是一種偏向概括性的圖表，并不能用來體現(xiàn)大數(shù)值和高頻變化，是用來對(duì)比同一個(gè)對(duì)象不同維度數(shù)值的圖表。
雷達(dá)圖的應(yīng)用，首先要確認(rèn)出不低于5個(gè)的維度，并且這些維度可以使用相同的數(shù)值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個(gè)對(duì)象身上拆分出來的，而不是 5 個(gè)維度指代不同的對(duì)象。
簡單來講，就是我們可以用雷達(dá)圖來表現(xiàn)一個(gè)學(xué)生不同科目的水準(zhǔn)，這樣雷達(dá)圖可以大致概括這個(gè)學(xué)生科目掌握情況和相對(duì)的強(qiáng)弱。
但是不應(yīng)該用雷達(dá)圖來表示不同學(xué)生同一科目的水準(zhǔn)，那就只是更基礎(chǔ)的對(duì)比，用柱狀圖就可以了。
當(dāng)然，雷達(dá)圖中的占用內(nèi)容，也可以添加多個(gè)對(duì)象，一個(gè)雷達(dá)圖中可以放多個(gè)同學(xué)不同科目掌握水平的疊加圖形，以此對(duì)比他們的差異。
3.3.2 設(shè)計(jì)建議
雷達(dá)圖的繪制，也是優(yōu)先制定說明內(nèi)容區(qū)域，然后再開始圖形的設(shè)計(jì)。
因?yàn)樵诶走_(dá)圖中，我們對(duì)維度的描述，基本只能設(shè)計(jì)到不同端點(diǎn)外部，那么文字本身的數(shù)量、占比，就會(huì)對(duì)圖形的顯示產(chǎn)生非常大的影響，并且在雷達(dá)圖中維度的描述文字是必須的，過度精簡還是用其它方式體現(xiàn)都很不直觀，所以優(yōu)先預(yù)留足夠的文字空間。
然后，根據(jù)我們需要的維度數(shù)量繪制一個(gè)等邊的多邊形，并設(shè)置合理的數(shù)值。
之后，才是確定出這個(gè)多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級(jí)，那么就要畫 5 個(gè)堆疊的等邊形，那么我們就從最大的那個(gè)等邊形入手，再復(fù)制4個(gè)出來，對(duì)它們分別乘以 80%、60%、40%、20% 即可。
最后，再將每個(gè)維度對(duì)應(yīng)數(shù)值根據(jù)百分比將端點(diǎn)打在維度的直線上，用鋼筆工具將每個(gè)端點(diǎn)連接起來創(chuàng)建一個(gè)完整的不規(guī)則多邊形，就完成了雷達(dá)圖的設(shè)計(jì)。
如果想要在一個(gè)雷達(dá)圖添加多個(gè)對(duì)象，只要用不同顏色描邊繪制對(duì)應(yīng)數(shù)量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點(diǎn)，導(dǎo)致圖形不全。
3.4 其它類型
3.4.1 階梯圖
階梯圖是一種用來對(duì)比前后數(shù)值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關(guān)注每個(gè)對(duì)象增減的份額大小。
不僅僅是關(guān)注波動(dòng)，而是更具體的值。類似關(guān)注一只股票全年的股價(jià)漲跌情況，每個(gè)月漲跌的具體額度，就適合使用階梯圖表現(xiàn)。
3.4.2 漏斗圖
漏斗圖因?yàn)殚L得像漏斗而聞名。雖然這個(gè)圖形看起來像一個(gè)錐形或者三角形，但本質(zhì)上漏斗只是條形圖（橫向柱狀圖）的變體。
漏斗圖是一種對(duì)階段進(jìn)行分層表現(xiàn)的圖形，從上到下的順序中，數(shù)值一定會(huì)呈現(xiàn)衰減的趨勢（起碼不會(huì)變大），然后從上到下的柱體就越來越小。
例如，UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型，就會(huì)建立一個(gè)從用戶訪問主頁，到最后完成下單的轉(zhuǎn)化率，每一個(gè)步驟都會(huì)有一定的用戶流失。
在基礎(chǔ)漏斗圖之上還有進(jìn)一步拓展，比如對(duì)這個(gè)轉(zhuǎn)化本身有一個(gè)預(yù)期，那么可以做對(duì)比漏斗圖，比較現(xiàn)實(shí)和預(yù)想中的差距。如果要對(duì)比 iOS 和 Android 端的漏斗數(shù)據(jù)，還有比較漏斗圖，對(duì)比兩側(cè)的長短數(shù)據(jù)。
第二個(gè)解釋的圖表類型 —— 分布。主要是用來研究數(shù)據(jù)分布情況的圖表，對(duì)不同數(shù)據(jù)的統(tǒng)計(jì)分布狀況進(jìn)行描述。
4.1 直方類圖表
4.1.1 基本認(rèn)識(shí)
直方圖是一個(gè)看起來和普通柱狀圖非常接近的圖表類型，是一個(gè)用來表示同一個(gè)緯度范圍中，不同區(qū)間頻率的圖形。
直方圖是一個(gè)二級(jí)圖表，是對(duì)一級(jí)數(shù)據(jù)的進(jìn)一步轉(zhuǎn)化。比如看上圖案例，散點(diǎn)圖（下面會(huì)說）本身記錄了不同的數(shù)據(jù)的位置，而直方圖就是記錄在發(fā)生在這個(gè)緯度內(nèi)的次數(shù)。
直方圖乍一看很像柱狀圖，但實(shí)際應(yīng)用場景往往使用了非常密集的柱體，讓它看上去像折線圖。對(duì)于設(shè)計(jì)師來說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。
當(dāng)視覺設(shè)計(jì)師、攝影師在學(xué)習(xí)處理位圖的時(shí)候，就必然要學(xué)會(huì)直方圖的讀取，它并不是用來讓我們學(xué)習(xí)如何對(duì)比前后數(shù)據(jù)差異的，而是讓我們可以快速掌握這張圖片中像素點(diǎn)在不同通道的分布量。
直方圖是統(tǒng)計(jì)學(xué)中的 “頻率分布” 的視覺表現(xiàn)形式，需要確保使用的場景符合直方圖的定義，以及確保用戶能理解圖表內(nèi)容。
4.1.2 設(shè)計(jì)建議
對(duì)于直方圖來說，如果維度對(duì)象少，只要獲得相關(guān)的信息和數(shù)值，就可以像柱狀圖一樣來繪制。
如果是針對(duì)一些比較專業(yè)的場景，如上方的通道直方圖，那么就要放棄自己完成的目標(biāo)，一定要借助相關(guān)插件，或者使用 Excel 等工具實(shí)現(xiàn)后再導(dǎo)入進(jìn)來。
4.2 箱型類圖表
4.2.1 基本認(rèn)識(shí)
箱型圖也叫盒須圖，和直方圖類似，它也是一個(gè)二級(jí)圖表，即它不是直觀反應(yīng)原始數(shù)據(jù)，而是對(duì)原始數(shù)據(jù)的狀態(tài)進(jìn)行轉(zhuǎn)譯。圖表中的每個(gè)箱型反應(yīng)一組數(shù)據(jù)的分散情況資料，每個(gè)箱型包含下面這些信息元素。
箱型圖反應(yīng)的是一種 “大概” 情況，它不是一種用來進(jìn)行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成，下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。
這里的排列主要通過 “數(shù)值大小” 來決定，而不是分布數(shù)據(jù)。比如一個(gè)班上100個(gè)同學(xué)包含身高 150、160、170、180、190 五種身高，雖然每個(gè)身高包含的人數(shù)不同，但 160 就是它的下四分衛(wèi)，180 是它的上四分衛(wèi)。
那么160-180身高包含的人數(shù)就是箱體本身的區(qū)域，上四分衛(wèi)到上邊緣是 180-190 的人數(shù)，下四分衛(wèi)到下邊緣是 160-150 的人數(shù)。
箱型圖可以反應(yīng)的信息是非常豐富的，它可以非常有效的反應(yīng)不同數(shù)據(jù)組的虛實(shí)、占比、上下限，可以獲得非常多有趣的結(jié)論。
4.2.2 設(shè)計(jì)建議
在箱型圖的設(shè)計(jì)中，對(duì)于箱體和觸須的表達(dá)要依據(jù)數(shù)據(jù)本身的重要性來判斷 。有些場景對(duì)最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點(diǎn)關(guān)注箱體的話，則可以對(duì)觸須進(jìn)行弱化使用虛線。
同時(shí)，箱型圖的主要識(shí)別信息是 Y 軸的長度，一個(gè)美觀易度的箱型圖，箱體寬度盡量控制在一個(gè)比較纖細(xì)的水平，不要為了填充畫面的空白強(qiáng)行做寬。
4.3 K線圖
4.3.1 基本認(rèn)識(shí)
相信稍微了解過股票還是基金的同學(xué)，對(duì)K線圖那可就一點(diǎn)也不見外了，下陽線、收盤光頭陽、小陽線，開口就是老韭……不對(duì)，老股民了。
K線圖是箱型圖的一個(gè)變種，也叫蠟燭圖，主要應(yīng)用在股票、幣市、期貨等市場的交易數(shù)據(jù)上。一個(gè)K線圖包含了陽線、陰線兩個(gè)大類。陽線代表上漲，陰險(xiǎn)代表下跌。
每個(gè)類型中，同時(shí)還表示當(dāng)日成交中的最低價(jià)和最高價(jià)，柱體代表的是開盤價(jià)和收盤價(jià)。在我國股市，上漲用紅色，下跌用綠色，在幣市則相反。
K線圖實(shí)際上動(dòng)手設(shè)計(jì)它的情況微乎其微（只用開發(fā)好的），我們只要了解它的原理即可。
4.3.2 設(shè)計(jì)建議
K線圖基本只應(yīng)用在和理財(cái)有關(guān)的證券行業(yè)中，在會(huì)出現(xiàn) K 線圖的圖表模塊中，必然會(huì)出現(xiàn)相應(yīng)的交互操作。如左右滑動(dòng)、放大縮小，它是一個(gè)具備響應(yīng)模式的圖表類型，包含兩種狀態(tài)。
如果空間足夠，則使用箱體和虛線的常規(guī)設(shè)計(jì)。如果顯示的對(duì)象密集，那么就會(huì)以一條直線來顯示，忽略掉箱體的部分。
同時(shí)，不同的場景，對(duì)于陰陽線箱體的展示會(huì)有一定區(qū)別，除了色彩外，還會(huì)應(yīng)用實(shí)心和描邊的區(qū)別。
因?yàn)樯婕柏?cái)產(chǎn)、交易，針對(duì)K線圖的設(shè)計(jì)，一定要做好前期的業(yè)務(wù)調(diào)研，以及對(duì)比不同的競品，降低設(shè)計(jì)出錯(cuò)的概率。
4.4 散點(diǎn)類圖表
4.4.1 基本認(rèn)識(shí)
散點(diǎn)圖是一個(gè)使用也非常頻繁的圖表，它通過在 XY 坐標(biāo)軸中添加圓點(diǎn)來表示不同對(duì)象的分布情況。
常見的散點(diǎn)圖就是對(duì)普通二維坐標(biāo)軸進(jìn)行 “打點(diǎn)” 的圖表，每個(gè)點(diǎn)代表統(tǒng)計(jì)學(xué)中的一個(gè) “樣本” 或數(shù)學(xué)概念中的一個(gè) “定量”，下面我們就用樣本來稱呼每個(gè)散點(diǎn)。
每個(gè)樣本在散點(diǎn)圖中必然包含兩種以上的信息，一個(gè)是緯度值，一個(gè)是數(shù)值，這樣我們才能確定它在坐標(biāo)軸中的位置。
當(dāng)然，針對(duì)樣本并不是只可以包含兩種信息，比如表示班級(jí)成員身高體重的散點(diǎn)圖，我們可以再引入男女的對(duì)比，對(duì)散點(diǎn)圖進(jìn)行色彩的區(qū)分。再者，還可以添加體脂率，用每個(gè)點(diǎn)的大小來表示。
散點(diǎn)圖是一個(gè)很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會(huì)看到散點(diǎn)圖內(nèi)出現(xiàn)了一個(gè)線段，那條線段叫做 “回歸線”，他是通過散點(diǎn)分布情況，計(jì)算出來的一條均值線段。這個(gè)線段不僅可以大致標(biāo)識(shí)數(shù)據(jù)的趨勢，同時(shí)可以用來做概率計(jì)算和預(yù)測。
回歸線包含指數(shù)、線性、多項(xiàng)式三種，對(duì)應(yīng)繪制出來的回歸線是曲線、直線、還是波浪線。
4.4.2 設(shè)計(jì)建議
散點(diǎn)圖的圓點(diǎn)可以使用軟件的 Symbol 功能進(jìn)行創(chuàng)建 ，確保后續(xù)可以統(tǒng)一修改配色和樣式，尤其是在包含多種色彩的散點(diǎn)圖中。
散點(diǎn)圖的繪制不一定要完美契合數(shù)據(jù)內(nèi)容，但是在大致的分布和數(shù)量上要和實(shí)際情況貼合。如果僅僅是隨意的進(jìn)行分布、均分，那么這個(gè)圖表就會(huì)顯得非常的不嚴(yán)謹(jǐn)和隨意，比如下圖圖表。
4.5 其它類型
4.5.1 地圖圖表
地圖圖表，是將抽象的 XY 二維坐標(biāo)軸替換成地圖類圖形的圖表。本質(zhì)上它們也包含 XY 軸，所以一樣可以將數(shù)據(jù)內(nèi)容進(jìn)行映射。
最常見的，就是地圖散點(diǎn)圖了。背景由實(shí)際的地圖完成，坐標(biāo)則由經(jīng)緯度體系來記錄。這是可視化設(shè)計(jì)中非常常見的中心圖表應(yīng)用類型。
同時(shí)，背景的地圖并不是只包含地理信息地圖，還可以是球場、商場、網(wǎng)頁、建筑表面等內(nèi)容。
4.5.2 熱力圖
熱力圖則是地圖和散點(diǎn)圖的合體，也是在二維坐標(biāo)體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對(duì)比。例如區(qū)域的降水量、臺(tái)風(fēng)風(fēng)力表現(xiàn)、網(wǎng)頁的點(diǎn)擊區(qū)域等等。
熱力圖本質(zhì)上也是將坐標(biāo)軸切割成了若干小塊（樣本），每個(gè)小塊有一個(gè)對(duì)應(yīng)的數(shù)值，然后通過算法繪制邊緣和不同的漸變。
它也是很少直接通過設(shè)計(jì)軟件繪制的圖表，需要借助插件導(dǎo)入數(shù)據(jù)來實(shí)現(xiàn)，我們只需要確認(rèn)色彩樣式即可。
構(gòu)成圖表相對(duì)其它圖表來說是最簡單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹等類型。
5.1 餅圖類圖表
5.1.1 基本認(rèn)識(shí)
前面看到的圖表大多是遵循我們小學(xué)就看過的 XY 軸坐標(biāo)系（笛卡爾坐標(biāo)系）建立的，但是餅圖并不需要考慮坐標(biāo)空間的問題。它是一個(gè)依靠角度來反映數(shù)據(jù)的圖表類型。
餅圖作為一種常見圖表，包含兩個(gè)大類，一般餅圖和環(huán)形圖。如果沒有一些特殊的交互或者復(fù)雜衍生類別的話，環(huán)形圖其實(shí)就是餅圖中間鏤空的版本……
餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度，以及它們對(duì)應(yīng)的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數(shù)不能過多?？刂圃?2-9 條比較合理，數(shù)量過多就會(huì)導(dǎo)致圖形失去實(shí)際的使用意義。
除此以外，南丁格爾圖、旭日?qǐng)D，也是餅圖的延伸，通過添加額外的維度或者子分類，對(duì)餅圖中的每個(gè)對(duì)象進(jìn)行額外的示意。
5.1.2 設(shè)計(jì)建議
餅圖作為基礎(chǔ)圖形，多數(shù)情況下也是由設(shè)計(jì)師自己完成的。但很多新手沒有找到要領(lǐng)，導(dǎo)致做出來圖形非常的別扭。我提供一個(gè)繪制的簡單的思路，那就是通過繪制不同的三角形來拼裝出一個(gè)餅圖。
這類圖形繪制的要點(diǎn)是確保三角形在圓心中的頂點(diǎn)時(shí)一致的，如果對(duì)比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個(gè)基礎(chǔ)圖形做背景，貼著它畫即可。
南丁格爾圖也可以沿用上面的畫法，那就是對(duì)每個(gè)維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區(qū)域了。
這么做的好處，是將圖形的每個(gè)維度獨(dú)立成一個(gè)單獨(dú)的矢量圖形，方便我們后續(xù)進(jìn)行上色。
5.2 堆疊類圖表
5.2.1 基本認(rèn)識(shí)
堆疊類圖表算是一個(gè)相對(duì)不那么嚴(yán)謹(jǐn)?shù)念悇e，因?yàn)樗鄶?shù)由其它基礎(chǔ)圖表發(fā)展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。
之所以把它歸類到分布而不是其它大類下的圖表子項(xiàng)，原因是只要出現(xiàn)堆疊，就意味著這個(gè)圖表的核心目的是展示構(gòu)成內(nèi)容而不是對(duì)比或者分布。
在柱狀類堆疊圖中，通過將每個(gè)柱體切割成不同的更小柱體來呈現(xiàn)子分類的占比。面積堆疊圖，則是單純的把折線圖進(jìn)行填充然后疊加的圖形。
而百分比堆疊，雖然看起來和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標(biāo)準(zhǔn)，往下的每一級(jí)對(duì)象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。
5.2.2 設(shè)計(jì)建議
堆疊類圖形的設(shè)計(jì)，最難的不是圖形，而是色彩的應(yīng)用上。之所以說堆疊只要應(yīng)用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現(xiàn)層級(jí)，對(duì)于我們的視覺吸引力遠(yuǎn)遠(yuǎn)大于圖形本身的輪廓。
而將豐富的色彩無縫拼接在一起，是最容易翻車的配色場景。在這種狀態(tài)下，建議大家只用臨近色來實(shí)現(xiàn)下級(jí)分類的搭配，千萬不要使用色相差異過大的色彩。
而對(duì)于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因?yàn)檫@些折線并不一定會(huì)完美上下覆蓋，當(dāng)中間出現(xiàn)交匯的時(shí)候，不至于信息被遮擋。
5.3 矩陣樹圖
5.3.1 基本認(rèn)識(shí)
矩形樹圖最初是一個(gè)設(shè)計(jì)用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區(qū)域來表示不同維度的占比，以及位置。
雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點(diǎn)是位置信息和并列關(guān)系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現(xiàn)，在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。
當(dāng)然上方是最理想的情況，通常矩陣樹圖是為了對(duì)一些更抽象的概念實(shí)現(xiàn)矩陣化的排列。而這個(gè)排列中，還有個(gè)非常關(guān)鍵的要素是其中的 ”樹“ 字。
因?yàn)榫仃囍械拿總€(gè)切割出來的矩形，都可以作為一個(gè)獨(dú)立矩形進(jìn)行下一級(jí)的分割，實(shí)現(xiàn)一個(gè)類樹狀圖結(jié)構(gòu)的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點(diǎn)擊進(jìn)入下一層級(jí)的。
而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現(xiàn)它的占比，而不是單純的結(jié)構(gòu) 。所以如果只是簡單表現(xiàn)層級(jí)結(jié)構(gòu)，如企業(yè)組織架構(gòu)、知識(shí)點(diǎn)拆分之類的，要用樹狀圖而不能使用矩陣樹圖。
5.3.2 設(shè)計(jì)建議
在這類圖表在項(xiàng)目中基本不會(huì)獨(dú)立開發(fā)出來，因?yàn)槠鋸?fù)雜度基本都會(huì)使用開源代碼。
設(shè)計(jì)師的主要工作，就是根據(jù)對(duì)應(yīng)開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規(guī)范即可。
聯(lián)系圖表，是用來展示維度之間聯(lián)系的圖表類型，包含?；?、關(guān)系、和弦、韋恩圖、依賴關(guān)系圖等。
聯(lián)系類圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)脫離直接手工繪制的范疇，所以我們只簡單介紹其中幾個(gè)有代表性的圖表且給出設(shè)計(jì)建議了。
6.1 ?；鶊D類圖表
?；鶊D是一個(gè)用來描述某維度值 ”流動(dòng)“ 到其它維度走勢的流動(dòng)圖表。
這是一個(gè)比較復(fù)雜的概念，比如下面的概念，不同國家人口的流動(dòng)，人還是原來那些人（數(shù)值），但他們以不同的數(shù)量比例，移動(dòng)到不同的國家（維度）。
?；鶊D的應(yīng)用，關(guān)鍵在對(duì)數(shù)值遷移流向的關(guān)注上，它適合應(yīng)用的場景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類似新冠患者流動(dòng)城區(qū)、地點(diǎn)的表示。
?；鶊D的數(shù)值總量通常是不變的，會(huì)包含起點(diǎn)和終點(diǎn)的維度，而維度的長短即代表其包含的數(shù)值總量（權(quán)重）。
它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準(zhǔn)的流線。
6.2 關(guān)系類圖表
關(guān)系圖是大家比較不會(huì)陌生的圖表類型，它在各類工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁面關(guān)系圖等。
關(guān)系圖中包含了大量的節(jié)點(diǎn)，節(jié)點(diǎn)之間還有對(duì)應(yīng)的關(guān)系，同構(gòu)線段進(jìn)行鏈接。常見的關(guān)系圖有兩種類型，一種是力導(dǎo)圖，一種是弧長鏈接圖。
力導(dǎo)圖這名字也很難理解，源于力學(xué)中粒子存在某種互斥又具有引力的規(guī)律，粒子在兩種力的作用下從初期的隨機(jī)性會(huì)不斷位移趨于平衡有序（讀書多的好處？）。
力導(dǎo)圖通常有一個(gè)起點(diǎn)，然后去關(guān)聯(lián)后續(xù)的其它節(jié)點(diǎn)，如果節(jié)點(diǎn)之間還有關(guān)聯(lián)，它也可以對(duì)這些節(jié)點(diǎn)的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對(duì)多的關(guān)系，也表現(xiàn)多對(duì)多的關(guān)系，甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強(qiáng)關(guān)聯(lián) ”聚類“ 信息。
而弧長鏈接圖，則是通過弧線對(duì)節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線的展示。
6.3 和弦圖
和弦圖是環(huán)形關(guān)系圖和?；鶊D結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴關(guān)系和強(qiáng)度 ，鏈接的線段不再是粗細(xì)統(tǒng)一的而是具有粗細(xì)比例的標(biāo)識(shí)，且維度之間的長度也有表示。
這類圖表常用于社會(huì)學(xué)、生物學(xué)等學(xué)科的研究統(tǒng)計(jì)結(jié)果繪制上。如果單純?yōu)g覽，看上去非常復(fù)雜，所以正確的使用形式是可以進(jìn)行指定維度的展示和隱藏的。
6.4 韋恩圖
韋恩圖，它是所有學(xué) UI、UX 設(shè)計(jì)的老朋友了，一個(gè)用圖形層疊相交來表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。
韋恩圖的使用相比起來沒有那么嚴(yán)格的數(shù)學(xué)運(yùn)算，它只是一種關(guān)系表現(xiàn)的方法，可以對(duì)各種無法量化的對(duì)象進(jìn)行關(guān)系的陳述。比如，UX 設(shè)計(jì)師應(yīng)該具備的知識(shí)點(diǎn)……
下面是超人的電話亭團(tuán)隊(duì)持續(xù)整理收集到的可視化組件庫工具網(wǎng)站，以供參考：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
文章來源：站酷 作者： 酸梅干超人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì) ( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司 ，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
