最近在做一個(gè)數(shù)據(jù)可視化大屏項(xiàng)目，從指標(biāo)設(shè)計(jì)、視覺設(shè)計(jì)、可視化動(dòng)效到大屏硬件、開發(fā)工具整個(gè)流程，總結(jié)了一些經(jīng)驗(yàn)和觀點(diǎn)，想和大家分享。

大屏制作工具

大屏的制作，可以用代碼開發(fā)或現(xiàn)成的可視化工具來實(shí)現(xiàn)。

用的比較多的就是JS Ecahrts，但數(shù)據(jù)量支撐、后臺(tái)響應(yīng)、實(shí)時(shí)更新、平臺(tái)運(yùn)維等應(yīng)該還要調(diào)用更多的技術(shù)，這個(gè)不是非常懂就不贅述了。

另一種是用現(xiàn)成的可視化工具，能相對(duì)簡(jiǎn)單高效的搭建一個(gè)數(shù)據(jù)大屏，比如帆軟FineReport，阿里dataV。

大屏硬件

大屏的展示工具幾乎都是LED拼接屏，如果是boss辦公室這種也有用大屏幕顯示器的。

用LED拼接屏，UI設(shè)計(jì)時(shí)不用考慮屏幕縫隙影響內(nèi)容的呈現(xiàn)，內(nèi)容不會(huì)丟失，但有可能影響視覺的表現(xiàn)。設(shè)計(jì)時(shí)需要建立縫隙位置的參考線避，免類重要信息被分割。現(xiàn)在企業(yè)常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏，縫隙越小越貴。

拼接的每塊小屏一般是16:9的高清屏，設(shè)計(jì)尺寸可以把上下高度設(shè)定為1080px，長(zhǎng)度按照拼接屏的數(shù)量比例得出長(zhǎng)度的設(shè)計(jì)尺寸。例如3乘5的一塊大屏幕，高度3塊屏設(shè)為1080，每塊高就是360，360除9乘16等640，640就是一塊屏幕的長(zhǎng)度，640乘5塊屏＝3200最后得出設(shè)計(jì)稿尺寸就是：高1080px乘寬3200px。

下圖是天貓可視化大屏設(shè)計(jì)，圖中屌炸天的3D地球圍繞粒子效果。

接下來就來講講制作可視化大屏的重頭戲，指標(biāo)、布局、設(shè)計(jì)、動(dòng)效。以FineReport制作大屏為例，這篇文章將教你怎么實(shí)現(xiàn)可視化。

指標(biāo)設(shè)計(jì)

設(shè)計(jì)大屏，大家可能會(huì)被酷炫的可視化所感動(dòng)，但一定要謹(jǐn)記，大屏一定是以展示數(shù)據(jù)為核心，任何炫酷屌炸天的表現(xiàn)都要建立在不影響數(shù)據(jù)的有效展示上！

所以，大屏首要考慮的是放哪些數(shù)據(jù)，那么多指標(biāo)應(yīng)該放那些？

一般而言，一個(gè)大屏一定會(huì)有明確的主題，比如銷售數(shù)據(jù)大屏，集團(tuán)營(yíng)業(yè)數(shù)據(jù)大屏。針對(duì)這種主題明確的可視化，推薦一個(gè)非常好用的套路——多維度拆解北極星指標(biāo)法。

第一步：確定一個(gè)北極星指標(biāo)。如銷售大屏，你的銷售總額一定是最重要的吧，這就是主題。

第二步：多維度拆解北極星指標(biāo)，把你的銷售額情況分解。

從時(shí)間的維度。每個(gè)季度每個(gè)月的銷售額情況是如何，銷售額特別高的時(shí)間段，原因是什么，做了哪些措施？

從地理維度。各大區(qū)域銷售額情況如何？可以做個(gè)排名情況。

從計(jì)劃維度。和年初定的計(jì)劃相比，差了多少？

從占比維度。各個(gè)產(chǎn)品占的銷售額多少，哪些是帶來貢獻(xiàn)最多的明星產(chǎn)品。

布局

布局的目的是為了讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理的展現(xiàn)。由于往往展現(xiàn)的是一個(gè)全局的業(yè)務(wù)，一般分為主要指標(biāo)和次要指標(biāo)兩個(gè)層次，主要指標(biāo)反映核心業(yè)務(wù)，次要指標(biāo)用于進(jìn)一步闡述分析，所以在制作時(shí)給予不一樣的側(cè)重。

這里推薦幾種常見的版式：

上面幾個(gè)版式不是金科定律，只是通常推薦的主次分布版式，能讓信息一目了然。實(shí)際情況中，不一定使用主次分布，也可以使用平均分布，或者可以二者結(jié)合進(jìn)行適當(dāng)調(diào)整。比如下圖所示，指標(biāo)很多很多，存在多個(gè)層級(jí)的，就根據(jù)上面所說的基本原則進(jìn)行一些微調(diào)，效果會(huì)很好。

視覺設(shè)計(jì)

設(shè)計(jì)的風(fēng)格，背景色一般用深色調(diào)，深色調(diào)緊張感強(qiáng)，讓視覺更好的聚焦，大屏暗色調(diào)看上去更柔和舒服不刺眼，也會(huì)較省電。

大屏設(shè)計(jì)跟網(wǎng)頁(yè)不一樣，頁(yè)面不能有滾動(dòng)條，大屏的長(zhǎng)寬都是固定的。

字號(hào)跟網(wǎng)頁(yè)設(shè)計(jì)一樣不小于12號(hào)字，可以用于圖表的標(biāo)注，數(shù)據(jù)信息建議14號(hào)字以上，大屏觀者遠(yuǎn)距離才能看全內(nèi)容，所以字號(hào)可以稍大一點(diǎn)。字體不一定只用一種，可以用到一些科技感強(qiáng)的字體，這里要注意，記得把字體給開發(fā)一份。

設(shè)計(jì)完成先去大屏上看一下效果，大屏的品質(zhì)不一樣色調(diào)也會(huì)有很大的差別，要根據(jù)自家的大屏呈現(xiàn)效果做調(diào)整。

可以去看一個(gè)開源的jquery插件庫(kù)網(wǎng)站，里面有很多很棒的動(dòng)態(tài)效果！

交互設(shè)計(jì)

我把大數(shù)據(jù)可視化大屏分為兩種，一種“純展示型”另一種“展示＋功能型”。純展示型幾乎沒有交互，后臺(tái)錄入數(shù)據(jù)，在大屏上展示就行了。展示＋功能型，例如實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)、采集數(shù)據(jù)、數(shù)據(jù)對(duì)比功能、云計(jì)算數(shù)據(jù)、分析與預(yù)警等等。

這里著重說一下帶有功能型的大屏產(chǎn)品的結(jié)構(gòu)層（信息架構(gòu)）。一切功能結(jié)構(gòu)都要圍繞核心數(shù)據(jù)主頁(yè)面來架構(gòu)，因?yàn)榇笃琳故镜暮诵木褪菍⒁恍I(yè)務(wù)的關(guān)鍵指標(biāo)數(shù)據(jù)以數(shù)據(jù)可視化的方式展示出來。

動(dòng)效設(shè)計(jì)

大數(shù)據(jù)可視化大屏設(shè)計(jì)少不了動(dòng)效，動(dòng)效是可視化重要的組成部分，動(dòng)效的增加能讓大屏看上去是活的，增加觀感體驗(yàn)。但過分的動(dòng)效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而弱化了數(shù)據(jù)的展示。

其實(shí)，把握動(dòng)效設(shè)計(jì)這個(gè)度其實(shí)并不難，只要看的舒服不影響數(shù)據(jù)清晰展示就可以，有數(shù)據(jù)展示的頁(yè)面最好動(dòng)的地方不易過多，如果要多，幾個(gè)動(dòng)畫就得有節(jié)奏的變化，例如一個(gè)動(dòng)畫表現(xiàn)的視覺強(qiáng)，另一個(gè)就表現(xiàn)稍弱化，有強(qiáng)有弱、有主有次節(jié)奏才會(huì)舒服，同時(shí)動(dòng)效能結(jié)合數(shù)據(jù)的變化而變化最好，這樣就不容易看數(shù)據(jù)內(nèi)容被動(dòng)畫抓走眼球。

動(dòng)效怎么實(shí)現(xiàn)？

我習(xí)慣用AE的插件Bodymovin生成json文件實(shí)現(xiàn)。

這里用FineReport做大屏自帶一些可視化動(dòng)效：

3D動(dòng)效怎么實(shí)現(xiàn)？

如果自己開發(fā)，用軟件C4D AE PS，先建模選軟再導(dǎo)入AE視覺稿。這里我就用了FineReport自帶的3D動(dòng)效。無非就是個(gè)炫，放一兩個(gè)就夠了。

3D地球可視化

開篇給大家留個(gè)懸念，怎么設(shè)計(jì)3D地球動(dòng)畫。天貓雙十一阿里的3D地球是有專門人員設(shè)計(jì)的，阿里也有這方面的組件庫(kù)。我們可以用開源網(wǎng)站類似組件來實(shí)現(xiàn)，大數(shù)據(jù)頁(yè)面用到的圖表這個(gè)網(wǎng)站幾乎都有，且免費(fèi)。最終的效果是用兩個(gè)組件拼合在一起實(shí)現(xiàn)的，左邊就是代碼，后臺(tái)錄入信息可以讓粒子效果匹配數(shù)據(jù)，最終實(shí)現(xiàn)數(shù)據(jù)的可視化。

同樣有很多的圖表組件，可以用Echarts和Highcharts。前者免費(fèi)、開源、效果炫酷、原生全中文，但兼容性差、經(jīng)常報(bào)錯(cuò)、文檔不夠詳情?；蛘哂酶鼜?qiáng)大的Highcharts，優(yōu)點(diǎn)是文檔實(shí)例很詳細(xì)、易懂易學(xué)、兼容性強(qiáng)可兼容到IE6，但是收費(fèi)。

下圖是我用FineReport做項(xiàng)目時(shí)的3D地球可視化插件。

最后，附上幾張F(tuán)ineReport的大屏圖。帶自動(dòng)播放效果及3D動(dòng)畫特效的數(shù)據(jù)可視化！

FineReport的大屏可以離屏用ipad控制，做到內(nèi)容交互，簡(jiǎn)直是業(yè)務(wù)演示匯報(bào)的利器！

實(shí)際應(yīng)用場(chǎng)景。

總結(jié)

大屏設(shè)計(jì)是一個(gè)長(zhǎng)期跟進(jìn)的過程，有很多問題會(huì)在數(shù)據(jù)真正進(jìn)來時(shí)，放在大屏上才能發(fā)現(xiàn)，所以等產(chǎn)品做到落地時(shí)設(shè)計(jì)方面要積極跟進(jìn)改進(jìn)。

好了就這么多感謝閱讀，希望這篇文章對(duì)你有一點(diǎn)用！想嘗試大屏制作的，先從下載FineReport學(xué)做dashboard開始吧。