數(shù)據(jù)可視化已成為未來(lái)趨勢(shì)。而大屏，依然是數(shù)據(jù)可視化的終極武器。

對(duì)于發(fā)展迅速的可視化大屏，有數(shù)據(jù)分析專家說(shuō)是雞肋，覺(jué)得不屑一顧，毫無(wú)技術(shù)含量和數(shù)據(jù)價(jià)值。但在我看來(lái)，對(duì)于外行人而言，大屏或許承載了大家對(duì)大數(shù)據(jù)和商業(yè)智能的全部認(rèn)知。但對(duì)于數(shù)據(jù)分析來(lái)說(shuō)，條理清晰的可視化大屏是能夠切切實(shí)實(shí)展現(xiàn)大數(shù)據(jù)價(jià)值的。

下面給大家分享大屏項(xiàng)目的落地實(shí)踐方法，希望對(duì)您有所幫助。

1.梳理業(yè)務(wù)需求與使用場(chǎng)景

大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。

那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過(guò)設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是大屏數(shù)據(jù)可視化的價(jià)值所在。

整體項(xiàng)目是利用大屏設(shè)備進(jìn)行相關(guān)數(shù)據(jù)及圖表展示，我們預(yù)想將項(xiàng)目應(yīng)用的場(chǎng)景分為兩種情況：

（1）專業(yè)展示：參與商務(wù)活動(dòng)、分享或?yàn)槟承﹫F(tuán)體進(jìn)行講解及展示使用。

（2）普通展示：主辦公區(qū)域或前臺(tái)大廳實(shí)時(shí)數(shù)據(jù)展示。通過(guò)應(yīng)用場(chǎng)景，還可以進(jìn)一步將用戶進(jìn)行區(qū)分。比如：

將場(chǎng)景和用戶進(jìn)行分類后，就可以進(jìn)一步根據(jù)他們的需求，進(jìn)行需求可視化大屏的整理。

2.根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過(guò)關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K，如圖所示，確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主、次、輔）。

一般情況下，主要指標(biāo)位于屏幕中央，多為動(dòng)效豐富的地圖或翻牌器；次要指標(biāo)位于屏幕兩側(cè)多為各類圖表；輔助指標(biāo)的補(bǔ)充信息可不顯示或顯示于副屏或鼠標(biāo)經(jīng)過(guò)顯示。以學(xué)校校情大屏為例：這里的關(guān)鍵指標(biāo)是教學(xué)經(jīng)費(fèi)投入、教學(xué)用房面積、多媒體教室座位等。

3.確定指標(biāo)分析維度

同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒(méi)有準(zhǔn)確表達(dá)自己的意圖，也沒(méi)能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒(méi)有找準(zhǔn)或定義的比較混亂。

4.選定可視化圖表類型

當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來(lái)我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)

（1）易理解：可視化設(shè)計(jì)要考慮大屏最終用戶，可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過(guò)度理解，因而選定圖表時(shí)要理性，避免為了視覺(jué)上的效果而選擇一些對(duì)用戶不太友好的圖形。

（2）可實(shí)現(xiàn)：我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評(píng)估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)。

5.了解物理大屏，確定設(shè)計(jì)稿尺寸

大屏一般分辨率比較高，如果不事先確定物理大屏尺寸，設(shè)計(jì)稿設(shè)計(jì)出來(lái)的效果被投放到大屏上就會(huì)有偏差失真。一般情況下，確定設(shè)計(jì)稿尺寸需要分兩種情況：

（1）當(dāng)投屏電腦與與大屏系統(tǒng)尺寸比例、分辨率一致時(shí)，設(shè)計(jì)稿的尺寸、分辨率以投屏電腦為準(zhǔn)；

（2）當(dāng)投屏電腦與與大屏系統(tǒng)尺寸比例、分辨率不一致時(shí)，設(shè)計(jì)稿的尺寸、分辨率以物理大屏為準(zhǔn)；

這里還需要注意的是：若物理大屏分辨率過(guò)高，可進(jìn)行分辨率減半設(shè)計(jì)，但一般我們也不建議大屏用自適應(yīng)方式，如果是自適應(yīng)，系統(tǒng)就會(huì)按各自模塊的寬高比先計(jì)算實(shí)際值，一旦大屏內(nèi)容布局較多或指標(biāo)計(jì)算復(fù)雜，則會(huì)非常影響大屏計(jì)算性能和實(shí)時(shí)分析能力。

6.頁(yè)面布局與劃分

尺寸確立后，接下來(lái)要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁(yè)面的劃分。這里的劃分，主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行，核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開(kāi)。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。

這里我們列舉了一些7種頁(yè)面布局的要點(diǎn)，應(yīng)用場(chǎng)景和優(yōu)勢(shì)，大家可以看看，下面我們分別來(lái)給大家展示下：

（1）標(biāo)準(zhǔn)大屏

對(duì)于標(biāo)準(zhǔn)大屏來(lái)說(shuō)，我們有兩種，一種是常規(guī)布局，一種是左右布局：

常規(guī)布局就是中間為主要指標(biāo)，左右兩邊次要指標(biāo)，經(jīng)常用在教育、房地產(chǎn)、政務(wù)等行業(yè)的數(shù)據(jù)分析展示中；左右布局就是重點(diǎn)區(qū)域擴(kuò)大，左或右放置少量指標(biāo)，經(jīng)常用在智慧園區(qū)、智慧工廠、智慧城市等。

（2）超大屏

對(duì)于超大屏來(lái)說(shuō)，我們有三種，一種是均等布局，一種是故事布局，還有一種是君臣布局：

（3）異形屏

對(duì)于異形屏來(lái)說(shuō)，我們有兩種布局，一種是縱向布局，一種是繁星布局。

縱向布局就是將頁(yè)面分割為上中下部分，主要的應(yīng)用場(chǎng)景是展會(huì)；繁星布局就是滿屏都是各種各樣的指標(biāo)，盡可能多地展現(xiàn)，經(jīng)常用于日常運(yùn)維、監(jiān)管人員使用。

7.可視化設(shè)計(jì)

在這一步驟中，我們主要是根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。

目前來(lái)講大屏可視化主要有指標(biāo)類信息和地理類信息兩大可視化數(shù)據(jù)。指標(biāo)類信息可視化效果相對(duì)簡(jiǎn)單易實(shí)現(xiàn)，而地理類信息一般可視化效果酷炫，但是開(kāi)發(fā)相對(duì)困難，需要設(shè)計(jì)師跟開(kāi)發(fā)多溝通的。

地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對(duì)于被投電腦、大屏拼接器等硬件設(shè)備的性能會(huì)有要求，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評(píng)估的。

下面我們分別從定義設(shè)計(jì)風(fēng)格、可視化顏色搭配和動(dòng)效設(shè)置來(lái)看下。

（1）定義設(shè)計(jì)風(fēng)格

可視化大屏的設(shè)計(jì)風(fēng)格主要根據(jù)行業(yè)類型、客戶喜好、具體展示指標(biāo)整體搭配，但總體一般以深色為主，這主要是因?yàn)榇笃寥绻菧\色系長(zhǎng)時(shí)間觀看會(huì)造成眼睛疲勞、刺疼，還一點(diǎn)就是淺色上面不是很適合體現(xiàn)動(dòng)感光線等特效的展示。

當(dāng)然大屏雖酷炫，但我們也不能忘記了為了炫酷而炫酷，實(shí)際我們還是要以展示具體指標(biāo)為主要目的。另外數(shù)據(jù)是核心，場(chǎng)景是大數(shù)據(jù)呈現(xiàn)的承載體，這里我們列舉了一些場(chǎng)景，比如：

①場(chǎng)景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個(gè)性；

②數(shù)據(jù)色彩使用透明、發(fā)光、具有未來(lái)感的高亮色，和場(chǎng)景形成強(qiáng)對(duì)比，使數(shù)據(jù)更為突顯、更具吸引力；

③為了強(qiáng)化客戶對(duì)于風(fēng)險(xiǎn)的感知，通過(guò)顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險(xiǎn)等級(jí)，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險(xiǎn)的使用紅色，紅色讓人聯(lián)想到危險(xiǎn)、警報(bào)。

（2）可視化顏色搭配

色彩是最能給人直觀感受的，能夠直接的牽引用戶去尋找有效信息。整體色彩確定后，便運(yùn)用色彩來(lái)劃分信息的層級(jí)關(guān)系，用主色調(diào)強(qiáng)調(diào)重點(diǎn)內(nèi)容，以引導(dǎo)用戶能夠清晰、明確、迅捷的識(shí)別重要信息。

圖表需要的顏色較多時(shí)，建議最多不超過(guò)12種色相。通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨6〜12種不同色相。過(guò)多的顏色對(duì)傳達(dá)數(shù)據(jù)是沒(méi)有作用的，反而會(huì)讓人產(chǎn)生迷惑。關(guān)于這部分，前面我們已經(jīng)介紹過(guò)了，這里大家可以看看以下這些色卡來(lái)進(jìn)行一步學(xué)習(xí)不同行業(yè)的顏色搭配。

（3）動(dòng)效設(shè)置

在一些大屏項(xiàng)目中，有許多數(shù)據(jù)都是實(shí)時(shí)變化的，為了減少數(shù)據(jù)變化刷新時(shí)的突然性，我們也經(jīng)常會(huì)用到動(dòng)效設(shè)計(jì)。

在整個(gè)動(dòng)效設(shè)計(jì)的過(guò)程中，除過(guò)場(chǎng)動(dòng)畫(huà)、數(shù)據(jù)的變化外，動(dòng)效還肩負(fù)起增添空間感、平衡畫(huà)面和整合信息的作用。

但是在增加動(dòng)效的同時(shí)，仍需考慮服務(wù)器在承載大量數(shù)據(jù)涌入的同時(shí)，是否能夠承載較多的動(dòng)效，分析畫(huà)面與數(shù)據(jù)量，對(duì)動(dòng)效部分進(jìn)行適當(dāng)取舍。使動(dòng)效不必喧賓奪主，明確畫(huà)面中的重點(diǎn)進(jìn)行展示。

8.頁(yè)面定稿與開(kāi)發(fā)

實(shí)際上頁(yè)面開(kāi)發(fā)階段并不是到了這一步才進(jìn)行，這里說(shuō)的頁(yè)面開(kāi)發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺(tái)數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開(kāi)始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)好的樣式呈現(xiàn)出來(lái)。

這里可以按照以下幾個(gè)要點(diǎn)來(lái)繼續(xù)頁(yè)面定稿的核實(shí)

9.整體的細(xì)節(jié)調(diào)優(yōu)和測(cè)試

這部分是指頁(yè)面開(kāi)發(fā)完成后，將真實(shí)頁(yè)面投放到大屏進(jìn)行的測(cè)試與優(yōu)化。這里主要有兩部分工作：

第一，是視覺(jué)方面的測(cè)試：關(guān)鍵視覺(jué)元素、字體字號(hào)、頁(yè)面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無(wú)變形、錯(cuò)位等情況。

第二，是性能與數(shù)據(jù)方面的測(cè)試：圖形圖表動(dòng)畫(huà)是否流暢、數(shù)據(jù)加載、刷新有無(wú)異常；頁(yè)面長(zhǎng)時(shí)間展示是否存在奔潰、卡死等情況；后臺(tái)控制系統(tǒng)能否正常切換前端頁(yè)面顯示。

大屏實(shí)際上就是一個(gè)dashboard，可以通過(guò)代碼實(shí)現(xiàn)，從設(shè)計(jì)到開(kāi)發(fā)，到最后運(yùn)行，需要的周期很長(zhǎng)，效果也不一定好。得心應(yīng)手的數(shù)據(jù)可視化工具會(huì)使數(shù)據(jù)可視化的工作事半功倍。

比如，某BI有個(gè)專門(mén)的酷屏分析模塊，內(nèi)置百余種適合大屏的酷炫組件和3D特效，不用事先準(zhǔn)備數(shù)據(jù)，僅拖拽組件即可繪制一幅大屏藍(lán)圖，等設(shè)計(jì)完模板之后，就可以直接套用數(shù)據(jù)了。

1.組件介紹

組件可以說(shuō)是大屏的核心內(nèi)容，大屏實(shí)際上就是由各種組件拖拽組成的。如果組件種類豐富，那配置一個(gè)大屏就基本上不用花很多時(shí)間，就跟拼圖一樣，把需要的圖表拼上去，調(diào)整一下就可以了。

△玫瑰圖組件

△花蕊餅圖組件

△動(dòng)態(tài)魔方組件

詳見(jiàn)：有了這些可視化大屏組件，酷炫大屏玩得飛起

2.內(nèi)置模板

系統(tǒng)內(nèi)置20多套精美且免費(fèi)的大屏模板，用戶可一鍵套用，助您快速高效地制作出酷炫大屏。