一、組件介紹

C 端中的數(shù)據(jù)圖表，主要用來更直觀得展現(xiàn)一組數(shù)據(jù)的狀態(tài)或者方便數(shù)據(jù)之間進(jìn)行視覺化對比。受限于移動端屏幕的大小，C 端里的數(shù)據(jù)圖表相對來說不會出現(xiàn)特別復(fù)雜的形式，信息量也相對（B 端和數(shù)據(jù)大屏來說）較少。

數(shù)據(jù)圖表類型眾多，這篇文章無法涉及所有類型的圖表，只選取幾種最常見的進(jìn)行討論，以及僅討論其基礎(chǔ)構(gòu)形和有限的變體。C 端中比較常見的圖表類型有：條形圖/柱形圖、折線圖、餅圖/環(huán)形圖、雷達(dá)圖和熱點圖。

二、使用場景

1. 健康類 App

健康類 App 大量使用數(shù)據(jù)圖表來展示用戶身體的各項數(shù)據(jù)，不僅直觀且讓 App 內(nèi)容變得更加豐富。在 iOS 自帶的「健康」App 中，你可以看到各種不同的圖表類型。

除了類似「健康」的數(shù)據(jù)聚合類 App，其他健康類 App 還包括：健身類、睡眠類、壓力類、白噪音類 App 等等等等。

2. 信息記錄 App

另一類比較常用圖表的 App 是信息記錄類 App，這些 App 通常會統(tǒng)計用戶主動輸入信息的頻次或頻率，依此生成一段時間周期內(nèi)的統(tǒng)計圖表。例如：todo、日記、習(xí)慣養(yǎng)成、讀書、記賬 App 等等。

3. 金融類 App

金融類 App 通常有長周期、海量數(shù)據(jù)進(jìn)行展示，這些數(shù)據(jù)無法一一為用戶列舉，只能使用圖表進(jìn)行展示。

三、設(shè)計要點

1. 圖表類型的選擇

選擇哪種圖表，主要取決于你想展示數(shù)據(jù)之間的什么關(guān)系。數(shù)據(jù)之間存在 5 種不同的關(guān)系：

1. 構(gòu)成：一個整體中由哪些組分構(gòu)成，以及各個組分的構(gòu)成比例；例如每天
2. 比較：數(shù)據(jù)之間數(shù)值的對比；
3. 趨勢：數(shù)據(jù)隨統(tǒng)計周期的變化趨勢；
4. 分布：統(tǒng)計對象在不同統(tǒng)計周期內(nèi)出現(xiàn)的頻次；
5. 進(jìn)度：當(dāng)前數(shù)值在目標(biāo)數(shù)值中的進(jìn)度/位置；

這四種關(guān)系各有相對更「適合」的圖表類型，但有些數(shù)據(jù)統(tǒng)計的結(jié)構(gòu)和關(guān)系可以適用于多種不同的圖表，各位同學(xué)應(yīng)自行考量哪種圖表類型最適合。

1. 構(gòu)成：餅圖/環(huán)形圖、堆積條形圖/柱狀圖
2. 比較：條形圖/柱狀圖（有限維度的數(shù)據(jù)在多統(tǒng)計周期下比較）、雷達(dá)圖（多維度單一周期比較）
3. 趨勢：折線圖
4. 分布：熱點圖、散點圖、柱狀圖
5. 進(jìn)度：條形進(jìn)度圖、環(huán)形進(jìn)度圖

2. 繪制條形圖/柱形圖

柱形圖和條形圖是同一類圖表，只不過根據(jù)圖表的方向分別進(jìn)行稱呼，此處以柱形圖為例。

首先根據(jù)設(shè)計規(guī)范中邊距的定義，確定圖表的繪制區(qū)域。這個區(qū)域需要包括圖表本身、圖例、焦點數(shù)值、周期切換等等子組件。

其次繪制 X 和 Y 軸和它們的標(biāo)簽。在有些情況下，可以只繪制 X 軸不繪制 Y 軸。

接下來繪制柱和條等距分布（例如在 Figma 中的 Distribute horizontal spacing），與坐標(biāo)軸的標(biāo)簽一一對應(yīng)。在做完柱之后再將標(biāo)簽與之居中對齊。需要注意的是柱的寬度，應(yīng)當(dāng)根據(jù)柱的數(shù)量調(diào)整寬度，確保它們獨立不粘連、又不至于留出大量空白。

聚焦?fàn)顟B(tài)，由于移動端觸控的精度較低，所以必須將聚焦線與柱進(jìn)行吸附，將聚焦線與吸附的柱居中對齊，數(shù)值可置于圖表主體區(qū)域的頂端。

有兩組數(shù)據(jù)需要展示的時候，可以使用分組柱形圖，這時將兩個數(shù)據(jù)柱打成一組再與標(biāo)簽對齊即可。分組柱形圖需要圖例標(biāo)注不同顏色的柱代表什么類型的數(shù)據(jù)，所以得添加上圖例。

3. 繪制折線圖

前期步驟與柱狀圖基本一致，這里需要說明一下折線圖的節(jié)點，如何等距分布。在設(shè)計軟件中錨點與圖層一樣可以進(jìn)行對齊和分布操作，所以只需要全選錨點，并執(zhí)行水平等距分布就可以了。

如果想要做面積圖，或者為折線下方的面積添加一些色彩，可以復(fù)制一份折線，使用鋼筆工具補(bǔ)完圖形（必須閉合圖形），并為它添加填充即可。

在有些折線圖中，節(jié)點處可以添加一個圖形的點，方便用戶看清節(jié)點在何處。

聚焦?fàn)顟B(tài)與柱狀圖也類似，聚焦線與節(jié)點對齊即可。

4. 繪制餅圖/環(huán)形圖

先說餅圖，設(shè)計軟件中的圓形可以編輯為自定角度的扇形，在進(jìn)行設(shè)計時有些同學(xué)可能會去將各個扇形邊貼邊去對，但這樣做的效率頗低。一般的做法是將新的扇形置于第一層扇形下方，只調(diào)整其中一條邊即可，所有扇區(qū)都可進(jìn)行這樣的操作。

若想在扇區(qū)與扇區(qū)之間添加間距，可對所有的扇形添加描邊。

環(huán)形圖類似，設(shè)計軟件中也可以把所有圓形編輯為環(huán)形，并按照餅圖的方式完成環(huán)形圖。

移動端中的屏幕空間有限，不太可能直接在餅圖/環(huán)形圖上做圖例的標(biāo)注，一般會把圖例標(biāo)注在下方，并把詳細(xì)的數(shù)值列出。

5. 繪制雷達(dá)圖

雷達(dá)圖的設(shè)計需要注意，在繪制坐標(biāo)的最外圈的圖形時，得預(yù)留出各個節(jié)點處標(biāo)題的位置。

刻度線可以以最外圈的尺寸，依此以一個固定的數(shù)值遞減，這個數(shù)值需要被最外圈圖形的尺寸整除。例如：最外圈圖形尺寸為 200，刻度線依次可以為 160、120、80、40，以 40 依次遞減。

數(shù)據(jù)圖形的節(jié)點必須落在中心點與最外圈圖形節(jié)點的連接線上。

雷達(dá)圖中心可以添加額外的數(shù)值，可以是全部維度的平均值，也可以是一個總值。

6. 繪制熱點圖

熱點圖一般用在習(xí)慣養(yǎng)成或者日記應(yīng)用中，以月為周期的日頻次記錄中，或者以周為周期的小時頻次記錄。熱點的周期需要根據(jù)實際的數(shù)據(jù)展示需求進(jìn)行確定，不論如何都需要為周期內(nèi)每一個子周期繪制一個小格子。這些小格子需要等距分布，并盡可能填充圖表區(qū)域。

之后對格子填色即可。如果僅存在狀態(tài)的差異，可以用不同的色值進(jìn)行區(qū)分；如果存在頻次多少的差異，還可以對色值進(jìn)行更細(xì)致的明度區(qū)分。

7. 不一樣的圖表

① Apple 健身

Apple 健身里有一種很特殊的圖表類型——環(huán)形進(jìn)度圖，不僅可以展示單環(huán)內(nèi)的數(shù)據(jù)進(jìn)度情況，還可以展示不同環(huán)之間的進(jìn)度對比，是一種可以從兩個維度展示數(shù)據(jù)狀態(tài)的圖表類型。

Apple 健康中有很多柱狀圖高高低低并不對齊，這種我們一般稱之為區(qū)間柱形圖或區(qū)間條形圖，它的每一根柱子上下底邊都對應(yīng)一個數(shù)值，指的是一個該標(biāo)簽下的數(shù)值范圍。

四、樣式拓展

這里還額外收集了一些數(shù)據(jù)圖表的線上案例，也可以作為設(shè)計時的參考：

結(jié)尾

數(shù)據(jù)圖表因為其種類十分多樣，大類型的圖表下還有眾多不同的變體，這些更細(xì)致的圖表類型就需要各位在實際設(shè)計中自行選擇和學(xué)習(xí)繪制。

作者：超人的電話亭