構(gòu)成類(lèi)圖表應(yīng)用

構(gòu)成圖表相對(duì)其它圖表來(lái)說(shuō)是最簡(jiǎn)單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹(shù)等類(lèi)型。堆疊類(lèi)的設(shè)計(jì)前面我們已經(jīng)說(shuō)過(guò)，我們來(lái)介紹另外兩種圖表的繪制形式。

1. 餅圖和環(huán)形類(lèi)圖表

餅圖和環(huán)形圖，說(shuō)到底其實(shí)是一種東西，只是一個(gè)用的是純圓，一個(gè)用的是圓中間鏤空的環(huán)形。它們都通過(guò)角度的占比來(lái)表現(xiàn)不同對(duì)象的占比值。

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

餅圖的設(shè)計(jì)有很多靈活的實(shí)現(xiàn)方式，但很多新手沒(méi)有找到要領(lǐng)，導(dǎo)致做出來(lái)圖形非常的別扭。我提供一個(gè)繪制的簡(jiǎn)單的思路，那就是通過(guò)繪制不同的三角形來(lái)拼裝出一個(gè)餅圖。

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

還有一個(gè)大名鼎鼎的類(lèi)餅圖，南丁格爾圖，它的來(lái)源很多地方有科普我就不再啰嗦了，大家可以自行百度。這類(lèi)圖形的繪制，也可以沿用上面的畫(huà)法，那就是對(duì)每個(gè)維度的三角形采取不同直徑的圓做蒙版，就可以畫(huà)出不同半徑的占比區(qū)域了。

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

學(xué)設(shè)計(jì)路上必然少不了的一個(gè)知識(shí)點(diǎn)，就是認(rèn)識(shí)色環(huán)了，如果我們要對(duì)這類(lèi)圓形圖表添加豐富的色彩，使用色環(huán)的配色方式是最合適也最自然的。即從初始或最大的維度使用系統(tǒng)主色，然后后續(xù)的色彩根據(jù)色環(huán)的順序依次填充，就能得到相對(duì)滿(mǎn)意的結(jié)果了。

2. 矩形樹(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ù)圖。

聯(lián)系圖表

聯(lián)系圖表，是用來(lái)展示維度之間聯(lián)系的圖表類(lèi)型，包含?；㈥P(guān)系、和弦、韋恩圖、依賴(lài)關(guān)系圖等。聯(lián)系類(lèi)圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)不是簡(jiǎn)單通過(guò)獨(dú)立設(shè)計(jì)可以完成的，所以我們只簡(jiǎn)單介紹其中幾個(gè)有代表的圖形。

1. ?；鶊D

桑基圖是一個(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)品用戶(hù)的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類(lèi)似新冠患者流動(dòng)城區(qū)、地點(diǎn)的表示。

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

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

2. 關(guān)系圖

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

關(guān)系圖中包含了大量的節(jié)點(diǎn)，節(jié)點(diǎn)之間還有對(duì)應(yīng)的關(guān)系，同構(gòu)線(xiàn)段進(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ò)弧線(xiàn)對(duì)節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線(xiàn)的展示。

3. 和弦圖

和弦圖是環(huán)形關(guān)系圖和桑基圖結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴(lài)關(guān)系和強(qiáng)度，鏈接的線(xiàn)段不再是粗細(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)行指定維度的展示和隱藏的。

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ú)法量化的維度進(jìn)行關(guān)系的陳述。比如，UX 設(shè)計(jì)師應(yīng)該具備的知識(shí)點(diǎn)……

結(jié)語(yǔ)

好了，圖表的輸出，就先做到這里了，目前回顧的情況感覺(jué)還有很多可以寫(xiě)和輸入的圖表類(lèi)型，我們最近就會(huì)合并一篇更完整，制作更精良的完整圖表輸出干貨出來(lái)。