本篇文章為億信華辰《數據可視化大屏的應用與落地實踐》視頻直播稿件。
大家晚上好，歡迎來到小億直播間！本次直播我們分享的主題是：數據可視化大屏的應用與落地實踐。我們將會從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.頁面布局與划分
尺寸確立后，接下來要對設計稿進行布局和頁面的划分。這里的划分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔並提高信息傳遞的效率。
這里我們列舉了一些7種頁面布局的要點，應用場景和優勢，大家可以看看，下面我們分別來給大家展示下：
（1）標准大屏
對於標准大屏來說，我們有兩種，一種是常規布局，一種是左右布局：
常規布局就是中間為主要指標，左右兩邊次要指標，經常用在教育、房地產、政務等行業的數據分析展示中；左右布局就是重點區域擴大，左或右放置少量指標，經常用在智慧園區、智慧工廠、智慧城市等。
（2）超大屏
對於超大屏來說，我們有三種，一種是均等布局，一種是故事布局，還有一種是君臣布局：
（3）異形屏
對於異形屏來說，我們有兩種布局，一種是縱向布局，一種是繁星布局。
縱向布局就是將頁面分割為上中下部分，主要的應用場景是展會；繁星布局就是滿屏都是各種各樣的指標，盡可能多地展現，經常用於日常運維、監管人員使用。
7.可視化設計
在這一步驟中，我們主要是根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。
目前來講大屏可視化主要有指標類信息和地理類信息兩大可視化數據。指標類信息可視化效果相對簡單易實現，而地理類信息一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。
地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對於被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。
下面我們分別從定義設計風格、可視化顏色搭配和動效設置來看下。
（1）定義設計風格
可視化大屏的設計風格主要根據行業類型、客戶喜好、具體展示指標整體搭配，但總體一般以深色為主，這主要是因為大屏如果是淺色系長時間觀看會造成眼睛疲勞、刺疼，還一點就是淺色上面不是很適合體現動感光線等特效的展示。
當然大屏雖酷炫，但我們也不能忘記了為了炫酷而炫酷，實際我們還是要以展示具體指標為主要目的。另外數據是核心，場景是大數據呈現的承載體，這里我們列舉了一些場景，比如：
①場景使用具有金屬質感的深青灰，符合理性的、冷靜的、智能化產品的個性；
②數據色彩使用透明、發光、具有未來感的高亮色，和場景形成強對比，使數據更為突顯、更具吸引力；
③為了強化客戶對於風險的感知，通過顏色區分數據的風險等級，更直觀的傳達數據的含義。如：高風險的使用紅色，紅色讓人聯想到危險、警報。
（2）可視化顏色搭配
色彩是最能給人直觀感受的，能夠直接的牽引用戶去尋找有效信息。整體色彩確定后，便運用色彩來划分信息的層級關系，用主色調強調重點內容，以引導用戶能夠清晰、明確、迅捷的識別重要信息。
圖表需要的顏色較多時，建議最多不超過12種色相。通常情況下人在不連續的區域內可以分辨6〜12種不同色相。過多的顏色對傳達數據是沒有作用的，反而會讓人產生迷惑。關於這部分，前面我們已經介紹過了，這里大家可以看看以下這些色卡來進行一步學習不同行業的顏色搭配。
（3）動效設置
在一些大屏項目中，有許多數據都是實時變化的，為了減少數據變化刷新時的突然性，我們也經常會用到動效設計。
在整個動效設計的過程中，除過場動畫、數據的變化外，動效還肩負起增添空間感、平衡畫面和整合信息的作用。
但是在增加動效的同時，仍需考慮服務器在承載大量數據涌入的同時，是否能夠承載較多的動效，分析畫面與數據量，對動效部分進行適當取舍。使動效不必喧賓奪主，明確畫面中的重點進行展示。
8.頁面定稿與開發
實際上頁面開發階段並不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后台數據准備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計好的樣式呈現出來。
這里可以按照以下幾個要點來繼續頁面定稿的核實
9.整體的細節調優和測試
這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作：
第一，是視覺方面的測試：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。
第二，是性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后台控制系統能否正常切換前端頁面顯示。
六、多個行業大屏案例展示
1.浙江省某金融集團
通過大屏展示投資情況、投資金融、投資客戶數、歷史盈利等信息向外界彰顯公司形象及整體實力。
2.廣西省某重點大學
為輔助校領導在宏觀層面掌握校園數據，億信華辰分別從招生就業、學生工作、國有資產、圖書典藏、科研成果、后勤服務、發展規划、財務、教務、人事以及全校核心數據等11個方面全面展示有效信息，並且橫向覆蓋各學院及各部門的數據信息和工作內容。
3.上海某上市房地產集團
基於該上市公司在物業業務領域的訴求，億信華辰圍繞收入、支出、成本、客戶滿意度、人資管理等方面進行全面展示與分析，使得企業管理者時刻掌控經營狀況以及各項目收支情況，並且全方位監管物業服務質量以及客戶滿意度。
4.山西省某化工制造企業
通過對產能、經濟效益的監控，及時有效的發現問題，最大限度的簡化解決問題的路徑，提高各級管理能力以及生產運行效率。
5.山東省某消防救援站
以管人、定物、抓事、謀戰為主要抓手設置了六大維度的工作場景，選取核心的業務數據指標，實現炫酷可視化展示。
6.南方某能源電力集團
億信華辰根據客戶的需求，設立市場投標、經營管理、人力資源、供應鏈、資產管理、安全管理、技術管理等11個核心業務場景，對接電力行業海量的業務數據，提供豐富的數據可視分析圖表，對核心數據進行多維度分析研判，深度挖掘運行數據的時空特征及變化規律，輔助管理者全面掌控數據變化態勢。
七、小結
大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次。可以通過對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。
另外這里進入我們的廣告時間，向大家推薦這個好用的數據可視化平台——酷屏。
酷屏是億信華辰自主研發的新一代數據可視化產品，可靈活、快捷地制作各類交互式常規屏和大屏可視化，內置百余種炫酷組件和3D特效，讓數據“躍然屏上”，得到更形象、更直觀的可視化呈現。
對於設計和布局方面，酷屏的一個重要優勢就在於：能夠真正達到設計走多遠，展現就能到多遠的境界。方便開發和實施人員快捷的完成頁面需求並最終得到好的展現。任何類型的用戶想要達到的頁面效果及布局都可以使用酷屏分析快捷地制作實現。
除了以上提及的一些案例，在億信華辰的酷屏官網上還有許多行業模板可供參考，大家可以自行登陸與體驗，另外企業如果有相應的可視化大屏需求的用戶，也可以直接聯系我們。
本次直播我們全部分享完了，感謝大家的積極參與！