大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

炫酷動效、豐富色彩、視覺沖擊，大屏在觀感上直接給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。大家熟悉的天貓雙11類大屏就是利用此特點，打造了熱烈、狂歡的節日氛圍，原本在后臺的數據經過可視化之后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

那么，如何做出如此完美、有感染力的大屏呢？今天，小億就拋磚引玉，圍繞大屏可視化的重頭戲，從指標設計、排版布局、視覺設計到可視化動效整個流程，總結了一些經驗和觀點和大家分享。以億信BI制作大屏為例，這篇文章將教你實現可視化的基本套路。

趕緊拿小本本記下：規范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

1、抽取關鍵指標

設計大屏，大家可能會被酷炫的可視化所感動，但一定要謹記，大屏一定是以展示數據為核心，任何炫酷吊炸天的表現都要建立在不影響數據的有效展示上！因此，需要根據業務場景抽取關鍵指標。

一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，就知道大屏上大概會顯示哪些內容，以及大屏會被分為幾塊。確定關鍵指標后，可根據業務場景確定指標的重要性（主、次、輔）。

關鍵指標確定之后，我們要確定指標的分析維度。分析維度代表分析的角度，從不同角度分析會得到不同結論，數據是否能分析透徹，是否能為決策提供輔助支持，都是依賴于指標的分析維度。我們常見的分析方法有類比、趨勢、分布和構成等，分析方法的選擇依賴于實際的業務場景，可參考上圖思維指南選定可視化圖表類型。

2、確定排版布局

根據確定關鍵指標以及其重要性來進行排版布局。整個頁面設計要突出關鍵指標，注意主次分明，讓讀者更加直觀地閱讀和理解。以下推薦幾種常規的排版布局：

（1）左右分布

（2）中心環繞

（3）上下布局

以上是我們常規主次分布的排版，實際應用過程中可根據具體指標的多少，進行靈活調整，只要能突出主題即可，不可硬套。

附上幾個優秀的大屏排版布局供大家參考。

3、定義配色風格

不同的顏色，不同的色彩搭配，都會給觀看者不同的視覺感受。色彩搭配的學問博大精深，比如冷暖色、明度、純度、色彩的輕重感等因素都影響觀看者的感受。

大屏可視化采取的主色調多以深藍色為主，從背景顏色、背景圖片、統計圖顏色、組件配色大色塊主要采用深色系，讓整個頁面更加協調。【配色可參考之前的文章，戳get最chic可視化配色方案，圖表也能成為時髦精】

上幾張億信資深工程師操刀實現的大屏可視化的效果圖，此刻驕傲臉.jpg

4、動畫效果設計

大數據可視化大屏設計少不了動效，動效是可視化重要的組成部分，動效可以使整個大屏富有動感，也更加吸引人的眼球。但是過度的動效會產生亂花迷眼的反效果，需要把握動效設計的度。

動效的范圍很廣，比如動態的圖片、頁面輪播效果、列表滾動的效果、數據實時變化的效果等，這些都是動效的范圍。

介紹幾個常用的動效：

上圖是一個超市的大屏效果，首先左側銷售概覽有選中跳轉的效果，使整個頁面更富有活力；中間本月銷售數值可以實時刷新，可對實時數據進行監控；右側庫房庫存預警列表有滾動的狀態，借助滾動的方式，將多條數據展現出來，避免平鋪占據大量的版塊內容。

地圖的流向方式使整個頁面富有動感，讓靜態的頁面富有生機，特別是3D動效的運用，整個大屏活起來。

總結

小億簡單的從指標、布局、配色、動效等幾個方面，介紹了一些大屏展現頁面的制作方法。如果要對大屏設計的特點作一個總結：全局突出重點圖表，單表突出重點數據。把握好這點，至少可以避過大部分的坑。但一個高水準的大屏，還少不了一些細節的把控。