編輯導語：資料視覺化設計對於企業發展可謂是一個很好的工具，本篇文章作者分享了有關視覺化大屏設計的內容，從多個方面介紹了視覺化大屏設計的具體內容，希望對你有幫助。

隨著大資料產業的蓬勃發展，很多企業都開始應用資料視覺化。

智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了視覺化的需求，視覺化行業也迎來了迅速發展的成長期。

資料視覺化釋義：

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

視覺化大屏：

視覺化大屏是以大屏為主要展示載體的資料視覺化設計。它的應用場景非廣泛如ToC、ToB、ToG等都會存在。

一般應用在會議展廳、園區管理、城市交通排程中心、公安指揮中心、企業生產監控等重要場所。

視覺化使用者群體相對比較明確，主要是單位領導及一些一線人員。透過互動式實時資料監測，洞悉運營增長，助力智慧高效決策。

伴隨行業的發展，行業內也對視覺化進行了一些行業細分。

常見的一些類別：

行業視覺化（

如交通、醫療、金融、軍警部隊、農業、工廠、化工等）；

智慧終端系統類

（定製化終端產品）；

演示demo（

資料演示、展覽展示、資料看板）；

視覺化分析系統

（透過對資料的分析監控輔助決策，如交通預警平臺、天氣監控平臺等）

。

一、市場現狀

1. 平臺化

由於近幾年視覺化的需求越來越大，一般的公司都會有一些視覺化的需求，各大廠商也逐漸整合視覺化資源，實現平臺化、低程式碼化。

滿足了大多數公司的視覺化需求。

國內比較知名的視覺化廠商：

光啟元（Ray design）、Data V、優諾科技（森工廠）、袋鼠雲（Easy V）、數字冰雹、圖撲等等。

他們將一些視覺化效果元件化整合在平臺，拖拖拽拽就能實現一些不錯的效果，滿足了一些公司的展示需求。

2. 實現方式

目前視覺化框架是大多數都是基於Web端的（基於web開發或者web封裝）而非PC端。

常見的視覺化實現方式是二維加三維相結合，比如大屏兩側的視覺化圖表可以用 Echarts這種第三方的輕量化圖表控制元件或者Vue來去實現。

主視覺部分會基於

Unity3D、虛幻引擎（UE4）、Ventuz、threejs

等工具去實現。

滿足三維炫酷的效果需求。使整個視覺化大屏效果有了質的提升。

這些三維工具的優勢是三維粒子效果能很好的支援，且效果非常炫酷。

多平臺支援，可透過webgl封裝在瀏覽器裡開啟使用。缺點就是維護成本較高，需要相關的專業人員去開發維護，有一定的使用門檻。

一般公司如果不是專門做視覺化相關業務不會配備相關專業人員。

說下幾種工具的優缺點

：

Ventuz 國內用的相對較少，相關專業人員也較少。虛幻引擎效果上是比較好的，但是對WebGL引數支援的較少。

Threejs雖然支援三維但是沒有Unity那麼強大的編輯器，一些複雜的效果實現不了。

相對於前者Unity相對成熟一些，也是目前市場上用的比較多的，不過three對於前端開發同學更友好一些，容易上手，學習成本相對低一些。

二、視覺化設計師應瞭解的知識

視覺化設計是相對新興的行業，就目前市場來看也是當今比較火的行業。

作為一名設計師，不僅僅是隻做完效果圖就能行的，他是一個結合

硬體裝置、UI設計、三維建模、三維渲染、動態設計、資料視覺化、圖形技術、GIS資料、渲染引擎、互動技術

等等綜合類的交叉學科。

1. 硬體裝置

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

上圖為一些常見的螢幕拼接方式，確認好螢幕的拼接方式就可以計算出整個大屏的物理解析度。

舉個例子：

上圖中最後一個的拼接方式為橫向3塊屏，豎向2塊螢幕。

他們每塊的螢幕解析度為 寬1920px 高1080px，那麼這塊2×3的拼接螢幕的尺寸就應該是：寬度 1920乘以3（橫向3塊屏）、高度1080乘以2（豎向2塊屏），得出整個螢幕的物理解析度為：5760×2160。

物理解析度VS輸出解析度：

大屏的投射方式大致分為三種：

電腦螢幕1比1等比例投屏；

透過主機直接輸出給拼接屏（這種大多都是一些自定義比例螢幕和解析度超大的情況會應用到）；

投影儀投射。

一般大屏的物理螢幕解析度大小都有不同，有的是極大的，幾萬畫素，如果我們按照物理解析度來去做設計的話會很卡，所以這裡設計尺寸建議按照輸出解析度設計。

輸出解析度會受到硬體的限制（超大情況下需等比縮放），我們一般會採用輸出解析度作為最終 的設計尺寸。

針對硬體裝置設計時要關注以下幾點：螢幕拼接方式、單螢幕畫素及拼接後像素、輸出畫素等這些決定了設計尺寸、內容排布、拼接縫的規避等問題。

2. GIS資料

通常應用於引數化建模，之前寫的0-1帶你製作智慧城市地圖（二）就屬於引數化建模的一種，主要是透過一些地理位置高程資料進行模型的生成。屬於智慧城市視覺化設計的基礎設施。

常見的一些格式：

Openstreetmap（多用於生成模型）、Shapefile（多用於生成模型）、Geojson（主要用於基於Web的對映）、TIFF（多用於貼圖處理）。

一些常用的工具：

Qgis、Arcgis、Google mapper。

3. 三維建模

在視覺化設計中，一般我們會結合生成引數化模型加定製化手工模型的方式處理整體效果。

這麼處理的目的：一是設計上能突出主體，增加畫面的層次感。二是在效能上能很好地最佳化，提高整體效能。

下圖為設計側到開發側對接流程：

4. 動效設計

常見的一些動效對接格式：

GIF、MP4、APNG、Lottie、序列幀。

5. 圖形技術

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

下圖是由一個50×100的粒子組成的平面，每個粒子都會對應他的xy軸的座標位置，我們透過控制的粒子透明度、大小、顏色、位置、旋轉等引數呈現不同的視覺效果。

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

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

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

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框架。

優勢就是整體渲染視覺效果棒，大場景支援好，缺點是必須安裝客戶端、電腦效能要求高、不同平臺需要不同檔案。

三、最後

以上是我對視覺化參差不齊的一些認知，主要是給大家普及視覺化設計的一些流程以及相關的專業知識，下期預告：視覺化設計中UI設計拆解知識分享。

作者：小六；公眾號：小六視覺化設計。

本文由 @小六 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。