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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.選定可視化圖表類型

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

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

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

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

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

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

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

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

6.頁面布局與劃分

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

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

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

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

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

（2）超大屏

對于超大屏來說，我們有三種，一種是均等布局，一種是故事布局，還有一種是君臣布局：

（3）異形屏

對于異形屏來說，我們有兩種布局，一種是縱向布局，一種是繁星布局。

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

7.可視化設(shè)計

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

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

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

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

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

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

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

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

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

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

（2）可視化顏色搭配

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

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

（3）動效設(shè)置

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

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

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

8.頁面定稿與開發(fā)

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

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

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

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

第一，是視覺方面的測試：關(guān)鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預(yù)期顯示、有無變形、錯位等情況。

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

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

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

1.組件介紹

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

△玫瑰圖組件

△花蕊餅圖組件

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

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

2.內(nèi)置模板

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