2022-6-13 博博
隨著大數(shù)據(jù)產(chǎn)業(yè)的蓬勃發(fā)展，很多企業(yè)都開(kāi)始應(yīng)用數(shù)據(jù)可視化。智慧城市、智慧交通、智慧醫(yī)療等等越來(lái)越多的行業(yè)都有了可視化的需求，可視化行業(yè)也迎來(lái)了迅速發(fā)展的成長(zhǎng)期。
數(shù)據(jù)可視化就是把一些相對(duì)復(fù)雜、抽象的、我們看不懂的數(shù)據(jù)通過(guò)“可視化”的方式，運(yùn)用圖形化的手段清晰有效地將數(shù)據(jù)信息進(jìn)行解讀和傳達(dá)，幫助我們發(fā)現(xiàn)其中的規(guī)律和特征，挖掘數(shù)據(jù)背后的價(jià)值。
可視化大屏是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。它的應(yīng)用場(chǎng)景非廣泛如 ToC、ToB、ToG 等都會(huì)存在。一般應(yīng)用在會(huì)議展廳、園區(qū)管理、城市交通調(diào)度中心、公安指揮中心、企業(yè)生產(chǎn)監(jiān)控等重要場(chǎng)所。
可視化用戶(hù)群體相對(duì)比較明確，主要是單位領(lǐng)導(dǎo)及一些一線(xiàn)人員。通過(guò)交互式實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè)，洞悉運(yùn)營(yíng)增長(zhǎng)，助力智能高效決策。
伴隨行業(yè)的發(fā)展，行業(yè)內(nèi)也對(duì)可視化進(jìn)行了一些行業(yè)細(xì)分。常見(jiàn)的一些類(lèi)別：行業(yè)可視化（如交通、醫(yī)療、金融、軍警部隊(duì)、農(nóng)業(yè)、工廠(chǎng)、化工等）、智能終端系統(tǒng)類(lèi)（定制化終端產(chǎn)品）、演示 demo（數(shù)據(jù)演示、展覽展示、數(shù)據(jù)看板 ）、可視化分析系統(tǒng)（通過(guò)對(duì)數(shù)據(jù)的分析監(jiān)控輔助決策，如交通預(yù)警平臺(tái)、天氣監(jiān)控平臺(tái)等）。
平臺(tái)化
由于近幾年可視化的需求越來(lái)越大，一般的公司都會(huì)有一些可視化的需求，各大廠(chǎng)商也逐漸整合可視化資源，實(shí)現(xiàn)平臺(tái)化、低代碼化。滿(mǎn)足了大多數(shù)公司的可視化需求。國(guó)內(nèi)比較知名的可視化廠(chǎng)商：光啟元（Ray design）、Data V、優(yōu)諾科技（森工廠(chǎng)）、袋鼠云（Easy V)、數(shù)字冰雹、圖撲、等等。他們將一些可視化效果組件化集成在平臺(tái)，拖拖拽拽就能實(shí)現(xiàn)一些不錯(cuò)的效果，滿(mǎn)足了一些公司的展示需求。
實(shí)現(xiàn)方式
目前可視化框架是大多數(shù)都是基于 Web 端的（基于 web 開(kāi)發(fā)或者 web 封裝）而非 PC 端。常見(jiàn)的可視化實(shí)現(xiàn)方式是二維加三維相結(jié)合，比如大屏兩側(cè)的可視化圖表可以用 Echarts 這種第三方的輕量化圖表控件或者 Vue 去實(shí)現(xiàn)。
主視覺(jué)部分會(huì)基于 Unity3D、虛幻引擎（UE4）、Ventuz、threejs 等工具去實(shí)現(xiàn)。滿(mǎn)足三維炫酷的效果需求。使整個(gè)可視化大屏效果有了質(zhì)的提升。這些三維工具的優(yōu)勢(shì)是三維粒子效果能很好的支持，且效果非常炫酷。多平臺(tái)支持，可通過(guò) webgl 封裝在瀏覽器里打開(kāi)使用。缺點(diǎn)就是維護(hù)成本較高，需要相關(guān)的專(zhuān)業(yè)人員去開(kāi)發(fā)維護(hù)，有一定的使用門(mén)檻。一般公司如果不是專(zhuān)門(mén)做可視化相關(guān)業(yè)務(wù)不會(huì)配備相關(guān)專(zhuān)業(yè)人員。
說(shuō)下幾種工具的優(yōu)缺點(diǎn)：
Ventuz 國(guó)內(nèi)用的相對(duì)較少，相關(guān)專(zhuān)業(yè)人員也較少。虛幻引擎效果上是比較好的，但是對(duì) WebGL 參數(shù)支持的較少。Threejs 雖然支持三維但是沒(méi)有 Unity 那么強(qiáng)大的編輯器，一些復(fù)雜的效果實(shí)現(xiàn)不了。相對(duì)于前者 Unity 來(lái)說(shuō)成熟一些，也是目前市場(chǎng)上用的比較多的，不過(guò) three 對(duì)于前端開(kāi)發(fā)同學(xué)更友好一些，容易上手，學(xué)習(xí)成本相對(duì)低一些。
可視化設(shè)計(jì)是相對(duì)新興的行業(yè)，就目前市場(chǎng)來(lái)看也是當(dāng)今比較火的行業(yè)。作為一名設(shè)計(jì)師，不僅僅是只做完效果圖就能行的，他是一個(gè)結(jié)合硬件設(shè)備、UI 設(shè)計(jì)、三維建模、三維渲染、動(dòng)態(tài)設(shè)計(jì)、數(shù)據(jù)可視化、圖形技術(shù)、GIS 數(shù)據(jù)、渲染引擎、交互技術(shù)等等綜合類(lèi)的交叉學(xué)科。
1. 硬件設(shè)備
硬件設(shè)備信息是做大屏一切的開(kāi)始，我們首先要了解它的尺寸、比例、屏幕種類(lèi)（拼接屏、LED 屏）投影方式等等 一系列的信息，方便后續(xù)的設(shè)計(jì)工作。
上圖為一些常見(jiàn)的屏幕拼接方式，確認(rèn)好屏幕的拼接方式就可以計(jì)算出整個(gè)大屏的物理分辨率。舉個(gè)例子：上圖中最后一個(gè)的拼接方式為橫向3塊屏，豎向2塊屏幕。他們每塊的屏幕分辨率為寬1920px 高1080px，那么這塊2×3的拼接屏幕的尺寸就應(yīng)該是：寬度 1920乘以3（橫向3塊屏）高度1080乘以2（豎向2塊屏）得出整個(gè)屏幕的物理分辨率為：5760×2160。
物理分辨率 VS 輸出分辨率
大屏的投射方式大致分為三種：1、電腦屏幕 1 比 1 等比例投屏。2、通過(guò)主機(jī)直接輸出給拼接屏（這種大多都是一些自定義比例屏幕和分辨率超大的情況會(huì)應(yīng)用到）。3、投影儀投射。
一般大屏的物理屏幕分辨率大小都有不同，有的是極大的，幾萬(wàn)像素，如果我們按照物理分辨率來(lái)去做設(shè)計(jì)的話(huà)會(huì)很卡，所以這里設(shè)計(jì)尺寸建議按照輸出分辨率設(shè)計(jì)。輸出分辨率會(huì)受到硬件的限制（超大情況下需等比縮放），我們一般會(huì)采用輸出分辨率作為最終的設(shè)計(jì)尺寸。針對(duì)硬件設(shè)備設(shè)計(jì)時(shí)要關(guān)注以下幾點(diǎn)：屏幕拼接方式、單屏幕像素及拼接后像素、輸出像素等這些決定了設(shè)計(jì)尺寸、內(nèi)容排布、拼接縫的規(guī)避等問(wèn)題。
2. GIS 數(shù)據(jù)
通常應(yīng)用于參數(shù)化建模，之前寫(xiě)的 0-1 帶你制作智慧城市地圖（二）就屬于參數(shù)化建模的一種，主要是通過(guò)一些地理位置高程數(shù)據(jù)進(jìn)行模型的生成。屬于智慧城市可視化設(shè)計(jì)的基礎(chǔ)設(shè)施。
常見(jiàn)的一些格式：Openstreetmap（多用于生成模型）、Shapefile（多用于生成模型）、Geojson（主要用于基于 Web 的映射）、TIFF（多用于貼圖處理）。
一些常用的工具：Qgis、Arcgis、Google mapper
3. 三維建模
在可視化設(shè)計(jì)中，一般我們會(huì)結(jié)合生成參數(shù)化模型加定制化手工模型的方式處理整體效果。這么處理的目的：一是設(shè)計(jì)上能突出主體，增加畫(huà)面的層次感。二是在性能上能很好地優(yōu)化，提高整體性能。
下圖為設(shè)計(jì)側(cè)到開(kāi)發(fā)側(cè)對(duì)接流程：
4. 動(dòng)效設(shè)計(jì)
常見(jiàn)的一些動(dòng)效對(duì)接格式：GIF、MP4、APNG、Lottie、序列幀。
5. 圖形技術(shù)
了解圖形成像原理，是由一個(gè)個(gè)的粒子點(diǎn)生成的畫(huà)面。
下圖是由一個(gè) 50×100 的粒子組成的平面，每個(gè)粒子都會(huì)對(duì)應(yīng)他的 xy 軸的坐標(biāo)位置，我們通過(guò)控制的粒子透明度、大小、顏色、位置、旋轉(zhuǎn)等參數(shù)呈現(xiàn)不同的視覺(jué)效果。
世界地圖的是通過(guò)一個(gè)一個(gè)粒子成像形成的畫(huà)面，其中黑色=0、白色=1。比如粒子大小是 1，它對(duì)應(yīng)的位置是黑色，黑色是 0，1×0 就=0 顯示為黑色。
我們常做的粒子世界地圖就是通過(guò)控制粒子黑白 x 粒子大小疊加出來(lái)的。
比如我們做粒子地球的時(shí)候是通過(guò)一張貼圖來(lái)去控制黑白度，海洋是黑色所以就不顯示粒子，陸地為白色顯示為白色粒子，最終呈現(xiàn)了一個(gè)粒子地球的效果。
6. 渲染引擎的技術(shù)架構(gòu)
前面實(shí)現(xiàn)方式里講到市面上可視化落地基本都是基于于 Unity3D、虛幻引擎（UE4）、Ventuz、threejs 等工具實(shí)現(xiàn)的。
它們的底層是由 BS（Browser-Server）架構(gòu)和 CS（Client-Server）架構(gòu)兩大架構(gòu)組成的。
BS 架構(gòu)與 CS 架構(gòu)特點(diǎn)
本期給主要是給大家普及可視化設(shè)計(jì)的一些流程以及相關(guān)的專(zhuān)業(yè)知識(shí)，歡迎后臺(tái)添加小六微信溝通交流。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司
大數(shù)據(jù)可視化界面設(shè)計(jì)之一：可視化大屏設(shè)計(jì)快速入門(mén)指南
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
