現(xiàn)在城市建設(shè)規(guī)模越來(lái)越大，沒(méi)有相應(yīng)的地圖根本就不好找，但是手機(jī)地圖APP能為大家解決這個(gè)問(wèn)題。今天就讓faceui為大家介紹地圖界面ui設(shè)計(jì)如何制作數(shù)據(jù)可視化，欣賞幾個(gè)設(shè)計(jì)精美的地圖app。

　　地圖界面ui設(shè)計(jì)如何制作數(shù)據(jù)可視化

　　地圖APP在移動(dòng)互聯(lián)網(wǎng)時(shí)代由于具有LBS和移動(dòng)的特性，使地圖應(yīng)用除了作為基礎(chǔ)的出行工具外，它和線(xiàn)下服務(wù)場(chǎng)景也結(jié)合得非常緊密。要制作數(shù)據(jù)可視化，方法如下：

　　1、第三方地圖的獲取和對(duì)接

　　普通地圖一般都是去對(duì)接三方平臺(tái)，他們都會(huì)提供對(duì)應(yīng)的地圖開(kāi)放服務(wù)。實(shí)操一下地圖的獲取和調(diào)色方法以及最后跟開(kāi)發(fā)交付的流程。

　　首先登錄地圖app開(kāi)放平臺(tái)，點(diǎn)擊右上角控制臺(tái)進(jìn)入控制臺(tái)會(huì)進(jìn)入頁(yè)面，大家可以多點(diǎn)點(diǎn)查看下平臺(tái)的相關(guān)功能內(nèi)容，比如點(diǎn)擊數(shù)據(jù)可視化里面會(huì)有集成的地圖可視化效果。數(shù)據(jù)可視化里面后有一些集成的模板化的效果?；氐街黝}點(diǎn)擊自定義地圖就可以對(duì)地圖進(jìn)行自定義配置了。

　　頁(yè)面上會(huì)有好多配置好的模板供你選擇，也可以選擇自己自定義配置，根據(jù)需要選擇一個(gè)點(diǎn)擊進(jìn)去，就進(jìn)入地圖配置頁(yè)面。

　　最后將調(diào)整好的樣式，直接放大全屏后截屏后就可以在設(shè)計(jì)稿里使用了。

　　圖片來(lái)源于網(wǎng)絡(luò)

　　2、開(kāi)發(fā)樣式的對(duì)接

　　將配置好的文件點(diǎn)擊右上角的發(fā)布，直接繼續(xù)點(diǎn)擊發(fā)布。發(fā)布成功后會(huì)出彈框，里面會(huì)有一些調(diào)用和使用地圖的方法。根據(jù)使用需求可選擇不同平臺(tái)的使用方式，直接復(fù)制鏈接丟給開(kāi)發(fā)就好了。

　　3、3D地圖建模及貼圖的制作獲取方法

　　在網(wǎng)上下載地圖的邊界輪廓文件，下載對(duì)應(yīng)的各個(gè)省份 城市的邊界地圖輪廓模型的svg文件，點(diǎn)擊左下角進(jìn)行下載，將下載好的svg文件導(dǎo)入ai里轉(zhuǎn)換成ai格式，這里要注意的是另存的時(shí)候一定要選擇比較早的版本，建議存為Illustrator 8圖中箭頭所指的那個(gè)版本，要不然c4d會(huì)是識(shí)別不出來(lái)。將轉(zhuǎn)換好的ai文件導(dǎo)入c4d，執(zhí)行擠壓。

　　4、漫射貼圖制作的思路

　　首先在Google Eaeth Pro上面找個(gè)省份對(duì)應(yīng)的位置然后執(zhí)行文件-保存就能保存當(dāng)前展示得地圖紋理了（建議保存兩張貼圖，一張帶邊界和地名的方面后面制作貼圖的時(shí)候方便對(duì)上位置，第二張就是無(wú)邊界地名的作為最終的漫射貼圖）。

　　將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ，新建一個(gè)4k（這里根據(jù)需求建就行）的畫(huà)布，將展uv的截圖縮放到畫(huà)布大小，如下圖，然后根據(jù)邊界輪廓都對(duì)應(yīng)好，執(zhí)行剪切蒙版，最終會(huì)得到下面的圖的效果。

　　圖片來(lái)源于網(wǎng)絡(luò)

　　欣賞幾個(gè)設(shè)計(jì)精美的地圖app

　　1、這個(gè)一個(gè)有生命的實(shí)況地圖，可以看到灰機(jī)灰，火車(chē)跑，廣告彈，當(dāng)然，界面設(shè)計(jì)也是非常有卡通感。

　　2、這是一個(gè)中規(guī)中矩的谷歌地圖設(shè)計(jì)稿。

　　3、針對(duì)iPhone X特別設(shè)計(jì)的騎行全屏地圖?？ㄆ竭x擇線(xiàn)路。

　　4、為外賣(mài)送餐設(shè)計(jì)的地圖，可以直觀看到商店與送餐點(diǎn)的3d視圖。

　　5、尋找附近餐廳的地圖設(shè)計(jì)，色調(diào)統(tǒng)一。

　　6、為戶(hù)外探險(xiǎn)提供線(xiàn)路選擇的3D地圖。效果真的很棒！

　　7、為戶(hù)外遠(yuǎn)足而設(shè)計(jì)的地圖，可以以地圖模式顯示附近的人。

　　8、導(dǎo)航用的地圖app設(shè)計(jì)。底部的信息條設(shè)計(jì)值得學(xué)習(xí)。

　　以上就是faceui為大家介紹的關(guān)于地圖界面ui設(shè)計(jì)的相關(guān)內(nèi)容。地圖界面怎么設(shè)計(jì)才讓用戶(hù)使用起來(lái)更舒適，這才是地圖界面ui設(shè)計(jì)的重點(diǎn)。