所謂大屏，顧名思義就是一個很大很大的屏。

舉個例子，Dashboard可能大家有所了解，就是將一些業(yè)務(wù)的關(guān)鍵指標(biāo)以數(shù)據(jù)可視化的方式展示。而大屏就是將Dashboard展示到一塊或多塊LED大屏上。經(jīng)常用在公司的展覽中心、老板的辦公室，還有城市交通管控中心、交易大廳等等。一般怎么清楚怎么來，怎么酷炫怎么搞。譬如人民的名義里就有這樣一幕：

（圖片源自網(wǎng)絡(luò)）

前幾天，有位網(wǎng)友發(fā)了個生產(chǎn)大屏的帖子，自己做了個大屏的模板，引發(fā)了很大反響。

也是應(yīng)于這樣的契機，這里拋磚引玉，圍繞如何制作的美而實用的大屏，講講我們的經(jīng)驗。

1、布局排版

大屏首先是要服務(wù)于業(yè)務(wù)，讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理的展現(xiàn)。由于往往展現(xiàn)的是一個企業(yè)全局的業(yè)務(wù)，一般分為主要指標(biāo)和次要指標(biāo)兩個層次，主要指標(biāo)反映核心業(yè)務(wù)，次要指標(biāo)用于進一步闡述。所以在制作時給予不一樣的側(cè)重。

這里推薦幾種常見的版式。

上面幾個版式不是金科定律，只是通常推薦的主次分布版式，能讓信息一目了然。實際項目中，不一定使用主次分布，也可以使用平均分布，或者可以二者結(jié)合進行適當(dāng)調(diào)整。比如下圖所示，指標(biāo)很多很多，存在多個層級的，就根據(jù)上面所說的基本原則進行一些微調(diào)，效果會很好。

附上幾個典型的主次分布的大屏效果給大家看下，是不是看上去更加清晰呢，不會讓人有找不到重點的感覺。

2、配 色

合理的布局能讓業(yè)務(wù)內(nèi)容更富有層次，合理的配色能讓觀看者更舒適。配色的學(xué)問很復(fù)雜，這里就先講一講背景色。背景色又分為整體背景以及單個元素的背景，無論是哪一個，都遵從兩點基本原則：深色調(diào)&一致性。

之所以選擇深色調(diào)，主要是為了避免視覺刺激。參加過大型會議的童鞋應(yīng)該有感受，如果演示PPT是淺色系的，投放到大屏上后會比較刺眼，尤其是前排童鞋簡直在遭罪受。下圖是兩個駕駛艙頁面深淺色對比，看圖片也許看不出來，感興趣的可以找公司的大屏硬件測試測試，看看哪個更讓人眼睛看著舒服。

整體背景深色系，可選的余地還是很多的，但是配起來能讓多數(shù)人都覺得好看的還是以深藍色系為主，如下所示是幾個推薦的配色方案。這幾個深色配色，是我們調(diào)研下來最常用的背景設(shè)置。大家如果去網(wǎng)上搜羅好看的大屏或者駕駛艙頁面效果，很多都是這幾個色系里頭的。

當(dāng)然，背景不一定要用顏色的，也可以用圖片。圖片的使用依舊遵從整體深色的原則，同時搭配其他一些現(xiàn)實特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片。

單個元素的背景，首先是要和整體背景色系保持一致性，避免突兀。另外一個小技巧，就是透明度的使用。根據(jù)實際項目經(jīng)驗，這里極其推薦大家為單個的組件元素搭配一些透明色，透明度設(shè)置在10%上下為宜，具體以實際效果微調(diào)。如下幾個模板，組件增加透明效果后，整體效果有質(zhì)的提升。

3、點綴

細(xì)節(jié)影響感官體驗，在大屏展現(xiàn)上，細(xì)節(jié)也會極大的影響整體效果。通過適當(dāng)給元素、標(biāo)題、數(shù)字等添加一些諸如邊框、圖畫等在內(nèi)的點綴效果，能幫助提升整體美觀度。

如下圖所示銷售駕駛艙大屏，頂部的標(biāo)題通過左右兩個對稱線條進行點綴，各個組件的細(xì)分標(biāo)題通過不規(guī)則漸變色圖片進行點綴，另外每個組件都搭配使用了簡潔的邊框以提升層次感。

比如下面圖所示大屏，給組件及其標(biāo)題增加一些不規(guī)則的漸變色邊框，讓整體看上去更富有科技感。

如下圖所示的航空大屏，給元素增加一些飛機圖標(biāo)、圖畫之類的擬物效果，讓大屏更真實生動。

4、動效

動效的范圍很廣，可以從很多角度解讀，最好的參照就是PPT的動畫特效，比如前文所提的背景動畫、刷新的加載動畫、輪播動畫、圖表的閃爍動畫、地圖的流向動畫等等，都屬于動態(tài)效果的范疇。前文說過，動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而喪失了業(yè)務(wù)展現(xiàn)價值。這個度很難把握，既要平衡酷炫效果，又要突出內(nèi)容。

列舉幾個制作的大屏動態(tài)示例demo。

如下圖所示銷售大屏，核心指標(biāo)車輛總價值以數(shù)字顯示，通過數(shù)據(jù)監(jiān)控功能，動態(tài)刷新數(shù)值。

再如下圖所示IT運維大屏，中間地圖上模擬的呼吸動畫，底部的滾動消息等。

如下圖所示金融大屏的輪播動畫，借助輪播效果，來實現(xiàn)同一個位置滾動播放不同的指標(biāo)內(nèi)容，避免平鋪展開所有指標(biāo)把大屏界面擠滿。

再比如這個銷售駕駛艙，通過邊框動畫、地圖流向動畫，來增加大屏展示的整體活力。

5、總 結(jié)

從布局、背景、點綴邊框、動效等幾個方面，簡單介紹了一些大屏展現(xiàn)頁面制作的基本方法。其實不難發(fā)現(xiàn)很多環(huán)節(jié)都是相通或交叉的，比如單個元素的背景色，往往會和一些邊框一起使用；比如一些動態(tài)效果，可能是背景或者邊框本身的GIF動畫。

大屏展現(xiàn)作為數(shù)據(jù)可視化的一個典型使用場景，其涵蓋的知識太多太多了，一個完整的大屏項目從開始調(diào)研到實施交付可能需要開發(fā)工程師、項目經(jīng)理、視覺工程師、UI工程師、硬件工程師等等眾多專業(yè)人員的參與。