設計必看丨可視化大屏設計快速入門指南，看這篇就夠了（可視化大屏設計教程）
編輯導語：數(shù)據(jù)可視化設計對于企業(yè)發(fā)展可謂是一個很好的工具，本篇文章作者分享了有關(guān)可視化大屏設計的內(nèi)容，從多個方面介紹了可視化大屏設計的具體內(nèi)容，希望對你有幫助。
隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開始應用數(shù)據(jù)可視化。
智慧城市、智慧交通、智慧醫(yī)療等等越來越多的行業(yè)都有了可視化的需求，可視化行業(yè)也迎來了迅速發(fā)展的成長期。
數(shù)據(jù)可視化釋義：數(shù)據(jù)可視化就是把一些相對復雜、抽象的、我們看不懂的數(shù)據(jù)數(shù)據(jù)通過“可視化”的方式，運用圖形化的手段清晰有效地將數(shù)據(jù)信息進行解讀和傳達，幫助我們發(fā)現(xiàn)其中的規(guī)律和特征，挖掘數(shù)據(jù)背后的價值。
可視化大屏：可視化大屏是以大屏為主要展示載體的數(shù)據(jù)可視化設計。它的應用場景非廣泛如ToC、ToB、ToG等都會存在。
一般應用在會議展廳、園區(qū)管理、城市交通調(diào)度中心、公安指揮中心、企業(yè)生產(chǎn)監(jiān)控等重要場所。
可視化用戶群體相對比較明確，主要是單位領導及一些一線人員。通過交互式實時數(shù)據(jù)監(jiān)測，洞悉運營增長，助力智能高效決策。
伴隨行業(yè)的發(fā)展，行業(yè)內(nèi)也對可視化進行了一些行業(yè)細分。
常見的一些類別：
- 行業(yè)可視化（如交通、醫(yī)療、金融、軍警部隊、農(nóng)業(yè)、工廠、化工等）；
- 智能終端系統(tǒng)類（定制化終端產(chǎn)品）；
- 演示demo（數(shù)據(jù)演示、展覽展示、數(shù)據(jù)看板）；
- 可視化分析系統(tǒng)（通過對數(shù)據(jù)的分析監(jiān)控輔助決策，如交通預警平臺、天氣監(jiān)控平臺等）。
一、市場現(xiàn)狀
1. 平臺化
由于近幾年可視化的需求越來越大，一般的公司都會有一些可視化的需求，各大廠商也逐漸整合可視化資源，實現(xiàn)平臺化、低代碼化。
滿足了大多數(shù)公司的可視化需求。
國內(nèi)比較知名的可視化廠商：光啟元（Ray design）、Data V、優(yōu)諾科技（森工廠）、袋鼠云（Easy V)、數(shù)字冰雹、圖撲等等。
他們將一些可視化效果組件化集成在平臺，拖拖拽拽就能實現(xiàn)一些不錯的效果，滿足了一些公司的展示需求。
2. 實現(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封裝在瀏覽器里打開使用。缺點就是維護成本較高，需要相關(guān)的專業(yè)人員去開發(fā)維護，有一定的使用門檻。
一般公司如果不是專門做可視化相關(guān)業(yè)務不會配備相關(guān)專業(yè)人員。
說下幾種工具的優(yōu)缺點：
Ventuz 國內(nèi)用的相對較少，相關(guān)專業(yè)人員也較少。虛幻引擎效果上是比較好的，但是對WebGL參數(shù)支持的較少。
Threejs雖然支持三維但是沒有Unity那么強大的編輯器，一些復雜的效果實現(xiàn)不了。
相對于前者Unity相對成熟一些，也是目前市場上用的比較多的，不過three對于前端開發(fā)同學更友好一些，容易上手，學習成本相對低一些。
二、可視化設計師應了解的知識
可視化設計是相對新興的行業(yè)，就目前市場來看也是當今比較火的行業(yè)。
作為一名設計師，不僅僅是只做完效果圖就能行的，他是一個結(jié)合硬件設備、UI設計、三維建模、三維渲染、動態(tài)設計、數(shù)據(jù)可視化、圖形技術(shù)、GIS數(shù)據(jù)、渲染引擎、交互技術(shù)等等綜合類的交叉學科。
1. 硬件設備
硬件設備信息是做大屏一切的開始，我們首先要了解它的尺寸、比例、屏幕種類（拼接屏、LED屏）投影方式 等等 一系列的信息，方便后續(xù)的設計工作。
上圖為一些常見的屏幕拼接方式，確認好屏幕的拼接方式就可以計算出整個大屏的物理分辨率。
舉個例子：上圖中最后一個的拼接方式為橫向3塊屏，豎向2塊屏幕。
他們每塊的屏幕分辨率為 寬1920px 高1080px，那么這塊2×3的拼接屏幕的尺寸就應該是：寬度 1920乘以3（橫向3塊屏）、高度1080乘以2（豎向2塊屏），得出整個屏幕的物理分辨率為：5760×2160。
物理分辨率VS輸出分辨率：
大屏的投射方式大致分為三種：
- 電腦屏幕1比1等比例投屏；
- 通過主機直接輸出給拼接屏（這種大多都是一些自定義比例屏幕和分辨率超大的情況會應用到）；
- 投影儀投射。
一般大屏的物理屏幕分辨率大小都有不同，有的是極大的，幾萬像素，如果我們按照物理分辨率來去做設計的話會很卡，所以這里設計尺寸建議按照輸出分辨率設計。
輸出分辨率會受到硬件的限制（超大情況下需等比縮放），我們一般會采用輸出分辨率作為最終 的設計尺寸。
針對硬件設備設計時要關(guān)注以下幾點：屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設計尺寸、內(nèi)容排布、拼接縫的規(guī)避等問題。
2. GIS數(shù)據(jù)
通常應用于參數(shù)化建模，之前寫的0-1帶你制作智慧城市地圖（二）就屬于參數(shù)化建模的一種，主要是通過一些地理位置高程數(shù)據(jù)進行模型的生成。屬于智慧城市可視化設計的基礎設施。
常見的一些格式：Openstreetmap（多用于生成模型）、Shapefile（多用于生成模型）、Geojson（主要用于基于Web的映射）、TIFF（多用于貼圖處理）。
一些常用的工具：Qgis、Arcgis、Google mapper。
3. 三維建模
在可視化設計中，一般我們會結(jié)合生成參數(shù)化模型加定制化手工模型的方式處理整體效果。
這么處理的目的：一是設計上能突出主體，增加畫面的層次感。二是在性能上能很好地優(yōu)化，提高整體性能。
下圖為設計側(cè)到開發(fā)側(cè)對接流程：
4. 動效設計
常見的一些動效對接格式：GIF、MP4、APNG、Lottie、序列幀。
5. 圖形技術(shù)
了解圖形成像原理，是由一個個的粒子點生成的畫面。
下圖是由一個50×100的粒子組成的平面，每個粒子都會對應他的xy軸的坐標位置，我們通過控制的粒子透明度、大小、顏色、位置、旋轉(zhuǎn)等參數(shù)呈現(xiàn)不同的視覺效果。
世界地圖的是通過一個一個粒子成像形成的畫面，其中黑色=0、白色=1 。比如粒子大小是1，它對應的位置是黑色，黑色是0，1×0就=0顯示為黑色。
我們常做的粒子世界地圖就是通過控制粒子黑白x粒子大小疊加出來的。
比如我們做粒子地球的時候是通過一張貼圖來去控制黑白度海洋是黑色所以就不顯示粒子，陸地為白色顯示 為白色粒子，最終呈現(xiàn)了一個粒子地球的效果。
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)特點：
BS：（Browser-Server）瀏覽器/服務器模式，web應用 可以實現(xiàn)跨平臺，客戶端零維護，但是個性化能力低，響應速度較慢。
WebGL就屬于BS架構(gòu)的一種。
優(yōu)點就是使用便捷、數(shù)據(jù)實時更新、跨平臺。缺點是渲染效果較差，大場景支持差。
CS：(Client Server，客戶端/服務器模式），桌面級應用 響應速度快，安全性強，個性化能力強，響應數(shù)據(jù)較快。
Unreal Engine、Unity3D、Ventuz屬于CS框架。
優(yōu)勢就是整體渲染視覺效果棒，大場景支持好，缺點是必須安裝客戶端、電腦性能要求高、不同平臺需要不同文件。
三、最后
以上是我對可視化參差不齊的一些認知，主要是給大家普及可視化設計的一些流程以及相關(guān)的專業(yè)知識，下期預告：可視化設計中UI設計拆解知識分享。
作者：小六；公眾號：小六可視化設計。
本文由 @小六 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
