眾所周知，人的左腦負(fù)責(zé)處理文字和邏輯相關(guān)的事務(wù)，人的右腦負(fù)責(zé)處理圖像和藝術(shù)相關(guān)的事務(wù)。

其特點(diǎn)是，左腦處理速度慢，右腦處理速度極快；并且人腦在處理信息時(shí)，是通過視覺和文本兩個(gè)通道。這也就是為什么人們愛追求可視化，因?yàn)槿四X處理圖像的速度遠(yuǎn)超過處理文字，即常說的一圖勝千言。

但大多數(shù)人面臨這樣一個(gè)挑戰(zhàn)，即我們認(rèn)識到了數(shù)據(jù)可視化的必要性，但缺乏數(shù)據(jù)可視化方面的專業(yè)技能，部分原因可以歸結(jié)于，數(shù)據(jù)可視化只是數(shù)據(jù)分析過程中的一個(gè)環(huán)節(jié)，數(shù)據(jù)分析師可能將精力花在獲取數(shù)據(jù)、清洗整理數(shù)據(jù)、分析數(shù)據(jù)、建立模型，但在最終的展示溝通上力不從心。

與此同時(shí)，對于可視化類型的選擇，既不是純粹美學(xué)，也不是完全個(gè)人化。一個(gè)不合適的方案，受眾可能會(huì)覺得乏味或者費(fèi)解，甚至可能造成和受眾之間的信任壁壘。

今天小億就來為大家說說什么是數(shù)據(jù)可視化，以及可視化有統(tǒng)一的規(guī)范嗎？大公司都是如何做數(shù)據(jù)可視化的？

一、什么數(shù)據(jù)可視化？
數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(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)，其本質(zhì)是傳遞信息，即如何將信息準(zhǔn)確、可靠、易于理解傳達(dá)給對方。

而大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)，也是當(dāng)前可視化領(lǐng)域的一項(xiàng)熱門應(yīng)用，通常可以分為信息展示類、數(shù)據(jù)分析類及監(jiān)控預(yù)警類。數(shù)據(jù)可視化大屏，有兩個(gè)要點(diǎn)：一是展示效果的酷炫，二是展示數(shù)據(jù)之間的層次關(guān)系。好的數(shù)據(jù)可視化大屏是布局、色彩、圖表、動(dòng)效的綜合運(yùn)用。

二、數(shù)據(jù)可視化的原則
數(shù)據(jù)可視化是一種信息交流形式，它以圖形形式描繪密集和復(fù)雜的信息，最終的視覺效果旨在簡化數(shù)據(jù)，并使用數(shù)據(jù)幫助用戶決策。與此同時(shí)，數(shù)據(jù)可視化可以表示不同類型和大小的數(shù)據(jù)，從幾個(gè)數(shù)據(jù)點(diǎn)到大型多元數(shù)據(jù)集，在總體上遵循以下原則：

1.準(zhǔn)確性
數(shù)據(jù)可視化需考慮數(shù)據(jù)的準(zhǔn)確性，清晰度和完整性。以不失真的方式呈現(xiàn)信息，減少用戶的思考成本。

2.實(shí)用性
強(qiáng)調(diào)數(shù)據(jù)需要實(shí)用，可以幫助用戶使用強(qiáng)調(diào)探索和比較的上下文和啟示來導(dǎo)航數(shù)據(jù)，比如探索比較數(shù)據(jù)，預(yù)警數(shù)據(jù)，瀏覽數(shù)據(jù)。

3.適應(yīng)性
能適應(yīng)多設(shè)備、多場景。可根據(jù)不同設(shè)備大小調(diào)整可視化，同時(shí)預(yù)測用戶對數(shù)據(jù)深度、復(fù)雜性和模態(tài)的需求。

三、數(shù)據(jù)可視化的分類
數(shù)據(jù)可視化可以以不同的形式表示。圖表是表達(dá)數(shù)據(jù)的常用方法，因?yàn)樗鼈兠枋隽瞬煌臄?shù)據(jù)類型，并可以進(jìn)行數(shù)據(jù)比較、探索等。決定使用圖表類型主要取決于兩件事：要傳達(dá)的數(shù)據(jù)以及要傳達(dá)的數(shù)據(jù)的內(nèi)容。下面我們分別來介紹圖表的各種類型。

1.比較類
可視化的方法顯示值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積和顏色來比較數(shù)值的大小，通常用于展示不同步分類間的數(shù)值對比，不同時(shí)間點(diǎn)的數(shù)據(jù)對比。

2.占比類
可視化的方法顯示同一維度上占比關(guān)系

3.區(qū)間類
可視化的方法顯示同一維度上值的上限和下限之間的差異。使用圖形的大小和位置表示數(shù)值的上限和下限，通常用于表示數(shù)據(jù)在某一個(gè)分類（時(shí)間點(diǎn)）上 的最大值和最小值。

4.關(guān)聯(lián)類
可視化的方法顯示數(shù)據(jù)之間相互關(guān)系，使用圖形的嵌套和位置表示數(shù)據(jù)之間的關(guān)系，通常用于表示數(shù)據(jù)之間的前后順序。

5.趨勢類
可視化的方法分析數(shù)據(jù)的變化趨勢。使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布，通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律。

6.時(shí)間類
可視化的方法分析數(shù)據(jù)的變化趨勢，使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布，通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律。

7.地圖類
可視化的方法顯示地理區(qū)域上的數(shù)據(jù)，使用地圖作為背景，通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置，通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。

四、數(shù)據(jù)可視化大屏的設(shè)計(jì)流程
1.梳理業(yè)務(wù)需求
大屏設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是大屏數(shù)據(jù)可視化的價(jià)值所在。

2.根據(jù)業(yè)務(wù)場景抽取關(guān)鍵指標(biāo)
關(guān)鍵指標(biāo)是一些概括性詞語，是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下，一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域，所以通過關(guān)鍵指標(biāo)定義，我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K，如圖所示，確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級（主、次、輔）。

（1）主：主要指標(biāo)位于屏幕中央，多為動(dòng)效豐富的地圖或翻牌器
（2）次：次要指標(biāo)位于屏幕兩側(cè)多為各類圖表
（3）輔：主要指標(biāo)的補(bǔ)充信息可不顯示或顯示于副屏或鼠標(biāo)經(jīng)過顯示

3.確立指標(biāo)分析維度
同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)自己的意圖，也沒能向觀者傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒有找準(zhǔn)或定義的比較混亂。

4.選定可視化圖表類型
當(dāng)確定好分析維度后，事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們設(shè)計(jì)意圖的那個(gè)就好了。選定圖表注意事項(xiàng)：易理解、可實(shí)現(xiàn)；

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

（2）可實(shí)現(xiàn)
我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等，然后評估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)；

5.了解物理大屏，確定設(shè)計(jì)稿尺寸
多數(shù)情況下設(shè)計(jì)稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個(gè)信號源時(shí)，就會(huì)有多個(gè)設(shè)計(jì)稿，此時(shí)每個(gè)設(shè)計(jì)稿的尺寸即對應(yīng)信號源電腦屏幕的分辨率。

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

6.頁面布局、劃分
尺寸確立后，接下來要對設(shè)計(jì)稿進(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)并提高信息傳遞的效率。

7.可視化設(shè)計(jì)
根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。

目前來講大屏可視化主要有指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)。指標(biāo)類信息點(diǎn)可視化效果相對簡單易實(shí)現(xiàn)，而地理類信息點(diǎn)一般可視化效果酷炫，但是開發(fā)相對困難，需要設(shè)計(jì)師跟開發(fā)多溝通的。

地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn)，所以對于被投電腦、大屏拼接器等硬件設(shè)備的性能會(huì)有要求，硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況，所以這點(diǎn)也是需要提前溝通評估的。

8.頁面定稿、開發(fā)
實(shí)際上頁面開發(fā)階段并不是到了這一步才進(jìn)行，這里說的頁面開發(fā)僅指前端樣式的實(shí)現(xiàn)，實(shí)際上后臺數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開始進(jìn)行了，而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端，然后用設(shè)計(jì)的樣式呈現(xiàn)出來。

9.整體細(xì)節(jié)調(diào)優(yōu)與測試
這部分是指頁面開發(fā)完成后，將真實(shí)頁面投放到大屏進(jìn)行的測試與優(yōu)化。這里主要有兩部分工作：

（1）視覺方面的測試：關(guān)鍵視覺元素、字體字號、頁面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無變形、錯(cuò)位等情況。
（2）性能與數(shù)據(jù)方面的測試：圖形圖表動(dòng)畫是否流暢、數(shù)據(jù)加載、刷新有無異常；頁面長時(shí)間展示是否存在奔潰、卡死等情況；后臺控制系統(tǒng)能否正常切換前端頁面顯示。

五、7種大屏設(shè)計(jì)與布局介紹
1.標(biāo)準(zhǔn)大屏

（1）常規(guī)布局

①布局要點(diǎn)：左中右。中間為主要指標(biāo)，占據(jù)頁面較大面積；左右兩邊為次要指標(biāo)，面積較小，較集中，展現(xiàn)指標(biāo)數(shù)量較多
②應(yīng)用場景：多數(shù)適用。如教育、房地產(chǎn)、政務(wù)等行業(yè)的數(shù)據(jù)分析展示，需要展示多項(xiàng)指標(biāo)，并突出某些關(guān)鍵指標(biāo)時(shí)適用
③優(yōu)勢：清晰展現(xiàn)較多的指標(biāo)，主次分明

（2）左右布局

①布局要點(diǎn)：重點(diǎn)區(qū)域擴(kuò)大，左或右放置少量指標(biāo)，不易展示大量指標(biāo)
②應(yīng)用場景：常用于地圖展示、三維模型展示，將重點(diǎn)區(qū)域擴(kuò)大。如智慧園區(qū)、智慧工廠、智慧城市等
能夠展現(xiàn)更多的圖像區(qū)域，三維模型的立體感更強(qiáng)

2.超大屏

（1）均等布局

①布局要點(diǎn)：按照1：1：1平均分配每一塊的展示區(qū)域
②應(yīng)用場景：常用于展示平級指標(biāo)
③優(yōu)勢：無明顯主次區(qū)分的指標(biāo)需要展現(xiàn)時(shí)，劃分區(qū)域，在視覺上不會(huì)過多干擾，平級展現(xiàn)時(shí)適用

（2）故事布局

①布局要點(diǎn)：沒有明顯的分割區(qū)域
②應(yīng)用場景：常用于講述一個(gè)完成的故事線
③優(yōu)勢：數(shù)據(jù)連貫性強(qiáng)，當(dāng)指標(biāo)間有關(guān)聯(lián)關(guān)系時(shí)，可以有邏輯地遞進(jìn)去展現(xiàn)

（3）君臣布局

①布局要點(diǎn)：中間大，兩邊小。中間為主要指標(biāo)，占據(jù)頁面較大面積，通常放置三維大圖；左右兩邊為次要指標(biāo)，面積較小，較集中，展現(xiàn)指標(biāo)較多
②應(yīng)用場景：需要展示多項(xiàng)指標(biāo)，并突出某些關(guān)鍵指標(biāo)或三維圖像時(shí)適用
③優(yōu)勢：圖像更大更清晰立體，指標(biāo)主次分明

3.異性屏

（1）縱向布局

①布局要點(diǎn)：由于屏幕的原因，將頁面分割為上中下部分，中間區(qū)域較大，上下較小，重點(diǎn)突出中間區(qū)域
②應(yīng)用場景：在一些特殊的展會(huì)上使用
③優(yōu)勢：很好的適配特殊場景下的屏幕，主次分明，突出重點(diǎn)

（2）繁星布局

①布局要點(diǎn)：布局較為隨意，滿屏都是各種各樣的指標(biāo)，盡可能多地展現(xiàn)
②應(yīng)用場景：常用于日常運(yùn)維、監(jiān)管人員使用
③優(yōu)勢：展現(xiàn)指標(biāo)多而全面

六、小結(jié)
大屏因?yàn)榇螅休d數(shù)據(jù)多，為了避免觀者迷失，大屏信息呈現(xiàn)要有焦點(diǎn)、有主次。可以通過對比，先把核心數(shù)據(jù)拋給用戶，待用戶理解大屏主要內(nèi)容與展示邏輯后，再逐級瀏覽二三級內(nèi)容。

另外想必一定有人好奇上面介紹的這些布局中炫酷的大屏是怎樣制作的呢。這里，小億就向大家推薦這個(gè)好用的數(shù)據(jù)可視化平臺——酷屏。

酷屏是億信華辰自主研發(fā)的新一代數(shù)據(jù)可視化產(chǎn)品，可靈活、快捷地制作各類交互式常規(guī)屏和大屏可視化，內(nèi)置百余種炫酷組件和3D特效，讓數(shù)據(jù)“躍然屏上”，得到更形象、更直觀的可視化呈現(xiàn)。

對于設(shè)計(jì)和布局方面，酷屏的一個(gè)重要優(yōu)勢就在于：能夠真正達(dá)到設(shè)計(jì)走多遠(yuǎn)，展現(xiàn)就能到多遠(yuǎn)的境界。方便開發(fā)和實(shí)施人員快捷的完成頁面需求并最終得到好的展現(xiàn)。任何類型的用戶想要達(dá)到的頁面效果及布局都可以使用酷屏分析快捷地制作實(shí)現(xiàn)。