大家平時(shí)都會(huì)使用一些地圖軟件吧，特別是遇到不熟悉的地方更是需要地圖的幫助。今天就讓faceui為大家介紹一下地圖界面ui設(shè)計(jì)的幾種方式，地圖界面ui設(shè)計(jì)需要注意的點(diǎn)在哪。

　　地圖界面ui設(shè)計(jì)的幾種方式

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

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

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

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

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

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

　　將配置好的文件點(diǎn)擊右上角的發(fā)布，直接繼續(xù)點(diǎn)擊發(fā)布。發(fā)布成功后會(huì)出彈框，里面會(huì)有一些調(diào)用和使用地圖的方法。根據(jù)使用需求可選擇不同平臺(tái)的使用方式，直接復(fù)制鏈接丟給開發(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í)別不出來。將轉(zhuǎn)換好的ai文件導(dǎo)入c4d，執(zhí)行擠壓。

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

　　4、漫射貼圖制作的思路

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

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

　　地圖界面ui設(shè)計(jì)需要注意的點(diǎn)在哪

　　1、你的UI 是否高度一致

　　用戶來到你的站點(diǎn)，腦子里會(huì)保持著一種思維習(xí)慣，你的UI 需要保持一致，以免用戶的思維方向被打亂。比如，如果你的某個(gè)品目下的產(chǎn)品可以拖放到購物車，那你站點(diǎn)中所有產(chǎn)品都應(yīng)該可以這樣操作。將按鈕放到不同頁面相似的位置，使用相契合的配色，使用一致的語法和書寫習(xí)慣，同時(shí)，讓你的頁面擁有一致的結(jié)構(gòu)。

　　2、用戶能自由掌控自己的操作嗎

　　你應(yīng)當(dāng)分析一下，自己的站點(diǎn)是否容易導(dǎo)航。用戶應(yīng)當(dāng)可以自由掌控自己的瀏覽行為，確保他們能從某個(gè)地點(diǎn)跳出，能夠毫無障礙地退出。那些在用戶離開前彈出窗口的行為是UI 易用性的一個(gè)大問題。

　　3、你知道誰是你的用戶群嗎

　　要設(shè)計(jì)有效的UI，必須對(duì)你的用戶群有所了解，不同的用戶階層對(duì)不同的設(shè)計(jì)元素有不同的理解，17~25 歲年齡段的人，和40~55 年齡斷的人有不同的喜好。你的UI 設(shè)計(jì)必須針對(duì)你的用戶群進(jìn)行設(shè)計(jì)…

　　4、你是否有足夠的預(yù)防錯(cuò)誤的措施

　　應(yīng)該盡可能檢查程序中的錯(cuò)誤和BUG，雖然你可以彈出一個(gè)窗口告訴用戶發(fā)生了什么，但為了更好的用戶體驗(yàn)，最好減少這些東西。Beta 測(cè)試是消減錯(cuò)誤的最好方法。

　　5、你是否首先將最重要的東西展示給用戶

　　將重點(diǎn)放在重要的內(nèi)容上面，首先為用戶展示最重要的內(nèi)容，以便用戶更好地理解你的內(nèi)容。

　　6、你的設(shè)計(jì)是否簡單

　　很多站點(diǎn)的設(shè)計(jì)十分簡單，簡約設(shè)計(jì)可以增強(qiáng)UI 的易用性，可以讓用戶不必關(guān)心那些無關(guān)的信息。你的UI 應(yīng)該是這樣的，它的功能很強(qiáng)大，但設(shè)計(jì)很簡約，擁擠的界面，不管功能多么強(qiáng)大，都會(huì)嚇跑用戶。

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

　　7、你是否使用了視覺提示

　　如果你使用了Ajax，F(xiàn)lash 一類的技術(shù)，當(dāng)內(nèi)容在加載的時(shí)候，應(yīng)當(dāng)提供視覺提示，應(yīng)當(dāng)始終讓用戶知道目前在做什么。

　　8、你的UI 是否有操作提示

　　你的用戶是否靠自己研究或FAQ 文檔學(xué)習(xí)如何操作？你應(yīng)當(dāng)在UI現(xiàn)場(chǎng)提供簡單的操作提示，比如，使用jQuery 在你的各個(gè)UI 元素上顯示操作提示。

　　9、你的內(nèi)容是否清晰

　　確保你的文本準(zhǔn)確，清晰，易懂。

　　10、你如何使用色彩

　　色彩是UI 的重要元素，不同的顏色代表不同的情緒，你對(duì)色彩的使用應(yīng)當(dāng)和站點(diǎn)以及主題相契合。還應(yīng)注意，有的用戶是色盲，你應(yīng)當(dāng)考慮到他們的感受。色彩的使用應(yīng)該一致，一旦選定了某種配色，就應(yīng)該在整個(gè)站點(diǎn)一致使用這種配色。

　　11、你的UI 是否大象無形

　　UI Engineering曾經(jīng)說過，”最好的設(shè)計(jì)不是用來看的，是用來體驗(yàn)的”。這意味著，你的UI 應(yīng)該讓用戶去體驗(yàn)，而不是放一些花哨的東西給用戶看。UI 設(shè)計(jì)越簡單，用戶體驗(yàn)越好，不要濫用設(shè)計(jì)元素，不要使用擁擠的界面。

　　12、你的UI 是否有良好的結(jié)構(gòu)

　　你的UI 中，各個(gè)元素應(yīng)當(dāng)放在他們應(yīng)當(dāng)放的位置，總體結(jié)構(gòu)應(yīng)當(dāng)清晰，一致，相互關(guān)聯(lián)，那些不相關(guān)的東西應(yīng)當(dāng)單獨(dú)放置。

　　以上就是faceui為大家介紹的關(guān)于地圖界面ui設(shè)計(jì)的相關(guān)內(nèi)容。界面ui設(shè)計(jì)自然是有其規(guī)范和要求的，但是不同的界面要求不同，地圖界面的設(shè)計(jì)還是要更加簡潔明了比較好。