本篇文章為億信華辰《數據可視化大屏的應用與落地實踐》視頻直播稿件。

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

一、數據可視化的基本概念

1.宏觀的可視化

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

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

2.數據可視化的定義

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

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

而我們本次直播所分享的大屏數據可視化，是以大屏為主要展示載體的數據可視化設計，也是當前可視化領域的一項熱門應用，通常可以分為如圖所示的信息展示類、數據分析類及監控預警類。

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

3.數據可視化有哪些好處？

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

數據可視化能將不可見的數據現象轉化為可見的圖形符號，能將錯綜復雜、看起來沒法解釋和關聯的數據，建立起聯系和關聯，發現規律和特征，獲得商業價值。

正所謂“一圖勝千言”，使用圖表來總結復雜的數據，這種溝通方式也使業務領導者能夠更快地理解和處理他們的信息。

（2）發現新趨勢、新機遇

例如企業收集到的消費者行為的數據，可以為適應性強的公司帶來許多新的機遇。通過使用大數據可視化來監控關鍵指標，更加陽光透明，及時發現問題第一時間做出應對。

例如：天貓的雙11數據大屏實況直播，可視化大屏展示大數據平臺的資源利用、任務成功率、實時數據量等。企業領導人可以更容易發現各種大數據集的市場變化和趨勢。

（3）增強數據交互

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

二、數據可視化的難點

1.準備工作

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

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

2.對數據需要具備一定的敏感性

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

3.用簡潔易懂的圖表展示復雜的數據關系

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

4.選擇合適的圖表

每種圖表都有自己的優勢和局限性，條形圖就有一般條形圖、堆積條形圖、百分比條形圖、雙向柱狀圖等分類，餅狀圖也有：一般餅狀圖、玫瑰餅狀圖、環形圖、旭日圖等類型。所以，如何從千變萬化的各類圖表中，選出適合自己數據的圖表類型是數據可視化的關鍵。

5.圖表細節的處理

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

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

三、數據可視化設計的5個原則

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

1.目標明確

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

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

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

2.了解你的受眾

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

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

3.簡潔、美觀

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

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

而我們如何才能做到這一點呢？這里我們可以從以下6個方面來進行：

（1）字體的使用與選擇

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

（2）背景色的使用

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

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

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

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

（3）顏色搭配

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

（4）同類型的數據排列盡量均勻

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

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

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

（6）保持視覺一致性

這里想跟大家分享就是大屏需要保持整體色彩感覺一致，配色風格一致，不同顏色之間搭配協調。

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

4.懂得利用工具

得心應手的數據可視化工具會使數據可視化的工作事半功倍。

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

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

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

第二，是實用性，強調數據需要實用，可以幫助用戶使用強調探索和比較的上下文和啟示來導航數據，比如比較數據，預警數據，瀏覽數據。

第三，是適應性，能適應多設備、多場景。可根據不同設備大小調整可視化，同時預測用戶對數據深度、復雜性的需求。

5.實事求是

數據可視化的結果一定要實事求是，不可規避“異常數據”。因此真實反映業務數據，才可能幫助我們發現問題，掩蓋問題只會造成更大的損失。

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

四、可視化圖表的選擇

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

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

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

1.比較類

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

2.占比類

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

3.區間類

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

4.關聯類

可視化的方法顯示數據之間相互關系，使用圖形的嵌套和位置表示數據之間的關系，通常用于表示數據之間的前后順序。比如桑基圖、和弦圖等。

5.趨勢類

可視化的方法分析數據的變化趨勢。使用圖形的位置表現出數據在連續區域上的分布，通常展示數據在連續區域上的大小變化的規律，比如折線圖、面積圖等。

6.時間類

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

7.地圖類

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

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

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

1.梳理業務需求與使用場景

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

那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

整體項目是利用大屏設備進行相關數據及圖表展示，我們預想將項目應用的場景分為兩種情況：

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

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

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

2.根據業務場景抽取關鍵指標

關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊，如圖所示，確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。

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

3.確定指標分析維度

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

4.選定可視化圖表類型

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

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

（2）可實現：我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現。

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

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

（1）當投屏電腦與與大屏系統尺寸比例、分辨率一致時，設計稿的尺寸、分辨率以投屏電腦為準；

（2）當投屏電腦與與大屏系統尺寸比例、分辨率不一致時，設計稿的尺寸、分辨率以物理大屏為準；

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

6.頁面布局與劃分