2022-6-13 博博
隨著大數據產業的蓬勃發展，很多企業都開始應用數據可視化。智慧城市、智慧交通、智慧醫療等等越來越多的行業都有了可視化的需求，可視化行業也迎來了迅速發展的成長期。
數據可視化就是把一些相對復雜、抽象的、我們看不懂的數據通過“可視化”的方式，運用圖形化的手段清晰有效地將數據信息進行解讀和傳達，幫助我們發現其中的規律和特征，挖掘數據背后的價值。
可視化大屏是以大屏為主要展示載體的數據可視化設計。它的應用場景非廣泛如 ToC、ToB、ToG 等都會存在。一般應用在會議展廳、園區管理、城市交通調度中心、公安指揮中心、企業生產監控等重要場所。
可視化用戶群體相對比較明確，主要是單位領導及一些一線人員。通過交互式實時數據監測，洞悉運營增長，助力智能高效決策。
伴隨行業的發展，行業內也對可視化進行了一些行業細分。常見的一些類別：行業可視化（如交通、醫療、金融、軍警部隊、農業、工廠、化工等）、智能終端系統類（定制化終端產品）、演示 demo（數據演示、展覽展示、數據看板 ）、可視化分析系統（通過對數據的分析監控輔助決策，如交通預警平臺、天氣監控平臺等）。
平臺化
由于近幾年可視化的需求越來越大，一般的公司都會有一些可視化的需求，各大廠商也逐漸整合可視化資源，實現平臺化、低代碼化。滿足了大多數公司的可視化需求。國內比較知名的可視化廠商：光啟元（Ray design）、Data V、優諾科技（森工廠）、袋鼠云（Easy V)、數字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺，拖拖拽拽就能實現一些不錯的效果，滿足了一些公司的展示需求。
實現方式
目前可視化框架是大多數都是基于 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 比 1 等比例投屏。2、通過主機直接輸出給拼接屏（這種大多都是一些自定義比例屏幕和分辨率超大的情況會應用到）。3、投影儀投射。
一般大屏的物理屏幕分辨率大小都有不同，有的是極大的，幾萬像素，如果我們按照物理分辨率來去做設計的話會很卡，所以這里設計尺寸建議按照輸出分辨率設計。輸出分辨率會受到硬件的限制（超大情況下需等比縮放），我們一般會采用輸出分辨率作為最終的設計尺寸。針對硬件設備設計時要關注以下幾點：屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設計尺寸、內容排布、拼接縫的規避等問題。
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 架構特點
本期給主要是給大家普及可視化設計的一些流程以及相關的專業知識，歡迎后臺添加小六微信溝通交流。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大數據可視化界面設計之一：可視化大屏設計快速入門指南
