掌握這7點，不懂代碼也能做出酷炫可視化大屏！

最近在做一個數據可視化大屏項目，從指標設計、視覺設計、可視化動效到大屏硬件、開發工具整個流程，總結了一些經驗和觀點，想和大家分享。大屏製作工具

大屏的製作，可以用代碼開發或現成的可視化工具來實現。

用的比較多的就是JS+Ecahrts，但數據量支撐、後臺響應、實時更新、平臺運維等應該還要調用更多的技術，這個不是非常懂就不贅述了。

另一種是用現成的可視化工具，能相對簡單高效的搭建一個數據大屏，比如帆軟FineReport，阿里dataV。大屏硬件

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

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

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

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

接下來就來講講製作可視化大屏的重頭戲，指標、佈局、設計、動效。以FineReport製作大屏爲例，這篇文章將教你怎麼實現可視化。

指標設計

設計大屏，大家可能會被酷炫的可視化所感動，但一定要謹記，大屏一定是以展示數據爲核心，任何炫酷屌炸天的表現都要建立在不影響數據的有效展示上！

所以，大屏首要考慮的是放哪些數據，那麼多指標應該放那些？

一般而言，一個大屏一定會有明確的主題，比如銷售數據大屏，集團營業數據大屏。針對這種主題明確的可視化，推薦一個非常好用的套路——多維度拆解北極星指標法。

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

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

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

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

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

從佔比維度。各個產品佔的銷售額多少，哪些是帶來貢獻最多的明星產品。佈局

佈局的目的是爲了讓業務指標和數據合理的展現。由於往往展現的是一個全局的業務，一般分爲主要指標和次要指標兩個層次，主要指標反映核心業務，次要指標用於進一步闡述分析，所以在製作時給予不一樣的側重。

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

上面幾個版式不是金科定律，只是通常推薦的主次分佈版式，能讓信息一目瞭然。實際情況中，不一定使用主次分佈，也可以使用平均分佈，或者可以二者結合進行適當調整。比如下圖所示，指標很多很多，存在多個層級的，就根據上面所說的基本原則進行一些微調，效果會很好。視覺設計

設計的風格，背景色一般用深色調，深色調緊張感強，讓視覺更好的聚焦，大屏暗色調看上去更柔和舒服不刺眼，也會較省電。

大屏設計跟網頁不一樣，頁面不能有滾動條，大屏的長寬都是固定的。

字號跟網頁設計一樣不小於12號字，可以用於圖表的標註，數據信息建議14號字以上，大屏觀者遠距離才能看全內容，所以字號可以稍大一點。字體不一定只用一種，可以用到一些科技感強的字體，這裏要注意，記得把字體給開發一份。

設計完成先去大屏上看一下效果，大屏的品質不一樣色調也會有很大的差別，要根據自家的大屏呈現效果做調整。

可以去看一個開源的jquery插件庫網站，裏面有很多很棒的動態效果！交互設計

我把大數據可視化大屏分爲兩種，一種“純展示型”另一種“展示＋功能型”。純展示型幾乎沒有交互，後臺錄入數據，在大屏上展示就行了。展示＋功能型，例如實時監控數據、採集數據、數據對比功能、雲計算數據、分析與預警等等。

這裏着重說一下帶有功能型的大屏產品的結構層（信息架構）。一切功能結構都要圍繞核心數據主頁面來架構，因爲大屏展示的核心就是將一些業務的關鍵指標數據以數據可視化的方式展示出來。

動效設計

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

其實，把握動效設計這個度其實並不難，只要看的舒服不影響數據清晰展示就可以，有數據展示的頁面最好動的地方不易過多，如果要多，幾個動畫就得有節奏的變化，例如一個動畫表現的視覺強，另一個就表現稍弱化，有強有弱、有主有次節奏纔會舒服，同時動效能結合數據的變化而變化最好，這樣就不容易看數據內容被動畫抓走眼球。

動效怎麼實現？

我習慣用AE的插件Bodymovin生成json文件實現。

這裏用FineReport做大屏自帶一些可視化動效：

3D動效怎麼實現？

如果自己開發，用軟件C4D+AE+PS，先建模選軟再導入AE視覺稿。這裏我就用了FineReport自帶的3D動效。無非就是個炫，放一兩個就夠了。

3D地球可視化

開篇給大家留個懸念，怎麼設計3D地球動畫。天貓雙十一阿里的3D地球是有專門人員設計的，阿里也有這方面的組件庫。我們可以用開源網站類似組件來實現，大數據頁面用到的圖表這個網站幾乎都有，且免費。最終的效果是用兩個組件拼合在一起實現的，左邊就是代碼，後臺錄入信息可以讓粒子效果匹配數據，最終實現數據的可視化。

同樣有很多的圖表組件，可以用Echarts和Highcharts。前者免費、開源、效果炫酷、原生全中文，但兼容性差、經常報錯、文檔不夠詳情。或者用更強大的Highcharts，優點是文檔實例很詳細、易懂易學、兼容性強可兼容到IE6，但是收費。

下圖是我用FineReport做項目時的3D地球可視化插件。