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 健康中有很多柱狀圖高高低低并不對齊，這種我們一般稱之為區間柱形圖或區間條形圖，它的每一根柱子上下底邊都對應一個數值，指的是一個該标簽下的數值範圍。
四、樣式拓展
這裡還額外收集了一些資料圖表的線上案例，也可以作為設計時的參考：
結尾
資料圖表因為其種類十分多樣，大類型的圖表下還有衆多不同的變體，這些更細緻的圖表類型就需要各位在實際設計中自行選擇和學習繪制。
資料圖表的元件就介紹到這。
專欄作家
酸梅幹超人，微信公衆号：超人的電話亭，人人都是産品經理專欄作家。專注于UI互動設計領域。
本文原創釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。