UI必學(xué)組件！數(shù)據(jù)圖表設(shè)計(jì)方式詳解

一、組件介紹

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

往期回顧：

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

二、使用場(chǎng)景

1. 健康類 App

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

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

2. 信息記錄 App

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

3. 金融類 App

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

三、設(shè)計(jì)要點(diǎn)

1. 圖表類型的選擇

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

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

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

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

2. 繪制條形圖/柱形圖

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

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

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

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

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

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

3. 繪制折線圖

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

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

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

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

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

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

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

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

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

5. 繪制雷達(dá)圖

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

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

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

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

6. 繪制熱點(diǎn)圖

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

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

7. 不一樣的圖表

① Apple 健身

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

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

四、樣式拓展

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

結(jié)尾

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

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」