大數(shù)據(jù)可視化界面設(shè)計之四:可視化大屏設(shè)計快速入門指南,看這篇就夠了!

2022-6-13    博博


前言


隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展,很多企業(yè)都開始應(yīng)用數(shù)據(jù)可視化。智慧城市、智慧交通、智慧醫(yī)療等等越來越多的行業(yè)都有了可視化的需求,可視化行業(yè)也迎來了迅速發(fā)展的成長期。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!


數(shù)據(jù)可視化釋義


數(shù)據(jù)可視化就是把一些相對復(fù)雜、抽象的、我們看不懂的數(shù)據(jù)通過“可視化”的方式,運(yùn)用圖形化的手段清晰有效地將數(shù)據(jù)信息進(jìn)行解讀和傳達(dá),幫助我們發(fā)現(xiàn)其中的規(guī)律和特征,挖掘數(shù)據(jù)背后的價值。


可視化大屏


可視化大屏
是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計。它的應(yīng)用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應(yīng)用在會議展廳、園區(qū)管理、城市交通調(diào)度中心、公安指揮中心、企業(yè)生產(chǎn)監(jiān)控等重要場所。

可視化用戶群體相對比較明確,主要是單位領(lǐng)導(dǎo)及一些一線人員。通過交互式實時數(shù)據(jù)監(jiān)測,洞悉運(yùn)營增長,助力智能高效決策。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

伴隨行業(yè)的發(fā)展,行業(yè)內(nèi)也對可視化進(jìn)行了一些行業(yè)細(xì)分。常見的一些類別:行業(yè)可視化(如交通、醫(yī)療、金融、軍警部隊、農(nóng)業(yè)、工廠、化工等)、智能終端系統(tǒng)類(定制化終端產(chǎn)品)、演示 demo(數(shù)據(jù)演示、展覽展示、數(shù)據(jù)看板 )、可視化分析系統(tǒng)(通過對數(shù)據(jù)的分析監(jiān)控輔助決策,如交通預(yù)警平臺、天氣監(jiān)控平臺等)。


市場現(xiàn)狀


平臺化

由于近幾年可視化的需求越來越大,一般的公司都會有一些可視化的需求,各大廠商也逐漸整合可視化資源,實現(xiàn)平臺化、低代碼化。滿足了大多數(shù)公司的可視化需求。國內(nèi)比較知名的可視化廠商:光啟元(Ray design)、Data V、優(yōu)諾科技(森工廠)、袋鼠云(Easy V)、數(shù)字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺,拖拖拽拽就能實現(xiàn)一些不錯的效果,滿足了一些公司的展示需求。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

實現(xiàn)方式

目前可視化框架是大多數(shù)都是基于 Web 端的(基于 web 開發(fā)或者 web 封裝)而非 PC 端。常見的可視化實現(xiàn)方式是二維加三維相結(jié)合,比如大屏兩側(cè)的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實現(xiàn)。

主視覺部分會基于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具去實現(xiàn)。滿足三維炫酷的效果需求。使整個可視化大屏效果有了質(zhì)的提升。這些三維工具的優(yōu)勢是三維粒子效果能很好的支持,且效果非常炫酷。多平臺支持,可通過 webgl 封裝在瀏覽器里打開使用。缺點(diǎn)就是維護(hù)成本較高,需要相關(guān)的專業(yè)人員去開發(fā)維護(hù),有一定的使用門檻。一般公司如果不是專門做可視化相關(guān)業(yè)務(wù)不會配備相關(guān)專業(yè)人員。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

說下幾種工具的優(yōu)缺點(diǎn):

Ventuz 國內(nèi)用的相對較少,相關(guān)專業(yè)人員也較少。虛幻引擎效果上是比較好的,但是對 WebGL 參數(shù)支持的較少。Threejs 雖然支持三維但是沒有 Unity 那么強(qiáng)大的編輯器,一些復(fù)雜的效果實現(xiàn)不了。相對于前者 Unity 來說成熟一些,也是目前市場上用的比較多的,不過 three 對于前端開發(fā)同學(xué)更友好一些,容易上手,學(xué)習(xí)成本相對低一些。


可視化設(shè)計師應(yīng)了解的知識


可視化設(shè)計是相對新興的行業(yè),就目前市場來看也是當(dāng)今比較火的行業(yè)。作為一名設(shè)計師,不僅僅是只做完效果圖就能行的,他是一個結(jié)合硬件設(shè)備、UI 設(shè)計、三維建模、三維渲染、動態(tài)設(shè)計、數(shù)據(jù)可視化、圖形技術(shù)、GIS 數(shù)據(jù)、渲染引擎、交互技術(shù)等等綜合類的交叉學(xué)科。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

1. 硬件設(shè)備

硬件設(shè)備信息是做大屏一切的開始,我們首先要了解它的尺寸、比例、屏幕種類(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后續(xù)的設(shè)計工作。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

上圖為一些常見的屏幕拼接方式,確認(rèn)好屏幕的拼接方式就可以計算出整個大屏的物理分辨率。舉個例子:上圖中最后一個的拼接方式為橫向3塊屏,豎向2塊屏幕。他們每塊的屏幕分辨率為寬1920px 高1080px,那么這塊2×3的拼接屏幕的尺寸就應(yīng)該是:寬度 1920乘以3(橫向3塊屏)高度1080乘以2(豎向2塊屏)得出整個屏幕的物理分辨率為:5760×2160。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

物理分辨率 VS 輸出分辨率

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

大屏的投射方式大致分為三種:1、電腦屏幕 1 比 1 等比例投屏。2、通過主機(jī)直接輸出給拼接屏(這種大多都是一些自定義比例屏幕和分辨率超大的情況會應(yīng)用到)。3、投影儀投射。

一般大屏的物理屏幕分辨率大小都有不同,有的是極大的,幾萬像素,如果我們按照物理分辨率來去做設(shè)計的話會很卡,所以這里設(shè)計尺寸建議按照輸出分辨率設(shè)計。輸出分辨率會受到硬件的限制(超大情況下需等比縮放),我們一般會采用輸出分辨率作為最終的設(shè)計尺寸。針對硬件設(shè)備設(shè)計時要關(guān)注以下幾點(diǎn):屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設(shè)計尺寸、內(nèi)容排布、拼接縫的規(guī)避等問題。

2. GIS 數(shù)據(jù)

通常應(yīng)用于參數(shù)化建模,之前寫的 0-1 帶你制作智慧城市地圖(二)就屬于參數(shù)化建模的一種,主要是通過一些地理位置高程數(shù)據(jù)進(jìn)行模型的生成。屬于智慧城市可視化設(shè)計的基礎(chǔ)設(shè)施。

常見的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于貼圖處理)。

一些常用的工具:Qgis、Arcgis、Google mapper

3. 三維建模

在可視化設(shè)計中,一般我們會結(jié)合生成參數(shù)化模型加定制化手工模型的方式處理整體效果。這么處理的目的:一是設(shè)計上能突出主體,增加畫面的層次感。二是在性能上能很好地優(yōu)化,提高整體性能。

下圖為設(shè)計側(cè)到開發(fā)側(cè)對接流程:

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

4. 動效設(shè)計

常見的一些動效對接格式:GIF、MP4、APNG、Lottie、序列幀。


可視化大屏設(shè)計快速入門指南,看這篇就夠了!

5. 圖形技術(shù)

了解圖形成像原理,是由一個個的粒子點(diǎn)生成的畫面。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

下圖是由一個 50×100 的粒子組成的平面,每個粒子都會對應(yīng)他的 xy 軸的坐標(biāo)位置,我們通過控制的粒子透明度、大小、顏色、位置、旋轉(zhuǎn)等參數(shù)呈現(xiàn)不同的視覺效果。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

世界地圖的是通過一個一個粒子成像形成的畫面,其中黑色=0、白色=1。比如粒子大小是 1,它對應(yīng)的位置是黑色,黑色是 0,1×0 就=0 顯示為黑色。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

我們常做的粒子世界地圖就是通過控制粒子黑白 x 粒子大小疊加出來的。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

比如我們做粒子地球的時候是通過一張貼圖來去控制黑白度,海洋是黑色所以就不顯示粒子,陸地為白色顯示為白色粒子,最終呈現(xiàn)了一個粒子地球的效果。

可視化大屏設(shè)計快速入門指南,看這篇就夠了!

6. 渲染引擎的技術(shù)架構(gòu)

前面實現(xiàn)方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具實現(xiàn)的。

它們的底層是由 BS(Browser-Server)架構(gòu)和 CS(Client-Server)架構(gòu)兩大架構(gòu)組成的。

BS 架構(gòu)與 CS 架構(gòu)特點(diǎn)

  • BS:(Browser-Server,)瀏覽器/服務(wù)器模式,web 應(yīng)用可以實現(xiàn)跨平臺,客戶端零維護(hù),但是個性化能力低,響應(yīng)速度較慢。
  • WebGL 就屬于 BS 架構(gòu)的一種。優(yōu)點(diǎn)就是使用便捷、數(shù)據(jù)實時更新、跨平臺。缺點(diǎn)是渲染效果較差,大場景支持差。
  • CS:(Client Server,客戶端/服務(wù)器模式),桌面級應(yīng)用響應(yīng)速度快,安全性強(qiáng),個性化能力強(qiáng),響應(yīng)數(shù)據(jù)較快。
  • Unreal Engine、Unity3D、Ventuz 屬于 CS 框架。優(yōu)勢就是整體渲染視覺效果棒,大場景支持好,缺點(diǎn)是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。


最后


本期給主要是給大家普及可視化設(shè)計的一些流程以及相關(guān)的專業(yè)知識,歡迎后臺添加小六微信溝通交流。

作者:Mr.小六

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司








更多精彩文章:

大數(shù)據(jù)可視化界面設(shè)計之一:可視化大屏設(shè)計快速入門指南

大數(shù)據(jù)可視化界面設(shè)計之九:超全面的數(shù)據(jù)可視化設(shè)計指南:設(shè)備篇

大數(shù)據(jù)可視化界面設(shè)計之十:數(shù)據(jù)可視化必修課:表格篇




分享本文至:

日歷

鏈接

個人資料

存檔