編輯導(dǎo)語：在B端設(shè)計中，數(shù)據(jù)可視化非常重要，它可以更好的傳遞信息，提高讀圖效率，那么如何實(shí)現(xiàn)可視化呢？這需要我們設(shè)計師準(zhǔn)確運(yùn)用圖表。本文作者通過分享不同類別的圖表，比較其差異，描述了不同圖表的特點(diǎn)，推薦做B端設(shè)計的童鞋閱讀。

一、構(gòu)成圖表

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

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

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

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

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

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

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

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

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

2. 矩形樹圖

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

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

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

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

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

二、聯(lián)系圖表

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

1. ?；鶊D

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

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

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

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

2. 關(guān)系圖

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

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

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

力導(dǎo)圖通常有一個起點(diǎn)，然后去關(guān)聯(lián)后續(xù)的其它節(jié)點(diǎn)，如果節(jié)點(diǎn)之間還有關(guān)聯(lián)，它也可以對這些節(jié)點(diǎn)的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對多的關(guān)系，也表現(xiàn)多對多的關(guān)系，甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強(qiáng)關(guān)聯(lián) ”聚類“ 信息。

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

3. 和弦圖

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

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

4. 韋恩圖

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

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

三、結(jié)語

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

在這個系列的后續(xù)內(nèi)容里，我們就會聚焦到具體的組件和功能進(jìn)行討論了。

下篇再賤~

本文由 @酸梅干超人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議