如何設計實用易讀的圖表

 　　數據可視化時代不會圖表設計就落伍咯!今天阿裡的劉穎同學來個簡單高效的教程，分兩步走，先教你精准表達圖表數據，再幫你提高圖表的易讀性，內含大量實戰案例，干貨滿滿!

　　一、圖表的目的和價值

　　圖表設計是數據可視化的一個分支領域，是對數據進行二次加工，用統計圖表的方式進行呈現。數據是事實或觀察的結果，是對客觀事物的邏輯歸納，通常一個具體的數字比一個模糊的說法更加具有可信度和說服力。但單純的數字本身並不能提供足夠的影響力，假設一個淘寶女裝賣家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大洲中最高的山峰

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

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

　　1、如何精准表達圖表中的數據

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

　　（1）選擇合適的圖表

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

　　A.柱形圖

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

　　垂直柱形圖，最常見的柱形圖; 水平柱形圖，一般按照數值的大小排列; 簇狀柱形圖，用於多組數據比較，強調一組數據內部的比較; 堆疊柱形圖，用於多組數據比較，和簇狀柱形圖不同的是，堆疊柱形圖更加強調一組數據中部分與整體的關系。

　　B.餅圖

　　以圓心角的度數來表達數值大小的統計圖表。常用於表現數據的占比關系，餅圖中各項的總和為100%，最適合表達單一主題，即部分占整體的比例。餅圖的類型比較少，主要有以下三種：

　　基礎型餅圖，包括常規型餅圖和環形餅圖; 半圓型餅圖，在某些場景中，半圓會比較方便排版，利於對齊。而且標注信息也方便呈現; 復合型餅圖，當餅圖的扇形數量過多時，可以將最後的若干項合並為其他類，在二級圖表中表現這些項目的構成。

　　C. 折線圖

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

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

　　D. 表格

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

　　基礎表格，靜態純文本類的基本表格; 內容復合表格，由其他內容類型結合的較復雜的表格形式; 操作復合表格，用戶的行為對表格樣式或特征產生影響。

　　（2）正確的繪制圖表

　　了解了四種的圖表後，通過選擇適合的圖表類型我們完成了精准表達數據的第一步，那麼第二步就是將圖表正確的繪制出來。錯誤的坐標軸選擇，或者關鍵元素的缺失，會導致圖表的准確性下降，表意不明。

　　A.柱形圖

　　數據產品的圖表強調數據的准確性，通常零基線是不可或缺的，為了強調起始位置，顏色上要比其他的網格線深。考慮到用戶不同顯示設備的差異，建議至少取94的灰度值才可以保證清楚的辨識，顏色太淺在一些設備上無法顯示清楚。

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

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

　　圖2-15 柱形之間的間距

　　B. 餅圖

　　餅圖一般我們采用的繪制方法是，按照用戶的閱讀習慣，從上到下，以時鐘的12點為起點，順時針排布扇形(圖2-16)。

　　圖2-16 餅圖的繪制方法

　　但這種繪制方法存在一點不足，在用戶視線的焦點——餅圖的上半部，不重要的最小數據項和最大數據項一起占據了視覺焦點。為了解決這個問題，我們在這個基礎上做了一些優化，同樣以時鐘的12點為起點，先逆時針繪制最大切片，再回到12點，順時針繪制出第二大切片，其余切片依次繪制(圖2-17)。這種方法使得用戶視線的焦點——餅圖的上半部放置的都是最重要的數據。但這種繪制方法也有一點小小的不足：在有多個餅圖時，每個餅圖的起始位置都不相同(圖中問號所標出的位置)。大家可以根據不同的使用場景選擇不同的餅圖繪制方法。