數(shù)據(jù)可視化大屏的應(yīng)用與落地實踐

yliu277 2022-03-18

展開全文

大家晚上好，歡迎來到小億直播間！本次直播我們分享的主題是：數(shù)據(jù)可視化大屏的應(yīng)用與落地實踐。我們將會從4個方面來進行分享：首先，我們說說數(shù)據(jù)可視化的一些基本概念和難點；其次，我們說說數(shù)據(jù)可視化的5個基本原則和如何選擇圖表來做可視化設(shè)計；然后，我們分享下大屏項目落地的9個步驟；最后，我們分享一些做過的可視化大屏案例。

一、數(shù)據(jù)可視化的基本概念

1.宏觀的可視化

如圖所示，我們先從宏觀上來看看可視化，我們從可以兩個基本維度：①信息性質(zhì)：我要傳達的是信息還是數(shù)據(jù)；②傳達目標(biāo)：我在陳述某事，還是在探索某事，劃分為如圖的四象限矩陣。

象限二是概念性的描述，也就是類似于組織結(jié)構(gòu)圖、決策樹就是電典型的概念描述圖表；象限三是創(chuàng)意挖掘，比如戰(zhàn)略討論和創(chuàng)意項目早期階段所畫的圖等；而象限一與四，也就是我們微觀層面上的數(shù)據(jù)可視化，也是本次直播給大家分享的。

2.數(shù)據(jù)可視化的定義

微觀的數(shù)據(jù)可視化是為了更形象地表達數(shù)據(jù)內(nèi)在信息和規(guī)律，促進數(shù)據(jù)信息的傳播和應(yīng)用，是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視化的方法以人們更容易理解的形式展示出來的一系列手段。

在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了“可視”，還有可交流、可互動的特點，其本質(zhì)核心是傳遞信息，即如何將信息準確、可靠、易于理解傳達給對方。

而我們本次直播所分享的大屏數(shù)據(jù)可視化，是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計，也是當(dāng)前可視化領(lǐng)域的一項熱門應(yīng)用，通?？梢苑譃槿鐖D所示的信息展示類、數(shù)據(jù)分析類及監(jiān)控預(yù)警類。

數(shù)據(jù)可視化大屏，有兩個要點：一是展示效果的酷炫，二是展示數(shù)據(jù)之間的層次關(guān)系。好的數(shù)據(jù)可視化大屏是布局、色彩、圖表、動效的綜合運用。

3.數(shù)據(jù)可視化有哪些好處？

（1）化繁為簡，方便理解

數(shù)據(jù)可視化能將不可見的數(shù)據(jù)現(xiàn)象轉(zhuǎn)化為可見的圖形符號，能將錯綜復(fù)雜、看起來沒法解釋和關(guān)聯(lián)的數(shù)據(jù)，建立起聯(lián)系和關(guān)聯(lián)，發(fā)現(xiàn)規(guī)律和特征，獲得商業(yè)價值。

正所謂“一圖勝千言”，使用圖表來總結(jié)復(fù)雜的數(shù)據(jù)，這種溝通方式也使業(yè)務(wù)領(lǐng)導(dǎo)者能夠更快地理解和處理他們的信息。

（2）發(fā)現(xiàn)新趨勢、新機遇

例如企業(yè)收集到的消費者行為的數(shù)據(jù)，可以為適應(yīng)性強的公司帶來許多新的機遇。通過使用大數(shù)據(jù)可視化來監(jiān)控關(guān)鍵指標(biāo)，更加陽光透明，及時發(fā)現(xiàn)問題第一時間做出應(yīng)對。

例如：天貓的雙11數(shù)據(jù)大屏實況直播，可視化大屏展示大數(shù)據(jù)平臺的資源利用、任務(wù)成功率、實時數(shù)據(jù)量等。企業(yè)領(lǐng)導(dǎo)人可以更容易發(fā)現(xiàn)各種大數(shù)據(jù)集的市場變化和趨勢。

（3）增強數(shù)據(jù)交互

數(shù)據(jù)可視化的主要好處是它及時帶來了風(fēng)險變化。但與靜態(tài)圖表不同，交互式數(shù)據(jù)可視化鼓勵用戶探索甚至操縱數(shù)據(jù)來發(fā)現(xiàn)其他“秘密”。這就為使用分析提供了更好的意見。

二、數(shù)據(jù)可視化的難點

1.準備工作

這也是數(shù)據(jù)可視化的最大難點工作，主要集中在數(shù)據(jù)的獲取與整理上。

比如數(shù)據(jù)收集是否全面準確？清洗數(shù)據(jù)是否到位？數(shù)據(jù)分析是否有據(jù)可循？數(shù)據(jù)分析結(jié)論是否清晰？如果用來數(shù)據(jù)可視化的數(shù)據(jù)出現(xiàn)問題，數(shù)據(jù)可視化的頁面與結(jié)果都不具有任何參考價值。

2.對數(shù)據(jù)需要具備一定的敏感性

當(dāng)面對復(fù)雜的數(shù)據(jù)、信息，怎么找到數(shù)據(jù)之間的邏輯關(guān)系，就需要制作人具備一定的數(shù)據(jù)分析能力，也就是對大量復(fù)雜的數(shù)據(jù)具備數(shù)據(jù)敏感性，快速找到多維度、多變量的數(shù)據(jù)之間的邏輯關(guān)系，確定哪些數(shù)據(jù)之間有直接關(guān)系，哪些數(shù)據(jù)之間具有間接關(guān)系，需要重點展現(xiàn)哪些數(shù)據(jù)之間的關(guān)系，這些都需要制作人或者數(shù)據(jù)分析師及時做出準確判斷。

3.用簡潔易懂的圖表展示復(fù)雜的數(shù)據(jù)關(guān)系

因為閱讀者需要在極短的時間內(nèi)掌握了解各類圖表所傳遞的數(shù)據(jù)關(guān)系，數(shù)據(jù)可視化需要盡可能簡潔，便于讓不同的閱讀者快速抓住其重點，因此數(shù)據(jù)可視化就需要用有限的文字、簡潔的圖表展現(xiàn)大量的數(shù)據(jù)之間的各種關(guān)系與其客觀規(guī)律。

4.選擇合適的圖表

每種圖表都有自己的優(yōu)勢和局限性，條形圖就有一般條形圖、堆積條形圖、百分比條形圖、雙向柱狀圖等分類，餅狀圖也有：一般餅狀圖、玫瑰餅狀圖、環(huán)形圖、旭日圖等類型。所以，如何從千變?nèi)f化的各類圖表中，選出適合自己數(shù)據(jù)的圖表類型是數(shù)據(jù)可視化的關(guān)鍵。

5.圖表細節(jié)的處理

圖表細節(jié)的處理需要綜合考慮多方面因素，比如刻度標(biāo)記類型、間隙、刻度標(biāo)簽位置、數(shù)據(jù)類型、小數(shù)位、是否千分位、顏色取值、圖例位置、圖上標(biāo)簽、圖表標(biāo)題、備注文字說明等等。

在這里細節(jié)的處理不僅影響數(shù)據(jù)可視化的效果，若處理不好，可能還會加大閱讀人的閱讀困難。例如：刻度選取不合理折線過于陡峭，折線太細不便于觀察線等。

三、數(shù)據(jù)可視化設(shè)計的5個原則

我們在進行可視化設(shè)計的過程中需要遵循的5個基本原則：

1.目標(biāo)明確

并不是所有的數(shù)據(jù)都需要數(shù)據(jù)可視化。數(shù)據(jù)可視化是借助圖形化的分析過程，來解決業(yè)務(wù)上某一問題或者發(fā)現(xiàn)某一問題，當(dāng)數(shù)據(jù)脫離了業(yè)務(wù)，就沒有必要可視化了。所以做數(shù)據(jù)可視化之前先要明確這個數(shù)據(jù)可視化的分析目的到底是什么？你打算通過數(shù)據(jù)向用戶講述怎樣的故事，數(shù)據(jù)可視化之后又在表達什么？通過這些數(shù)據(jù)，能為你后續(xù)的工作提供哪些指導(dǎo)？

為了準確找到數(shù)據(jù)可視化的目的，我們往往會先思考這7個問題：

如果我們對以上7個問題有明確的答案，那么就明確了這次的數(shù)據(jù)可視化到底要解決什么問題。

2.了解你的受眾

如果不是為了與目標(biāo)受眾清楚地溝通，數(shù)據(jù)可視化是沒有實際的應(yīng)用價值的。因此應(yīng)該與受眾的專業(yè)知識兼容，并允許他們輕松快速地查看和處理數(shù)據(jù)。

所以這里就有了我們第二個原則，需要考慮到受眾對數(shù)據(jù)所呈現(xiàn)的基本原則的熟悉程度，以及他們是否了解這些可視化的主要背景，最后是這些圖表是否會被定期重復(fù)使用等等。

3.簡潔、美觀

現(xiàn)在很多企業(yè)或者機構(gòu)在做數(shù)據(jù)可視化的時候一味追求酷炫的動態(tài)圖、華麗的視覺效果等，但這個做法并一定正確。圖表主要作用是傳遞信息，追求過分漂亮只會使徒增無用功。

圖表的基礎(chǔ)美感會給人帶來視覺上的享受，圖表中的坐標(biāo)軸、形狀、線條、字體、標(biāo)簽、標(biāo)題排版等元素是都會影響人的視覺效果，因此這些圖表元素經(jīng)過合理的搭配會給整個數(shù)據(jù)可視化作品加分，比如圖表的色彩，如果搭配合理，會使整個圖表看起來更加生生動，同時也會加深閱讀者的記憶。

而我們?nèi)绾尾拍茏龅竭@一點呢？這里我們可以從以下6個方面來進行：

（1）字體的使用與選擇

字體優(yōu)先使用系統(tǒng)默認字體，需要嵌入字體時考慮字體的可識別性、與當(dāng)前設(shè)計風(fēng)格是否融合、是否可免費商用。除此以外，選擇字母容易辨識不會產(chǎn)生奇異的字體更有利于用于數(shù)據(jù)可視化設(shè)計。字體的選擇主要有三個方面：字體大小、字母間距、中西文間隔等等，這些都數(shù)據(jù)可視化需要考慮到的。

（2）背景色的使用

顏色是可視化大屏中影響畫面效果的重要元素。使用不當(dāng)，會讓讀者分心。背景色的選擇與可視化展示的設(shè)備相關(guān)，分為深色、淺色、彩色。

如果是小屏幕，背景色選擇范圍就比較廣，選擇淺色、彩色、深色均可以做出很好的設(shè)計。一般情況下，淺色背景更適合展示大量的數(shù)據(jù)信息，如圖所示，因為在淺色底上數(shù)據(jù)圖表的識別度比較高。

而深色、彩色背景更適合渲染簡單的數(shù)據(jù)，用于烘托氣氛，所以在大屏設(shè)備中普遍用深色作為背景色，以減少屏幕拖尾，觀眾在視覺上也不會覺得刺眼。因此大屏的配色需要以深色背景為基礎(chǔ)。保證可視化圖的清晰辨識度，色調(diào)與明度變化需要有跨度。

除此以外，深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現(xiàn)的影響；同時暗色背景更能聚焦視覺，也方便突出內(nèi)容，做出一些流光、粒子等酷炫的效果。

（3）顏色搭配

這里需要注意的是色彩的飽和度和明度，它們需要差異顯著、對比鮮明，盡量避免使用鄰近色配色。如果顏色過于相似（例如淺灰與更淺的灰），人們難以發(fā)現(xiàn)兩者間的區(qū)別。相反，也要避免強烈的對比色，例如紅配綠或藍配黃。這里億信華辰曾為多個行業(yè)配置過可視化大屏，列舉一些各個行業(yè)的專屬的一些配色，大家可以參考下。

（4）同類型的數(shù)據(jù)排列盡量均勻

也就是使用用一種顏色去表達相同類型的數(shù)據(jù)，在圖表中使用自然增量（0、5、10、15），而非不均勻的增量（0、3、5、16）排序要均勻，比如趨勢、排名或者占比，如圖所示。

（5）圖表類型多樣化，注重對比

可視化讓數(shù)據(jù)對比更直觀，但是僅僅把兩組圖表緊挨著放在一起并不能達成這個目標(biāo)，甚至更令人費解，所以要多用不同類型的圖片進行對比。

（6）保持視覺一致性

這里想跟大家分享就是大屏需要保持整體色彩感覺一致，配色風(fēng)格一致，不同顏色之間搭配協(xié)調(diào)。

不要一會黑白配，一會又來個紅綠配。圖表、圖像、按鈕包括尺寸，都要與整體風(fēng)格保持一致。要么都是填充式的，要么都是中空式的，要么都是棱角分明，要么都是圓潤光滑。例如下圖，某公安行業(yè)可視化大屏（部分）是個很好的例子，配色統(tǒng)一，風(fēng)格一致。

4.懂得利用工具

得心應(yīng)手的數(shù)據(jù)可視化工具會使數(shù)據(jù)可視化的工作事半功倍。

比如，億信華辰的數(shù)據(jù)可視化平臺——酷屏。酷屏是億信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品，可靈活、快捷地制作各類交互式常規(guī)屏和大屏可視化，內(nèi)置百余種炫酷組件和3D特效，讓數(shù)據(jù)得到更形象、更直觀的可視化呈現(xiàn)，我們PPT上的所有配圖都是運用酷屏幫助客戶做出來的。

但這里我們也需要注意的是數(shù)據(jù)可視化是一種信息交流形式，它以圖形形式描繪密集和復(fù)雜的信息，最終的視覺效果旨在簡化數(shù)據(jù)，并使用數(shù)據(jù)幫助用戶決策。因此總體上需要遵循三個小原則；

第一，是準確性，數(shù)據(jù)可視化需考慮數(shù)據(jù)的準確性，清晰度和完整性。以不失真的方式呈現(xiàn)信息，減少用戶的思考成本。

第二，是實用性，強調(diào)數(shù)據(jù)需要實用，可以幫助用戶使用強調(diào)探索和比較的上下文和啟示來導(dǎo)航數(shù)據(jù)，比如比較數(shù)據(jù)，預(yù)警數(shù)據(jù)，瀏覽數(shù)據(jù)。

第三，是適應(yīng)性，能適應(yīng)多設(shè)備、多場景?？筛鶕?jù)不同設(shè)備大小調(diào)整可視化，同時預(yù)測用戶對數(shù)據(jù)深度、復(fù)雜性的需求。

5.實事求是

數(shù)據(jù)可視化的結(jié)果一定要實事求是，不可規(guī)避“異常數(shù)據(jù)”。因此真實反映業(yè)務(wù)數(shù)據(jù)，才可能幫助我們發(fā)現(xiàn)問題，掩蓋問題只會造成更大的損失。

若數(shù)據(jù)很龐大，也不可隨意省去自認為不重要的數(shù)據(jù)部分，找到核心數(shù)據(jù)指標(biāo)和異常數(shù)據(jù)，重點展示核心數(shù)據(jù)指標(biāo)，分析異常數(shù)據(jù)的問題原因，最后給出合理、準確的數(shù)據(jù)分析結(jié)論。

四、可視化圖表的選擇

總所周知，數(shù)據(jù)可視化是一個展現(xiàn)復(fù)雜信息的強大武器。通過可視化信息，我們的大腦能夠更好地抓取和保存有效信息，增加信息的印象。

但如果數(shù)據(jù)可視化做得不好，反而會帶來負面效果，所以更需要我們選擇合理的數(shù)據(jù)可視化方法，高效傳達數(shù)據(jù)。接下來，我們一起看看不同圖表的不同使用場景。

如圖所示，我們可以將圖表的展示分成4種類型，分別是比較、分布、構(gòu)成和聯(lián)系。在比較中，我們又可以依據(jù)分類和時間再進行一步進行拆分，比如基于時間，我們又可以根據(jù)數(shù)據(jù)是否循環(huán)，從而選擇相應(yīng)的雷達圖、折線圖、金字塔圖或漏斗圖等等。

1.比較類

可視化的方法顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積和顏色來比較數(shù)值的大小，通常用于展示不同步分類間的數(shù)值對比，不同時間點的數(shù)據(jù)對比。因此關(guān)于比較類的圖表，我們可以有多種圖表進行選擇，比如柱狀圖、氣泡圖、雷達圖等等。

2.占比類

可視化的方法顯示同一維度上占比關(guān)系，可以使用餅圖、環(huán)圖、矩形樹圖等等。

3.區(qū)間類

可視化的方法顯示同一維度上值的上限和下限之間的差異。使用圖形的大小和位置表示數(shù)值的上限和下限，通常用于表示數(shù)據(jù)在某一個分類（時間點）上的最大值和最小值。比如儀表盤、堆疊面積圖等。

4.關(guān)聯(lián)類

可視化的方法顯示數(shù)據(jù)之間相互關(guān)系，使用圖形的嵌套和位置表示數(shù)據(jù)之間的關(guān)系，通常用于表示數(shù)據(jù)之間的前后順序。比如?；鶊D、和弦圖等。

5.趨勢類

可視化的方法分析數(shù)據(jù)的變化趨勢。使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布，通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律，比如折線圖、面積圖等。

6.時間類

可視化的方法是展示數(shù)據(jù)隨時間的變化趨勢。是屬于趨勢類的一個細分，在數(shù)據(jù)分析里使用的不交多的，比如面積圖、折線圖等等。

7.地圖類

這個是現(xiàn)在政務(wù)大屏上出現(xiàn)最多的統(tǒng)計圖，主要分為兩類，一類是傳統(tǒng)的熱區(qū)地圖，一類是我們的GIS地圖，通過顯示地理區(qū)域上的數(shù)據(jù)，使用地圖作為背景，通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置，通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。GIS地圖還可以通過定位、放大縮小的特性來展示咱們的事件或者事務(wù)對象的真實情況。

五、大屏項目落地的9個步驟

這里億信華辰，將大屏項目的落地劃分為9個步驟：

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

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

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

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

（1）專業(yè)展示：參與商務(wù)活動、分享或為某些團體進行講解及展示使用。

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

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

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

關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個指標(biāo)在大屏上獨占一塊區(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)的補充信息可不顯示或顯示于副屏或鼠標(biāo)經(jīng)過顯示。以學(xué)校校情大屏為例：這里的關(guān)鍵指標(biāo)是教學(xué)經(jīng)費投入、教學(xué)用房面積、多媒體教室座位等。

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

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

4.選定可視化圖表類型

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

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

（2）可實現(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è)計稿的尺寸、分辨率以投屏電腦為準；

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

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

6.頁面布局與劃分

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

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

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

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

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

（2）超大屏

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

（3）異形屏

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

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

7.可視化設(shè)計

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

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

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

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

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

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

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

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

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

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

（2）可視化顏色搭配

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

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

（3）動效設(shè)置

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

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

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

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

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

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

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

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

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

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

六、多個行業(yè)大屏案例展示

1.浙江省某金融集團

通過大屏展示投資情況、投資金融、投資客戶數(shù)、歷史盈利等信息向外界彰顯公司形象及整體實力。

2.廣西省某重點大學(xué)

為輔助校領(lǐng)導(dǎo)在宏觀層面掌握校園數(shù)據(jù)，億信華辰分別從招生就業(yè)、學(xué)生工作、國有資產(chǎn)、圖書典藏、科研成果、后勤服務(wù)、發(fā)展規(guī)劃、財務(wù)、教務(wù)、人事以及全校核心數(shù)據(jù)等11個方面全面展示有效信息，并且橫向覆蓋各學(xué)院及各部門的數(shù)據(jù)信息和工作內(nèi)容。

3.上海某上市房地產(chǎn)集團

基于該上市公司在物業(yè)業(yè)務(wù)領(lǐng)域的訴求，億信華辰圍繞收入、支出、成本、客戶滿意度、人資管理等方面進行全面展示與分析，使得企業(yè)管理者時刻掌控經(jīng)營狀況以及各項目收支情況，并且全方位監(jiān)管物業(yè)服務(wù)質(zhì)量以及客戶滿意度。

4.山西省某化工制造企業(yè)

通過對產(chǎn)能、經(jīng)濟效益的監(jiān)控，及時有效的發(fā)現(xiàn)問題，最大限度的簡化解決問題的路徑，提高各級管理能力以及生產(chǎn)運行效率。

5.山東省某消防救援站

以管人、定物、抓事、謀戰(zhàn)為主要抓手設(shè)置了六大維度的工作場景，選取核心的業(yè)務(wù)數(shù)據(jù)指標(biāo)，實現(xiàn)炫酷可視化展示。

6.南方某能源電力集團

億信華辰根據(jù)客戶的需求，設(shè)立市場投標(biāo)、經(jīng)營管理、人力資源、供應(yīng)鏈、資產(chǎn)管理、安全管理、技術(shù)管理等11個核心業(yè)務(wù)場景，對接電力行業(yè)海量的業(yè)務(wù)數(shù)據(jù)，提供豐富的數(shù)據(jù)可視分析圖表，對核心數(shù)據(jù)進行多維度分析研判，深度挖掘運行數(shù)據(jù)的時空特征及變化規(guī)律，輔助管理者全面掌控數(shù)據(jù)變化態(tài)勢。