最近在做一個資料可視化大屏項目，從名額設計、視覺設計、可視化動效到大屏硬體、開發工具整個流程，總結了一些經驗和觀點，想和大家分享。
大屏制作工具
大屏的制作，可以用代碼開發或現成的可視化工具來實作。
用的比較多的就是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視覺稿。這裡我就用了自帶的3D動效。無非就是個炫，放一兩個就夠了。
3D地球可視化
開篇給大家留個懸念，怎麼設計3D地球動畫。天貓雙十一阿裡的3D地球是有專門人員設計的，阿裡也有這方面的元件庫。我們可以用開源網站類似元件來實作，大資料頁面用到的圖表這個網站幾乎都有，且免費。最終的效果是用兩個元件拼合在一起實作的，左邊就是代碼，背景錄入資訊可以讓粒子效果比對資料，最終實作資料的可視化。
同樣有很多的圖表元件，可以用Echarts和Highcharts。前者免費、開源、效果炫酷、原生全中文，但相容性差、經常報錯、文檔不夠詳情。或者用更強大的Highcharts，優點是文檔執行個體很詳細、易懂易學、相容性強可相容到IE6，但是收費。
下圖是我做項目時的3D地球可視化插件。
最後，附上幾張大屏圖。帶自動播放效果及3D動畫特效的資料可視化！
大屏可以離屏用ipad控制，做到内容互動。
實際應用場景。
總結
大屏設計是一個長期跟進的過程，有很多問題會在資料真正進來時，放在大屏上才能發現，是以等産品做到落地時設計方面要積極跟進改進。
好了就這麼多感謝閱讀，希望這篇文章對你有一點用！感興趣的話可以前往官網下載下傳軟體嘗試。