作為數據分析師或者可視化方面的設計師，設計制作可視化大屏是非常加分的一個技能。然而尴尬的是，想要完整地了解可視化大屏設計的全套内容，門檻非常高，内容瑣碎，這讓很多渴望學習的設計師或分析師摸不着頭腦。所以這也促使小億整理了這篇【可視化大屏設計指南】，希望能夠給大家帶來一些不一樣的内容，為大家梳理一個清晰的可視化設計制作框架。

全文總計12000字左右，閱讀需要10分鐘左右，幹貨滿滿，請大家做好準備。或者直接劃到感興趣部分，目錄如下。

本文文章架構

通過信息圖對數據進行描述而設計，讓人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據内在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了「可視」，還有「可交流」、「可互動」的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

可視化實例

大屏數據可視化是以大屏為主要展示載體的數據可視化設計。也就是通過整個超大尺寸的LED屏幕來展示關鍵數據内容。

「大面積、炫酷動效、豐富色彩」，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。利用其面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊讨論和決策，所以大屏也常用來做數據分析監測使用。

經典可視化大屏案例

了解數據可視化的相關概念後，着手設計時還有一些需要特别注意的原則。

1、字體使用

字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識别性、與當前設計風格是否融合、是否可免費商用。

經典字體推薦

2、字體選擇

選擇字母容易辨識不會産生奇異的字體更有利于用于數據可視化設計。

有辨識度：字母容易辨識不會産生奇異的字體更有利于用于數據可視化設計。

字體大小：字号跟網頁設計一樣不小于12号字，可以用于圖表的标注，數據信息建議14号字以上,大屏字體可以适當的更大一些。

靈活的字體：寬松的字母間距（字母之間的間距應小于字偶間距）和合适的中文字間距。

中西文間隔：中西文混排時，要注意中文和西文間的間隔，一般排版的情況都是中文中混排有西文，所以需要在中西文間留有間隔，幫助用戶更快速的掃視文字内容。

3、背景色的使用

顔色是出色的工具。使用不當，不僅會讓讀者分心。背景色的選擇與可視化展示的設備相關，分為深色、淺色、彩色。

小屏幕背景色選擇範圍就比較廣，淺色、彩色、深色均可以做出很好的設計。相比之下，淺色背景更适合展示大量的數據信息，因為在淺色底上數據圖表的識别度比較高。而深色、彩色背景更适合渲染簡單的數據，用于烘托氣氛。

淺色背景示例

在大屏設備中普遍用深色作為背景色，以減少屏幕拖尾，觀衆在視覺上也不會覺得刺眼。所有圖表的配色需要以深色背景為基礎。保證可視化圖的清晰辨識度，色調與明度變化需要有跨度。

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

深色背景示例

4、顔色搭配

色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色。

如果顔色過于相似（例如淺灰與更淺的灰），人們難以發現兩者間的區别。相反，也要避免強烈的對比色，例如紅配綠或藍配黃。

5、使用用一種顔色去表達相同類型的數據

在圖表中使用自然增量（0、5、10、15），而非不均勻的增量（0、3、5、16）排序要均勻。

6、對比

可視化讓數據對比更直觀，但是僅僅把兩組圖表緊挨着放在一起并不能達成這個目标，甚至更令人費解，所以要多用不同類型的圖片進行對比。（試想将幾十個不同的折線圖放在一起對比？No way！下面這麼好看的也不可以）

7、保持視覺的一緻性

保持視覺的一緻性，讓讀者可以一眼辨别出，這意味着你可能要使用堆疊型柱狀圖、分組條形圖或者折線圖了。但無論選擇哪種圖形，不要讓讀者費力去對比太多東西。

1、客戶溝通，明确需求

可視化大屏開始設計之前，最重要的就是，跟客戶進行溝通，明确用戶的需求。

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

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

2.普通展示：主辦公區域或前台大廳實時數據展示。

通過應用那個場景，還可以進一步将用戶進行區分。

明确客戶步驟

A. 專業用戶：即參加商務活動、分享等，需了解具體數據内容的用戶。此類用戶會較為細緻的查看每項數據；

B. 興趣用戶：即無論數據在何處展示，其對數據都有濃厚的興趣，會去駐足停留，仔細觀看及分析數據。

C.普通用戶：即匆匆過往的人群。這部分用戶可能隻會在屏幕前短暫停留。

将場景和用戶進行分類後，就可以進一步根據他們的需求，進行需求可視化大屏的歸集。

2、根據業務場景确定關鍵詞

關鍵指标是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指标在大屏上獨占一塊區域，所以通過關鍵指标定義，我們就知道大屏上大概會顯示哪些内容以及大屏會被分為幾塊。

以學校校情大屏為例：這裡的關鍵詞是 辦學條件、師資情況、師生情況。

确定關鍵指标後，根據業務需求拟定各個指标展示的優先級（主、次、輔）。

主要關鍵指标：主要指标位于屏幕中央，多維動效豐富的地圖或者其他

次要關鍵指标：次要指标位于屏幕兩側，多為各類圖表

輔助關鍵指标：主要指标的補充信息，可不顯示或顯示

版式不是金科定律，隻是通常推薦的主次分布版式，能讓信息一目了然。小夥伴們可以自己嘗試下多樣的布局來打破常規。

3、确定指标統計圖類型

選定圖表注意事項：易理解、可實現；圖表類型選擇，可以參考億信華辰酷屏統計圖，百餘種統計圖組件，任君選擇。

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

億信ABI統計圖

某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明确哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改叠代，所以設計師在這裡需要抓住重點，有取舍，不鑽牛角尖、死磕不放。選擇統計圖有以下幾個原則。

a. 吸引眼球，令人心動

龐大的信息量充斥我們的生活，一張信息圖的設計如果沒有特色很快就會被淹沒。因此，不論是從結構出發，還是趣味性，抑或是色彩沖擊力，一定要有足夠吸引人的地方，首先讓用戶産生興趣。不管是展示什麼樣的信息内容，都要加入一些讓人耳目一新的元素。

如下面這款，億信ABI中的魔法水晶球統計圖組件，完全打破了統計圖的局限，将重要數據重點展示，炫酷清晰，用在政務雲、雲計算、智慧城市等大屏中，效果驚豔。

億信ABI内置組件-魔法水晶球

b.了解物理大屏，确定設計稿尺寸

一般情況下設計稿的分辨率就是電腦的分辨率，此外，當被投電腦分辨率長寬比與大屏物理長寬比不一緻時，也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

通常我們PC端做的尺寸是：1366px * 768px

一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信号源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置後的分辨率。此外，當被投電腦分辨率長寬比與大屏物理長寬比不一緻時（單信号源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。屏幕尺寸與設計稿的比例要一緻。

4、頁面布局劃分

尺寸确立後，接下來要對設計稿進行布局和頁面的劃分。這裡的劃分，主要根據我們之前定好的業務指标進行，核心業務指标安排在中間位置、占較大面積；其餘的指标按優先級依次在核心指标周圍展開。一般把有關聯的指标讓其相鄰或靠近，把圖表類型相近的指标放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

主次分明、條理清晰、注意留白，合理利用大屏上各個小的顯示單元，并盡量避免關鍵數據被拼縫分割。

大屏規劃布局示例

這一點要求我們注意視線的移動規律。比如橫向排版的信息，人們一般會首先注意左上角。因此，标題一般出現在這個位置。看過左上角之後，用戶的視線會往右下方移動。我們在排版布局的時候，應該遵循視線的移動規律，人眼在觀察物體的時候，目光不會隻聚焦在一點上，而是會覆蓋焦點周邊的一片區域。把時間的流逝感和視線的移動相結合，就能産生更好的效果。

5、定義設計風格

可視化大屏的設計風格主要根據行業類型、客戶喜好、具體展示指标整體搭配，但總體一般以深色為主，這主要是因為大屏如果是淺色系長時間觀看會造成眼睛疲勞、刺疼，還一點就是淺色上面不是很适合體現動感光線等特效的展示。當然大屏雖酷炫，但我們也不能忘記了為了炫酷而炫酷，實際我們還是要以展示具體指标為主要目的。平時的時候可以多看一下優秀的可視化大屏案例網站，也會對設計風格有良好的幫助。

可視化大屏網站

數據是核心，場景是大數據呈現的承載體；場景使用具有金屬質感的深青灰，符合理性的、冷靜的、智能化産品的個性；數據色彩使用透明、發光、具有未來感的高亮色，和場景形成強對比，使數據更為突顯、更具吸引力；為了強化客戶對于風險的感知，通過顔色區分數據的風險等級，更直觀的傳達數據的含義。如：高風險的使用紅色，紅色讓人聯想到危險、警報。

大屏設計風格示例

總之，在定義設計風格時，要滿足兩大原則。

a.準确傳達，清晰明了

想要傳達給用戶的内容，還沒有在大腦裡面好好思考就急于去設計，其結果就像一個人說話文不對題一樣。用戶遇到這種設計的時候，很難從你的設計中提取到有效信息。設計重心不明确，設計就會顯得搖擺不定，注定做不出好的圖形。所以在信息圖形設計中，要學會取舍，要給用戶傳達一個最想要傳達的主題，然後将這個主題巧妙的表現出來。

b.去粗取精，簡單易懂

根據概念去推敲創意時，其要點在于要從龐大的信息量中将真正必要的信息甄選出來。所謂“真正必要的信息”指的是那些能使用最少的信息使效果最大化的内容。好的設計，讀者隻需掃一眼就能知道其主旨是什麼。簡化也不單單隻是對信息内容進行簡化，表現手法也可簡化。

6、可視化顔色搭配

色彩是最能給人直觀感受的，能夠直接的牽引用戶去尋找有效信息。整體色彩确定後，便運用色彩來劃分信息的層級關系，用主色調強調重點内容，以引導用戶能夠清晰、明确、迅捷的識别重要信息。

圖表需要的顔色較多時，建議最多不超過12種色相。通常情況下人在不連續的區域内可以分辨6〜12種不同色相。過多的顔色對傳達數據是沒有作用的，反而會讓人産生迷惑如何讓多種色相的顔色看來和諧。

以下列舉幾種分顔色大屏，以供參考。

a.金色調

金色當然超适合聽起來就多金的銀行、保險、租賃等金融相關行業，既給人簡約利落的質感，也讓人覺得高貴、精緻。而在搭配方面，需要選用一些低飽和度的圖表配色，讓人感覺高端、專業。

推薦色彩搭配：

b.藍色調

青、藍這樣的配色也是可視化大屏的常用色，可用于公安、交通、住建、制造等多個行業。既給人輕盈的質感，也不乏高雅品味。整體風格需要選取更加成熟、工業風格的圖表配色。

推薦色彩搭配：

c.綠色調

綠色代表了環保、希望和未來，教育、能源等行業多用綠色，既符合行業屬性，又能讓人有安全放心的感覺。而在數據圖表選用顔色時也可有更加活力的搭配方案。

推薦色彩搭配：

7、動效設置

整個項目中有許多數據都是實時變化的，為了減少數據變化刷新時的突然性，動效設計必不可少。在整個動效設計的過程中，除過場動畫、數據的變化外，動效還肩負起增添空間感、平衡畫面和整合信息的作用。 但是在增加動效的同時，仍需考慮服務器在承載大量數據湧入的同時，是否能夠承載較多的動效。因而在增加動效過後，我們與技術同學一同分析畫面與數據量，對動效部分進行适當取舍。使動效不必喧賓奪主，明确畫面中的重點進行展示。

億信ABI内置炫酷動效，支持SVG特效和3D特效，支持鑽取、聯動等動态分析功能，提供專業化定制，打破可視化動效展示瓶頸。

8、定稿

終于來到激動人心的一步，定稿。因為我們在前幾步已經分别确定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來。

然後根據樣圖效果嘗試确定五方面内容：

• 之前确立的布局在放入設計内容後是否依然合适；
• 确立的圖表類型帶入數據後是否仍然客觀準确；
• 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受；
• 已有的樣式、數據内容、動效等在開發實現方面是否存在問題；
• 大屏是否存在色差、文字内容是否清晰可見、頁面是否存在變形拉伸等現象。

如果還有以下細節問題可以進一步調優。

了解大屏制作的相關内容後，我們來看一下利用億信ABI實現的各行業大屏，抛磚引玉，希望大家能做出更優秀可視化大屏。

1、金融行業

億信大屏在金融行業有着重要應用，以銀行大屏為例：

通過大屏，展示管理者日常工作中最關注的指标，并且通過直觀的圖形的方式展示，便于管理者快速了解銀行的經營狀況以及進行風險的預警。

2、電力行業

億信大屏為電力行業保駕護航！

通過大屏，實現了對信息發布、政策宣傳、運行管理、需求響應、在線監測、應力情況、超載使用、電能服務實時監測，助力監控團隊進度和經營分析，對一些故障做出及時響應，為後續的決策提供有力的依據與數據保障。

3、智慧城市

億信大屏突破城市運維的可視化瓶頸！

3D城市模型在展示智慧城市方面有其得天獨厚的優勢。通過大屏，将城市運維的重要因素通過3D模型展示出來，如人口、單位、建築、車輛、軌迹等，纖毫畢現。

4、公檢法

億信大屏可為公檢法的法務工作插上科技的翅膀！

通過大屏，可以有效的反映目前訴訟的熱點，多發的案件類型、案由、年齡，了解社會安定情況，為領導判斷下一步工作重點提供決策依據。同時可以反映出每個法官的實際工作量和工作效率，為法院領導考察辦案人員的辦案情況提供準确信息。

5、教育行業

億信大屏是教育行業一個極好的監控展示的窗口。

通過大屏用戶可以對師資力量、院系建設、優勢專業等關鍵數據有整體了解，同時學校領導也能一目了然地知悉學校軟硬件發展建設情況，在政策制定時擁有重要決策依據。

6、交通行業

億信大屏可為機場運營工作提供有效助力！

通過大屏，可以及時、直觀地了解機場航班航次、輔助車輛、停車狀況等運營情況；此外該大屏支持異常情況實時預警，突發情況第一手掌握，便于機場高效運營。

7、住建行業

億信大屏是住建行業運營監測的給力幫手！

通過大屏，可以直擊數據點，在地圖上直接标注地區排名，配合昨日、本月和本年的時間點展示對應的套數、面積、均價以及項目個數，各項指标一目了然。

8、醫療衛生行業

億信大屏可以讓醫療服務質量得到提高！

通過大屏，研究人員可以利用信息尋找有效的統計趨勢，并依據真實的醫療服務質量開展醫療評估。有助于醫療衛生行業的信息化建設，提升信息系統價值，使信息化向數據分析、決策支持領域邁進。

9、制造行業

億信大屏助力制造行業高效運營！

通過大屏，可以了解企業生産進度執行情況、業務銷售情況、售後服務以及經營狀況等，激發業務人員分析思路，提供經營決策數據支撐。

10、通信行業

億信大屏助力運營商業務高效完成！

通過大屏，實時集中監控平台各類業務運營情況，以智能化的數據生産和數據分析方式，使業務人員從大量的數據彙總整理、合并、深入分析及數據挖掘的工作中解放出來，減少工作難度，降低分析門檻、提升工作效率，輔助領導決策。

本文到此全部結束，希望對大家的可視化大屏之路有所幫助。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!