在數(shù)字孿生可視化設(shè)計(jì)中，地圖的設(shè)計(jì)是其中很重要的一部分。今天就給大家分享2.5D和3D地圖在可視化大屏設(shè)計(jì)中的實(shí)踐與運(yùn)用。

也許大家會(huì)問(wèn)：為什么要分享地圖在可視化設(shè)計(jì)中的應(yīng)用呢？隨著數(shù)據(jù)可視化領(lǐng)域的發(fā)展，地圖場(chǎng)景在可視化大屏中扮演著越來(lái)越重要的角色。由于地圖占面篇幅較大，又位于視覺(jué)中心位置。

這就要求地圖模塊不僅需要極強(qiáng)的視覺(jué)沖擊力，帶動(dòng)整個(gè)大屏的設(shè)計(jì)氛圍。同時(shí)還需要準(zhǔn)確的傳達(dá)信息，串聯(lián)各個(gè)大屏每個(gè)業(yè)務(wù)板塊之間的邏輯。

文章目錄

2.5D地圖篇：如何選擇合適的地圖、2.5D地圖在可視化大屏設(shè)計(jì)中的實(shí)踐與應(yīng)用、如何制作樣例效果；

3D地圖篇：?為什么要做三維可視化、構(gòu)建流程、學(xué)習(xí)路徑

一、如何選擇地圖?

1、地圖模塊的作用

地圖和場(chǎng)景在可視化場(chǎng)景中到底發(fā)揮著哪些具體的作用呢？我們大概總結(jié)了以下六點(diǎn)：

(1) 信息傳達(dá)：除了地圖本身會(huì)傳遞一些地理位置等信息之外，通常還會(huì)有一些數(shù)據(jù)組件與地圖相結(jié)合，傳達(dá)該區(qū)域的數(shù)據(jù)信息；

(2) 輔助圖表：可與除地圖以外的圖表部分進(jìn)行聯(lián)動(dòng)，產(chǎn)生交互行為。另外，地圖上的信息展示也可以輔助傳達(dá)其他圖表類(lèi)的部分信息；

(3) 貫穿故事線(xiàn)：地圖場(chǎng)景切換可與大屏頁(yè)面切換相關(guān)聯(lián)，呈現(xiàn)出一個(gè)完整的業(yè)務(wù)邏輯；

(4) 場(chǎng)景精準(zhǔn)定位：展示精確的場(chǎng)景位置和區(qū)域結(jié)構(gòu)；

(5) 場(chǎng)景交互：地圖場(chǎng)景本身可以帶有一些內(nèi)部的場(chǎng)景交互；

(6) 提升頁(yè)面氛圍感：通過(guò)對(duì)中間地圖場(chǎng)景部分設(shè)計(jì)，提升整個(gè)頁(yè)面的視覺(jué)表現(xiàn)力；

2、如何選擇合適的地圖?

我們都知道在大屏設(shè)計(jì)中，地圖風(fēng)格大類(lèi)上主要分為2D、2.5D、3D這三種。再次細(xì)分下去又會(huì)產(chǎn)生很多不同種類(lèi)的視覺(jué)風(fēng)格。那么如何選擇合適的地圖呢？總結(jié)為以下兩點(diǎn)：

(1) 基于業(yè)務(wù)場(chǎng)景進(jìn)行選擇

眾所周知，數(shù)字孿生的業(yè)務(wù)覆蓋面較廣。比如：智慧農(nóng)業(yè)、智慧工業(yè)、智慧能源、智慧園區(qū)等等。在這里，我們以智慧城市為案例。智慧城市又可細(xì)分為若干個(gè)小的業(yè)務(wù)分支。比如：城市運(yùn)行、城市管理、交通管理、經(jīng)濟(jì)發(fā)展等等。根據(jù)具體業(yè)務(wù)，我們需要對(duì)地圖的使用進(jìn)行合理的選擇。

(2)?基于視覺(jué)風(fēng)格進(jìn)行選擇

? ? ??

由于地圖占比較大，又居于整個(gè)界面的中心位置。所以，地圖是整個(gè)大屏的視覺(jué)焦點(diǎn)。其次，地圖設(shè)計(jì)帶動(dòng)整個(gè)大屏的設(shè)計(jì)風(fēng)。所以，對(duì)于地圖的風(fēng)格的選定對(duì)于設(shè)計(jì)師來(lái)講是比較重要的。我們常常用到的地圖視覺(jué)風(fēng)格分為以下四種：GIS地圖、省市區(qū)塊行政地圖、衛(wèi)星影像地圖、城市模型地圖。

A.?GIS地圖

二維地圖風(fēng)格，基于百度、高德、天地圖等這類(lèi)地圖服務(wù)基本都是GIS地圖風(fēng)格。在設(shè)計(jì)這一類(lèi)型的地圖時(shí)，視覺(jué)元素運(yùn)用較少，更加強(qiáng)調(diào)信息的對(duì)比。常用業(yè)務(wù)：交通路徑、視頻監(jiān)控、點(diǎn)位等功能。

B.?省市區(qū)塊行政地圖

2.5D或3D地圖風(fēng)格，這一類(lèi)型的地圖風(fēng)格是我們目前大屏設(shè)計(jì)中使用較多的一種類(lèi)型。這類(lèi)型地圖便于區(qū)域數(shù)據(jù)的信息展示。可以在這類(lèi)地圖上使用較多地圖數(shù)據(jù)組件，同時(shí)可以增強(qiáng)用戶(hù)對(duì)該區(qū)域的地理認(rèn)知。另外，這類(lèi)地圖相比于GIS地圖有更強(qiáng)的視覺(jué)沖擊力。設(shè)計(jì)師更容易體現(xiàn)設(shè)計(jì)之美。常用業(yè)務(wù)：經(jīng)濟(jì)發(fā)展對(duì)比、區(qū)域?qū)Ρ取⑷丝诹魅肓鞒?、流光飛線(xiàn)等等。

C.衛(wèi)星影像地圖

通常使用這種風(fēng)格會(huì)讓畫(huà)面顯得更加豐富，更有層次。這類(lèi)地圖地形層次分明，可以展示整體地貌信息。通?？梢越柚匦螆D或者高程圖進(jìn)行設(shè)計(jì)。常用業(yè)務(wù)：農(nóng)業(yè)產(chǎn)業(yè)、地理信息、山體監(jiān)控等等。? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

D.城市建筑模型

三維場(chǎng)景：這種風(fēng)格地圖可以讓用戶(hù)更加沉浸在場(chǎng)景中，提升畫(huà)面的設(shè)計(jì)表現(xiàn)力。三維場(chǎng)景地圖定位精準(zhǔn)，便于場(chǎng)景交互。常用業(yè)務(wù)：工業(yè)園區(qū)、智慧城市等等。

二、2.5D地圖

在可視化大屏中的應(yīng)用

1、可視化中的2.5D地圖

下圖中是我們最常使用的地圖案例。通過(guò)案例進(jìn)行拆解，可視化中的2.5D地圖可以分為以下四個(gè)部分：

(1)?底層紋理

地圖中的紋理細(xì)節(jié)。主要是用來(lái)增加畫(huà)面的細(xì)節(jié)。通?？梢苑旁诘貓D層或者大屏背景底層，進(jìn)行效果疊加使用。我們利用紋理增加地圖的細(xì)節(jié)。通常用的素材，除了點(diǎn)線(xiàn)面之外，我們還可以利用網(wǎng)格、路網(wǎng)、水系或高程圖等進(jìn)行疊加。上圖就是通過(guò)使用地形圖疊加效果產(chǎn)生的。

(2)?核心行政區(qū)塊

這是地圖最核心的部分，是數(shù)據(jù)表達(dá)的重點(diǎn)區(qū)域。通常使用一些設(shè)計(jì)手段在視覺(jué)上進(jìn)行突顯。本次案例也是通過(guò)多層次進(jìn)行疊加而產(chǎn)生的效果：首先給地圖一個(gè)高度（厚度），可以在高度的側(cè)邊增添流光效果和光暈效果。然后在上面疊加黑白地形圖，讓整個(gè)地圖更具有真實(shí)的感覺(jué)。

另外，上層再疊加一層色彩蒙版，使整個(gè)地圖有一個(gè)色彩傾向。最后將該區(qū)域的行政區(qū)域面積疊加在最上層，以方便后續(xù)在地圖上設(shè)計(jì)數(shù)據(jù)組件。

(3)?數(shù)據(jù)表達(dá)

上圖是工作中常用的一些地圖數(shù)據(jù)組件。這里說(shuō)的數(shù)據(jù)表達(dá)，多指地圖上的數(shù)據(jù)組件。主要適用于地圖區(qū)間的數(shù)據(jù)信息傳遞。這些地圖上的數(shù)據(jù)組件由產(chǎn)品經(jīng)理提煉業(yè)務(wù)數(shù)據(jù)，設(shè)計(jì)師通過(guò)設(shè)計(jì)技法在地圖上突顯數(shù)據(jù)信息或差異性效果，合理的表達(dá)業(yè)務(wù)的訴求，傳遞信息給用戶(hù)。

另外，地圖上的數(shù)據(jù)和大屏兩側(cè)的數(shù)據(jù)圖表可以相關(guān)聯(lián)，構(gòu)成業(yè)務(wù)的故事線(xiàn)，將所有的界面串聯(lián)起來(lái)，向用戶(hù)傳遞業(yè)務(wù)邏輯。

(4)?氛圍裝飾

這里指周?chē)囊曈X(jué)裝飾和大屏中的視覺(jué)元素，比如流光、粒子特效等等，這些元素的使用可以增添大屏設(shè)計(jì)中的氛圍感，也讓中間的地圖區(qū)域與兩側(cè)的數(shù)據(jù)圖表區(qū)域有一個(gè)好的銜接與過(guò)渡。

2、可視化中的城市場(chǎng)景體系

通過(guò)上面的介紹，也許大家能感受到地圖在可視化設(shè)計(jì)中其實(shí)是由一套完整的體系構(gòu)成的。這套體系適合于二維地圖也適合于三維地圖，只是二維地圖和三維地圖使用范疇和使用方式有所不同而已。

城市場(chǎng)景體系主要由三部分組成：

(1)?物理城市基礎(chǔ)

主要是指物理世界中的城市元素。比如：地形、植被、水系、道路、建筑等；

(2) 視覺(jué)動(dòng)效

這里是指我們上面提到的視覺(jué)氛圍特效部分。可以是靜態(tài)的視覺(jué)元素，也可以是動(dòng)態(tài)的視覺(jué)特效。比如：流光線(xiàn)條、粒子特效等等；

(3)?數(shù)據(jù)形態(tài)

主要是指地圖數(shù)據(jù)組件。這里的組件其實(shí)是被我們具像化后的呈現(xiàn)。數(shù)據(jù)其形態(tài)是很抽象的，本質(zhì)上都是由點(diǎn)線(xiàn)面構(gòu)成。

三、如何制作樣例效果

如何才能做出這種2.5D的視覺(jué)效果呢？這里總結(jié)了三個(gè)步驟：

(1)?目標(biāo)效果選擇：根據(jù)業(yè)務(wù)需求，判斷出所需要的地圖場(chǎng)景風(fēng)格；

(2)?素材準(zhǔn)備：需要準(zhǔn)備行政區(qū)塊地區(qū)、AI分層文件、地形圖、視覺(jué)效果元素；

(3)?設(shè)計(jì)技法：可以采用 PS / AI / Figma / C4D 進(jìn)行設(shè)計(jì)。

1、數(shù)據(jù)獲取

國(guó)家標(biāo)準(zhǔn)地圖服務(wù)網(wǎng)：

http://bzdt.ch.mnr.gov.cn/index.html

DataV.GeoAtlas：

https://datav.aliyun.com/tools/atlas/index.html

2、地圖處理

在拿到數(shù)據(jù)地圖之后，該如何進(jìn)行一個(gè)2.5D/3D地圖的設(shè)計(jì)呢？（以下方法和步驟適用于使用C4D建模做地圖的技法）

(1) 下載地圖svg文件, 用AI打開(kāi)它。地圖在畫(huà)布中居中;

(2) 將地圖中的虛線(xiàn)變成實(shí)線(xiàn),便于之后導(dǎo)入C4D形成面;

(3) 將地圖按照不同的行政區(qū)域,分別導(dǎo)出AI格式;

(4) 將AI格式的文件導(dǎo)入同一個(gè)C4D文件,注意檢查坐標(biāo)軸是否歸到中心點(diǎn),打組+復(fù)制;

(5) 模型結(jié)構(gòu)梳理與分層:頂面、底面、側(cè)面分別需要添加不同材質(zhì)。主要使用擠壓工具+樣條掃描。

(6) 光源控制，至少兩個(gè)光源：主光源-打投影；補(bǔ)光源-避免周?chē)篮凇?/p>

以上就是2.5D地圖在可視化大屏設(shè)計(jì)中的實(shí)踐與運(yùn)用，下面介紹3D地圖在可視化大屏中的運(yùn)用。

一、為什么要做三維可視化

主要基于三點(diǎn)原因：基于目前智慧城市的業(yè)務(wù)特點(diǎn)作出的選擇；滿(mǎn)足客戶(hù)訴求；設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品。

首先基于數(shù)字城市業(yè)務(wù)特點(diǎn)：立體的城市產(chǎn)生多維的數(shù)據(jù)，多維的數(shù)據(jù)需要立體的呈現(xiàn)。我們具備數(shù)據(jù)感知、數(shù)據(jù)分析、數(shù)據(jù)管理、數(shù)據(jù)服務(wù)等多種技術(shù)能力，將這些技術(shù)能力滿(mǎn)足于不同的業(yè)務(wù)需求場(chǎng)景。通過(guò)數(shù)據(jù)可視化的形式將其展示出來(lái)，滿(mǎn)足政府客戶(hù)的需要。

關(guān)于客戶(hù)訴求這方面，我們常做的數(shù)據(jù)可視化的項(xiàng)目通常有一些共性的訴求。我們把這些共性的訴求提取為：數(shù)字孿生、科技高效、綠色宜居等關(guān)鍵詞。除了以上業(yè)務(wù)背景和客戶(hù)訴求這些客觀因素之外，還有一個(gè)最重要的主觀因素：設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品，設(shè)計(jì)賦能業(yè)務(wù)。

二、構(gòu)建流程?

通過(guò)上面一個(gè)案例，我們是如何構(gòu)建出來(lái)這樣一個(gè)三維的場(chǎng)景呢？下面我們從流程與產(chǎn)出、角色與工具、建立劇情與故事線(xiàn)三個(gè)方面進(jìn)行闡述。

2、流程與產(chǎn)出

實(shí)現(xiàn)這樣一個(gè)三維場(chǎng)景的流程可以拆解為以下八個(gè)步驟，每個(gè)步驟都有相對(duì)應(yīng)的產(chǎn)出。

A. 定義需求：需要產(chǎn)品經(jīng)理或者項(xiàng)目經(jīng)理提供需求文檔；

B. 準(zhǔn)備數(shù)據(jù)：GIS/BIM/遙感影像/720全景圖/傾斜攝影OSGB數(shù)據(jù)等等，根據(jù)需求準(zhǔn)備相對(duì)應(yīng)的數(shù)據(jù)文件。

C. 建立模型：根據(jù)上述數(shù)據(jù)，進(jìn)行數(shù)據(jù)轉(zhuǎn)換，然后在三維軟件中建立起不同程度的模型。

D. 搭建場(chǎng)景：準(zhǔn)備好模型之后，將模型導(dǎo)入到UE4當(dāng)中，進(jìn)行場(chǎng)景、效果、后期、特效、動(dòng)畫(huà)等一系列搭建與調(diào)試。

E. 資產(chǎn)打包與更新：需要進(jìn)行資產(chǎn)結(jié)構(gòu)梳理、文件復(fù)用優(yōu)化、資產(chǎn)更新及打包。

F. 程序開(kāi)發(fā)：由UE4引擎開(kāi)發(fā)工程師或者開(kāi)發(fā)工程師進(jìn)行程序功能和架構(gòu)的開(kāi)發(fā)。

G. 測(cè)試優(yōu)化：邏輯測(cè)試與優(yōu)化、渲染測(cè)試與優(yōu)化、性能測(cè)試與優(yōu)化。

H. 打包部署：程序打包、平臺(tái)部署、運(yùn)維跟進(jìn)。

2、角色與工具

根據(jù)上面八個(gè)步驟，我們來(lái)看下每個(gè)步驟所對(duì)應(yīng)的一個(gè)角色和所使用到的工具。根據(jù)上述步驟，其中，“?建立模型-搭建場(chǎng)景-資產(chǎn)打包與更新?”?這三個(gè)步驟是和我們?cè)O(shè)計(jì)師密切相關(guān)的。

這里有一個(gè)專(zhuān)業(yè)的名詞?“?技術(shù)美術(shù)（TA）”，如果對(duì)這方面比較感興趣的同學(xué)可以對(duì)它進(jìn)行一下調(diào)研。從?“ 定義需求 ”?到?“ 準(zhǔn)備數(shù)據(jù)?”?這兩步驟，通常是由項(xiàng)目經(jīng)理或產(chǎn)品經(jīng)理來(lái)完成。“?程序開(kāi)發(fā)-測(cè)試優(yōu)化-打包部署?”?則是由開(kāi)發(fā)和測(cè)試的同學(xué)來(lái)完成。

技術(shù)美術(shù)這塊主要使用的工具有：

A. QGIS：主要用于數(shù)據(jù)轉(zhuǎn)換；

B. Blender：開(kāi)源三維軟件，在這里的角色是使用其中的blender-gis插件，將模型搭建起來(lái)；

C. C4D：精模制作;

D. UE4：場(chǎng)景搭建與開(kāi)發(fā)；

E.Pt（Substance 3D Painter）：繪制貼圖。

3、技術(shù)美術(shù)TA

接下來(lái)詳細(xì)闡述一下和設(shè)計(jì)師相關(guān)的技術(shù)美術(shù)TA方面的知識(shí)。技術(shù)美術(shù)其實(shí)是美術(shù)和程序員之間的橋梁，確保美術(shù)資產(chǎn)可以輕松整合到游戲中，而不會(huì)犧牲美術(shù)或超越平臺(tái)的技術(shù)限制、研發(fā)新技術(shù)、實(shí)施到項(xiàng)目中并培訓(xùn)團(tuán)隊(duì)。技術(shù)美術(shù)是一個(gè)團(tuán)隊(duì)，而不僅僅是單個(gè)人作戰(zhàn)。

每個(gè)人根據(jù)自己所擅長(zhǎng)的內(nèi)容進(jìn)行分工：

A. 管線(xiàn)：主要是提供規(guī)范，比如材質(zhì)制作規(guī)范、模型制作規(guī)范、命名規(guī)范等等。

B. 模型：制作場(chǎng)景所有模型，比如地形、建筑、植被、道路、橋梁等等模型，制定LOD規(guī)則、面數(shù)優(yōu)化、模型復(fù)用規(guī)范。

C. 動(dòng)畫(huà)：負(fù)責(zé)項(xiàng)目中所有運(yùn)動(dòng)模塊，Sequence、骨胳綁定、建筑生長(zhǎng)、歷史變遷、待機(jī)動(dòng)畫(huà)、UMG動(dòng)效。

D. 效果：負(fù)責(zé)場(chǎng)景整體畫(huà)面效果，Shader、燈光、PostProssesVolume、LUT影視級(jí)調(diào)色、環(huán)境遮罩(AmbientCubemap)?、RayTracing (光線(xiàn)追蹤)?、LOD、材質(zhì)動(dòng)畫(huà)。

E. 特效：負(fù)責(zé)場(chǎng)景特效和氛圍營(yíng)造，人流、車(chē)流、熱力圖、風(fēng)、霜、雨、雪、冰、霧、海洋、氣流模擬、晝夜模擬、動(dòng)態(tài)掃描、飛線(xiàn)、光錐、喇叭、圓罩、噴泉、場(chǎng)景氛圍等。

4、劇情建立-故事線(xiàn)

所謂故事線(xiàn)，就是以導(dǎo)演視角,基于業(yè)務(wù)需求、效果呈現(xiàn)等多方因素,構(gòu)建三維場(chǎng)景瀏覽及交互邏輯,確保數(shù)據(jù)呈現(xiàn)的易用性及生動(dòng)性。故事線(xiàn)串聯(lián)交互可以分為以下五類(lèi)：

A. 界面交互：圖表、進(jìn)度條、輸入框、滾動(dòng)條、按鈕、色彩、下拉等UI方面的交互；

B. 內(nèi)容交互：PSR變換、樣式變化、顯示方式變換；

C. 設(shè)備交互：單擊、雙擊、懸停、拖拽、長(zhǎng)按、右鍵、中鍵；

D. 舞臺(tái)交互：時(shí)間變換、天氣變換、光照變換、色調(diào)變化、濾鏡調(diào)整；

E. 鏡頭交互：推、拉、搖、移、定點(diǎn)視覺(jué)、邀游視角、自由視角、故事線(xiàn)視角。

三、學(xué)習(xí)路徑?

應(yīng)該如何學(xué)習(xí)三維場(chǎng)景這塊呢？首先建議大家以案例為切入點(diǎn)。由點(diǎn)及面的學(xué)習(xí)，通過(guò)研究案例，掌握一種效果如何制作，慢慢的形成自己的知識(shí)體系。

以其中某一個(gè)效果為學(xué)習(xí)目標(biāo)，如果我們想要實(shí)現(xiàn)這種效果，可以先提取畫(huà)面中的視覺(jué)要素，然后提煉并搜索視覺(jué)要素關(guān)鍵詞，找到相關(guān)的案例教程之后，根據(jù)教程進(jìn)行實(shí)踐操作，慢慢的由少及多形成自己的知識(shí)體系。從一個(gè)小的實(shí)例入手，增強(qiáng)自己的學(xué)習(xí)成就感，然后通過(guò)不斷的探索和學(xué)習(xí)達(dá)成目標(biāo)效果的實(shí)現(xiàn)。

相關(guān)網(wǎng)站推薦：UE4官網(wǎng)、Youtube、B站、CSDN

相關(guān)Youtube頻道推薦：Unreal Engine、Ryan Manning、Fabrice Bourrelly、VR Division、gameDev Outpost、CGHOW

如何領(lǐng)取本期讀者資源？

??：UXD筆記? ? ? ? ? ? ? ?

回復(fù)“大屏”——領(lǐng)109頁(yè)阿里內(nèi)部數(shù)據(jù)可視化大屏設(shè)計(jì)培訓(xùn)PPT。

本文內(nèi)容為轉(zhuǎn)載 僅供個(gè)人學(xué)習(xí)使用