B 端圖表如何設計?
1. 圖表與表格的區(qū)別
表格
在數據可視化中,表格是最常見的一種,可以查看和處理大量的數據。不同類別的標簽可以傳達特定的信息內容,顯示準確而具體的數據,并有助于發(fā)現個體數據的價值。

圖表
圖表可以呈現數據的整體形態(tài)(如形態(tài)、趨勢、對比等),更加直觀明了,同時也不會分散人的注意力,有利于快速展示大量的數據關系。

2.?圖表設計流程
正如上圖所示,圖表是展現數據的一種重要展現形式,可以將數據以及數據關系直觀的展示出來,能幫助我們更加快速、直觀的傳達數據信息。
那如何挑選合適的圖表呢?在我看來大致分為三步:
數據分析:對需要可視化的數據進行分析,明確需要傳達的核心信息;
數據編碼:將抽象的數據轉化適用圖表類型(如形態(tài),趨勢,對比等);
用戶理解:將可視化完成圖表呈現給用戶傳達數據信息;

在數據編碼階段設計師需要通過設計 (比如突出重點、減少視覺干擾等)來助力數據的表現,提升用戶對圖表理解的效率和準確性。
接下來我將從圖表主要構成元素的角度來分析如何在數據編碼階段通過設計提高用戶對信息的理解與傳達。
1. 圖表的構成
先簡單地介紹一下圖表構成,圖表是由:標題、坐標軸、圖形、圖例、信息標簽組成。
標題:描述圖表的展示內容主題,包括主標題和副標題;
信息標簽:對當前數據的內容提示信息,常見交互形式:鼠標在懸停時出現、固定在圖形上;
圖例:當圖表多內容與數據時,對內容與數據的說明;
坐標軸:數據關系映射在坐標系的視覺展示,包括軸線和標尺。
圖形:數據在視覺展示中映射出來的圖形,可以反映數據差異與關系,例如常見的折線圖、柱狀圖;

每一個元素都有它存在的意義。在實際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內容即可。
2. 標題
一個好的標題是從過稿開始。
簡潔明了、表達準確的標題可以迅速讓讀者理解圖表的主題,而且當圖表的結論是單一且唯一時,可以將其作為展示數據的元素,用于呈現數據的結論或總量,讓用戶在初次瀏覽圖表就能通曉圖表在說什么。如下圖所示在標題中直接顯示圖表的數據結果。

3. 圖表的選擇
一個合理正確圖表可以呈現數據的整體形態(tài)(如形態(tài)、趨勢、對比等),讓數據更加直觀、突出重點。
了解圖表的分類和概念是進行設計和根據數據展示來選擇圖表的依據。那如何選擇合適的圖表?
安德魯·阿伯拉(Andrew Abela)制作的一份圖表類型選擇指南(This Guide),將圖表展示關系可大致分為 4 類:比較、分布、構成、聯系四種類型(見下圖)。

但考慮到日常使用的數據分析以及常用圖表組件庫,上圖中存在有些圖表使用頻率低。所以我參考了上圖的部分內容,再結合個人工作經驗重新對其總結,重新整合成三個維度(見下圖)。

補充:在給大家整理分享素材的時候才發(fā)現,阿里的 Antv 制作了更詳細的圖表分類目錄,包含比較、趨勢、組成、占比、分布、排名、關系、空間等 8 個大類。(這樣顯得我很呆,建議大家收藏一下網站!)

訪問鏈接:?https://antv.vision/zh
比較
圖表在表達比較關系最常用就是柱狀圖(條形圖)和折線圖。在展示相同類別之間比較關系常用柱狀圖(多個類別時則常用條形圖),在展示關于時間變化關系是常用折線圖。
折線圖
折線圖通過各個數據節(jié)點相互連接而成線條,通過線條的波動來顯示數據隨有序元素變化的圖表。常用于反映數據隨著有序元素變化(常用于時間)推移而產生的變化趨勢。比如:
近 10 年全球溫度的變化情況;
本學期,某某某學生語文成績變化情況;
事故數量隨著時間推移的變化情況:

折線圖注意
(1)為了圖表展示的可讀性,折線圖中線條的數量建議應當控制 3 條內,至多不用超過 7 條。

(2)為了圖表視覺效果的易讀性,線條應當使用實線,來突出視覺重點。

(3)當圖表展示不需要精確呈現時,而且重視整體變化的趨勢,可以使用曲線,反之折線。

柱狀圖
柱狀圖是通過矩形高度的差異展示的數據比較關系的圖標。主要作用是將多個數據在同一條件下,進行數據值的比較以此來判斷多個數據值哪些數據值相對比較大或相對比較小。比如:
各專業(yè)方向 2020 年工程師的工資信息圖表報告;
2021 年全球各國世界人口的增長:

補充:在需要顯示準確數值時使用,最好不要用柱狀圖來比較。