圖表的作用在于對(duì)數(shù)據(jù)的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類(lèi)型。下面就做下相應(yīng)解釋方便大家理解～

 

1.1 圖表是什么

在今天，隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心，圖表在 B 端設(shè)計(jì)的地位越發(fā)重要。

那么什么叫圖表呢？

圖表指的是可以直觀展示統(tǒng)計(jì)信息屬性和數(shù)值的圖形表格，對(duì)于多數(shù)人來(lái)說(shuō)第一次接觸圖表概念都源自中小學(xué)計(jì)算機(jī)課程中的 Office Excel 表格教學(xué)。

 

要理解圖表，你就繞不開(kāi) Excel 這個(gè)軟件或其功能形式。我們都知道 Excel 是一個(gè)表格工具，可以任意填寫(xiě)表格化的信息內(nèi)容進(jìn)去。

但那只是呈現(xiàn)出來(lái)的表象，Excel 的真實(shí)身份應(yīng)該是一個(gè)數(shù)據(jù)記錄工具，通過(guò)這種表格形式記錄，比如班級(jí)學(xué)生成績(jī)、客戶聯(lián)系方式、倉(cāng)庫(kù)進(jìn)銷(xiāo)記錄等等。每一條記錄下的信息都是一條獨(dú)立的 “數(shù)據(jù)”。

 

盯著表格看，我們確實(shí)可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是，數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已？顯然是否定的。

我們統(tǒng)計(jì)數(shù)據(jù)的目的，還包括要從眾多的數(shù)據(jù)條目中獲得反映真實(shí)情況的 “規(guī)律”、“趨勢(shì)”，如果我們只盯著數(shù)據(jù)條目一條條的瀏覽，是很難找出這些信息的。

于是，人類(lèi)就發(fā)明了圖表這種可視化工具，幫助我們對(duì)數(shù)據(jù)進(jìn)行總結(jié)，用更直觀的視覺(jué)方式來(lái)認(rèn)識(shí)數(shù)據(jù)和找出規(guī)律和趨勢(shì)，這也是為什么 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)化的過(guò)程當(dāng)然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。

它們是組成絕大多數(shù)圖表的基石，比如看下面的表格，一次體檢中有三個(gè)班級(jí)的5個(gè)同學(xué)，他們的身高、體重、體脂率、肌肉含量、視力各不相同。

 

我們可以從中挑選維度和數(shù)值，比如姓名做緯度（X軸），體脂率作為數(shù)值（Y軸），那么就可以生成基礎(chǔ)柱狀圖表。

 

從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對(duì)象，縱向數(shù)值則表示你要顯示該維度的哪一類(lèi)數(shù)據(jù)。

緯度通常指某個(gè)具體的人、日期、事件、分類(lèi)，通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類(lèi)型，重點(diǎn)要記得數(shù)值是指 “數(shù)據(jù)類(lèi)型”，而不是指具體的參數(shù)值。

再進(jìn)一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數(shù)值的情況，但顯然對(duì)于不了解數(shù)據(jù)背景的人來(lái)說(shuō)太簡(jiǎn)陋了，不知道它們代表的意義。所以，一個(gè)完整的圖表還會(huì)包含一些 “解釋” 性元素，來(lái)讓觀看者更好的理解圖表內(nèi)容。

所以，一個(gè)完整的圖表中除了中心圖形，還會(huì)包含標(biāo)題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容，用來(lái)提升其閱讀性。

 

以上只是最基礎(chǔ)的示例，不同圖表、內(nèi)容，對(duì)說(shuō)明信息的要求各有不同，我們會(huì)在下方做出一定的解釋。一個(gè)優(yōu)秀的設(shè)計(jì)師要學(xué)會(huì)如何因地制宜，優(yōu)化圖表的內(nèi)容構(gòu)成，并對(duì)展示的信息進(jìn)行取舍。

 

1.3 圖表的類(lèi)型認(rèn)識(shí)

隨著統(tǒng)計(jì)學(xué)的發(fā)展，圖表也經(jīng)歷了一系列的增長(zhǎng)與創(chuàng)新，除了我們常見(jiàn)的幾種圖表外，還發(fā)展出了大量平常看不到，只存在于各自專(zhuān)業(yè)領(lǐng)域的特殊種類(lèi)。但是，它們對(duì)我們的生活和工作也起到產(chǎn)生了重要的影響。

比如在新冠危機(jī)中，政府和專(zhuān)業(yè)機(jī)構(gòu)對(duì)民眾開(kāi)放的數(shù)據(jù)就大量使用了圖表進(jìn)行解釋?zhuān)屛覀兛梢院芮逦牧私馐虑榈淖邉?shì)和真相。

 

之所以有這么多不同圖表，讓人眼花繚亂，在于數(shù)據(jù)所包含的信息和特性不同，導(dǎo)致了它們所總結(jié)的規(guī)律類(lèi)型也不同。

業(yè)界將圖表展示類(lèi)型分成了四個(gè)大類(lèi)，包含比較、分布、構(gòu)成、聯(lián)系，雖然比較簡(jiǎn)陋，但這是新手認(rèn)識(shí)圖表最簡(jiǎn)單的方式。

 

我們簡(jiǎn)單解釋下這四個(gè)分類(lèi)代表的作用：

• 比較：用來(lái)對(duì)比不同對(duì)象數(shù)值高低，比如上一份學(xué)生身高案例

• 分布：展示不同對(duì)象數(shù)值的分布區(qū)間，比如新冠新增分布省份

• 構(gòu)成：表示某子對(duì)象的構(gòu)成關(guān)系，比如班級(jí)中的男女比例

• 聯(lián)系：表示不同對(duì)象之間的聯(lián)系情況，比如不同城市之間的人口流動(dòng)

之后我們就會(huì)以這個(gè)框架，來(lái)解釋不同分類(lèi)下的圖表，幫助大家建立對(duì)圖表的正確認(rèn)識(shí)和設(shè)計(jì)方式。除了這種標(biāo)準(zhǔn)分類(lèi)以外，我還額外做了一個(gè)歸類(lèi)，就是基礎(chǔ)和高級(jí)圖表。

前面提到，一般圖表就只反映緯度、數(shù)值兩個(gè)方面的圖表類(lèi)型，很容易理解。但復(fù)雜的圖表，就會(huì)超過(guò)這個(gè)范圍，它可能包含了多個(gè)維度、多種數(shù)值、甚至第三、第四。

比如下面這個(gè)散點(diǎn)圖，除了身高（緯度）、體重（數(shù)值）外，還表現(xiàn)了個(gè)體（圓點(diǎn)）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區(qū)域、最大最小值標(biāo)識(shí)、體重/身高均值。

 

這已經(jīng)超出一個(gè)沒(méi)有接觸過(guò)統(tǒng)計(jì)的新手認(rèn)知范疇了，是需要具體學(xué)習(xí)才能學(xué)會(huì)如何閱讀和應(yīng)用的圖表。

這還是比較簡(jiǎn)單的高級(jí)圖表，往后還有類(lèi)似桑基圖、K線圖（韭菜的自我修養(yǎng)）、和弦圖等類(lèi)型，它們有各自使用的規(guī)范、參數(shù)，以及應(yīng)用的場(chǎng)景。

 

高級(jí)圖表的復(fù)雜度和抽象性，決定了它的使用門(mén)檻較高，識(shí)別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升，對(duì)圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上，而是提供了視覺(jué)效果更精美，制作過(guò)程更復(fù)雜，閱讀門(mén)檻更低的可視化數(shù)據(jù)展示內(nèi)容。

 

雖然我們?cè)诒酒恼虏粫?huì)拓展到大屏可視化的領(lǐng)域，但是掌握好平面二維的統(tǒng)計(jì)圖表，提升對(duì)統(tǒng)計(jì)目的的認(rèn)識(shí)，是深入學(xué)習(xí)可視化的必要條件。

 

接下來(lái)，我們就要來(lái)介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(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è)考慮要素。

常見(jiàn)的抽象圖表都有一個(gè)完整的矩形區(qū)域，我們要先確定該圖表的具體占比尺寸。然后，對(duì)這個(gè)區(qū)域進(jìn)行布局的規(guī)劃，而這個(gè)布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。

比如，你需要在圖表中增加標(biāo)題和圖形解釋?zhuān)且婚_(kāi)始把圖形做成了上、中、下三欄。有的情況下我們可能還會(huì)增加一個(gè)默認(rèn)存在的文本型解釋模塊，那么還會(huì)再右側(cè)再切割出一個(gè)區(qū)域出來(lái)。

 

除了解釋信息外，我們?cè)谠O(shè)計(jì)中有時(shí)候還不能忽視交互內(nèi)容，比如要包含分類(lèi)篩選、時(shí)間線控制、開(kāi)關(guān)等控件時(shí)，它們準(zhǔn)備放在哪里，也要在這個(gè)階段確定出來(lái)。

 

經(jīng)過(guò)前面的切割，其實(shí)我們就能確定出中間的圖形區(qū)域了。在開(kāi)始繪制前，我們還要對(duì)圖形具備的信息做進(jìn)一步的確認(rèn)，XY 軸坐標(biāo)是否包含文字解釋?zhuān)瀳D類(lèi)是否包含延長(zhǎng)指示線說(shuō)明。

將這些區(qū)域先確定出來(lái)，減去它們的空間，就留下了最終要圖形展示的區(qū)域了。

 

合理的圖表繪制流程變是先布局，確定信息內(nèi)容，最后才集中處理圖形元素。如果對(duì)于前端適配有一定了解的同學(xué)，也就知道在完成這些步驟以后，圖表的適配規(guī)則制定就暢通無(wú)阻了。

 

2.2  圖形分布和比例映射

有了圖形區(qū)域，接著就可以開(kāi)始動(dòng)手畫(huà)圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形，你想要讓自己輸出的作品嚴(yán)謹(jǐn)、質(zhì)量高，就需要應(yīng)用專(zhuān)業(yè)的繪制方法。

圖表圖形的繪制類(lèi)似尺寸作圖，需要應(yīng)用各種參考線、輔助工具來(lái)完成。圖形本身并不是我們用來(lái)做創(chuàng)意的地方，而是要以準(zhǔn)確的方式繪制出來(lái)。它包含兩個(gè)重點(diǎn)，分布和比例映射。

以一個(gè)柱狀圖表舉例，該圖表中維度包含了 7 個(gè)對(duì)象，即應(yīng)該出現(xiàn) 7 個(gè)柱形。那么首先就要通過(guò)等分圖形區(qū)域，來(lái)確定柱形的分布，XY軸文字的對(duì)齊對(duì)象。

 

如果你不羅列對(duì)象具體數(shù)值的話，到這步也就結(jié)束了，但如果對(duì)象數(shù)值是必要顯示內(nèi)容的話，那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。

假設(shè)在上方案例中，Y軸總高是 100px，那么數(shù)值中每 1 小時(shí)的高度就是 100/16 = 6.25px，我們就要用你寫(xiě)下來(lái)的數(shù)值 * 6.25，保證柱狀圖高度比例和你的數(shù)值一致。

 

而類(lèi)似餅圖這樣的圖形中，只要添加了具體數(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ǔ)的問(wèn)題了，不在這里展開(kāi)。

 

2.3 圖表配色的基本原理

在圖表設(shè)計(jì)中的最后一個(gè)問(wèn)題，就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點(diǎn)，選色邏輯和搭配方法。

選色邏輯，就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜，或者頁(yè)面一屏中會(huì)包含大量的圖表。

在這個(gè)基礎(chǔ)上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高，圖表要和主色統(tǒng)一，也建議在主色基礎(chǔ)上做適當(dāng)調(diào)節(jié)，在色系上接近即可。

 

并且，建議新手在繪制圖表的過(guò)程中千萬(wàn)不要用漸變色。即使在各類(lèi)飛機(jī)稿中，漸變色的展示效果也非常的不理想，沒(méi)有任何可讀性。

 

有了選色邏輯，多色搭配的思路也就變得而非常簡(jiǎn)單了，只要重點(diǎn)關(guān)注色環(huán)的配色模式即可。

配色模式多種多樣，包括補(bǔ)色、三角對(duì)立、類(lèi)似、四元、方形、臨近等等，不用想的那么復(fù)雜，只要牢記根據(jù)你的設(shè)計(jì)風(fēng)格需要，你是要相鄰配色，還是等分配色。

相鄰配色，即以一個(gè)色系的臨近色系為標(biāo)準(zhǔn)的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準(zhǔn)，飽和度和明度數(shù)值基本不變的情況下，小幅度變更色相。

 

等分配色，也是保持飽和度、明度的一致，根據(jù)需要的色彩數(shù)量（大于三個(gè)）在色環(huán)中按角度等分，獲得均勻的色彩過(guò)度。

 

配色的方法很簡(jiǎn)單，難的是你們?nèi)绾胃鶕?jù)頁(yè)面的需要、視覺(jué)的體驗(yàn)，合理的運(yùn)用配色的方案，這沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)。要記得圖表配色不是僅僅針對(duì)自身，會(huì)和頁(yè)面其它色彩產(chǎn)生聯(lián)系。

保證相對(duì)平緩、不太激進(jìn)的圖表配色思路，是最安全的做法。 

 

首先解釋第一類(lèi)圖表 —— 比較。

比較圖表的作用，是用來(lái)對(duì)緯度的數(shù)值做對(duì)比的圖表類(lèi)型，直觀對(duì)比不同對(duì)象的強(qiáng)弱、排序、趨勢(shì)。

 

3.1 柱狀類(lèi)圖表

3.1.1 基本認(rèn)識(shí)：

柱狀圖，是一個(gè)使用柱狀圖形反映緯度數(shù)值的二維坐標(biāo)軸圖表，也是我們最常見(jiàn)的圖表類(lèi)型。

在這個(gè)二維坐標(biāo)軸中，我們可以用縱軸代表數(shù)值，也可以用橫軸代表數(shù)值，另一個(gè)軸代表緯度。即在顯示的過(guò)程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。

 

柱狀圖除了每個(gè)對(duì)象包含一類(lèi)數(shù)值的做法以外，也允許包含多個(gè)數(shù)值類(lèi)型，每個(gè)類(lèi)型使用一種顏色表示，這種圖表叫分組柱狀。

 

并且，柱狀圖作為最基礎(chǔ)的圖形，衍生了非常多下級(jí)的柱狀類(lèi)型。包括：堆疊柱狀、子彈圖、正負(fù)混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類(lèi)圖表，都是作為對(duì)比來(lái)使用的。后續(xù)會(huì)有進(jìn)一步提示。

 

3.1.2 設(shè)計(jì)建議：

柱狀圖通過(guò)柱體的長(zhǎng)短，可以直接對(duì)比不同緯度數(shù)值的高低，但使用也有一定的差別。

緯度之間關(guān)聯(lián)性不是太強(qiáng)，或者按時(shí)間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時(shí)可能猝死的打工人一周睡眠時(shí)間（見(jiàn)左圖）。而涉及排名或者時(shí)間的數(shù)據(jù)組，就適合使用縱向排列的，比如 Geekbench 展現(xiàn)不同 Mac 處理器強(qiáng)弱的排行榜（見(jiàn)右圖）（os：Pro 居然比 M1 還低？）。

 

兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān)，在APP中，橫向排列的柱狀圖可以顯示的數(shù)量非常有限，想放更多緯度就要左右滾動(dòng)，體驗(yàn)不佳。而使用縱向排列則對(duì)空間的要求沒(méi)那么高。

 

3.2 折線類(lèi)圖表

3.2.1 基本認(rèn)識(shí)

折線圖也是基礎(chǔ)圖表，通過(guò)創(chuàng)建端點(diǎn)并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類(lèi)似，但兩者在使用上是有一定區(qū)別的。

當(dāng)我們要選擇使用柱狀圖的時(shí)候，往往關(guān)注數(shù)值的總量，或者維度代表的是不同的對(duì)象，比如不同 CPU 之間的跑分對(duì)比。但是折線圖的使用就沒(méi)有那么單一，它主要應(yīng)用在單一對(duì)象的單個(gè)維度變化對(duì)比中。

比如，我們監(jiān)控 CPU 的占用頻率，那么維度使用時(shí)間，數(shù)值用百分比，這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開(kāi)，但如果維度改成了當(dāng)前時(shí)間不同核心的占用數(shù)值、溫度，那么我們就肯定不會(huì)用折線圖來(lái)表示。

 

折線圖的使用是要通過(guò)線段的曲折來(lái)反映數(shù)值的波動(dòng)，在應(yīng)用過(guò)程中往往不作為一個(gè)靜態(tài)的圖表展示，而是應(yīng)用于監(jiān)控的場(chǎng)景，比如監(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ì)來(lái)探討，折線圖也是進(jìn)行對(duì)比的圖形，如果沒(méi)有直觀的波動(dòng)，那么這個(gè)圖形帶來(lái)的信息量就非常有限。曲線會(huì)因?yàn)閳A角的緣故而降低波動(dòng)帶來(lái)的沖擊力，甚至抹平這種對(duì)比。

只有在必定會(huì)連續(xù)出現(xiàn)極大波動(dòng)的圖表中才適合使用曲線，例如圍繞在會(huì)有一個(gè)中間值數(shù)值，曲線進(jìn)行正負(fù)兩端移動(dòng)的類(lèi)型，比如監(jiān)控呼吸中含氧量（呼和吸一個(gè)周期的維度）。

 

所以，盡量避免曲線的應(yīng)用，不僅畫(huà)起來(lái)麻煩，而且實(shí)際使用效果極差。

作為折線圖，在一些數(shù)值代表完成、占滿、填充的概念時(shí)，往往就會(huì)覺(jué)得單純的線段表示不夠直觀，于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個(gè)數(shù)值類(lèi)型不夠要加入多個(gè)數(shù)值和線段的就叫折線堆疊圖。

 

3.3 雷達(dá)類(lèi)圖表

3.3.1 基本認(rèn)識(shí)

雷達(dá)圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達(dá)圖是一種偏向概括性的圖表，并不能用來(lái)體現(xiàn)大數(shù)值和高頻變化，是用來(lái)對(duì)比同一個(gè)對(duì)象不同維度數(shù)值的圖表。

雷達(dá)圖的應(yīng)用，首先要確認(rèn)出不低于5個(gè)的維度，并且這些維度可以使用相同的數(shù)值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個(gè)對(duì)象身上拆分出來(lái)的，而不是 5 個(gè)維度指代不同的對(duì)象。

簡(jiǎn)單來(lái)講，就是我們可以用雷達(dá)圖來(lái)表現(xiàn)一個(gè)學(xué)生不同科目的水準(zhǔn)，這樣雷達(dá)圖可以大致概括這個(gè)學(xué)生科目掌握情況和相對(duì)的強(qiáng)弱。

但是不應(yīng)該用雷達(dá)圖來(lái)表示不同學(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)先制定說(shuō)明內(nèi)容區(qū)域，然后再開(kāi)始圖形的設(shè)計(jì)。

因?yàn)樵诶走_(dá)圖中，我們對(duì)維度的描述，基本只能設(shè)計(jì)到不同端點(diǎn)外部，那么文字本身的數(shù)量、占比，就會(huì)對(duì)圖形的顯示產(chǎn)生非常大的影響，并且在雷達(dá)圖中維度的描述文字是必須的，過(guò)度精簡(jiǎn)還是用其它方式體現(xiàn)都很不直觀，所以?xún)?yōu)先預(yù)留足夠的文字空間。

然后，根據(jù)我們需要的維度數(shù)量繪制一個(gè)等邊的多邊形，并設(shè)置合理的數(shù)值。

 

之后，才是確定出這個(gè)多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級(jí)，那么就要畫(huà) 5 個(gè)堆疊的等邊形，那么我們就從最大的那個(gè)等邊形入手，再?gòu)?fù)制4個(gè)出來(lái)，對(duì)它們分別乘以 80%、60%、40%、20% 即可。

最后，再將每個(gè)維度對(duì)應(yīng)數(shù)值根據(jù)百分比將端點(diǎn)打在維度的直線上，用鋼筆工具將每個(gè)端點(diǎn)連接起來(lái)創(chuàng)建一個(gè)完整的不規(guī)則多邊形，就完成了雷達(dá)圖的設(shè)計(jì)。

 

如果想要在一個(gè)雷達(dá)圖添加多個(gè)對(duì)象，只要用不同顏色描邊繪制對(duì)應(yīng)數(shù)量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來(lái)完成，否則可能遮擋后方的端點(diǎn)，導(dǎo)致圖形不全。

 

3.4 其它類(lèi)型

3.4.1 階梯圖

階梯圖是一種用來(lái)對(duì)比前后數(shù)值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關(guān)注每個(gè)對(duì)象增減的份額大小。

不僅僅是關(guān)注波動(dòng)，而是更具體的值。類(lèi)似關(guān)注一只股票全年的股價(jià)漲跌情況，每個(gè)月漲跌的具體額度，就適合使用階梯圖表現(xiàn)。

 

3.4.2 漏斗圖

漏斗圖因?yàn)殚L(zhǎng)得像漏斗而聞名。雖然這個(gè)圖形看起來(lái)像一個(gè)錐形或者三角形，但本質(zhì)上漏斗只是條形圖（橫向柱狀圖）的變體。

漏斗圖是一種對(duì)階段進(jìn)行分層表現(xiàn)的圖形，從上到下的順序中，數(shù)值一定會(huì)呈現(xiàn)衰減的趨勢(shì)（起碼不會(huì)變大），然后從上到下的柱體就越來(lái)越小。

例如，UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型，就會(huì)建立一個(gè)從用戶訪問(wèn)主頁(yè)，到最后完成下單的轉(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è)的長(zhǎng)短數(shù)據(jù)。

 

第二個(gè)解釋的圖表類(lèi)型 —— 分布。主要是用來(lái)研究數(shù)據(jù)分布情況的圖表，對(duì)不同數(shù)據(jù)的統(tǒng)計(jì)分布狀況進(jìn)行描述。

 

4.1  直方類(lèi)圖表

4.1.1 基本認(rèn)識(shí)

直方圖是一個(gè)看起來(lái)和普通柱狀圖非常接近的圖表類(lèi)型，是一個(gè)用來(lái)表示同一個(gè)緯度范圍中，不同區(qū)間頻率的圖形。

 

直方圖是一個(gè)二級(jí)圖表，是對(duì)一級(jí)數(shù)據(jù)的進(jìn)一步轉(zhuǎn)化。比如看上圖案例，散點(diǎn)圖（下面會(huì)說(shuō)）本身記錄了不同的數(shù)據(jù)的位置，而直方圖就是記錄在發(fā)生在這個(gè)緯度內(nèi)的次數(shù)。

直方圖乍一看很像柱狀圖，但實(shí)際應(yīng)用場(chǎng)景往往使用了非常密集的柱體，讓它看上去像折線圖。對(duì)于設(shè)計(jì)師來(lái)說(shuō)和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。

 

當(dāng)視覺(jué)設(shè)計(jì)師、攝影師在學(xué)習(xí)處理位圖的時(shí)候，就必然要學(xué)會(huì)直方圖的讀取，它并不是用來(lái)讓我們學(xué)習(xí)如何對(duì)比前后數(shù)據(jù)差異的，而是讓我們可以快速掌握這張圖片中像素點(diǎn)在不同通道的分布量。

直方圖是統(tǒng)計(jì)學(xué)中的 “頻率分布” 的視覺(jué)表現(xiàn)形式，需要確保使用的場(chǎng)景符合直方圖的定義，以及確保用戶能理解圖表內(nèi)容。

 

4.1.2 設(shè)計(jì)建議

對(duì)于直方圖來(lái)說(shuō)，如果維度對(duì)象少，只要獲得相關(guān)的信息和數(shù)值，就可以像柱狀圖一樣來(lái)繪制。

如果是針對(duì)一些比較專(zhuān)業(yè)的場(chǎng)景，如上方的通道直方圖，那么就要放棄自己完成的目標(biāo)，一定要借助相關(guān)插件，或者使用 Excel 等工具實(shí)現(xiàn)后再導(dǎo)入進(jìn)來(lái)。

 

4.2 箱型類(lèi)圖表

4.2.1 基本認(rèn)識(shí)

箱型圖也叫盒須圖，和直方圖類(lèi)似，它也是一個(gè)二級(jí)圖表，即它不是直觀反應(yīng)原始數(shù)據(jù)，而是對(duì)原始數(shù)據(jù)的狀態(tài)進(jìn)行轉(zhuǎn)譯。圖表中的每個(gè)箱型反應(yīng)一組數(shù)據(jù)的分散情況資料，每個(gè)箱型包含下面這些信息元素。

 

箱型圖反應(yīng)的是一種 “大概” 情況，它不是一種用來(lái)進(jìn)行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成，下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。

這里的排列主要通過(guò) “數(shù)值大小” 來(lái)決定，而不是分布數(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ù)本身的重要性來(lái)判斷。有些場(chǎng)景對(duì)最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點(diǎn)關(guān)注箱體的話，則可以對(duì)觸須進(jìn)行弱化使用虛線。

同時(shí)，箱型圖的主要識(shí)別信息是 Y 軸的長(zhǎng)度，一個(gè)美觀易度的箱型圖，箱體寬度盡量控制在一個(gè)比較纖細(xì)的水平，不要為了填充畫(huà)面的空白強(qiáng)行做寬。

 

4.3  K線圖

4.3.1 基本認(rèn)識(shí)

相信稍微了解過(guò)股票還是基金的同學(xué)，對(duì)K線圖那可就一點(diǎn)也不見(jiàn)外了，下陽(yáng)線、收盤(pán)光頭陽(yáng)、小陽(yáng)線，開(kāi)口就是老韭……不對(duì)，老股民了。

K線圖是箱型圖的一個(gè)變種，也叫蠟燭圖，主要應(yīng)用在股票、幣市、期貨等市場(chǎng)的交易數(shù)據(jù)上。一個(gè)K線圖包含了陽(yáng)線、陰線兩個(gè)大類(lèi)。陽(yáng)線代表上漲，陰險(xiǎn)代表下跌。

每個(gè)類(lèi)型中，同時(shí)還表示當(dāng)日成交中的最低價(jià)和最高價(jià)，柱體代表的是開(kāi)盤(pán)價(jià)和收盤(pán)價(jià)。在我國(guó)股市，上漲用紅色，下跌用綠色，在幣市則相反。

 

K線圖實(shí)際上動(dòng)手設(shè)計(jì)它的情況微乎其微（只用開(kāi)發(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)模式的圖表類(lèi)型，包含兩種狀態(tài)。

如果空間足夠，則使用箱體和虛線的常規(guī)設(shè)計(jì)。如果顯示的對(duì)象密集，那么就會(huì)以一條直線來(lái)顯示，忽略掉箱體的部分。

同時(shí)，不同的場(chǎng)景，對(duì)于陰陽(yáng)線箱體的展示會(huì)有一定區(qū)別，除了色彩外，還會(huì)應(yīng)用實(shí)心和描邊的區(qū)別。

因?yàn)樯婕柏?cái)產(chǎn)、交易，針對(duì)K線圖的設(shè)計(jì)，一定要做好前期的業(yè)務(wù)調(diào)研，以及對(duì)比不同的競(jìng)品，降低設(shè)計(jì)出錯(cuò)的概率。

 

4.4 散點(diǎn)類(lèi)圖表

4.4.1 基本認(rèn)識(shí)

散點(diǎn)圖是一個(gè)使用也非常頻繁的圖表，它通過(guò)在 XY 坐標(biāo)軸中添加圓點(diǎn)來(lái)表示不同對(duì)象的分布情況。

常見(jiàn)的散點(diǎn)圖就是對(duì)普通二維坐標(biāo)軸進(jìn)行 “打點(diǎn)” 的圖表，每個(gè)點(diǎn)代表統(tǒng)計(jì)學(xué)中的一個(gè) “樣本” 或數(shù)學(xué)概念中的一個(gè) “定量”，下面我們就用樣本來(lái)稱(chēng)呼每個(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)的大小來(lái)表示。

 

散點(diǎn)圖是一個(gè)很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會(huì)看到散點(diǎn)圖內(nèi)出現(xiàn)了一個(gè)線段，那條線段叫做 “回歸線”，他是通過(guò)散點(diǎn)分布情況，計(jì)算出來(lái)的一條均值線段。這個(gè)線段不僅可以大致標(biāo)識(shí)數(shù)據(jù)的趨勢(shì)，同時(shí)可以用來(lái)做概率計(jì)算和預(yù)測(cè)。

回歸線包含指數(shù)、線性、多項(xiàng)式三種，對(duì)應(yīng)繪制出來(lái)的回歸線是曲線、直線、還是波浪線。

 

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 其它類(lèi)型

4.5.1 地圖圖表

地圖圖表，是將抽象的 XY 二維坐標(biāo)軸替換成地圖類(lèi)圖形的圖表。本質(zhì)上它們也包含 XY 軸，所以一樣可以將數(shù)據(jù)內(nèi)容進(jìn)行映射。

最常見(jiàn)的，就是地圖散點(diǎn)圖了。背景由實(shí)際的地圖完成，坐標(biāo)則由經(jīng)緯度體系來(lái)記錄。這是可視化設(shè)計(jì)中非常常見(jiàn)的中心圖表應(yīng)用類(lèi)型。

同時(shí)，背景的地圖并不是只包含地理信息地圖，還可以是球場(chǎng)、商場(chǎng)、網(wǎng)頁(yè)、建筑表面等內(nèi)容。

 

4.5.2 熱力圖

熱力圖則是地圖和散點(diǎn)圖的合體，也是在二維坐標(biāo)體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對(duì)比。例如區(qū)域的降水量、臺(tái)風(fēng)風(fēng)力表現(xiàn)、網(wǎng)頁(yè)的點(diǎn)擊區(qū)域等等。

熱力圖本質(zhì)上也是將坐標(biāo)軸切割成了若干小塊（樣本），每個(gè)小塊有一個(gè)對(duì)應(yīng)的數(shù)值，然后通過(guò)算法繪制邊緣和不同的漸變。

它也是很少直接通過(guò)設(shè)計(jì)軟件繪制的圖表，需要借助插件導(dǎo)入數(shù)據(jù)來(lái)實(shí)現(xiàn)，我們只需要確認(rèn)色彩樣式即可。

 

構(gòu)成圖表相對(duì)其它圖表來(lái)說(shuō)是最簡(jiǎn)單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹(shù)等類(lèi)型。

 

5.1 餅圖類(lèi)圖表

5.1.1 基本認(rèn)識(shí)

前面看到的圖表大多是遵循我們小學(xué)就看過(guò)的 XY 軸坐標(biāo)系（笛卡爾坐標(biāo)系）建立的，但是餅圖并不需要考慮坐標(biāo)空間的問(wèn)題。它是一個(gè)依靠角度來(lái)反映數(shù)據(jù)的圖表類(lèi)型。

餅圖作為一種常見(jiàn)圖表，包含兩個(gè)大類(lèi)，一般餅圖和環(huán)形圖。如果沒(méi)有一些特殊的交互或者復(fù)雜衍生類(lèi)別的話，環(huán)形圖其實(shí)就是餅圖中間鏤空的版本……

 

餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度，以及它們對(duì)應(yīng)的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數(shù)不能過(guò)多。控制在 2-9 條比較合理，數(shù)量過(guò)多就會(huì)導(dǎo)致圖形失去實(shí)際的使用意義。

 

除此以外，南丁格爾圖、旭日?qǐng)D，也是餅圖的延伸，通過(guò)添加額外的維度或者子分類(lèi)，對(duì)餅圖中的每個(gè)對(duì)象進(jìn)行額外的示意。

 

5.1.2 設(shè)計(jì)建議

餅圖作為基礎(chǔ)圖形，多數(shù)情況下也是由設(shè)計(jì)師自己完成的。但很多新手沒(méi)有找到要領(lǐng)，導(dǎo)致做出來(lái)圖形非常的別扭。我提供一個(gè)繪制的簡(jiǎn)單的思路，那就是通過(guò)繪制不同的三角形來(lái)拼裝出一個(gè)餅圖。

 

這類(lèi)圖形繪制的要點(diǎn)是確保三角形在圓心中的頂點(diǎn)時(shí)一致的，如果對(duì)比例的繪制有比較精確的要求，可以通過(guò) Excel 之類(lèi)的工具生成一個(gè)基礎(chǔ)圖形做背景，貼著它畫(huà)即可。

南丁格爾圖也可以沿用上面的畫(huà)法，那就是對(duì)每個(gè)維度的三角形采取不同直徑的圓做蒙版，就可以畫(huà)出不同半徑的占比區(qū)域了。

這么做的好處，是將圖形的每個(gè)維度獨(dú)立成一個(gè)單獨(dú)的矢量圖形，方便我們后續(xù)進(jìn)行上色。

 

5.2 堆疊類(lèi)圖表

5.2.1 基本認(rèn)識(shí)

堆疊類(lèi)圖表算是一個(gè)相對(duì)不那么嚴(yán)謹(jǐn)?shù)念?lèi)別，因?yàn)樗鄶?shù)由其它基礎(chǔ)圖表發(fā)展而來(lái)。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。

之所以把它歸類(lèi)到分布而不是其它大類(lèi)下的圖表子項(xiàng)，原因是只要出現(xiàn)堆疊，就意味著這個(gè)圖表的核心目的是展示構(gòu)成內(nèi)容而不是對(duì)比或者分布。

在柱狀類(lèi)堆疊圖中，通過(guò)將每個(gè)柱體切割成不同的更小柱體來(lái)呈現(xiàn)子分類(lèi)的占比。面積堆疊圖，則是單純的把折線圖進(jìn)行填充然后疊加的圖形。

 

而百分比堆疊，雖然看起來(lái)和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標(biāo)準(zhǔn)，往下的每一級(jí)對(duì)象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。

 

5.2.2 設(shè)計(jì)建議

堆疊類(lèi)圖形的設(shè)計(jì)，最難的不是圖形，而是色彩的應(yīng)用上。之所以說(shuō)堆疊只要應(yīng)用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現(xiàn)層級(jí)，對(duì)于我們的視覺(jué)吸引力遠(yuǎn)遠(yuǎn)大于圖形本身的輪廓。

而將豐富的色彩無(wú)縫拼接在一起，是最容易翻車(chē)的配色場(chǎng)景。在這種狀態(tài)下，建議大家只用臨近色來(lái)實(shí)現(xiàn)下級(jí)分類(lèi)的搭配，千萬(wàn)不要使用色相差異過(guò)大的色彩。

 

而對(duì)于面積和百分比堆疊圖，都建議在配色的過(guò)程中，直接使用帶有透明度的色彩。因?yàn)檫@些折線并不一定會(huì)完美上下覆蓋，當(dāng)中間出現(xiàn)交匯的時(shí)候，不至于信息被遮擋。

 

5.3 矩陣樹(shù)圖

5.3.1 基本認(rèn)識(shí)

矩形樹(shù)圖最初是一個(gè)設(shè)計(jì)用來(lái)表示磁盤(pán)空間占用情況的圖形，通過(guò)將一塊矩形切割成不同的區(qū)域來(lái)表示不同維度的占比，以及位置。

 

雖然也表示占比，但它比餅圖類(lèi)圖表表示的信息更豐富。第一點(diǎn)是位置信息和并列關(guān)系，比如下面的 M1 芯片的示意圖，就是矩陣樹(shù)圖的一種直觀體現(xiàn)，在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。

 

當(dāng)然上方是最理想的情況，通常矩陣樹(shù)圖是為了對(duì)一些更抽象的概念實(shí)現(xiàn)矩陣化的排列。而這個(gè)排列中，還有個(gè)非常關(guān)鍵的要素是其中的 ”樹(shù)“ 字。

因?yàn)榫仃囍械拿總€(gè)切割出來(lái)的矩形，都可以作為一個(gè)獨(dú)立矩形進(jìn)行下一級(jí)的分割，實(shí)現(xiàn)一個(gè)類(lèi)樹(shù)狀圖結(jié)構(gòu)的信息收納。所以，完整的矩陣樹(shù)圖，是可以支持縮放或點(diǎn)擊進(jìn)入下一層級(jí)的。

 

而使用矩陣樹(shù)圖不使用樹(shù)狀圖，原因也在于我們需要表現(xiàn)它的占比，而不是單純的結(jié)構(gòu)。所以如果只是簡(jiǎn)單表現(xiàn)層級(jí)結(jié)構(gòu)，如企業(yè)組織架構(gòu)、知識(shí)點(diǎn)拆分之類(lèi)的，要用樹(shù)狀圖而不能使用矩陣樹(shù)圖。

 

5.3.2 設(shè)計(jì)建議

在這類(lèi)圖表在項(xiàng)目中基本不會(huì)獨(dú)立開(kāi)發(fā)出來(lái)，因?yàn)槠鋸?fù)雜度基本都會(huì)使用開(kāi)源代碼。

設(shè)計(jì)師的主要工作，就是根據(jù)對(duì)應(yīng)開(kāi)源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規(guī)范即可。

 

聯(lián)系圖表，是用來(lái)展示維度之間聯(lián)系的圖表類(lèi)型，包含桑基、關(guān)系、和弦、韋恩圖、依賴(lài)關(guān)系圖等。

聯(lián)系類(lèi)圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)脫離直接手工繪制的范疇，所以我們只簡(jiǎn)單介紹其中幾個(gè)有代表性的圖表且給出設(shè)計(jì)建議了。

 

6.1 桑基圖類(lèi)圖表

桑基圖是一個(gè)用來(lái)描述某維度值 ”流動(dòng)“ 到其它維度走勢(shì)的流動(dòng)圖表。

這是一個(gè)比較復(fù)雜的概念，比如下面的概念，不同國(guó)家人口的流動(dòng)，人還是原來(lái)那些人（數(shù)值），但他們以不同的數(shù)量比例，移動(dòng)到不同的國(guó)家（維度）。

 

桑基圖的應(yīng)用，關(guān)鍵在對(duì)數(shù)值遷移流向的關(guān)注上，它適合應(yīng)用的場(chǎng)景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類(lèi)似新冠患者流動(dòng)城區(qū)、地點(diǎn)的表示。

桑基圖的數(shù)值總量通常是不變的，會(huì)包含起點(diǎn)和終點(diǎn)的維度，而維度的長(zhǎng)短即代表其包含的數(shù)值總量（權(quán)重）。

它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準(zhǔn)的流線。

 

6.2 關(guān)系類(lèi)圖表

關(guān)系圖是大家比較不會(huì)陌生的圖表類(lèi)型，它在各類(lèi)工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁(yè)面關(guān)系圖等。

 

關(guān)系圖中包含了大量的節(jié)點(diǎn)，節(jié)點(diǎn)之間還有對(duì)應(yīng)的關(guān)系，同構(gòu)線段進(jìn)行鏈接。常見(jiàn)的關(guān)系圖有兩種類(lèi)型，一種是力導(dǎo)圖，一種是弧長(zhǎng)鏈接圖。

力導(dǎo)圖這名字也很難理解，源于力學(xué)中粒子存在某種互斥又具有引力的規(guī)律，粒子在兩種力的作用下從初期的隨機(jī)性會(huì)不斷位移趨于平衡有序（讀書(shū)多的好處？）。

 

力導(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) ”聚類(lèi)“ 信息。

而弧長(zhǎng)鏈接圖，則是通過(guò)弧線對(duì)節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線的展示。

 

6.3 和弦圖

和弦圖是環(huán)形關(guān)系圖和桑基圖結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴(lài)關(guān)系和強(qiáng)度，鏈接的線段不再是粗細(xì)統(tǒng)一的而是具有粗細(xì)比例的標(biāo)識(shí)，且維度之間的長(zhǎng)度也有表示。

 

這類(lèi)圖表常用于社會(huì)學(xué)、生物學(xué)等學(xué)科的研究統(tǒng)計(jì)結(jié)果繪制上。如果單純?yōu)g覽，看上去非常復(fù)雜，所以正確的使用形式是可以進(jìn)行指定維度的展示和隱藏的。

 

6.4 韋恩圖

韋恩圖，它是所有學(xué) UI、UX 設(shè)計(jì)的老朋友了，一個(gè)用圖形層疊相交來(lái)表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。

 

韋恩圖的使用相比起來(lái)沒(méi)有那么嚴(yán)格的數(shù)學(xué)運(yùn)算，它只是一種關(guān)系表現(xiàn)的方法，可以對(duì)各種無(wú)法量化的對(duì)象進(jìn)行關(guān)系的陳述。比如，UX 設(shè)計(jì)師應(yīng)該具備的知識(shí)點(diǎn)……

 

下面是超人的電話亭團(tuán)隊(duì)持續(xù)整理收集到的可視化組件庫(kù)工具網(wǎng)站，以供參考：

 

原文地址：站酷

作者：酸梅干超人