構成類圖表應用

構成圖表相對其它圖表來說是最簡單的一種，包含扇形、環形、餅圖、堆疊、矩形樹等類型。堆疊類的設計前面我們已經說過，我們來介紹另外兩種圖表的繪制形式。

1. 餅圖和環形類圖表

餅圖和環形圖，說到底其實是一種東西，只是一個用的是純圓，一個用的是圓中間鏤空的環形。它們都通過角度的占比來表現不同對象的占比值。

餅圖繪制的主要依據是需要表現幾條維度，以及它們對應的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數不能過多。控制在 2-9 條比較合理，數量過多就會導致圖形失去實際的使用意義。

餅圖的設計有很多靈活的實現方式，但很多新手沒有找到要領，導致做出來圖形非常的別扭。我提供一個繪制的簡單的思路，那就是通過繪制不同的三角形來拼裝出一個餅圖。

這類圖形繪制的要點是確保三角形在圓心中的頂點是一致的，如果對比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個基礎圖形做背景，貼著它畫即可。

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

這么做的好處，是將圖形的每個維度獨立成一個單獨的矢量圖形，方便我們后續進行上色。而配色，也是我們最后講解的一點。

學設計路上必然少不了的一個知識點，就是認識色環了，如果我們要對這類圓形圖表添加豐富的色彩，使用色環的配色方式是最合適也最自然的。即從初始或最大的維度使用系統主色，然后后續的色彩根據色環的順序依次填充，就能得到相對滿意的結果了。

2. 矩形樹圖

矩形樹圖最初是一個設計用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區域來表示不同維度的占比，以及位置。

雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點是位置信息和并列關系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現，在矩形中不同位置應用的不同芯片以及其占用的具體面積。

當然上方是最理想的情況，通常矩陣樹圖是為了對一些更抽象的概念實現矩陣化的排列。而這個排列中，還有個非常關鍵的要素是其中的 ”樹“ 字。

因為矩陣中的每個切割出來的矩形，都可以作為一個獨立矩形進行下一級的分割，實現一個類樹狀圖結構的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點擊進入下一層級的。

而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現它的占比，而不是單純的結構。所以如果只是簡單表現層級結構、企業組織架構、知識點拆分之類的，才用樹狀圖而不能使用矩陣樹圖。

聯系圖表

聯系圖表，是用來展示維度之間聯系的圖表類型，包含桑基、關系、和弦、韋恩圖、依賴關系圖等。聯系類圖表中，多數是非常復雜的圖形，已經不是簡單通過獨立設計可以完成的，所以我們只簡單介紹其中幾個有代表的圖形。

1. 桑基圖

桑基圖是一個用來描述某維度值 ”流動“ 到其它維度走勢的流動圖表。這是一個比較復雜的概念，比如下面的概念，不同國家人口的流動，人還是原來那些人(數值)，但他們以不同的數量比例，移動到不同的國家(維度)。

桑基圖的應用，關鍵在對數值遷移流向的關注上，它適合應用的場景在監控產品用戶的跳轉去向，貨物的外貿出口狀況，或類似新冠患者流動城區、地點的表示。

桑基圖的數值總量通常是不變的，會包含起點和終點的維度，而維度的長短即代表其包含的數值總量(權重)。

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

2. 關系圖

關系圖是大家比較不會陌生的圖表類型，它在各類工具性軟件、網站中都有應用。比如天眼查、Wolai 等。

關系圖中包含了大量的節點，節點之間還有對應的關系，同構線段進行鏈接。常見的關系圖有兩種類型，一種是力導圖，一種是弧長鏈接圖。

力導圖這名字也很難理解，源于力學中粒子存在某種互斥又具有引力的規律，粒子在兩種力的作用下從初期的隨機性會不斷位移趨于平衡有序(讀書多的好處?)。

力導圖通常有一個起點，然后去關聯后續的其它節點，如果節點之間還有關聯，它也可以對這些節點的關聯做出連接。它不僅表現一對多的關系，也表現多對多的關系，甚至在極其復雜的關系網中可以呈現成一定的強關聯 ”聚類“ 信息。

而弧長鏈接圖，則是通過弧線對節點進行關聯的圖表，它既可以是環形，也可以是水平橫線的展示。

3. 和弦圖

和弦圖是環形關系圖和桑基圖結合的圖表，它表示結構之間的依賴關系和強度，鏈接的線段不再是粗細統一的而是具有粗細比例的標識，且維度之間的長度也有表示。

這類圖表常用于社會學、生物學等學科的研究統計結果繪制。如果單純瀏覽，看上去非常復雜，所以正確的使用形式是可以進行指定維度的展示和隱藏的。

4. 韋恩圖

韋恩圖，所有學 UI、UX 設計的老朋友了，一個用圖形層疊相交來表示它們關系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。

韋恩圖的使用相比起來沒有那么嚴格的數學運算，它只是一種關系表現的方法，可以對各種無法量化的維度進行關系的陳述。比如，UX 設計師應該具備的知識點……

結語

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