淺談B端智慧化設計下的統計圖展示

語言: CN / TW / HK

「不想細看版:直接拉到文末看“總結一下”」

· · · 

2011年諾貝爾經濟學獎獲得者Thomas J. Sargent在論壇上表示:人工智慧就是統計學,後來,華為CEO任正非也在央視的採訪中援引了這一觀點。

無論你怎麼看這個觀點,統計學在智慧化中的重要地位可見一斑,而作為統計學中用來展示資料的統計圖,無疑在B端智慧化設計中佔有了重要一席。在大量資訊資料面前,作為降低使用者認知負荷的法器,讓資訊得到更高效和直觀的傳播方式,統計圖不僅在B端後臺被大量使用,在AR化前臺的展示上也非常具有優勢。

但是,要設計好一個統計圖並不簡單,我們簡單 從四個方面入手 ,來看下統計圖展示這回事。

1. 統計圖的構成

一般來說,統計圖一共由圖題、圖目、座標軸、圖形、圖例和圖注六種元素構成。如下圖所示。

1. 圖題 :統計圖的名稱。

好的圖題讓人一看就知道該圖要顯示的是何事、何物、發生於何時和何地。如果圖示表示的資料資料比較複雜,也可以用大標題和小標題。

排版上面,圖題一般是該圖中最大號的文字。

2· 圖目 :也叫刻度線標籤,即表明圖形各種不同類別、名稱、時間或空間的統計數量值。

好的圖目要符合不遺漏不重複,同時要具備可比性質。

排版上面,若圖目較長,可採用傾斜排列,但可讀性會較差,可以換一種統計圖的表現形式。

圖片來源於網路,版權歸原作者

3. 座標軸 :表示資料的對映關係,又包含了刻度標記、圖尺、軸標題等

4. 圖形: 圖的主要部分。

5. 圖例 :用來表明各種圖形的含義

6. 圖注 :圖形中需要藉助文字或數字加以補充說明的,在設計中,一般是以滑鼠滑過時顯示提醒這種形式出現的。

2. 用什麼統計圖合適?

任何設計都沒有好和壞,而是適合與否。用什麼樣的統計圖更好也要看你展示資料的目的。基於國外專家Andrew Abela在2006年整理的一副圖示使用建議的思維導圖,我簡化更新如下:

從表裡已經可以看出, 有些統計圖和其他統計圖是類似 ,比如柱形圖換個角度就是條狀圖,更適用於專案比較多時候的差異比較。折線圖和麵積圖,散點圖和氣泡圖等,也都是這樣發展出來的。

另外,這張圖裡面的每一種所繪的統計圖僅為代表性示意,比如在差異比較的柱狀圖中,如果是要同時展示多個維度,那就可以升級為多組柱狀圖或堆疊柱狀圖。相關關係的網狀圖,也可以升級為弧形圖(如下圖左),而想要更酷炫的弧形圖,又可以升級為3D弧形圖(如下圖右)。

圖片來源:AntV

3. 怎麼才算一個好的統計圖?

有一個概念叫做 資料墨水比 ,它是資料視覺專家愛德華·塔夫特在1983年引入的一個概念,指與整個圖形中使用的油墨(或畫素)總量相比,用於呈現實際資料的油墨比例佔比量,以此來衡量這個統計圖的質量。

你可以理解為 簡約至上理念的一種運用 ,也可以理解為 去除無關元素的圖形降噪處理

例如下面這個圖形中的豎線就沒有必要,柱狀圖之間的間隔已經將每個分類區別出來了,豎線並沒有傳遞出更多的資訊,可以去掉。

一般來說,統計圖視覺化中常見的噪音有4種:

網格線

多餘的文字

圖形或座標軸的裝飾元素

立體化

4. 常用統計圖設計資源

網站類

1. 網址:https://chart.guide/

分類提供了近100種統計圖,並且每種上註明了使用建議。

2. 網址:https://antv.vision/zh

螞蟻團隊的資料視覺化方案網站,包含統計圖的設計指導、Sketch資源和圖書推薦

另外,螞蟻團隊還提供統計圖線上生成的網站以及Sketch外掛: https://chartcube.alipay.com/

3. 網址:https://echarts.apache.org/en/index.html

基於基於 JavaScript資料視覺化圖表庫,示例裡提供了各種統計圖線上樣式設計時可參考。

外掛類

PS拉框助手,支援PS、Sketch、Figma、XD

https://www.pslkzs.com/

Chart的figma外掛:

https://www.figma.com/community/plugin/734590934750866002/Chart

Chart 的Sketch外掛:

https://github.com/pavelkuligin/chart

總結一下:

1、統計圖的構成:圖題、圖目、座標軸、圖形、圖例和圖注

2、按展示目的選擇統計圖:四個維度

3、好的統計圖資料墨水比例低。常見的統計圖噪音來源於:網格、多餘的文字、裝飾線、立體元素

4、網站和外掛類的常用統計圖資源推薦

Hello,我是 林影落

林間有片影子落下來

希望給你乘個涼,偷個閒,發下呆,思下考。

一名10年+的UX設計師,

公眾號 每週 原創 更新,

以設計為主,關鍵詞: AR,智慧化,B端

個人成長為輔,關鍵詞: 競爭力