一、什么是大數據可視化

圖形表現數據，即將復雜難懂的數據轉換成直觀形象的圖形圖像（如圖表(Chart)、圖(Diagram)和地圖(Map)等）叫做數據可視化。
其本質是數據空間到圖形空間的映射，是抽象數據的具象表達，例如：

隨(sui)著大數(shu)(shu)(shu)據(ju)(ju)(ju)時代的(de)(de)到來，數(shu)(shu)(shu)據(ju)(ju)(ju)已經滲透(tou)到當今每一(yi)個行(xing)業和(he)業務職能領域，數(shu)(shu)(shu)據(ju)(ju)(ju)的(de)(de)容(rong)量和(he)復(fu)雜(za)性也(ye)與日俱增。數(shu)(shu)(shu)據(ju)(ju)(ju)變成(cheng)了(le)交流的(de)(de)語(yu)言，但數(shu)(shu)(shu)據(ju)(ju)(ju)肯定不能以字母，符號(hao)，代碼(ma)等專業語(yu)言形式出現，所以數(shu)(shu)(shu)據(ju)(ju)(ju)可(ke)視(shi)化成(cheng)了(le)必然的(de)(de)選擇。數(shu)(shu)(shu)據(ju)(ju)(ju)可(ke)視(shi)化使(shi)得用(yong)(yong)戶(hu)對(dui)數(shu)(shu)(shu)據(ju)(ju)(ju)的(de)(de)空(kong)間(jian)分布(bu)模式，趨(qu)勢，相關性一(yi)目(mu)了(le)然，直觀(guan)清晰(xi)，大大降低了(le)用(yong)(yong)戶(hu)對(dui)數(shu)(shu)(shu)據(ju)(ju)(ju)的(de)(de)閱讀和(he)理(li)解(jie)的(de)(de)復(fu)雜(za)度(du)，方便了(le)用(yong)(yong)戶(hu)挖掘(jue)數(shu)(shu)(shu)據(ju)(ju)(ju)背后的(de)(de)價值，利用(yong)(yong)數(shu)(shu)(shu)據(ju)(ju)(ju)做出更好的(de)(de)決策，提高辦事效率。

二、數據可視化設計過程

明確設計原則——>了解設計規范——>確定設計需求——>分析設計風格——>規劃排版布局——>分析數據，考慮匹配圖形圖像——>檢查與測試

一個好的流程可以讓我們事半功倍，首先做事先明確基本原則，了解基本規范，再根據項目的商業目標和用戶目標思考設計風格。根據原型的內容，判斷元素的親密性，重要性規劃排版布局。
在了解(jie)了需求的(de)基礎上分(fen)析展示(shi)哪些數(shu)據(ju)，包(bao)含元數(shu)據(ju)、數(shu)據(ju)維度、查看的(de)視角等；其次，我們利(li)用可視化工具，根據(ju)一些已有(you)的(de)圖表類型(xing)快速做出(chu)各種圖表。

三、結合項目分析如何實施數據可視化

第一階段：項目開始前準備工作

明確設計原則
1）外觀上：簡潔，美觀，大氣
 2）內(nei)容上：主次分(fen)明(ming)，精準展現(xian)數據之間(jian)的差異，趨勢，規律

了解設計規范
1）設計尺寸：現今大屏幾乎都是拼接屏，其中單個屏幕一般比例為16：9，屏幕整體高度按1080px，寬度根據屏幕數量計算。
在下面的大數據拼接屏示意圖中，2乘3的拼接屏，高度設為1080px，得出單屏高度540px，根據單屏比例16：9計算得出單屏高度960px，那整體寬度為960x3=2880px。

2）屏幕之間隙縫：如大屏由幾個小屏幕拼接而成，那就會涉及隙縫問題，請在設計時避免視覺信息被分割。
3）文字(zi)及其大小(xiao)(xiao)：首先(xian)注意字(zi)體版權問題，其次，文字(zi)大小(xiao)(xiao)和web端顯示一(yi)樣，最小(xiao)(xiao)不(bu)要(yao)小(xiao)(xiao)于(yu)12px。

第二階段：項目開始實施——以我司某健康護管家全國數據可視化項目設計為例

確定設計需求
1）界面尺寸：大屏是1乘3的拼接屏，由此很容易得出，設計稿尺寸：5760x1080px。
2）應用(yong)場景：PC端、大屏投影

分析設計風格：情緒版
下圖為情緒版設計流程圖：

本項目設計風格關鍵詞：科技感、大氣、簡潔，采用情緒版設計方法得出項目背景色主色調為深藍色，并在采用發光的樣式營造科技感。最終效果圖如下圖所示：

規劃排版布局
排版布局遵從下面三個原則：
1）親密性：將數據關系關聯的內容組織在一起，物理位置靠近的相關項會被看做為一個整體。
2）重要性：當屏幕上數據較多時，根據重要性來安排，一般重要的會占比較大且位于中心位置。
3）對齊性：元素的對齊會使頁面顯得簡潔，工整(zheng)，利(li)于(yu)閱讀。

項目原型為：

根據布局原則劃分如下：

分析數據，考慮匹配圖形圖像
作為設計師，此處工作重點是需要把原型提供的文字信息加工成易理解，可實現的可視化圖形。

可視化設計分析：
此處是為了體現全國用戶總數和用戶在全國地區分布情況，那就可以采用區域地圖形式展現整體情況。
區域地圖使用場景：按照國家、省市行政區劃分，用來展現地理信息，以及與地理位置有關的信息，指標的多少可以用顏色深淺區分。

可視化設計分析：
此處是為了分別體現時間和服務總數，累計用戶總數、服務人員總數的關系，關系比簡單一且具有連續性，所以采用線圖形式展現。
線圖使用場景：線圖可用來反映隨時間變化而變化的關系，尤其是在趨勢比單個數據點更重要的場合。

可視化設計分析：
此處是為了體現單個數值的高低反映情況好壞之間的關系，所以采用儀表盤形式展現。
儀表盤使用場景：儀表盤可以用來表現數值情況好壞的關系。

可視化設計分析：
此處是為了體現發病人數占總數的多少，體現占比關系，所以采用環形餅圖。
餅圖使用場景：構成比例關系時，最好使用餅圖，給人一種整體的形象，可以展示每一部分所占全部的百分比。

檢查與測試
整體設計稿做完以后并沒有結束，還需要進一步的打磨修改
1）檢查布局在填充內容后是否依然合適。
2）檢查圖表帶入真實數據后是否仍然能精準表達。
3）檢查整體風格是否能體現品牌特性，行業特性，用戶特性。
4）與開發溝通所做的設計樣式、動效是否能夠實現。
5）可以先(xian)將(jiang)設計稿投到大屏上看下實(shi)際展示效果，存不(bu)存在字(zi)體偏小，顏(yan)色失真，圖片(pian)拉伸壓(ya)縮(suo)等現象。

四、動效設計

動效制作
動效設計是可視化的重要組成部分，通常用來展現數據趨勢，增加體驗感官。
以我司某健康護管家全國數據可視化設計為例：

制作上我習慣用ae軟件，動畫做完以后用bodymovin插件，可以直接生成代碼，并且可以隨時打開看網頁版效果，如下圖所示。不過這個插件也會有些限制，加了效果預設的那部分動畫轉不了代碼。

動效設計注意點
1）避免喧賓奪主：將數據可視化，頁面本身會有很多圖標圖形，如果動效用的過多，會產生視覺干擾，無主次之分。
2）動效結合數(shu)據：將動效和數(shu)據趨勢相結合，不僅能吸(xi)引眼球，還能幫助理解數(shu)據。

五結語
數據可視化(hua)設(she)計對(dui)于設(she)計師(shi)來說(shuo)，重點(dian)不止于頁面美(mei)觀度，還要(yao)具備相應(ying)的(de)邏(luo)輯思(si)維能力(li)，能夠化(hua)繁(fan)為簡，選擇(ze)合(he)適的(de)圖標圖形，為用戶提供直(zhi)準確(que)的(de)信息。本文僅僅是個(ge)人的(de)淺薄見解，如有遺漏或不足(zu)之處歡迎大家斧正交流。

六、附上常用的數據可視化的圖表樣式參考網址
ECharts：
Google Charts:
Flot:
D3:
Highcharts:
DATAV: