關(guān)于數(shù)據(jù)可視化的經(jīng)驗(yàn)分享，希望能對(duì)看到這篇文章的你，有一個(gè)初步的設(shè)計(jì)思路~

　　什么是數(shù)據(jù)可視化?

　　數(shù)據(jù)可視化技術(shù)的基本思想，是將數(shù)據(jù)庫(kù)中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元元素表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。

　　簡(jiǎn)單理解就是，數(shù)據(jù)可視化主要是借助圖形化手段，清晰有效地傳達(dá)與溝通信息。

　　如何展開(kāi)數(shù)據(jù)可視化設(shè)計(jì)?

　　1、明確需呈現(xiàn)的業(yè)務(wù)指標(biāo)

　　當(dāng)我們拿到需求后，首先就是要確認(rèn)需求，梳理有疑問(wèn)的地方，及時(shí)與產(chǎn)品經(jīng)理溝通。在溝通這一步中，重點(diǎn)介紹一下3個(gè)名詞：主要指標(biāo)、次要指標(biāo)、輔助指標(biāo)。

　　主要指標(biāo)反映核心業(yè)務(wù)，位于屏幕中央;次要指標(biāo)用于進(jìn)一步闡述分析，位于屏幕兩側(cè);輔助指標(biāo)是主要指標(biāo)的補(bǔ)充信息，可不顯示或顯示在屏幕兩側(cè)或鼠標(biāo)經(jīng)過(guò)時(shí)顯示。

　　這3個(gè)指標(biāo)將會(huì)關(guān)系到我們選擇什么樣的圖表類型，以及頁(yè)面的布局如何呈現(xiàn)。

　　2、為指標(biāo)選擇合適的圖表

　　在這里，我只介紹常用的幾種圖表類型，如果想看更豐富的圖表類型，可以參考echarts： http://echarts.baidu.com

　　(1)柱狀圖

　　柱狀圖常用于類別之間的比較，反映數(shù)據(jù)之間的差異。由于肉眼對(duì)高度差異很敏感，所以柱狀圖的表現(xiàn)形式會(huì)很直觀。

　　柱狀圖有單指標(biāo)柱圖、多指標(biāo)柱圖以及堆疊柱圖類型。

　　(2)折線圖

　　折線圖常用于反映數(shù)據(jù)隨著時(shí)間變化而變化的趨勢(shì)。

　　折線圖有單指標(biāo)趨勢(shì)圖和多指標(biāo)趨勢(shì)圖。

　　(3)餅圖

　　餅圖常用于表示比例關(guān)系，可以展示每一部分占總體的百分比是多少。

　　在這里分享4個(gè)關(guān)于餅圖設(shè)計(jì)的經(jīng)驗(yàn)。

　　1.由于人的視線習(xí)慣于順時(shí)針?lè)较蛴^察，因此餅圖中的數(shù)據(jù)占比盡量考慮從大到小順時(shí)針排列。

　　2.肉眼對(duì)于餅圖只能感受到具有明顯面積差異的數(shù)據(jù)，當(dāng)面積差異很小時(shí)，我們就無(wú)法分辨數(shù)據(jù)的占比大小。因此，設(shè)計(jì)餅圖時(shí)，最好能顯示數(shù)據(jù)占比的具體百分比。

　　3.當(dāng)餅圖中數(shù)據(jù)類型過(guò)多時(shí)，可以考慮將餅圖換成柱狀圖，便于閱讀;或考慮將餅圖換成復(fù)合餅圖，把占比較小的數(shù)據(jù)放到第二個(gè)餅圖中，雖然還是采用的餅圖形式，但是閱讀起來(lái)會(huì)層次分明。

　　4.當(dāng)數(shù)據(jù)中有0的數(shù)值時(shí)，就不要使用餅圖了，因?yàn)轱瀳D無(wú)法體現(xiàn)0值的數(shù)據(jù)。可以考慮柱狀圖或條形圖。

　　餅圖有標(biāo)準(zhǔn)餅圖，中空餅圖和環(huán)形餅圖。

　　(4)條形圖

　　條形圖又稱橫向柱狀圖，在echarts中，直接將條形圖歸到了柱狀圖的類別中。

　　其實(shí)條形圖和柱狀圖的使用場(chǎng)景很相似，都是用于分類之間的比較。但兩者有一個(gè)最重要的區(qū)別就是，當(dāng)數(shù)據(jù)分類多且數(shù)據(jù)名稱字段較長(zhǎng)時(shí)，應(yīng)選擇條形圖，因?yàn)闂l形圖能夠橫向布局，方便展示較長(zhǎng)緯度的字段名稱。

　　實(shí)際應(yīng)用中，條形圖常用于表示數(shù)據(jù)之間的順序排列。例如Top3或Top5數(shù)據(jù)。

　　(5)雷達(dá)圖

　　雷達(dá)圖可以用來(lái)表現(xiàn)一個(gè)周期數(shù)值的變化，也可以用來(lái)表現(xiàn)特定對(duì)象主要參數(shù)的相對(duì)關(guān)系。它常用于財(cái)務(wù)分析數(shù)據(jù)中，用來(lái)分析企業(yè)的負(fù)債能力、運(yùn)營(yíng)能力、盈利和發(fā)展能力等指標(biāo)。

　　在這里分享2個(gè)關(guān)于雷達(dá)圖的設(shè)計(jì)經(jīng)驗(yàn)。

　　1、使用雷達(dá)圖時(shí)，應(yīng)注意其數(shù)據(jù)類別最多6個(gè)。

　　2、因?yàn)橛脩粢话悴皇煜だ走_(dá)圖，所以在使用雷達(dá)圖時(shí)，要加上文字說(shuō)明，減輕閱讀負(fù)擔(dān)。例如王者榮耀的對(duì)戰(zhàn)雷達(dá)圖中，每個(gè)數(shù)據(jù)點(diǎn)代表什么都用文字說(shuō)明了。

　　(6)地圖

　　地圖適用于有空間位置的數(shù)據(jù)集。

　　地圖類型有區(qū)域地圖、散點(diǎn)地圖、熱力地圖。

　　區(qū)域地圖：

　　按照國(guó)家、省市行政區(qū)劃分，用來(lái)展現(xiàn)地理信息，以及與地理位置有關(guān)的信息，指標(biāo)的多少可以用顏色深淺區(qū)分。

　　散點(diǎn)地圖：

　　基于高德地圖實(shí)現(xiàn)，通過(guò)定位經(jīng)緯度，用散點(diǎn)來(lái)表示所在位置的信息指標(biāo)。

　　熱力地圖：

　　以特殊高亮的形式顯示訪客熱衷的頁(yè)面區(qū)域和訪客所在的地理區(qū)域的圖示。不同顏色反映不同區(qū)域密度的分布。

　　3、排版設(shè)計(jì)，突出關(guān)鍵信息

　　(1)頁(yè)面布局

　　布局主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行劃分。主要指標(biāo)位于中間位置，次要指標(biāo)按優(yōu)先級(jí)依次在主要指標(biāo)周圍展開(kāi)，位于屏幕兩側(cè)。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣布局的好處是能減少認(rèn)知負(fù)擔(dān)并提高信息傳遞的效率。

　　總結(jié)：頁(yè)面布局需注意重點(diǎn)信息突出，做到主次分明、條理清晰，還需注意頁(yè)面留白，有呼吸感。

　　(2)配色

　　相信大家在看很多數(shù)據(jù)可視化的設(shè)計(jì)案例時(shí)，都會(huì)發(fā)現(xiàn)常用深色作為背景色。主要是因?yàn)橐韵?點(diǎn)原因：

　　1.數(shù)據(jù)可視化的設(shè)計(jì)常用于大屏展示，由于背景面積過(guò)大，使用深色背景能夠減少屏幕色差對(duì)整體表現(xiàn)的影響，也避免了觀眾在視覺(jué)上覺(jué)得刺眼。

　　2.深色背景更能聚焦視覺(jué)，利用色調(diào)與明度的變化，能夠保證可視化圖表的清晰辨識(shí)度，便于突出內(nèi)容。

　　3.方便做出一些流光、粒子等酷炫的效果。

　　整體背景深色系，雖然選擇搭配很多，不過(guò)百搭的色系還是推薦深藍(lán)色系。

　　在這里，分享一些常用的色彩搭配(*^__^*) ~

　　總結(jié):

　　在實(shí)際的設(shè)計(jì)過(guò)程中，還會(huì)遇到其他的問(wèn)題，比如字體的選擇，動(dòng)效的設(shè)計(jì)。

　　關(guān)于動(dòng)效的設(shè)計(jì)會(huì)發(fā)現(xiàn)我們有時(shí)候難以在設(shè)計(jì)稿中表現(xiàn)的動(dòng)效，開(kāi)發(fā)能利用代碼輕易實(shí)現(xiàn);同理，有些效果我們能用設(shè)計(jì)工具輕易實(shí)現(xiàn)，但開(kāi)發(fā)卻很難實(shí)現(xiàn)，或耗費(fèi)時(shí)間較長(zhǎng)。

　　因此在設(shè)計(jì)的過(guò)程中，一定要注意與開(kāi)發(fā)溝通，哪些地方我們可以盡情發(fā)揮，哪些地方需要遵守規(guī)則。