中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

C 端中比較常見的圖表類型有條形圖/柱形圖、折線圖、餅圖/環形圖等，這篇文章里，作者結合實際案例，探討了數據圖表的設計要點，一起來看。

一、組件介紹

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

數據圖表類型眾多，這篇文章無法涉及所有類型的圖表，只選取幾種最常見的進行討論，以及僅討論其基礎構形和有限的變體。

C 端中比較常見的圖表類型有：條形圖/柱形圖、折線圖、餅圖/環形圖、雷達圖和熱點圖。

二、使用場景

1. 健康類 App

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

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

2. 信息記錄 App

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

3. 金融類App

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

三、設計要點

1. 圖表類型的選擇

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

構成：一個整體中由哪些組分構成，以及各個組分的構成比例；例如每天；

比較：數據之間數值的對比；

趨勢：數據隨統計周期的變化趨勢；

分布：統計對象在不同統計周期內出現的頻次；

進度：當前數值在目標數值中的進度/位置；

這四種關系各有相對更「適合」的圖表類型，但有些數據統計的結構和關系可以適用于多種不同的圖表，各位同學應自行考量哪種圖表類型最適合。

構成：餅圖/環形圖、堆積條形圖/柱狀圖

比較：條形圖/柱狀圖（有限維度的數據在多統計周期下比較）、雷達圖（多維度單一周期比較）

趨勢：折線圖

分布：熱點圖、散點圖、柱狀圖

進度：條形進度圖、環形進度圖

2. 繪制條形圖/柱形圖

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

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

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

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

聚焦狀態，由于移動端觸控的精度較低，所以必須將聚焦線與柱進行吸附，將聚焦線與吸附的柱居中對齊，數值可置于圖表主體區域的頂端。

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

3. 繪制折線圖

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

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

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

聚焦狀態與柱狀圖也類似，聚焦線與節點對齊即可。

4. 繪制餅圖/環形圖

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

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

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

移動端中的屏幕空間有限，不太可能直接在餅圖/環形圖上做圖例的標注，一般會把圖例標注在下方，并把詳細的數值列出。

5. 繪制雷達圖

雷達圖的設計需要注意，在繪制坐標的最外圈的圖形時，得預留出各個節點處標題的位置。

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

數據圖形的節點必須落在中心點與最外圈圖形節點的連接線上。

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

6. 繪制熱點圖

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

之后對格子填色即可。如果僅存在狀態的差異，可以用不同的色值進行區分；如果存在頻次多少的差異，還可以對色值進行更細致的明度區分。

7. 不一樣的圖表

Apple 健身

Apple 健身里有一種很特殊的圖表類型——環形進度圖，不僅可以展示單環內的數據進度情況，還可以展示不同環之間的進度對比，是一種可以從兩個維度展示數據狀態的圖表類型。

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

四、樣式拓展

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

結尾

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

數據圖表的組件就介紹到這。