數字孿生 萬物可視-地圖在視覺化大屏設計中的實踐與運用（2.5D篇）

在數字孿生視覺化設計中，地圖的設計是其中很重要的一部分。今天就給大家分享一下：2.5D地圖在視覺化大屏設計中的實踐與運用。

也許大家會問：為什麼要分享地圖在視覺化設計中的應用呢？隨著資料視覺化領域的發展，地圖場景在視覺化大屏中扮演著越來越重要的角色。由於地圖佔面篇幅較大，又位於視覺中心位置。這就要求地圖模組不僅需要極強的視覺衝擊力，帶動整個大屏的設計氛圍。同時還需要準確的傳達資訊，串聯各個大屏每個業務板塊之間的邏輯。

下面，我們將從“ 一、如何選擇合適的地圖；二、2.5D地圖在視覺化大屏設計中的實踐與應用；三、如何製作樣例效果；”這三個方面，來講解一下2.5D地圖在視覺化大屏設計中的實踐與運用。

 一    如 何選擇地圖 

1、地圖模組的作用

地圖和場景在視覺化場景中到底發揮著哪些具體的作用呢？我們大概總結了6點：

(1) 資訊傳達

除了地圖本身會傳遞一些地理位置等資訊之外，通常還會有一些資料元件與地圖相結合，傳達該區域的資料資訊；

(2) 輔助圖表

可與除地圖以外的圖表部分進行聯動，產生互動行為。另外，地圖上的資訊展示也可以輔助傳達其他圖表類的部分資訊；

(3) 貫穿故事線

地圖場景切換可與大屏頁面切換相關聯，呈現出一個完整的業務邏輯；

(4) 場景精準定位

展示精確的場景位置和區域結構；

(5) 場景互動

地圖場景本身可以帶有一些內部的場景互動；

(6) 提升頁面氛圍感

通過對中間地圖場景部分設計，提升整個頁面的視覺表現力；

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

我們都知道在大屏設計中，地圖風格大類上主要分為2D、2.5D、3D這三種。再次細分下去又會產生很多不同種類的視覺風格。那麼如何選擇合適的地圖呢？總結為以下兩點：

(1) 基於業務場景進行選擇:

眾所周知，數字孿生的業務覆蓋面較廣。比如：智慧農業、智慧工業、智慧能源、智慧園區等等。在這裡，我們以智慧城市為案例。智慧城市又可細分為若干個小的業務分支。比如：城市執行、城市管理、交通管理、經濟發展等等。根據具體業務，我們需要對地圖的使用進行合理的選擇。

(2) 基於視覺風格進行選擇

由於地圖佔比較大，又居於整個介面的中心位置。所以，地圖是整個大屏的視覺焦點。其次，地圖設計帶動整個大屏的設計風。所以，對於地圖的風格的選定對於設計師來講是比較重要的。我們常常用到的地圖視覺風格分為以下四種：GIS地圖、省市區塊行政地圖、衛星影像地圖、城市模型地圖。

A. GIS地圖

二維地圖風格，基於百度、高德、天地圖等這類地圖服務基本都是GIS地圖風格。在設計這一型別的地圖時，視覺元素運用較少，更加強調資訊的對比。常用業務：交通路徑、視訊監控、點位等功能。

B. 省市區塊行政地圖

2.5D或3D地圖風格，這一型別的地圖風格是我們目前大屏設計中使用較多的一種型別。這型別地圖便於區域資料的資訊展示。可以在這類地圖上使用較多地圖資料元件，同時可以增強使用者對該區域的地理認知。另外，這類地圖相比於GIS地圖有更強的視覺衝擊力。設計師更容易體現設計之美。常用業務：經濟發展對比、區域對比、人口流入流出、流光飛線等等。

C.衛星影像地圖

通常使用這種風格會讓畫面顯得更加豐富，更有層次。這類地圖地形層次分明，可以展示整體地貌資訊。通常可以藉助地形圖或者高程圖進行設計。常用業務：農業產業、地理資訊、山體監控等等。                                                                  

D.城市建築模型

三維場景：這種風格地圖可以讓使用者更加沉浸在場景中，提升畫面的設計表現力。三維場景地圖定位精準，便於場景互動。常用業務：工業園區、智慧城市等等。

 二    2.5D地圖在視覺化大屏中的應用 

1、視覺化中的2.5D地圖   [1]

下圖中是我們最常使用的地圖案例。通過案例進行拆解，視覺化中的2.5D地圖可以分為以下四個部分：

(1) 底層紋理

地圖中的紋理細節。主要是用來增加畫面的細節。通常可以放在地圖層或者大屏背景底層，進行效果疊加使用。我們利用紋理增加地圖的細節。通常用的素材，除了點線面之外，我們還可以利用網格、路網、水系或高程圖等進行疊加。上圖就是通過使用地形圖疊加效果產生的。

(2) 核心行政區塊

這是地圖最核心的部分，是資料表達的重點區域。通常使用一些設計手段在視覺上進行突顯。本次案例也是通過多層次進行疊加而產生的效果：首先給地圖一個高度（厚度），可以在高度的側邊增添流光效果和光暈效果。然後在上面疊加黑白地形圖，讓整個地圖更具有真實的感覺。另外，上層再疊加一層色彩蒙版，使整個地圖有一個色彩傾向。最後將該區域的行政區域面積疊加在最上層，以方便後續在地圖上設計資料元件。

(3) 資料表達 [2]

上圖是工作中常用的一些地圖資料元件。這裡說的資料表達，多指地圖上的資料元件。主要適用於地圖區間的資料資訊傳遞。這些地圖上的資料元件由產品經理提煉業務資料，設計師通過設計技法在地圖上突顯資料資訊或差異性效果，合理的表達業務的訴求，傳遞資訊給使用者。另外，地圖上的資料和大屏兩側的資料圖表可以相關聯，構成業務的故事線，將所有的介面串聯起來，向用戶傳遞業務邏輯。

(4) 氛圍裝飾

這裡指周圍的視覺裝飾和大屏中的視覺元素，比如流光、粒子特效等等，這些元素的使用可以增添大屏設計中的氛圍感，也讓中間的地圖區域與兩側的資料圖表區域有一個好的銜接與過渡。

2、視覺化中的城市場景體系

通過上面的介紹，也許大家能感受到地圖在視覺化設計中其實是由一套完整的體系構成的。這套體系適合於二維地圖也適合於三維地圖，只是二維地圖和三維地圖使用範疇和使用方式有所不同而已。

城市場景體系主要由三部分組成：

(1) 物理城市基礎

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

(2) 視覺動效

這裡是指我們上面提到的視覺氛圍特效部分。可以是靜態的視覺元素，也可以是動態的視覺特效。比如：流光線條、粒子特效等等；

(3) 資料形態

主要是指地圖資料元件。這裡的元件其實是被我們具像化後的呈現。資料其形態是很抽象的，本質上都是由點線面構成。

三    如何製作樣例效果

如何才能做出這種2.5D的視覺效果呢？這裡總結了三個步驟：

(1) 目標效果選擇

根據業務需求，判斷出所需要的地圖場景風格；

(2) 素材準備

需要準備行政區塊地區、AI分層檔案、地形圖、視覺效果元素；

(3) 設計技法

可以採用 PS / AI / Figma / C4D 進行設計。

1、資料獲取

行政區塊圖的相關檔案我們可以通過以下兩個網站獲取：

國家標準地圖服務網：

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

DataV.GeoAtlas：

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

2、地圖處理

在拿到資料地圖之後，該如何進行一個2.5D/3D地圖的設計呢？

（以下方法和步驟適用於使用C4D建模做地圖的技法）

(1) 下載地圖svg檔案, 用AI開啟它。地圖在畫布中居中;

(2) 將地圖中的虛線變成實線,便於之後匯入C4D形成面;

(3) 將地圖按照不同的行政區域,分別匯出AI格式;

(4) 將AI格式的檔案匯入同一個C4D檔案,注意檢查座標軸是否歸到中心點,打組+複製;

(5) 模型結構梳理與分層:頂面、底面、側面分別需要新增不同材質。主要使用擠壓工具+樣條掃描。

(6) 光源控制，至少兩個光源：主光源-打投影；補光源-避免周圍死黑。

以上就是2.5D地圖在視覺化大屏設計中的實踐與運用，下週介紹3D地圖在視覺化大屏中的運用。

參考文獻：

[1]政務視覺化設計經驗-地圖模組：http://tob.design/#/experience/detail/381

[2] 政務視覺化設計經驗-表達習慣：http://tob.design/#/experience/detail/350

伸出你可愛的手指給我們 點個贊 和 在看 唄

如果能 分享 就更好了