2015-9-6 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服
圖表設(shè)計(jì)是數(shù)據(jù)可視化的一個(gè)分支領(lǐng)域，是對(duì)數(shù)據(jù)進(jìn)行二次加工，用統(tǒng)計(jì)圖表的方式進(jìn)行呈現(xiàn)。數(shù)據(jù)是事實(shí)或觀察的結(jié)果，是對(duì)客觀事物的邏輯歸納，通常一 個(gè)具體的數(shù)字比一個(gè)模糊的說(shuō)法更加具有可信度和說(shuō)服力。但單純的數(shù)字本身并不能提供足夠的影響力，假設(shè)一個(gè)淘寶女裝賣(mài)家3月份的成交金額是50萬(wàn)，這個(gè)數(shù) 據(jù)本身并不能說(shuō)明什么問(wèn)題，但是當(dāng)你加上4月份60萬(wàn)，5月份的成交金額70萬(wàn)等多個(gè)月的數(shù)據(jù)，通過(guò)折線圖的方式呈現(xiàn)，可以判斷出成交金額是上升趨勢(shì)，再 結(jié)合去年同時(shí)段的銷售曲線進(jìn)行對(duì)比和其他維度信息的補(bǔ)充（圖1-1），可能推斷出是因?yàn)閾Q季所帶來(lái)得銷量增長(zhǎng)，店鋪可以考慮加大夏季款的上新。所以我們說(shuō) 圖表是解讀數(shù)字的一種強(qiáng)有力的手段。
圖1-1 店鋪成交金額
相對(duì)于單純的文本來(lái)說(shuō)，大腦處理圖形化的內(nèi)容會(huì)更加省力。每一個(gè)漢字都可以看作是一個(gè)圖形符號(hào)，在閱讀文本時(shí)，大腦首先對(duì)其一一進(jìn)行解碼，將這些形 狀和頭腦中儲(chǔ)存的記憶進(jìn)行匹配，從而理解它的含義。一段文本中，漢字的解碼過(guò)程是線性依次進(jìn)行的，而圖表是作為一個(gè)完整的圖形同步進(jìn)行解碼，所以比文本要 快的多（圖1-2）。根據(jù)相關(guān)研究，一個(gè)高質(zhì)量的信息圖理解度比純文字高30倍。
圖1-2 女裝金額占比
可用性專家Jakob Nielsen的一項(xiàng)研究表明，一般人閱讀網(wǎng)頁(yè)平均只會(huì)讀到20%左右的文字。人們的注意力越來(lái)越碎片化，大量的文字讓人很容易產(chǎn)生閱讀疲勞，圖表能夠比 較好的抓住人們的注意力。在微博、微信等渠道營(yíng)銷傳播上，將數(shù)據(jù)用圖表的形式展現(xiàn)比純文字會(huì)獲得更高的點(diǎn)擊、收藏等數(shù)值，也更容易被人記住，從而制造話 題，營(yíng)造口碑營(yíng)銷。試想下面的文字和圖表（圖1-3），你更愿意去分享哪個(gè)？
7大洲中最高的山峰：
南極洲，文森峰，16050呎 4892米
南美洲，阿空加瓜山，22841呎 6962米
非洲，乞力馬扎羅山，19340呎 5892米
亞洲，珠穆朗瑪峰，29035呎 8848米
歐洲，厄爾布魯士山18510呎 5642米
北美洲，麥金利山20320呎 6194米
大洋洲，卡斯滕土山16024呎 4884米
圖1-3 7大洲中最高的山峰
大數(shù)據(jù)是近些年非常熱門(mén)的一個(gè)詞，馬云曾說(shuō)過(guò)阿里巴巴未來(lái)十年的戰(zhàn)略目標(biāo)是建立DT數(shù)據(jù)時(shí)代中國(guó)商業(yè)發(fā)展的基礎(chǔ)設(shè)施。生意參謀就是在這個(gè)大環(huán)境下孵 化的一款數(shù)據(jù)產(chǎn)品，旨在為中小賣(mài)家提供數(shù)據(jù)化運(yùn)營(yíng)的思路，通過(guò)監(jiān)控店鋪日常經(jīng)營(yíng)和活動(dòng)情況，幫助賣(mài)家對(duì)店鋪運(yùn)營(yíng)進(jìn)行調(diào)整。有幸參與這個(gè)產(chǎn)品從建立到成長(zhǎng)的 全過(guò)程。數(shù)據(jù)產(chǎn)品最離不開(kāi)的其實(shí)就是圖表設(shè)計(jì)，既要保證圖表本身數(shù)據(jù)清晰準(zhǔn)確、直觀易懂，又要在找準(zhǔn)用戶關(guān)注的核心內(nèi)容進(jìn)行適當(dāng)?shù)耐伙@，幫助用戶通過(guò)數(shù)據(jù) 進(jìn)行決策。生意參謀這種數(shù)據(jù)產(chǎn)品就是將數(shù)據(jù)化運(yùn)營(yíng)的思路融入設(shè)計(jì)中，引導(dǎo)用戶通過(guò)數(shù)據(jù)得出有效的結(jié)論，輔助店鋪經(jīng)營(yíng)。除此以外，具有一定設(shè)計(jì)感的、打動(dòng)人 心的圖表設(shè)計(jì)也可以創(chuàng)造更多的商業(yè)傳播價(jià)值，提升品牌形象。
數(shù)據(jù)產(chǎn)品中用戶主要是利用數(shù)據(jù)來(lái)進(jìn)行分析和決策，所以十分強(qiáng)調(diào)數(shù)據(jù)的精準(zhǔn)性。那么如何通過(guò)圖表來(lái)準(zhǔn)確的傳達(dá)數(shù)據(jù)呢，首先我們要明確每種圖表的定義和使用范圍。其次要使用正確的方式將圖表繪制出來(lái)，不能在表達(dá)上有所偏差。
選擇合適的圖表
明確每種圖表的定義和使用場(chǎng)景有助于我們對(duì)數(shù)據(jù)進(jìn)行加工和二次傳達(dá)。柱形圖、餅圖、折線圖、表格是四種最常使用的圖表，但往往容易被混亂使用，讓我們一起來(lái)仔細(xì)研究這四種基礎(chǔ)圖表的定義和類型，找尋其中的差異。
A.柱形圖
又稱條形統(tǒng)計(jì)圖，條狀圖。是一種以長(zhǎng)方形的長(zhǎng)度為變量的統(tǒng)計(jì)圖表。常用于比較兩個(gè)或以上的值。柱形圖常見(jiàn)的有以下4種：
垂直柱形圖，最常見(jiàn)的柱形圖； 水平柱形圖，一般按照數(shù)值的大小排列； 簇狀柱形圖，用于多組數(shù)據(jù)比較，強(qiáng)調(diào)一組數(shù)據(jù)內(nèi)部的比較； 堆疊柱形圖，用于多組數(shù)據(jù)比較，和簇狀柱形圖不同的是，堆疊柱形圖更加強(qiáng)調(diào)一組數(shù)據(jù)中部分與整體的關(guān)系。
B.餅圖
以圓心角的度數(shù)來(lái)表達(dá)數(shù)值大小的統(tǒng)計(jì)圖表。常用于表現(xiàn)數(shù)據(jù)的占比關(guān)系，餅圖中各項(xiàng)的總和為100%，最適合表達(dá)單一主題，即部分占整體的比例。餅圖的類型比較少，主要有以下三種：
基礎(chǔ)型餅圖，包括常規(guī)型餅圖和環(huán)形餅圖； 半圓型餅圖，在某些場(chǎng)景中，半圓會(huì)比較方便排版，利于對(duì)齊。而且標(biāo)注信息也方便呈現(xiàn)； 復(fù)合型餅圖，當(dāng)餅圖的扇形數(shù)量過(guò)多時(shí)，可以將最后的若干項(xiàng)合并為其他類，在二級(jí)圖表中表現(xiàn)這些項(xiàng)目的構(gòu)成。
c. 折線圖
是通過(guò)線條的波動(dòng)（上升或下降）來(lái)顯示連續(xù)數(shù)據(jù)隨時(shí)間或有序類別變化的圖表。常用于強(qiáng)調(diào)數(shù)據(jù)的變化或者趨勢(shì)。折線圖主要可分為單條、多條、堆疊：
單條折線圖，只顯示一組數(shù)據(jù)波動(dòng)的情況； 多條折線圖，同時(shí)顯示多組數(shù)據(jù)波動(dòng)的情況； 多條堆疊折線圖，顯示多組數(shù)據(jù)波動(dòng)的情況，同時(shí)表現(xiàn)多組數(shù)據(jù)之合的變化。多個(gè)數(shù)據(jù)疊加時(shí)（堆疊圖），推薦使用面積圖，不推薦使用折線圖形式
D. 表格
由若干的行與列所構(gòu)成的一種有序的組織形式，表格可以率的展現(xiàn)大量數(shù)據(jù)。表格的類型多種多樣，除了單純的文本和數(shù)字外，我們還可以往里面添加圖片、操作等多種類型。表格是幾種圖表中最多樣和特殊的類型。
基礎(chǔ)表格，靜態(tài)純文本類的基本表格； 內(nèi)容復(fù)合表格，由其他內(nèi)容類型結(jié)合的較復(fù)雜的表格形式； 操作復(fù)合表格，用戶的行為對(duì)表格樣式或特征產(chǎn)生影響。
正確的繪制圖表
了解了四種的圖表后，通過(guò)選擇適合的圖表類型我們完成了精準(zhǔn)表達(dá)數(shù)據(jù)的第一步，那么第二步就是將圖表正確的繪制出來(lái)。錯(cuò)誤的坐標(biāo)軸選擇，或者關(guān)鍵元素的缺失，會(huì)導(dǎo)致圖表的準(zhǔn)確性下降，表意不明。
A.柱形圖
數(shù)據(jù)產(chǎn)品的圖表強(qiáng)調(diào)數(shù)據(jù)的準(zhǔn)確性，通常零基線是不可或缺的，為了強(qiáng)調(diào)起始位置，顏色上要比其他的網(wǎng)格線深。考慮到用戶不同顯示設(shè)備的差異，建議至少取94的灰度值才可以保證清楚的辨識(shí)，顏色太淺在一些設(shè)備上無(wú)法顯示清楚。
圖2-14 柱形圖中的零基線
柱子的寬度為D，則柱子之間的間距建議在1/2D與D之間，簇形柱形圖兩個(gè)柱子之間的間距建議為1/8D。這樣既可以保證柱子之間不會(huì)過(guò)于分散-失去數(shù)據(jù)之間的關(guān)聯(lián)性，又不會(huì)過(guò)密-保障數(shù)據(jù)之間的獨(dú)立性和舒適閱讀。
圖2-15 柱形之間的間距
B. 餅圖
餅圖一般我們采用的繪制方法是，按照用戶的閱讀習(xí)慣，從上到下，以時(shí)鐘的12點(diǎn)為起點(diǎn)，順時(shí)針排布扇形（圖2-16）。
圖2-16 餅圖的繪制方法
但這種繪制方法存在一點(diǎn)不足，在用戶視線的焦點(diǎn)——餅圖的上半部，不重要的最小數(shù)據(jù)項(xiàng)和最大數(shù)據(jù)項(xiàng)一起占據(jù)了視覺(jué)焦點(diǎn)。為了解決這個(gè)問(wèn)題，我們?cè)谶@ 個(gè)基礎(chǔ)上做了一些優(yōu)化，同樣以時(shí)鐘的12點(diǎn)為起點(diǎn)，先逆時(shí)針繪制最大切片，再回到12點(diǎn)，順時(shí)針繪制出第二大切片，其余切片依次繪制（圖2-17）。這種 方法使得用戶視線的焦點(diǎn)——餅圖的上半部放置的都是最重要的數(shù)據(jù)。但這種繪制方法也有一點(diǎn)小小的不足：在有多個(gè)餅圖時(shí)，每個(gè)餅圖的起始位置都不相同（圖中 問(wèn)號(hào)所標(biāo)出的位置）。大家可以根據(jù)不同的使用場(chǎng)景選擇不同的餅圖繪制方法。
圖2-17 餅圖的繪制方法
C. 折線圖
折線圖常用于表示數(shù)據(jù)的變化和趨勢(shì)，坐標(biāo)軸的不同對(duì)折線的變化幅度有很大的影響。坐標(biāo)軸的數(shù)值設(shè)定的太高，則折線變化過(guò)于平緩，掩蓋現(xiàn)實(shí)無(wú)法清晰的表現(xiàn)折線的變化。反之，如果坐標(biāo)軸設(shè)定的太低，又會(huì)讓折線變化過(guò)于陡峭，過(guò)于夸張夸大了折線變化的趨勢(shì)。
圖2-18 折線的繪制方法
數(shù)據(jù)產(chǎn)品中往往充滿了大量的數(shù)字和圖表，用戶容易淹沒(méi)在數(shù)據(jù)的海洋中，除了精準(zhǔn)表達(dá)這些數(shù)據(jù)以外，提升圖表的易讀性也是數(shù)據(jù)產(chǎn)品中圖表設(shè)計(jì)的一個(gè)顯 著特點(diǎn)。圖表中文字部分通常為具體的數(shù)值和數(shù)值的含義解釋。通過(guò)對(duì)這些文本進(jìn)行合理排版，可以使用戶快速理解圖表，從而達(dá)到閱讀的目的。
A. 柱形圖
坐標(biāo)軸的標(biāo)簽使用水平排列，不建議垂直排列或者傾斜排列，字?jǐn)?shù)多的時(shí)候不易閱讀。柱形圖中部分標(biāo)簽的使用方法也適用于折線圖。
圖2-19 柱形圖的標(biāo)簽排列 水平柱形圖一般會(huì)簡(jiǎn)化坐標(biāo)，數(shù)據(jù)值跟隨在柱形圖后方，增加數(shù)據(jù)墨水比率。
圖2-20 水平柱形圖 當(dāng)坐標(biāo)軸標(biāo)簽過(guò)長(zhǎng)時(shí)，垂直柱形圖無(wú)法將所有坐標(biāo)軸標(biāo)簽全部顯示，有以下幾種解決方案：
可采用水平柱形圖增加標(biāo)簽的顯示空間。
圖2-21 水平柱形圖
顯示主刻度，其余數(shù)據(jù)省略，通過(guò)交互動(dòng)作來(lái)顯示。比如顯示2010年/2011年，而年里面的具體的月份隱藏，hover時(shí)出現(xiàn)。如圖2-22中的 橫坐標(biāo)。 高位數(shù)的數(shù)值可以轉(zhuǎn)化單位。比如500,000顯示為50萬(wàn)，更符合中文的閱讀習(xí)慣，且節(jié)省空間。如圖2-22中的縱坐標(biāo)。
圖2-22 柱形圖的刻度值
B.餅圖
在餅圖內(nèi)與百分比數(shù)值一起顯示
信息連貫視覺(jué)集中，理論上最合適的位置。但受限于餅圖本身的形狀和大小，文字過(guò)多時(shí)容易溢出。
圖2-23 餅圖的標(biāo)簽
使用引導(dǎo)線，在餅圖周?chē)线m位置顯示
引導(dǎo)線可以將切片與標(biāo)簽有效的關(guān)聯(lián)，可以顯示更多的字符數(shù)。引導(dǎo)線較多時(shí)，可以進(jìn)行變形規(guī)整。在數(shù)據(jù)產(chǎn)品中通常是活動(dòng)數(shù)據(jù)，數(shù)值大小經(jīng)常在變化，標(biāo)簽和引導(dǎo)線的位置不固定，排版上難以掌控。
圖2-24 使用引導(dǎo)線的餅圖
數(shù)值和標(biāo)簽分離顯示
標(biāo)簽字符數(shù)不受局限，但標(biāo)簽與餅圖分離，需要對(duì)照閱讀。
圖2-25 數(shù)值和標(biāo)簽分離顯示
配合交互動(dòng)作切換標(biāo)簽在環(huán)形圓餅空白處顯示
空白部分不受切片大小影響，標(biāo)簽和數(shù)值可一起顯示。適用于強(qiáng)調(diào)當(dāng)個(gè)切片數(shù)值。標(biāo)簽與切片對(duì)應(yīng)關(guān)系需要帶交互操作說(shuō)明，數(shù)據(jù)展示較隱藏。
圖2-26 帶交互的標(biāo)簽
C. 表格
文字信息縱向列對(duì)比能夠很好的形成視覺(jué)引導(dǎo)線，符合格式塔心理學(xué)中相近原則。不同的數(shù)據(jù)類型有不同的對(duì)齊方式。一般來(lái)說(shuō)文本采用左對(duì)齊，數(shù)據(jù)右對(duì)齊，方便通過(guò)數(shù)字位數(shù)的長(zhǎng)短對(duì)比數(shù)據(jù)的量級(jí)和大小。
圖2-27 表格的對(duì)齊
表示狀態(tài)的文字，通常只有固定幾種類型（如已完成、待支付等），則可以采用居中對(duì)齊。關(guān)系緊密的字段可以靠近成組排列，加強(qiáng)數(shù)據(jù)之間的關(guān)聯(lián)性，同時(shí)減少了數(shù)據(jù)組的量，也可以方便用戶快速定位信息。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn