隨著工業(yè)4.0變革的推進(jìn)，逐步開(kāi)始走向了利用信息化技術(shù)促進(jìn)產(chǎn)業(yè)變革的時(shí)代，也就是智能化時(shí)代。伴隨著時(shí)代的走向，工業(yè)互聯(lián)網(wǎng)和5G網(wǎng)絡(luò)逐漸揭開(kāi)了帷幕，數(shù)據(jù)不再是單純的數(shù)據(jù)信息源，數(shù)據(jù)可以結(jié)合一些可視化界面作為載體，實(shí)時(shí)地展示反饋出這個(gè)世界的變化。在諸多行業(yè)上，我們可以通過(guò)對(duì)數(shù)據(jù)的管控達(dá)到場(chǎng)景設(shè)備的維護(hù)效果，例如智慧園區(qū)、智慧工業(yè)、智慧礦山的建設(shè)，水務(wù)系統(tǒng)的監(jiān)控以及一些公共設(shè)施風(fēng)力發(fā)電，數(shù)據(jù)中心可視化系統(tǒng)等等的搭建上，都可以通過(guò)可視化的搭載，進(jìn)行數(shù)據(jù)的展示和維控。

布局功能一直是數(shù)據(jù)可視化大屏的重要功能點(diǎn)之一，舒適的布局界面，可以使人擁有煥然一新的感覺(jué)，擁有響應(yīng)式（自適應(yīng)）布局的話，可以兼顧各種比例大小下的屏幕，不會(huì)因?yàn)楸壤淖兓沟谜w的排版錯(cuò)亂。布局功能不僅適用于大屏的整體排版上，在三維場(chǎng)景數(shù)據(jù)可視化系統(tǒng)搭配的左右系統(tǒng)數(shù)據(jù)面板上，依然可以使用 2/3D 融合嵌套的形式完成，而在面板的排列上也可以使用 響應(yīng)式（自適應(yīng)）布局，可以將搭載的數(shù)據(jù)充分地顯示出來(lái)。

主題風(fēng)格的實(shí)現(xiàn)，是建立在 HT 特有的圖紙?jiān)O(shè)計(jì)機(jī)制下，在數(shù)據(jù)可視化系統(tǒng)實(shí)施的過(guò)程中，可以應(yīng)用于各種屏幕的分辨率下。比如系統(tǒng)設(shè)計(jì)過(guò)程中，可以在個(gè)人電腦的顯示器下進(jìn)行圖紙的設(shè)計(jì)和程序代碼的調(diào)試開(kāi)發(fā)，而當(dāng)開(kāi)發(fā)階段完成后，在現(xiàn)場(chǎng)大屏的布置搭建或者在用戶(hù)展示的時(shí)候，不用去擔(dān)心關(guān)于分辨率的變化會(huì)出現(xiàn)的失真模糊的問(wèn)題，從而在項(xiàng)目的開(kāi)發(fā)和搭建上，用戶(hù)的使用相對(duì)地會(huì)簡(jiǎn)單很多。加上 HT 自身研發(fā)的開(kāi)發(fā)插件 API 也同樣地易于上手，可以實(shí)現(xiàn)解決許多行業(yè)上的數(shù)據(jù)可視化系統(tǒng)的應(yīng)用。

數(shù)據(jù)可視化技術(shù)的基本思想，是將數(shù)據(jù)庫(kù)中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元元素表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。經(jīng)研究表明，人類(lèi)大腦對(duì)視覺(jué)信息的處理優(yōu)于對(duì)文本的處理。因此，數(shù)據(jù)可視化是使用圖表、圖形和設(shè)計(jì)元素把數(shù)據(jù)進(jìn)行可視化，把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過(guò)可視的方式以人們更易理解的形式展示出來(lái)的一系列手段。數(shù)據(jù)可視化可以使人們更有效率的完成某些任務(wù)，我們可以理解為三點(diǎn)優(yōu)勢(shì)：

>美觀展示:用數(shù)據(jù)展示企業(yè)特色，大會(huì)展臺(tái)，媒體現(xiàn)場(chǎng)展示等

>數(shù)據(jù)驅(qū)動(dòng)：實(shí)時(shí)查看業(yè)務(wù)概況、監(jiān)控預(yù)警、驅(qū)動(dòng)內(nèi)部快速響應(yīng)

>發(fā)掘價(jià)值：可視化數(shù)據(jù)呈現(xiàn)后，帶來(lái)的視覺(jué)感受會(huì)幫助人發(fā)現(xiàn)新的因素

在圖撲軟件（Hightopo）技術(shù)支持下，數(shù)據(jù)可視化除了“可視”，還有可交流、可互動(dòng)的特點(diǎn)。設(shè)計(jì)帶來(lái)的不僅是瞬息處理海量數(shù)據(jù)搭配酷炫的可視化樣式所引起的視覺(jué)震撼，更應(yīng)注重為業(yè)務(wù)需求服務(wù)，設(shè)計(jì)出符合不同行業(yè)需求的個(gè)性定制可視化，利于企業(yè)做出正確的商業(yè)決策，以有根據(jù)的數(shù)據(jù)呈現(xiàn)而幫助企業(yè)進(jìn)行更科學(xué)的判斷而避免決策的失誤。

1. 從業(yè)務(wù)需求分定優(yōu)先級(jí)，關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱(chēng)。通過(guò)規(guī)定主，次，輔，三個(gè)指標(biāo)的關(guān)鍵詞來(lái)概念性的清晰大屏的主要展示內(nèi)容，例如我們做的一個(gè)照明的監(jiān)測(cè)項(xiàng)目，我們可以歸類(lèi)成這三種：

>主：主要指標(biāo)位于屏幕中央，為地圖展現(xiàn)照明區(qū)域使用數(shù)據(jù)。

>次：次要指標(biāo)位于屏幕兩側(cè)以圖表的形式展現(xiàn)。

>輔：主要指標(biāo)的補(bǔ)充信息鼠標(biāo)點(diǎn)擊或懸停展示以及交互動(dòng)效展示。

這樣就可以方便在腦海中確定大屏的整體構(gòu)架，以便于我們接下來(lái)的細(xì)化。

2. 通過(guò)指標(biāo)分析維度確立可視化圖表類(lèi)型

同一個(gè)指標(biāo)的數(shù)據(jù)，從不同維度分析就有不同結(jié)果。如果分析的維度沒(méi)有找準(zhǔn)或定義的比較混亂，就會(huì)使可視化圖表無(wú)法清晰的看清楚含義，使人困惑。這里我們引用 Stephen Few 的文章 《Visual Business Intelligence》的四項(xiàng)維度-比較，聯(lián)系，分布，構(gòu)成，來(lái)分析數(shù)據(jù)的邏輯性。

3.根據(jù)大屏尺寸，規(guī)劃頁(yè)面布局，確立交互稿

確立圖表類(lèi)型后，下一步要進(jìn)入到布局具體的信息位置，確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。客戶(hù)的大屏尺寸不用會(huì)影響到整體的布局和效果，設(shè)計(jì)的時(shí)候也要考慮下是否有拼接大屏接縫的問(wèn)題，盡量以拼接屏尺寸來(lái)確立柵格化布局。

尺寸確立后，接下來(lái)要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁(yè)面的劃分。布局這里我們就要參考第一項(xiàng)的業(yè)務(wù)需求優(yōu)先級(jí)來(lái)布局畫(huà)面分割面積。核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積；其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周?chē)归_(kāi)。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近，把圖表類(lèi)型相近的指標(biāo)放一起，這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。視覺(jué)上要盡量規(guī)避文字羅列或圖表羅列，注意方圓圖表的面積比例問(wèn)題等，也是布局期間需要注意的事項(xiàng)。

4.確定設(shè)計(jì)風(fēng)格與設(shè)計(jì)進(jìn)行

設(shè)計(jì)風(fēng)格的確定主要以下幾點(diǎn)來(lái)確定：設(shè)計(jì)風(fēng)格的選擇切勿追求效果炫酷而不符合業(yè)務(wù)需求，選擇最合適的而不是選擇最絢爛的尤為重要。因?yàn)樵O(shè)計(jì)中涉及的范圍比較廣，我們?cè)诤髢烧鹿?jié)單獨(dú)著重講解。下面展示部分我們做的不同行業(yè)對(duì)應(yīng)的不同構(gòu)圖布局與元素的應(yīng)用案例：發(fā)動(dòng)機(jī)的可視化以突出發(fā)電機(jī)產(chǎn)品為主，周?chē)?UI 以大圓角形式設(shè)計(jì)，使視覺(jué)由四周向中間包圍，集中于中心。

地鐵站的可視化以寫(xiě)實(shí)風(fēng)格為主，再現(xiàn)了真實(shí)地鐵站的樣貌，以及身臨其境的動(dòng)畫(huà)交互體驗(yàn)。車(chē)間可視化案例以工業(yè)風(fēng)與寫(xiě)實(shí)風(fēng)格的車(chē)間模型濃縮了工業(yè)的運(yùn)作場(chǎng)景，色調(diào)以貼近工業(yè)的灰色為主，設(shè)計(jì)出制造專(zhuān)業(yè)感十足的可視化效果。同時(shí)在設(shè)計(jì)時(shí)因?yàn)槭褂玫脑O(shè)備不同，大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境，這里的很多問(wèn)題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn)，所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要，有時(shí)候需要開(kāi)發(fā)出demo，反復(fù)測(cè)試多次來(lái)修改協(xié)調(diào)最終上屏效果。在測(cè)試時(shí)從設(shè)計(jì)上可以重點(diǎn)注重以下幾點(diǎn)：

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

身處大數(shù)據(jù)時(shí)代的我們，有著許多的數(shù)據(jù)集等著我們?nèi)グl(fā)掘，通過(guò)一系列的數(shù)據(jù)分析，可以明白很多事件發(fā)展的趨勢(shì)走向，不僅可以帶來(lái)更好的生活體驗(yàn)，也能通過(guò)數(shù)據(jù)預(yù)測(cè)事件發(fā)生的方向。在信息時(shí)代發(fā)展迅速的前提下，數(shù)據(jù)是當(dāng)今重要的信息載體，可以通過(guò)數(shù)據(jù)的捕獲，通過(guò)監(jiān)管和維護(hù)去了解一個(gè)行業(yè)下關(guān)于工業(yè)管控下的數(shù)據(jù)可視化系統(tǒng)。

fqj