掌握这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地球可視化插件。
?
最后，附上幾張大屏圖。帶自動播放效果及3D動畫特效的數據可視化！
?
?
大屏可以離屏用ipad控制，做到內容交互，簡直是業務演示匯報的利器！
?
?
實際應用場景。
?
?
總結
大屏設計是一個長期跟進的過程，有很多問題會在數據真正進來時，放在大屏上才能發現，所以等產品做到落地時設計方面要積極跟進改進。
好了就這么多感謝閱讀，希望這篇文章對你有一點用！想嘗試大屏制作的，可前往官網自行下載FineReport學做dashboard。
總結
以上是生活随笔為你收集整理的掌握这7点，不懂代码也能做出酷炫可视化大屏！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好的PHP库离不开一个好的命名空间
- 下一篇： 准备刺第一针了（飞秋官方下载）