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

　　什么是數據可視化?

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

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

　　如何展開數據可視化設計?

　　1、明確需呈現的業務指標

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

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

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

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

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

　　(1)柱狀圖

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

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

　　(2)折線圖

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

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

　　(3)餅圖

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

　　在這里分享4個關于餅圖設計的經驗。

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

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

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

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

　　餅圖有標準餅圖，中空餅圖和環形餅圖。

　　(4)條形圖

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

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

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

　　(5)雷達圖

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

　　在這里分享2個關于雷達圖的設計經驗。

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

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

　　(6)地圖

　　地圖適用于有空間位置的數據集。

　　地圖類型有區域地圖、散點地圖、熱力地圖。

　　區域地圖：

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

　　散點地圖：

　　基于高德地圖實現，通過定位經緯度，用散點來表示所在位置的信息指標。

　　熱力地圖：

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

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

　　(1)頁面布局

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

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

　　(2)配色

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

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

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

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

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

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

　　總結:

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

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

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