一、什么是大數(shù)據(jù)可視化

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

隨著大數(shù)據(jù)時代的到來，數(shù)據(jù)已經(jīng)滲透到當今每一個行業(yè)和業(yè)務(wù)職能領(lǐng)域，數(shù)據(jù)的容量和復(fù)雜性也與日俱增。數(shù)據(jù)變成了交流的語言，但數(shù)據(jù)肯定不能以字母，符號，代碼等專業(yè)語言形式出現(xiàn)，所以數(shù)據(jù)可視化成了必然的選擇。數(shù)據(jù)可視化使得用戶對數(shù)據(jù)的空間分布模式，趨勢，相關(guān)性一目了然，直觀清晰，大大降低了用戶對數(shù)據(jù)的閱讀和理解的復(fù)雜度，方便了用戶挖掘數(shù)據(jù)背后的價值，利用數(shù)據(jù)做出更好的決策，提高辦事效率。

二、數(shù)據(jù)可視化設(shè)計過程

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

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

三、結(jié)合項目分析如何實施數(shù)據(jù)可視化

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

明確設(shè)計原則
1）外觀上：簡潔，美觀，大氣
2）內(nèi)容上：主次分明，精準展現(xiàn)數(shù)據(jù)之間的差異，趨勢，規(guī)律

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

2）屏幕之間隙縫：如大屏由幾個小屏幕拼接而成，那就會涉及隙縫問題，請在設(shè)計時避免視覺信息被分割。
3）文字及其大?。菏紫茸⒁庾煮w版權(quán)問題，其次，文字大小和web端顯示一樣，最小不要小于12px。

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

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

分析設(shè)計風格：情緒版
下圖為情緒版設(shè)計流程圖：

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

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

項目原型為：

根據(jù)布局原則劃分如下：

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

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

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

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

可視化設(shè)計分析：
此處是為了體現(xiàn)發(fā)病人數(shù)占總數(shù)的多少，體現(xiàn)占比關(guān)系，所以采用環(huán)形餅圖。
餅圖使用場景：構(gòu)成比例關(guān)系時，最好使用餅圖，給人一種整體的形象，可以展示每一部分所占全部的百分比。

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

四、動效設(shè)計

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

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

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

五結(jié)語
數(shù)據(jù)可視化設(shè)計對于設(shè)計師來說，重點不止于頁面美觀度，還要具備相應(yīng)的邏輯思維能力，能夠化繁為簡，選擇合適的圖標圖形，為用戶提供直準確的信息。本文僅僅是個人的淺薄見解，如有遺漏或不足之處歡迎大家斧正交流。

六、附上常用的數(shù)據(jù)可視化的圖表樣式參考網(wǎng)址
ECharts：https://www.echartsjs.com/index.html
Google Charts:www.google-chart.com
Flot:http://www.flotcharts.org/
D3:https://d3js.org/
Highcharts:https://www.highcharts.com.cn/
DATAV:https://data.aliyun.com/visual/datav?spm=5176.8142029.388261.129.