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

布局功能一直是數(shù)據(jù)可視化大屏的重要功能點(diǎn)之一,舒適的布局界面,可以使人擁有煥然一新的感覺,擁有響應(yīng)式(自適應(yīng))布局的話,可以兼顧各種比例大小下的屏幕,不會因為比例的變化而使得整體的排版錯亂。布局功能不僅適用于大屏的整體排版上,在三維場景數(shù)據(jù)可視化系統(tǒng)搭配的左右系統(tǒng)數(shù)據(jù)面板上,依然可以使用 2/3D 融合嵌套的形式完成,而在面板的排列上也可以使用 響應(yīng)式(自適應(yīng))布局,可以將搭載的數(shù)據(jù)充分地顯示出來。

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

數(shù)據(jù)可視化技術(shù)的基本思想,是將數(shù)據(jù)庫中每一個數(shù)據(jù)項作為單個圖元元素表示,大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像,同時將數(shù)據(jù)的各個屬性值以多維數(shù)據(jù)的形式表示,可以從不同的維度觀察數(shù)據(jù),從而對數(shù)據(jù)進(jìn)行更深入的觀察和分析。
經(jīng)研究表明,人類大腦對視覺信息的處理優(yōu)于對文本的處理。因此,數(shù)據(jù)可視化是使用圖表、圖形和設(shè)計元素把數(shù)據(jù)進(jìn)行可視化,把相對復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來的一系列手段。數(shù)據(jù)可視化可以使人們更有效率的完成某些任務(wù),我們可以理解為三點(diǎn)優(yōu)勢:
> 美觀展示: 用數(shù)據(jù)展示企業(yè)特色,大會展臺,媒體現(xiàn)場展示等
> 數(shù)據(jù)驅(qū)動:實時查看業(yè)務(wù)概況、監(jiān)控預(yù)警、驅(qū)動內(nèi)部快速響應(yīng)
> 發(fā)掘價值:可視化數(shù)據(jù)呈現(xiàn)后,帶來的視覺感受會幫助人發(fā)現(xiàn)新的因素
在 圖撲軟件(Hightopo)技術(shù)支持下,數(shù)據(jù)可視化除了“可視”,還有可交流、可互動的特點(diǎn)。設(shè)計帶來的不僅是瞬息處理海量數(shù)據(jù)搭配酷炫的可視化樣式所引起的視覺震撼,更應(yīng)注重為業(yè)務(wù)需求服務(wù),設(shè)計出符合不同行業(yè)需求的個性定制可視化,利于企業(yè)做出正確的商業(yè)決策,以有根據(jù)的數(shù)據(jù)呈現(xiàn)而幫助企業(yè)進(jìn)行更科學(xué)的判斷而避免決策的失誤。
1. 從業(yè)務(wù)需求分定優(yōu)先級

關(guān)鍵指標(biāo)是一些概括性詞語,是對一組或者一系列數(shù)據(jù)的統(tǒng)稱。通過規(guī)定主,次,輔,三個指標(biāo)的關(guān)鍵詞來概念性的清晰大屏的主要展示內(nèi)容,例如我們做的一個照明的監(jiān)測項目,我們可以歸類成這三種:
>主:主要指標(biāo)位于屏幕中央,為地圖展現(xiàn)照明區(qū)域使用數(shù)據(jù)。
>次:次要指標(biāo)位于屏幕兩側(cè)以圖表的形式展現(xiàn)。
>輔:主要指標(biāo)的補(bǔ)充信息鼠標(biāo)點(diǎn)擊或懸停展示以及交互動效展示。
這樣就可以方便在腦海中確定大屏的整體構(gòu)架,以便于我們接下來的細(xì)化。
2. 通過指標(biāo)分析維度確立可視化圖表類型
同一個指標(biāo)的數(shù)據(jù),從不同維度分析就有不同結(jié)果。如果分析的維度沒有找準(zhǔn)或定義的比較混亂,就會使可視化圖表無法清晰的看清楚含義,使人困惑。這里我們引用 Stephen Few 的文章 《Visual Business Intelligence》的四項維度-比較,聯(lián)系,分布,構(gòu)成,來分析數(shù)據(jù)的邏輯性。

3.根據(jù)大屏尺寸,規(guī)劃頁面布局,確立交互稿
確立圖表類型后,下一步要進(jìn)入到布局具體的信息位置,確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。客戶的大屏尺寸不用會影響到整體的布局和效果,設(shè)計的時候也要考慮下是否有拼接大屏接縫的問題,盡量以拼接屏尺寸來確立柵格化布局。
尺寸確立后,接下來要對設(shè)計稿進(jìn)行布局和頁面的劃分。布局這里我們就要參考第一項的業(yè)務(wù)需求優(yōu)先級來布局畫面分割面積。核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積;其余的指標(biāo)按優(yōu)先級依次在核心指標(biāo)周圍展開。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近,把圖表類型相近的指標(biāo)放一起,這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。視覺上要盡量規(guī)避文字羅列或圖表羅列,注意方圓圖表的面積比例問題等,也是布局期間需要注意的事項。
4.確定設(shè)計風(fēng)格與設(shè)計進(jìn)行


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

地鐵站的可視化以寫實風(fēng)格為主,再現(xiàn)了真實地鐵站的樣貌,以及身臨其境的動畫交互體驗。

車間可視化案例以工業(yè)風(fēng)與寫實風(fēng)格的車間模型濃縮了工業(yè)的運(yùn)作場景,色調(diào)以貼近工業(yè)的灰色為主,設(shè)計出制造專業(yè)感十足的可視化效果。

同時在設(shè)計時因為使用的設(shè)備不同,大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境,這里的很多問題只有設(shè)計稿投到大屏上才能夠被發(fā)現(xiàn),所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要,有時候需要開發(fā)出demo,反復(fù)測試多次來修改協(xié)調(diào)最終上屏效果。在測試時從設(shè)計上可以重點(diǎn)注重以下幾點(diǎn):
之前確立的布局在放入設(shè)計內(nèi)容后是否依然合適
確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確
根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受
已有的樣式、數(shù)據(jù)內(nèi)容、動效等在開發(fā)實現(xiàn)方面是否存在問題
大屏是否存在色差、文字內(nèi)容是否清晰可見、頁面是否存在變形拉伸等現(xiàn)象

身處大數(shù)據(jù)時代的我們,有著許多的數(shù)據(jù)集等著我們?nèi)グl(fā)掘,通過一系列的數(shù)據(jù)分析,可以明白很多事件發(fā)展的趨勢走向,不僅可以帶來更好的生活體驗,也能通過數(shù)據(jù)預(yù)測事件發(fā)生的方向。在信息時代發(fā)展迅速的前提下,數(shù)據(jù)是當(dāng)今重要的信息載體,可以通過數(shù)據(jù)的捕獲,通過監(jiān)管和維護(hù)去了解一個行業(yè)下關(guān)于工業(yè)管控下的數(shù)據(jù)可視化系統(tǒng)。
本文為澎湃號作者或機(jī)構(gòu)在澎湃新聞上傳并發(fā)布,僅代表該作者或機(jī)構(gòu)觀點(diǎn),不代表澎湃新聞的觀點(diǎn)或立場,澎湃新聞僅提供信息發(fā)布平臺。申請澎湃號請用電腦訪問http://renzheng.thepaper.cn。





- 報料熱線: 021-962866
- 報料郵箱: news@thepaper.cn
互聯(lián)網(wǎng)新聞信息服務(wù)許可證:31120170006
增值電信業(yè)務(wù)經(jīng)營許可證:滬B2-2017116
? 2014-2025 上海東方報業(yè)有限公司