一、圖表的目的和價值

圖表設計是數據可視化的一個分支領域,是對數據進行二次加工,用統計圖表的方式進行呈現。數據是事實或觀察的結果,是對客觀事物的邏輯歸納,通常一個具體的数字比一個模糊的說法更加具有可信度和說服力。但單純的数字本身並不能提供足夠的影響力,假設一個淘寶女裝賣家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數據時代中國商業發展的基礎設施。生意參謀就是在這個大環境下孵化的一款數據產品,旨在為中小賣家提供數據化運營的思路,通過監控店鋪日常經營和活動情況,幫助賣家對店鋪運營進行調整。有幸參与這個產品從建立到成長的全過程。數據產品最離不開的其實就是圖表設計,既要保證圖表本身數據清晰準確、直觀易懂,又要在找准用戶關注的核心內容進行適當的突顯,幫助用戶通過數據進行決策。生意參謀這種數據產品就是將數據化運營的思路融入設計中,引導用戶通過數據得出有效的結論,輔助店鋪經營。除此以外,具有一定設計感的、打動人心的圖表設計也可以創造更多的商業傳播價值,提升品牌形象。

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

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

選擇合適的圖表

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

A.柱形圖

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

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

B.餅圖

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

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

c. 折線圖

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

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

D. 表格

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

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

正確的繪製圖表

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

A.柱形圖

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

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

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

圖2-15 柱形之間的間距

B. 餅圖

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

圖2-16 餅圖的繪製方法

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

圖2-17 餅圖的繪製方法

C. 折線圖

折線圖常用於表示數據的變化和趨勢,坐標軸的不同對摺線的變化幅度有很大的影響。坐標軸的數值設定的太高,則折線變化過於平緩,掩蓋現實無法清晰的表現折線的變化。反之,如果坐標軸設定的太低,又會讓折線變化過於陡峭,過於誇張誇大了折線變化的趨勢。

圖2-18 折線的繪製方法

如何提升圖表的易讀性

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

A. 柱形圖

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

圖2-19 柱形圖的標籤排列 水平柱形圖一般會簡化坐標,數據值跟隨在柱形圖後方,增加數據墨水比率。

圖2-20 水平柱形圖 當坐標軸標籤過長時,垂直柱形圖無法將所有坐標軸標籤全部显示,有以下幾種解決方案:

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

圖2-21 水平柱形圖

显示主刻度,其餘數據省略,通過交互動作來显示。比如显示2010年/2011年,而年裡面的具體的月份隱藏,hover時出現。如圖2-22中的橫坐標。 高位數的數值可以轉化單位。比如500,000显示為50萬,更符合中文的閱讀習慣,且節省空間。如圖2-22中的縱坐標。

圖2-22 柱形圖的刻度值

B.餅圖

在餅圖內與百分比數值一起显示

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

圖2-23 餅圖的標籤

使用引導線,在餅圖周圍合適位置显示

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

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

數值和標籤分離显示

標籤字符數不受局限,但標籤與餅圖分離,需要對照閱讀。

圖2-25 數值和標籤分離显示

配合交互動作切換標籤在環形圓餅空白處显示

空白部分不受切片大小影響,標籤和數值可一起显示。適用於強調當個切片數值。標籤與切片對應關係需要帶交互操作說明,數據展示較隱藏。

圖2-26 帶交互的標籤

C. 表格

文字信息縱向列對比能夠很好的形成視覺引導線,符合格式塔心理學中相近原則。不同的數據類型有不同的對齊方式。一般來說文本採用左對齊,數據右對齊,方便通過数字位數的長短對比數據的量級和大小。

圖2-27 表格的對齊

表示狀態的文字,通常只有固定幾種類型(如已完成、待支付等),則可以採用居中對齊。關係緊密的字段可以靠近成組排列,加強數據之間的關聯性,同時減少了數據組的量,也可以方便用戶快速定位信息。

圖2-28 表格的對齊

接下來,我們繼續看看如何突出圖表中的重點信息、如何使圖表更易於傳播,以及數據可視化的趨勢和未來…

 

作者:劉穎

來源:阿里巴巴(中國站)用戶體驗設計部博客

原文地址:http://www.aliued.cn/2015/04/30/liuying.html