在2020年之前，每逢618和雙十一，天貓都會(huì)在整點(diǎn)時(shí)刻進(jìn)行直播，揭曉銷售成績(jī)。在可怕的戰(zhàn)績(jī)背后，不知道大家是否留意到背后展示的數(shù)據(jù)大屏，簡(jiǎn)直酷炫吊炸天。

而所謂大屏，顧名思義就是一個(gè)很大很大的屏。

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

譬如《人民的名義里》就有這樣一幕：

也就在前幾天，一位番薯在我們社區(qū)發(fā)了個(gè)生產(chǎn)大屏的帖子，自己做了個(gè)大屏的模板，引發(fā)了很大反響。

所以本文就來拋磚引玉，圍繞如何制作的美而實(shí)用的大屏，講講我們的經(jīng)驗(yàn)。

1. 傳統(tǒng)制作方法：寫代碼調(diào)用數(shù)據(jù)和圖表庫(kù)，比如寫JS+Echarts ；
2. 省時(shí)省力方法：用現(xiàn)成的數(shù)據(jù)可視化工具

無(wú)論技術(shù)上采用那種方式，要想大屏做得漂亮，都要一番精心的視覺設(shè)計(jì)。

大屏首先是要服務(wù)于業(yè)務(wù)，讓業(yè)務(wù)指標(biāo)和數(shù)據(jù)合理的展現(xiàn)。

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

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

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

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

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

之所以選擇深色調(diào)，主要是為了避免視覺刺激。參加過大型會(huì)議的童鞋應(yīng)該有感受，如果演示PPT是淺色系的，投放到大屏上后會(huì)比較刺眼，尤其是前排童鞋簡(jiǎn)直在遭罪受。

下圖是兩個(gè)駕駛艙頁(yè)面深淺色對(duì)比，實(shí)際效果可能看圖片也許看不出來，需要投放到實(shí)際的LED屏幕檢驗(yàn)測(cè)試。

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

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

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

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

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

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