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

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

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

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

　　如何展開數(shù)據(jù)可視化設計?

　　1、明確需呈現(xiàn)的業(yè)務指標

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

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

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

　　2、為指標選擇合適的圖表

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

　　(1)柱狀圖

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

　　柱狀圖有單指標柱圖、多指標柱圖以及堆疊柱圖類型。

　　(2)折線圖

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

　　折線圖有單指標趨勢圖和多指標趨勢圖。

　　(3)餅圖

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

　　在這里分享4個關于餅圖設計的經(jīng)驗。

　　1.由于人的視線習慣于順時針方向觀察，因此餅圖中的數(shù)據(jù)占比盡量考慮從大到小順時針排列。

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

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

　　4.當數(shù)據(jù)中有0的數(shù)值時，就不要使用餅圖了，因為餅圖無法體現(xiàn)0值的數(shù)據(jù)。可以考慮柱狀圖或條形圖。

　　餅圖有標準餅圖，中空餅圖和環(huán)形餅圖。

　　(4)條形圖

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

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

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

　　(5)雷達圖

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

　　在這里分享2個關于雷達圖的設計經(jīng)驗。

　　1、使用雷達圖時，應注意其數(shù)據(jù)類別最多6個。

　　2、因為用戶一般不熟悉雷達圖，所以在使用雷達圖時，要加上文字說明，減輕閱讀負擔。例如王者榮耀的對戰(zhàn)雷達圖中，每個數(shù)據(jù)點代表什么都用文字說明了。

　　(6)地圖

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

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

　　區(qū)域地圖：

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

　　散點地圖：

　　基于高德地圖實現(xiàn)，通過定位經(jīng)緯度，用散點來表示所在位置的信息指標。

　　熱力地圖：

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

　　3、排版設計，突出關鍵信息

　　(1)頁面布局

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

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

　　(2)配色

　　相信大家在看很多數(shù)據(jù)可視化的設計案例時，都會發(fā)現(xiàn)常用深色作為背景色。主要是因為以下3點原因：

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

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

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

　　整體背景深色系，雖然選擇搭配很多，不過百搭的色系還是推薦深藍色系。

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

　　總結(jié):

　　在實際的設計過程中，還會遇到其他的問題，比如字體的選擇，動效的設計。

　　關于動效的設計會發(fā)現(xiàn)我們有時候難以在設計稿中表現(xiàn)的動效，開發(fā)能利用代碼輕易實現(xiàn);同理，有些效果我們能用設計工具輕易實現(xiàn)，但開發(fā)卻很難實現(xiàn)，或耗費時間較長。

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