從大屏可視化出現以來，一直深受各界企業的追捧，最典型的就是每年淘寶的雙十一銷售額大屏，最近我也剛接觸了一個大屏項目，藉此總結了一些可視化大屏製作經驗與大家分享，這篇先主要從大屏設計角度總結了幾點，詳細的製作步驟日後奉上。

一、梳理業務，明確需求

在任何產品動手開發之前肯定也搞清楚用戶需求，大屏製作也一樣，作為數據分析的一部分，可視化大屏的製作需要從業務價值出發，梳理業務，明確需求，搞清楚要解決的問題或者要達成的目標，確定可視化大屏的主題，然後根據主題提煉出關鍵指標。

比方說我們要做個生鮮電商的實時銷售數據，主題就是銷售數據可視化展示，那麼，本次可視化數據的組織，將圍繞著銷售額來進行組織。關鍵指標就可以是：目標銷售額、實際銷售額、銷售額完成率、今日下單訂單數、今日下單用戶數、訂單均價等等

二、大屏製作工具

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

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

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

三、大屏設計

接下來就來講講製作可視化大屏的重頭戲：指標、布局、設計、動效。這裡以我比較常用的FineReport製作大屏為例，教你如何製作一張大屏。

1、指標緯度

設計大屏，大家可能會被酷炫的可視化所感動，但一定要謹記，大屏一定是以展示數據為核心，任何炫酷屌炸天的展現都要建立在不影響數據的有效展示上。所以，大屏首要考慮的是放哪些數據，那麼多指標應該放那些？

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

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

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

• 從時間的維度。每個季度每個月的銷售額情況是如何，銷售額特別高的時間段，原因是什麼，做了哪些措施？
• 從地理維度。各大區域銷售額情況如何？可以做個排名情況。
• 從計劃維度。和年初定的計劃相比，差了多少？
• 從占比維度。各個產品占的銷售額多少，哪些是帶來貢獻最多的明星產品。

2、大屏布局

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

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

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

3、視覺設計

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

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

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

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

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

4、互動設計

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

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

5、動效設計

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

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

動效怎麼實現？

我習慣用AE的插件Bodymovin生成json文件實現。這裡先用FineReport做大屏自帶一些可視化動效：

3D動效怎麼實現？

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

3D地球可視化

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

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

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

最後放一張我做的大屏成果：

總結

大屏設計是一個長期跟進的過程，有很多問題會在數據真正進來時，放在大屏上才能發現，所以等產品做到落地時設計方面要積極跟進改進。

註：想要finereport下載地址的，可以後台私信回復我「大屏」獲得！