隨著大數(shù)據(jù)的發(fā)展，可視化大屏在各行各業(yè)得到越來越廣泛的應(yīng)用。可視化大屏不再只是電影里奇幻的畫面，而是被實(shí)實(shí)在在地應(yīng)用在政府、商業(yè)、金融、制造等各個行業(yè)的業(yè)務(wù)場景中，切切實(shí)實(shí)地實(shí)現(xiàn)著大數(shù)據(jù)的價值。

△可視化大屏在疫情防控中的應(yīng)用

那么，如何設(shè)計出炫酷又實(shí)用的可視化大屏呢？首先需要的是完整地了解可視化大屏設(shè)計的全套內(nèi)容，但這部分內(nèi)容碎片化、相關(guān)資料較少，這讓很多渴望學(xué)習(xí)的數(shù)據(jù)分析師望而卻步。

所以這也促使小億整理了這篇【可視化大屏設(shè)計指南】，為大家梳理一個清晰的可視化設(shè)計制作框架，希望能夠給大家?guī)硪恍┎灰粯拥膬?nèi)容。

全文總計閱讀需要10分鐘左右，干貨滿滿，請大家做好準(zhǔn)備。或者直接滑到感興趣部分，目錄如下。

△文章框架

01、相關(guān)概念

1.什么是數(shù)據(jù)可視化

通過信息圖對數(shù)據(jù)進(jìn)行描述而設(shè)計，以人們更易理解的形式展示出來的一系列手段叫做數(shù)據(jù)可視化，數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

在當(dāng)前新技術(shù)支持下，數(shù)據(jù)可視化除了「可視」，還有「可交流」、「可互動」的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射，是抽象數(shù)據(jù)的具象表達(dá)。

△可視化實(shí)例

2.什么是大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計。也就是通過整個超大尺寸的屏幕來展示關(guān)鍵數(shù)據(jù)內(nèi)容。

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

△經(jīng)典可視化大屏實(shí)例（圖片來自網(wǎng)絡(luò)）

02、設(shè)計原則

了解數(shù)據(jù)可視化的相關(guān)概念后，著手設(shè)計時還有一些需要特別注意的原則。

1.字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體，需要嵌入字體時考慮字體的可識別性、與當(dāng)前設(shè)計風(fēng)格是否融合、是否可免費(fèi)商用。

選擇字母容易辨識不會產(chǎn)生奇異的字體更有利于用于數(shù)據(jù)可視化設(shè)計。

△實(shí)用字體推薦

2.字體選擇

字體大小：字號不小于12號字，可以用于圖表的標(biāo)注，數(shù)據(jù)信息建議14號字以上,大屏字體可以適當(dāng)?shù)母笠恍?br>
靈活的字體：寬松的字母間距（字母之間的間距應(yīng)小于字偶間距）和合適的中文字間距。

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

3.背景色使用

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

小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設(shè)計。相比之下，淺色背景更適合展示大量的數(shù)據(jù)信息，因?yàn)樵跍\色底上數(shù)據(jù)圖表的識別度比較高。而深色、彩色背景更適合渲染簡單的數(shù)據(jù)，用于烘托氣氛。

△淺色背景示例

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

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

△深色背景示例

4.顏色搭配

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

如果顏色過于相似（例如淺灰與更淺的灰），人們難以發(fā)現(xiàn)兩者間的區(qū)別。相反，也要避免強(qiáng)烈的對比色，例如紅配綠或藍(lán)配黃。

△顏色搭配示例

5.同類型的數(shù)據(jù)排列盡量均勻

使用用一種顏色去表達(dá)相同類型的數(shù)據(jù)，在圖表中使用自然增量（0、5、10、15），而非不均勻的增量（0、3、5、16）排序要均勻。

△同類數(shù)據(jù)排版示例

6.圖表類型多樣化，注重對比

可視化讓數(shù)據(jù)對比更直觀，但是僅僅把兩組圖表緊挨著放在一起并不能達(dá)成這個目標(biāo)，甚至更令人費(fèi)解，所以要多用不同類型的圖片進(jìn)行對比。（試想將幾十個不同的柱狀圖放在一起對比？No way！下面這么好看的也不可以）

△統(tǒng)計圖示例

7.保持視覺一致性

保持整體色彩感覺一致，配色風(fēng)格一致，不同顏色之間搭配協(xié)調(diào)。不要一會黑白配，一會又來個紅綠配。 圖標(biāo)、圖像的視覺風(fēng)格以及尺寸一致，和整體風(fēng)格保持一致。按鈕的風(fēng)格要統(tǒng)一，要么都是填充式的，要么都是中空式的，要么都是棱角分明，要么都是圓潤光滑。例如下圖，某公安行業(yè)可視化大屏（部分）是個很好的例子，配色統(tǒng)一，風(fēng)格一致。

△視覺一致性示例

03、大屏設(shè)計步驟

1.客戶溝通，明確需求

可視化大屏開始設(shè)計之前，最重要的就是，跟客戶進(jìn)行溝通，明確用戶的需求。

整體項(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ū)分。

△明確客戶需求步驟

A. 專業(yè)用戶：即參加商務(wù)活動、分享等，需了解具體數(shù)據(jù)內(nèi)容的用戶。此類用戶會較為細(xì)致的查看每項(xiàng)數(shù)據(jù)；
B. 興趣用戶：即無論數(shù)據(jù)在何處展示，其對數(shù)據(jù)都有濃厚的興趣，會去駐足停留，仔細(xì)觀看及分析數(shù)據(jù)。
C. 普通用戶：即匆匆過往的人群。這部分用戶可能只會在屏幕前短暫停留。
將場景和用戶進(jìn)行分類后，就可以進(jìn)一步根據(jù)他們的需求，進(jìn)行需求可視化大屏的歸集。

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

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

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

注意，若物理大屏分辨率過高，可進(jìn)行分辨率減半設(shè)計

△大屏系統(tǒng)示意圖

所以，一般我們也不建議大屏用自適應(yīng)方式，如果是自適應(yīng)，系統(tǒng)就會按各自模塊的寬高比先計算實(shí)際值，一旦大屏內(nèi)容布局較多或指標(biāo)計算復(fù)雜，則會非常影響大屏計算性能和實(shí)時分析能力。

3.確定關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。

以學(xué)校校情大屏為例：這里的關(guān)鍵指標(biāo)是教學(xué)經(jīng)費(fèi)投入、教學(xué)用房面積、多媒體教室座位等。

△教育大屏關(guān)鍵指標(biāo)示例

確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個指標(biāo)展示的優(yōu)先級（主、次、輔）。

主要關(guān)鍵指標(biāo)：主要指標(biāo)位于屏幕中央，多維動效豐富的地圖或者其他
次要關(guān)鍵指標(biāo)：次要指標(biāo)位于屏幕兩側(cè)，多為各類圖表
輔助關(guān)鍵指標(biāo)：主要指標(biāo)的補(bǔ)充信息，可不顯示或顯示

4.頁面布局劃分

尺寸和關(guān)鍵指標(biāo)確立后，接下來要對大屏進(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)并提高信息傳遞的效率。

△大屏規(guī)劃布局示例

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

△大屏規(guī)劃布局示例

這一點(diǎn)要求我們注意視線的移動規(guī)律。比如橫向排版的信息，人們一般會首先注意左上角。因此，標(biāo)題一般出現(xiàn)在這個位置。看過左上角之后，用戶的視線會往右下方移動。我們在排版布局的時候，應(yīng)該遵循視線的移動規(guī)律，人眼在觀察物體的時候，目光不會只聚焦在一點(diǎn)上，而是會覆蓋焦點(diǎn)周邊的一片區(qū)域。把時間的流逝感和視線的移動相結(jié)合，就能產(chǎn)生更好的效果。

5.確定統(tǒng)計圖類型

選定圖表注意事項(xiàng)：易理解、易實(shí)現(xiàn)；圖表類型選擇，可以參考億信華辰酷屏統(tǒng)計圖，百余種統(tǒng)計圖組件，任君選擇。

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

易實(shí)現(xiàn)：某些效果用設(shè)計工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難，所以大屏設(shè)計中一定要善用工具，切忌不計成本，埋頭苦作。

△億信ABI統(tǒng)計圖

選擇統(tǒng)計圖有以下兩個重要原則：

a. 符合業(yè)務(wù)場景數(shù)據(jù)特點(diǎn)

統(tǒng)計圖的基礎(chǔ)就是數(shù)據(jù)，所以在進(jìn)行統(tǒng)計圖選擇時候，最重要就是要符合業(yè)務(wù)場景中數(shù)據(jù)的特點(diǎn)。這里根據(jù)歸結(jié)圖表的特點(diǎn)，匯總出一張思維導(dǎo)圖，幫助大家更快地選擇展現(xiàn)數(shù)據(jù)特點(diǎn)的圖表類型。

△統(tǒng)計圖選擇建議（點(diǎn)擊大圖查看）

b. 吸引眼球，令人心動

龐大的信息量充斥我們的生活，一張信息圖的設(shè)計如果沒有特色很快就會被淹沒。因此，不論是從結(jié)構(gòu)出發(fā)，還是趣味性，抑或是色彩沖擊力，一定要有足夠吸引人的地方，首先讓用戶產(chǎn)生興趣。不管是展示什么樣的信息內(nèi)容，都要加入一些讓人耳目一新的元素。

億信酷屏內(nèi)置百余種炫酷組件，拖拽即可實(shí)現(xiàn)大屏制作。如下面這款，億信酷屏中的魔法水晶球統(tǒng)計圖組件，完全打破了統(tǒng)計圖的局限，將重要數(shù)據(jù)重點(diǎn)展示，炫酷清晰，用在政務(wù)云、云計算、智慧城市等大屏中，效果驚艷。【參考：有了這些可視化大屏組件，酷炫大屏玩得飛起】

△億信酷屏內(nèi)置組件-魔法水晶球

6.定義設(shè)計風(fēng)格

可視化大屏的設(shè)計風(fēng)格主要根據(jù)行業(yè)類型、客戶喜好、具體展示指標(biāo)整體搭配，但總體一般以深色為主，這主要是因?yàn)榇笃寥绻菧\色系長時間觀看會造成眼睛疲勞、刺疼，還一點(diǎn)就是淺色上面不是很適合體現(xiàn)動感光線等特效的展示。當(dāng)然大屏雖酷炫，但我們也不能忘記了為了炫酷而炫酷，實(shí)際我們還是要以展示具體指標(biāo)為主要目的。平時的時候可以多看一下優(yōu)秀的可視化大屏案例網(wǎng)站，也會對設(shè)計風(fēng)格有良好的幫助。

△優(yōu)秀可視化網(wǎng)站—花瓣網(wǎng)

△優(yōu)秀可視化網(wǎng)站—億信華辰官網(wǎng)

數(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)想到危險、警報。

△大屏設(shè)計風(fēng)格示例

同時，億信酷屏在進(jìn)行大屏設(shè)計時，提供了十余套大屏模板以供選擇，滿足不同客戶不同場景不同風(fēng)格需求。

7.可視化顏色搭配

色彩是最能給人直觀感受的，能夠直接的牽引用戶去尋找有效信息。整體色彩確定后，便運(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)生迷惑。

8.動效設(shè)置

整個項(xiàng)目中有許多數(shù)據(jù)都是實(shí)時變化的，為了減少數(shù)據(jù)變化刷新時的突然性，動效設(shè)計必不可少。在整個動效設(shè)計的過程中，除過場動畫、數(shù)據(jù)的變化外，動效還肩負(fù)起增添空間感、平衡畫面和整合信息的作用。 但是在增加動效的同時，仍需考慮服務(wù)器在承載大量數(shù)據(jù)涌入的同時，是否能夠承載較多的動效，分析畫面與數(shù)據(jù)量，對動效部分進(jìn)行適當(dāng)取舍。使動效不必喧賓奪主，明確畫面中的重點(diǎn)進(jìn)行展示。

億信酷屏內(nèi)置炫酷動效，支持SVG特效和3D特效，支持鉆取、聯(lián)動等動態(tài)分析功能，提供專業(yè)化定制，打破可視化動效展示瓶頸。

9.定稿

終于來到激動人心的一步，定稿。因?yàn)槲覀冊谇皫撞揭呀?jīng)分別確定了頁面布局、圖表類型、設(shè)計風(fēng)格特點(diǎn)，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現(xiàn)出來。

然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：
a. 之前確立的布局在放入設(shè)計內(nèi)容后是否依然合適；
b. 確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確；
c.? 根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受；
d. 已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實(shí)現(xiàn)方面是否存在問題；
e. 大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象。

如果還有細(xì)節(jié)問題可以進(jìn)一步調(diào)優(yōu)。

04、各行業(yè)優(yōu)秀可視化大屏

了解大屏設(shè)計的相關(guān)內(nèi)容后，我們來看一下利用億信酷屏實(shí)現(xiàn)的一百多張各行業(yè)大屏，開拓大屏設(shè)計新思路。

小結(jié)：數(shù)據(jù)可視化大屏不再是僅停留在把繁雜的數(shù)據(jù)圖形化出來，更多的是結(jié)合真實(shí)的場景加上交互等處理手段，更精準(zhǔn)的傳達(dá)數(shù)據(jù)信息。酷屏作為億信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品，已在金融、政務(wù)、衛(wèi)生、電力、教育、制造、公安、通信、稅務(wù)、零售、交通、公檢法、互聯(lián)網(wǎng)等多行業(yè)場景成功應(yīng)用，獲一致好評。