【數據可視化】背後的故事——圖表設計

熱門圖表工具下載：

• FusionCharts下載

• HighCharts下載

1、圖表的目的和價值

圖表設計是數據可視化的一個分支領域，是對數據進行二次加工，用統計圖表的方式進行呈現。數據是事實或觀察的結果，是對客觀事物的邏輯概括，一般一個具體的數字比一個模糊的說法更加具備可信度和說服力。但單純的數字自己並不能提供足夠的影響力，假設一個淘寶女裝賣家3月份的成交金額是50萬，這個數據自己並不能說明什麼問題，可是當你加上4月份60萬，5月份的成交金額70萬等多個月的數據，經過折線圖的方式呈現，能夠判斷出成交金額是上升趨勢，再結合去年同時段的銷售曲線進行對比和其餘維度信息的補充（圖1-1），可能推斷出是由於換季所帶來得銷量增加，店鋪能夠考慮加大夏季款的上新。因此咱們說圖表是解讀數字的一種強有力的手段。

圖1-1 店鋪成交金額

相對於單純的文原本說，大腦處理圖形化的內容會更加省力。每個漢字均可以看做是一個圖形符號，在閱讀文本時，大腦首先對其一一進行解碼，將這些形狀和頭腦中儲存的記憶進行匹配，從而理解它的含義。一段文本中，漢字的解碼過程是線性依次進行的，而圖表是做爲一個完整的圖形同步進行解碼，因此比文本要快的多（圖1-2）。根據相關研究，一個高質量的信息圖理解度比純文字高30倍。

圖1-2 女裝金額佔比

可用性專家Jakob Nielsen的一項研究代表，通常人閱讀網頁平均只會讀到20%左右的文字。人們的注意力愈來愈碎片化，大量的文字讓人很容易產生閱讀疲勞，圖表可以比較好的抓住人們的注意力。在微博、微信等渠道營銷傳播上，將數據用圖表的形式展示比純文字會得到更高的點擊、收藏等數值，也更容易被人記住，從而製造話題，營造口碑營銷。試想下面的文字和圖表（圖1-3），你更願意去分享哪一個？

7大洲中最高的山峯：

• 南極洲，文森峯，16050呎 4892米；

• 南美洲，阿空加瓜山，22841呎 6962米；

• 非洲，乞力馬扎羅山，19340呎 5892米；

• 亞洲，珠穆朗瑪峯，29035 8848米；

• 歐洲，厄爾布魯士山18510呎 5642米；

• 北美洲，麥金利山20320呎 6194米；

• 大洋洲，卡斯滕土山16024呎 4884米。

圖1-3 7大洲中最高的山峯

2、數據產品中的圖表設計原則和方法

大數據是近些年很是熱門的一個詞，馬雲曾說過阿里巴巴將來十年的戰略目標是創建DT數據時代中國商業發展的基礎設施。生意參謀就是在這個大環境下孵化的一款數據產品，旨在爲中小賣家提供數據化運營的思路，經過監控店鋪平常經營和活動狀況，幫助賣家對店鋪運營進行調整。有幸參與這個產品從創建到成長的全過程。數據產品最離不開的其實就是圖表設計，既要保證圖表自己數據清晰準確、直觀易懂，又要在找準用戶關注的核心內容進行適當的突顯，幫助用戶經過數據進行決策。生意參謀這種數據產品就是將數據化運營的思路融入設計中，引導用戶經過數據得出有效的結論，輔助店鋪經營。除此之外，具備必定設計感的、打動人心的圖表設計也能夠創造更多的商業傳播價值，提高品牌形象。

1.如何精準表達圖表中的數據

數據產品中用戶主要是利用數據來進行分析和決策，因此十分強調數據的精準性。那麼如何經過圖表來準確的傳達數據呢，首先咱們要明確每種圖表的定義和使用範圍。其次要使用正確的方式將圖表繪製出來，不能在表達上有所誤差。

（1）選擇合適的圖表

明確每種圖表的定義和使用場景有助於咱們對數據進行加工和二次傳達。柱形圖、餅圖、折線圖、表格是四種最常使用的圖表，但每每容易被混亂使用，讓咱們一塊兒來仔細研究這四種基礎圖表的定義和類型，找尋其中的差別。

A.柱形圖

又稱條形統計圖，條狀圖。是一種以長方形的長度爲變量的統計圖表。經常使用於比較兩個或以上的值。柱形圖常見的有如下4種：

垂直柱形圖，最多見的柱形圖； 水平柱形圖，通常按照數值的大小排列； 簇狀柱形圖，用於多組數據比較，強調一組數據內部的比較； 堆疊柱形圖，用於多組數據比較，和簇狀柱形圖不一樣的是，堆疊柱形圖更增強調一組數據中部分與總體的關係。

B.餅圖

以圓心角的度數來表達數值大小的統計圖表。經常使用於表現數據的佔比關係，餅圖中各項的總和爲100%，最適合表達單一主題，即部分佔總體的比例。餅圖的類型比較少，主要有如下三種：
基礎型餅圖，包括常規型餅圖和環形餅圖； 半圓型餅圖，在某些場景中，半圓會比較方便排版，利於對齊。並且標註信息也方便呈現； 複合型餅圖，當餅圖的扇形數量過多時，能夠將最後的若干項合併爲其餘類，在二級圖表中表現這些項目的構成。

1. 折線圖

是經過線條的波動（上升或降低）來顯示連續數據隨時間或有序類別變化的圖表。經常使用於強調數據的變化或者趨勢。折線圖主要可分爲單條、多條、堆疊：

單條折線圖，只顯示一組數據波動的狀況； 多條折線圖，同時顯示多組數據波動的狀況； 多條堆疊折線圖，顯示多組數據波動的狀況，同時表現多組數據之合的變化。多個數據疊加時（堆疊圖），推薦使用面積圖，不推薦使用折線圖形式。

D. 表格

由若干的行與列所構成的一種有序的組織形式，表格能夠高效率的展示大量數據。表格的類型多種多樣，除了單純的文本和數字外，咱們還能夠往裏面添加圖片、操做等多種類型。表格是幾種圖表中最多樣和特殊的類型。

基礎表格，靜態純文本類的基本表格； 內容複合表格，由其餘內容類型結合的較複雜的表格形式； 操做複合表格，用戶的行爲對錶格樣式或特徵產生影響。

（2）正確的繪製圖表

瞭解了四種的圖表後，經過選擇適合的圖表類型咱們完成了精準表達數據的第一步，那麼第二步就是將圖表正確的繪製出來。錯誤的座標軸選擇，或者關鍵元素的缺失，會致使圖表的準確性降低，表意不明。

A.柱形圖

數據產品的圖表強調數據的準確性，一般零基線是不可或缺的，爲了強調起始位置，顏色上要比其餘的網格線深。考慮到用戶不一樣顯示設備的差別，建議至少取94的灰度值才能夠保證清楚的辨識，顏色太淺在一些設備上沒法顯示清楚。

圖2-1 柱形圖中的零基線

柱子的寬度爲D，則柱子之間的間距建議在1/2D與D之間，簇形柱形圖兩個柱子之間的間距建議爲1/8D。這樣既能夠保證柱子之間不會過於分散-失去數據之間的關聯性，又不會過密-保障數據之間的獨立性和溫馨閱讀。

圖2-2 柱形之間的間距

B. 餅圖

餅圖通常咱們採用的繪製方法是，按照用戶的閱讀習慣，從上到下，以時鐘的12點爲起點，順時針排布扇形（圖2-3）。

圖2-3 餅圖的繪製方法

但這種繪製方法存在一點不足，在用戶視線的焦點——餅圖的上半部，不重要的最小數據項和最大數據項一塊兒佔據了視覺焦點。爲了解決這個問題，咱們在這個基礎上作了一些優化，一樣以時鐘的12點爲起點，先逆時針繪製最大切片，再回到12點，順時針繪製出第二大切片，其他切片依次繪製（圖2-4）。這種方法使得用戶視線的焦點——餅圖的上半部放置的都是最重要的數據。但這種繪製方法也有一點小小的不足：在有多個餅圖時，每一個餅圖的起始位置都不相同（圖中問號所標出的位置）。你們能夠根據不一樣的使用場景選擇不一樣的餅圖繪製方法。

圖2-4 餅圖的繪製方法

C. 折線圖

折線圖經常使用於表示數據的變化和趨勢，座標軸的不一樣對摺線的變化幅度有很大的影響。座標軸的數值設定的過高，則折線變化過於平緩，掩蓋現實沒法清晰的表現折線的變化。反之，若是座標軸設定的過低，又會讓折線變化過於陡峭，過於誇張誇大了折線變化的趨勢。

圖2-5 折線的繪製方法

2. 如何提高圖表的易讀性

數據產品中每每充滿了大量的數字和圖表，用戶容易淹沒在數據的海洋中，除了精準表達這些數據之外，提高圖表的易讀性也是數據產品中圖表設計的一個顯著特色。圖表中文字部分一般爲具體的數值和數值的含義解釋。經過對這些文本進行合理排版，可使用戶快速理解圖表，從而達到高效閱讀的目的。

A. 柱形圖

座標軸的標籤使用水平排列，不建議垂直排列或者傾斜排列，字數多的時候不易閱讀。柱形圖中部分標籤的使用方法也適用於折線圖。

圖2-6 柱形圖的標籤排列

水平柱形圖通常會簡化座標，數據值跟隨在柱形圖後方，增長數據墨水比率。

圖2-7 水平柱形圖

當座標軸標籤過長時，垂直柱形圖沒法將全部座標軸標籤所有顯示，有如下幾種解決方案：

可採用水平柱形圖增長標籤的顯示空間。

圖2-8 水平柱形圖

顯示主刻度，其他數據省略，經過交互動做來顯示。好比顯示2010年/2011年，而年裏面的具體的月份隱藏，hover時出現。如圖2-9中的橫座標。 高位數的數值能夠轉化單位。好比500,000顯示爲50萬，更符合中文的閱讀習慣，且節省空間。如圖2-9中的縱座標。

圖2-9 柱形圖的刻度值

B.餅圖

①. 在餅圖內與百分比數值一塊兒顯示：

信息連貫視覺集中，理論上最合適的位置。但受限於餅圖自己的形狀和大小，文字過多時容易溢出。

圖2-10 餅圖的標籤

②. 使用引導線，在餅圖周圍合適位置顯示：

引導線能夠將切片與標籤有效的關聯，能夠顯示更多的字符數。引導線較多時，能夠進行變形規整。在數據產品中一般是活動數據，數值大小常常在變化，標籤和引導線的位置不固定，排版上難以掌控。

圖2-11 使用引導線的餅圖

③. 數值和標籤分離顯示：

標籤字符數不受侷限，但標籤與餅圖分離，須要對照閱讀。

圖2-12 數值和標籤分離顯示

④. 配合交互動做切換標籤在環形圓餅空白處顯示：

空白部分不受切片大小影響，標籤和數值可一塊兒顯示。適用於強調當個切片數值。標籤與切片對應關係須要帶交互操做說明，數據展現較隱藏。

圖2-13 帶交互的標籤

C. 表格

文字信息縱向列對比可以很好的造成視覺引導線，符合格式塔心理學中相近原則。不一樣的數據類型有不一樣的對齊方式。通常來講文本採用左對齊，數據右對齊，方便經過數字位數的長短對比數據的量級和大小。

圖2-14 表格的對齊

表示狀態的文字，一般只有固定幾種類型（如已完成、待支付等），則能夠採用居中對齊。關係緊密的字段能夠靠近成組排列，增強數據之間的關聯性，同時減小了數據組的量，也能夠方便用戶快速定位信息。

圖2-15 表格的對齊

來源：阿里巴巴（中國站）用戶體驗設計部博客