天天看點

可視化大屏設計快速入門指南

作者:原創先鋒

随着大資料産業的蓬勃發展,很多企業都開始應用資料可視化。智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了可視化的需求,可視化行業也迎來了迅速發展的成長期。

資料可視化釋義

資料可視化就是把一些相對複雜、抽象的、我們看不懂的資料通過“可視化”的方式,運用圖形化的手段清晰有效地将資料資訊進行解讀和傳達,幫助我們發現其中的規律和特征,挖掘資料背後的價值。

可視化大屏

可視化大屏是以大屏為主要展示載體的資料可視化設計。它的應用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應用在會議展廳、園區管理、城市交通排程中心、公安指揮中心、企業生産監控等重要場所。

可視化使用者群體相對比較明确,主要是機關上司及一些一線人員。通過互動式實時資料監測,洞悉營運增長,助力智能高效決策。

伴随行業的發展,行業内也對可視化進行了一些行業細分。常見的一些類别:行業可視化(如交通、醫療、金融、軍警部隊、農業、工廠、化工等)、智能終端系統類(定制化終端産品)、示範 demo(資料示範、展覽展示、資料看闆 )、可視化分析系統(通過對資料的分析監控輔助決策,如交通預警平台、天氣監控平台等)。

市場現狀

平台化

由于近幾年可視化的需求越來越大,一般的公司都會有一些可視化的需求,各大廠商也逐漸整合可視化資源,實作平台化、低代碼化。滿足了大多數公司的可視化需求。

實作方式

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

主視覺部分會基于 Unity3D、虛幻引擎(UE4)、Ventuz、threejs 等工具去實作。滿足三維炫酷的效果需求。使整個可視化大屏效果有了質的提升。這些三維工具的優勢是三維粒子效果能很好的支援,且效果非常炫酷。多平台支援,可通過 webgl 封裝在浏覽器裡打開使用。缺點就是維護成本較高,需要相關的專業人員去開發維護,有一定的使用門檻。一般公司如果不是專門做可視化相關業務不會配備相關專業人員。

說下幾種工具的優缺點:

Ventuz 國内用的相對較少,相關專業人員也較少。虛幻引擎效果上是比較好的,但是對 WebGL 參數支援的較少。Threejs 雖然支援三維但是沒有 Unity 那麼強大的編輯器,一些複雜的效果實作不了。相對于前者 Unity 來說成熟一些,也是目前市場上用的比較多的,不過 three 對于前端開發同學更友好一些,容易上手,學習成本相對低一些。

可視化設計師應了解的知識

可視化設計是相對新興的行業,就目前市場來看也是當今比較火的行業。作為一名設計師,不僅僅是隻做完效果圖就能行的,他是一個結合硬體裝置、UI 設計、三維模組化、三維渲染、動态設計、資料可視化、圖形技術、GIS 資料、渲染引擎、互動技術等等綜合類的交叉學科。

1. 硬體裝置

硬體裝置資訊是做大屏一切的開始,我們首先要了解它的尺寸、比例、螢幕種類(拼接屏、LED 屏)投影方式等等 一系列的資訊,友善後續的設計工作。

2. GIS 資料

通常應用于參數化模組化,之前寫的 0-1 帶你制作智慧城市地圖(二)就屬于參數化模組化的一種,主要是通過一些地理位置高程資料進行模型的生成。屬于智慧城市可視化設計的基礎設施。

3. 三維模組化

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

4. 動效設計

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

5. 圖形技術

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

6. 渲染引擎的技術架構

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

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

BS 架構與 CS 架構特點

BS:(Browser-Server,)浏覽器/伺服器模式,web 應用可以實作跨平台,用戶端零維護,但是個性化能力低,響應速度較慢。

WebGL 就屬于 BS 架構的一種。優點就是使用便捷、資料實時更新、跨平台。缺點是渲染效果較差,大場景支援差。

CS:(Client Server,用戶端/伺服器模式),桌面級應用響應速度快,安全性強,個性化能力強,響應資料較快。

Unreal Engine、Unity3D、Ventuz 屬于 CS 架構。優勢就是整體渲染視覺效果棒,大場景支援好,缺點是必須安裝用戶端、電腦性能要求高、不同平台需要不同檔案。