手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

傳遞數(shù)據(jù)背后的故事——圖表設(shè)計

2015-9-6 用心設(shè)計

藍藍設(shè)計( m.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服

來源：人人都是產(chǎn)品經(jīng)理 20140312091754_0968

一、圖表的目的和價值

圖表設(shè)計是數(shù)據(jù)可視化的一個分支領(lǐng)域，是對數(shù)據(jù)進行二次加工，用統(tǒng)計圖表的方式進行呈現(xiàn)。數(shù)據(jù)是事實或觀察的結(jié)果，是對客觀事物的邏輯歸納，通常一個具體的數(shù)字比一個模糊的說法更加具有可信度和說服力。但單純的數(shù)字本身并不能提供足夠的影響力，假設(shè)一個淘寶女裝賣家3月份的成交金額是50萬，這個數(shù) 據(jù)本身并不能說明什么問題，但是當你加上4月份60萬，5月份的成交金額70萬等多個月的數(shù)據(jù)，通過折線圖的方式呈現(xiàn)，可以判斷出成交金額是上升趨勢，再結(jié)合去年同時段的銷售曲線進行對比和其他維度信息的補充（圖1-1），可能推斷出是因為換季所帶來得銷量增長，店鋪可以考慮加大夏季款的上新。所以我們說圖表是解讀數(shù)字的一種強有力的手段。

圖1-1 店鋪成交金額

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

圖1-2 女裝金額占比

可用性專家Jakob Nielsen的一項研究表明，一般人閱讀網(wǎng)頁平均只會讀到20%左右的文字。人們的注意力越來越碎片化，大量的文字讓人很容易產(chǎn)生閱讀疲勞，圖表能夠比較好的抓住人們的注意力。在微博、微信等渠道營銷傳播上，將數(shù)據(jù)用圖表的形式展現(xiàn)比純文字會獲得更高的點擊、收藏等數(shù)值，也更容易被人記住，從而制造話題，營造口碑營銷。試想下面的文字和圖表（圖1-3），你更愿意去分享哪個？

7大洲中最高的山峰：

南極洲，文森峰，16050呎 4892米

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

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

亞洲，珠穆朗瑪峰，29035呎 8848米

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

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

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

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

二、數(shù)據(jù)產(chǎn)品中的圖表設(shè)計原則和方法

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

如何精準表達圖表中的數(shù)據(jù)

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

選擇合適的圖表

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

A.柱形圖

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

垂直柱形圖，最常見的柱形圖；水平柱形圖，一般按照數(shù)值的大小排列；簇狀柱形圖，用于多組數(shù)據(jù)比較，強調(diào)一組數(shù)據(jù)內(nèi)部的比較；堆疊柱形圖，用于多組數(shù)據(jù)比較，和簇狀柱形圖不同的是，堆疊柱形圖更加強調(diào)一組數(shù)據(jù)中部分與整體的關(guān)系。

B.餅圖

以圓心角的度數(shù)來表達數(shù)值大小的統(tǒng)計圖表。常用于表現(xiàn)數(shù)據(jù)的占比關(guān)系，餅圖中各項的總和為100%，最適合表達單一主題，即部分占整體的比例。餅圖的類型比較少，主要有以下三種：

基礎(chǔ)型餅圖，包括常規(guī)型餅圖和環(huán)形餅圖；半圓型餅圖，在某些場景中，半圓會比較方便排版，利于對齊。而且標注信息也方便呈現(xiàn)；復合型餅圖，當餅圖的扇形數(shù)量過多時，可以將最后的若干項合并為其他類，在二級圖表中表現(xiàn)這些項目的構(gòu)成。

c. 折線圖

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

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

D. 表格

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

基礎(chǔ)表格，靜態(tài)純文本類的基本表格；內(nèi)容復合表格，由其他內(nèi)容類型結(jié)合的較復雜的表格形式；操作復合表格，用戶的行為對表格樣式或特征產(chǎn)生影響。

正確的繪制圖表

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

A.柱形圖

數(shù)據(jù)產(chǎn)品的圖表強調(diào)數(shù)據(jù)的準確性，通常零基線是不可或缺的，為了強調(diào)起始位置，顏色上要比其他的網(wǎng)格線深?？紤]到用戶不同顯示設(shè)備的差異，建議至少取94的灰度值才可以保證清楚的辨識，顏色太淺在一些設(shè)備上無法顯示清楚。

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

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

圖2-15 柱形之間的間距

B. 餅圖

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

圖2-16 餅圖的繪制方法

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

圖2-17 餅圖的繪制方法

C. 折線圖

折線圖常用于表示數(shù)據(jù)的變化和趨勢，坐標軸的不同對折線的變化幅度有很大的影響。坐標軸的數(shù)值設(shè)定的太高，則折線變化過于平緩，掩蓋現(xiàn)實無法清晰的表現(xiàn)折線的變化。反之，如果坐標軸設(shè)定的太低，又會讓折線變化過于陡峭，過于夸張夸大了折線變化的趨勢。

圖2-18 折線的繪制方法

如何提升圖表的易讀性

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

A. 柱形圖

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

圖2-19 柱形圖的標簽排列水平柱形圖一般會簡化坐標，數(shù)據(jù)值跟隨在柱形圖后方，增加數(shù)據(jù)墨水比率。

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

可采用水平柱形圖增加標簽的顯示空間。

圖2-21 水平柱形圖

顯示主刻度，其余數(shù)據(jù)省略，通過交互動作來顯示。比如顯示2010年/2011年，而年里面的具體的月份隱藏，hover時出現(xiàn)。如圖2-22中的橫坐標。高位數(shù)的數(shù)值可以轉(zhuǎn)化單位。比如500,000顯示為50萬，更符合中文的閱讀習慣，且節(jié)省空間。如圖2-22中的縱坐標。