作為數(shù)據(jù)分析師或者可視化方面的設(shè)計(jì)師，設(shè)計(jì)制作可視化大屏是非常加分的一個(gè)技能。然而尷尬的是，想要完整地了解可視化大屏設(shè)計(jì)的全套內(nèi)容，門檻非常高，內(nèi)容瑣碎，這讓很多渴望學(xué)習(xí)的設(shè)計(jì)師或分析師摸不著頭腦。所以這也促使小億整理了這篇【可視化大屏設(shè)計(jì)指南】，希望能夠給大家?guī)?lái)一些不一樣的內(nèi)容，為大家梳理一個(gè)清晰的可視化設(shè)計(jì)制作框架。

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

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

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

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

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

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

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

設(shè)計(jì)原則

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

1、字體使用

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

2、字體選擇

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

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

字體大小：字號(hào)跟網(wǎng)頁(yè)設(shè)計(jì)一樣不小于12號(hào)字，可以用于圖表的標(biāo)注，數(shù)據(jù)信息建議14號(hào)字以上,大屏字體可以適當(dāng)?shù)母笠恍?

靈活的字體：寬松的字母間距（字母之間的間距應(yīng)小于字偶間距）和合適的中文字間距。

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

3、背景色的使用

顏色是出色的工具。使用不當(dāng)，不僅會(huì)讓讀者分心。背景色的選擇與可視化展示的設(shè)備相關(guān)，分為深色、淺色、彩色。

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

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

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

4、顏色搭配

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

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

5、使用用一種顏色去表達(dá)相同類型的數(shù)據(jù)

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

6、對(duì)比

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

7、保持視覺(jué)的一致性

保持視覺(jué)的一致性，讓讀者可以一眼辨別出，這意味著你可能要使用堆疊型柱狀圖、分組條形圖或者折線圖了。但無(wú)論選擇哪種圖形，不要讓讀者費(fèi)力去對(duì)比太多東西。

大屏設(shè)計(jì)步驟

1、客戶溝通，明確需求

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

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

1.專業(yè)展示：參與商務(wù)活動(dòng)、分享或?yàn)槟承﹫F(tuán)體進(jìn)行講解及展示使用。

2.普通展示：主辦公區(qū)域或前臺(tái)大廳實(shí)時(shí)數(shù)據(jù)展示。

通過(guò)應(yīng)用那個(gè)場(chǎng)景，還可以進(jìn)一步將用戶進(jìn)行區(qū)分。

A. 專業(yè)用戶：即參加商務(wù)活動(dòng)、分享等，需了解具體數(shù)據(jù)內(nèi)容的用戶。此類用戶會(huì)較為細(xì)致的查看每項(xiàng)數(shù)據(jù)；

B. 興趣用戶：即無(wú)論數(shù)據(jù)在何處展示，其對(duì)數(shù)據(jù)都有濃厚的興趣，會(huì)去駐足停留，仔細(xì)觀看及分析數(shù)據(jù)。

C.普通用戶：即匆匆過(guò)往的人群。這部分用戶可能只會(huì)在屏幕前短暫停留。

將場(chǎng)景和用戶進(jìn)行分類后，就可以進(jìn)一步根據(jù)他們的需求，進(jìn)行需求可視化大屏的歸集。

2、根據(jù)業(yè)務(wù)場(chǎng)景確定關(guān)鍵詞

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

以學(xué)校校情大屏為例：這里的關(guān)鍵詞是 辦學(xué)條件、師資情況、師生情況。

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

主要關(guān)鍵指標(biāo)：主要指標(biāo)位于屏幕中央，多維動(dòng)效豐富的地圖或者其他

次要關(guān)鍵指標(biāo)：次要指標(biāo)位于屏幕兩側(cè)，多為各類圖表

輔助關(guān)鍵指標(biāo)：主要指標(biāo)的補(bǔ)充信息，可不顯示或顯示

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

3、確定指標(biāo)統(tǒng)計(jì)圖類型

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

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

某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn)，但開發(fā)要用代碼落地卻非常困難，所以大屏設(shè)計(jì)中跟開發(fā)常溝通非常重要，我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮，哪些地方需要謹(jǐn)慎設(shè)計(jì)！一個(gè)項(xiàng)目總有周期與預(yù)算限制，不會(huì)無(wú)限期的修改迭代，所以設(shè)計(jì)師在這里需要抓住重點(diǎn)，有取舍，不鉆牛角尖、死磕不放。選擇統(tǒng)計(jì)圖有以下幾個(gè)原則。

a. 吸引眼球，令人心動(dòng)

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

如下面這款，億信ABI中的魔法水晶球統(tǒng)計(jì)圖組件，完全打破了統(tǒng)計(jì)圖的局限，將重要數(shù)據(jù)重點(diǎn)展示，炫酷清晰，用在政務(wù)云、云計(jì)算、智慧城市等大屏中，效果驚艷。

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

一般情況下設(shè)計(jì)稿的分辨率就是電腦的分辨率，此外，當(dāng)被投電腦分辨率長(zhǎng)寬比與大屏物理長(zhǎng)寬比不一致時(shí)，也會(huì)對(duì)被投電腦屏幕分辨率做自定義調(diào)整，這種情況設(shè)計(jì)稿分辨率也會(huì)發(fā)生變化。所以設(shè)計(jì)開始前了解物理大屏長(zhǎng)寬比很重要。

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

一般情況下設(shè)計(jì)稿的分辨率就是電腦的分辨率，當(dāng)有多個(gè)信號(hào)源時(shí)，有時(shí)會(huì)通過(guò)顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時(shí)，對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率。此外，當(dāng)被投電腦分辨率長(zhǎng)寬比與大屏物理長(zhǎng)寬比不一致時(shí)（單信號(hào)源），也會(huì)對(duì)被投電腦屏幕分辨率做自定義調(diào)整，這種情況設(shè)計(jì)稿分辨率也會(huì)發(fā)生變化。所以設(shè)計(jì)開始前了解物理大屏長(zhǎng)寬比很重要。屏幕尺寸與設(shè)計(jì)稿的比例要一致。

4、頁(yè)面布局劃分

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

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

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

5、定義設(shè)計(jì)風(fēng)格

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

數(shù)據(jù)是核心，場(chǎng)景是大數(shù)據(jù)呈現(xiàn)的承載體；場(chǎng)景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個(gè)性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來(lái)感的高亮色，和場(chǎng)景形成強(qiáng)對(duì)比，使數(shù)據(jù)更為突顯、更具吸引力；為了強(qiáng)化客戶對(duì)于風(fēng)險(xiǎn)的感知，通過(guò)顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險(xiǎn)等級(jí)，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險(xiǎn)的使用紅色，紅色讓人聯(lián)想到危險(xiǎn)、警報(bào)。

總之，在定義設(shè)計(jì)風(fēng)格時(shí)，要滿足兩大原則。

a.準(zhǔn)確傳達(dá)，清晰明了

想要傳達(dá)給用戶的內(nèi)容，還沒(méi)有在大腦里面好好思考就急于去設(shè)計(jì)，其結(jié)果就像一個(gè)人說(shuō)話文不對(duì)題一樣。用戶遇到這種設(shè)計(jì)的時(shí)候，很難從你的設(shè)計(jì)中提取到有效信息。設(shè)計(jì)重心不明確，設(shè)計(jì)就會(huì)顯得搖擺不定，注定做不出好的圖形。所以在信息圖形設(shè)計(jì)中，要學(xué)會(huì)取舍，要給用戶傳達(dá)一個(gè)最想要傳達(dá)的主題，然后將這個(gè)主題巧妙的表現(xiàn)出來(lái)。

b.去粗取精，簡(jiǎn)單易懂

根據(jù)概念去推敲創(chuàng)意時(shí)，其要點(diǎn)在于要從龐大的信息量中將真正必要的信息甄選出來(lái)。所謂“真正必要的信息”指的是那些能使用最少的信息使效果最大化的內(nèi)容。好的設(shè)計(jì)，讀者只需掃一眼就能知道其主旨是什么。簡(jiǎn)化也不單單只是對(duì)信息內(nèi)容進(jìn)行簡(jiǎn)化，表現(xiàn)手法也可簡(jiǎn)化。

6、可視化顏色搭配

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

圖表需要的顏色較多時(shí)，建議最多不超過(guò)12種色相。通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨6?12種不同色相。過(guò)多的顏色對(duì)傳達(dá)數(shù)據(jù)是沒(méi)有作用的，反而會(huì)讓人產(chǎn)生迷惑如何讓多種色相的顏色看來(lái)和諧。

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

a.金色調(diào)

金色當(dāng)然超適合聽起來(lái)就多金的銀行、保險(xiǎn)、租賃等金融相關(guān)行業(yè)，既給人簡(jiǎn)約利落的質(zhì)感，也讓人覺(jué)得高貴、精致。而在搭配方面，需要選用一些低飽和度的圖表配色，讓人感覺(jué)高端、專業(yè)。

推薦色彩搭配：

b.藍(lán)色調(diào)

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

推薦色彩搭配：

c.綠色調(diào)

綠色代表了環(huán)保、希望和未來(lái)，教育、能源等行業(yè)多用綠色，既符合行業(yè)屬性，又能讓人有安全放心的感覺(jué)。而在數(shù)據(jù)圖表選用顏色時(shí)也可有更加活力的搭配方案。

推薦色彩搭配：

7、動(dòng)效設(shè)置

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

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

8、定稿

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

然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容：

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

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

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

了解大屏制作的相關(guān)內(nèi)容后，我們來(lái)看一下利用億信ABI實(shí)現(xiàn)的各行業(yè)大屏，拋