親測(cè)好用的地圖設(shè)計(jì)思路 | 附 16 個(gè)地圖設(shè)計(jì)模板

時(shí)間：2023-06-09 03:06:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-09 03:06:02 來源：網(wǎng)站運(yùn)營(yíng)

親測(cè)好用的地圖設(shè)計(jì)思路 | 附 16 個(gè)地圖設(shè)計(jì)模板：


Mapbox Style lists

近期，我們?yōu)榇蠹曳窒砹艘恍﹤€(gè)性化圖的設(shè)計(jì)思路，比如：

• 尋寶風(fēng)格導(dǎo)航地圖 Treasure 誕生記 | Mapbox 地圖設(shè)計(jì)思路
  
• 霓虹燈風(fēng)格地圖 80‘s 8-bit 誕生記 | Mapbox 地圖設(shè)計(jì)思路
  
• 「抖音風(fēng)格」動(dòng)態(tài)地圖制作方法已上線
  

是不是也想要做一張屬于自己的地圖呢？如果想要從頭開始設(shè)計(jì)一張屬于自己的地圖，有什么通用的設(shè)計(jì)方法呢？

下面由 Mapbox 官方地圖設(shè)計(jì)師 Madison Draper 為大家分享一個(gè)親！測(cè)！好！用！的設(shè)計(jì)思路。

---

作為 Mapbox 地圖設(shè)計(jì)師，我經(jīng)常會(huì)因?yàn)槟承┰蜃鲆粡埿碌牡貓D：匹配特定的用戶場(chǎng)景、突出新產(chǎn)品信息、在某些活動(dòng)上展示風(fēng)格相符的地圖等等。

每次設(shè)計(jì)之前，頭腦風(fēng)暴和合作討論是特別關(guān)鍵的，可能 100 個(gè)想法中只能有 1 個(gè)進(jìn)入最終的設(shè)計(jì)階段。

想法是基礎(chǔ)，我會(huì)經(jīng)常記錄下來每個(gè)靈感，比如你知道的我設(shè)計(jì)的很多地圖都是來源于一些照片、一些概念甚至是現(xiàn)有的地圖風(fēng)格。





總的來說，我的地圖設(shè)計(jì)思路基本遵循下面五個(gè)從復(fù)雜到簡(jiǎn)單的步驟：
1.想法產(chǎn)生（Generation）2.信息提?。‥xtraction）3.內(nèi)容簡(jiǎn)化（Simplification）4.設(shè)計(jì)元素（Ideation）5.開始創(chuàng)作（Creation）

下面看看我們?cè)趺礃影凑丈厦娴牧鞒?，?2014 年 Ian Villeda 設(shè)計(jì)的「Wheatpaste」地圖風(fēng)格做個(gè)更新版！

第一步：想法產(chǎn)生（Generation）

想法和設(shè)計(jì)的產(chǎn)生在最開始就是緊密耦合的。不是所有的想法都能被設(shè)計(jì)很好地表達(dá)，所以這一步我們重點(diǎn)關(guān)注在：如何平衡好興趣和可能性。

在這一步中，實(shí)用的辦法是嘗試快速模擬想要設(shè)計(jì)的元素、基本思想和主題，比如下面這個(gè) Mock。





第二步：信息提取（Extraction）

當(dāng)想法確認(rèn)后，我們就可以開始收集信息了，包括圖像、文字、概念思考過程等只要和主題相關(guān)的都可以整理起來?？梢园阉麄兎旁?Adobe Illustrator 中，做一個(gè)風(fēng)格化分析。





比如上圖，我把這些碎片化的信息在 Adobe Illustrator 中打開，用不同的縮放級(jí)別和地理位置編輯了一個(gè)帶有調(diào)色板和地圖視圖的小畫板。

這種深入分析有助于我理解地圖的意圖，并完成設(shè)計(jì)決策。

第三步：內(nèi)容簡(jiǎn)化（Simplification）

在設(shè)計(jì)決策的過程中，需要化繁為簡(jiǎn)，把信息簡(jiǎn)化為主題，視覺元素和意圖。
這一步，我們可以為地圖創(chuàng)建分類圖表。





第四步：設(shè)計(jì)元素（Ideation）

在這個(gè)階段，就細(xì)節(jié)到地圖的外觀，比如紋理，字體，顏色，并確保設(shè)計(jì)與初始意圖一致。





第五步：開始創(chuàng)作（Creation）

在考慮好風(fēng)格、制訂好設(shè)計(jì)元素后，就可以開始在 Mapbox Studio 中進(jìn)行具體的設(shè)計(jì)了。如果你經(jīng)常使用 Mapbox Studio，可以將默認(rèn)的圖層都刪掉，從白板開始設(shè)計(jì)。









可以點(diǎn)擊這里進(jìn)入 Wheatpaste 網(wǎng)頁版在線瀏覽獲得更多靈感。

如果想要站在巨人的肩膀上開啟你的設(shè)計(jì)，就一定不能錯(cuò)過下面的福利時(shí)間！

??福利時(shí)間 - Mapbox Studio 個(gè)性化地圖模板

這里匯集了部分 Mapbox Studio 地圖模版，用電腦打開對(duì)應(yīng)的鏈接就可以直接在模版的基礎(chǔ)上進(jìn)行創(chuàng)作了。

如果在使用中遇到問題，歡迎聯(lián)系 Mapbox 公眾號(hào)（Mapbox-China），回復(fù)【技術(shù)】，即可到 Mapbox 開發(fā)者交流群進(jìn)行交流哦。
?Mapbox Studio?Mapbox Studio 教程?Mapbox Studio 視頻教程


1.Treasure





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

2. 80‘s 8-bit




?用電腦點(diǎn)擊這里可以進(jìn)行在線創(chuàng)作

3. The Upside Down





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

4. Mineral





?在用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

5. GOT





?用電腦點(diǎn)擊這里進(jìn)行線創(chuàng)作

6. Architect





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

7. Bubble





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

8. Cali Terrain





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

9. Decimal





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

10. Ice Cream





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

11. Lè Shine





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

12. Minimo





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

13. Moonlight





?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

14. North Star




?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

The Happy Map





?用電腦點(diǎn)擊這里開始在線創(chuàng)作

Whaam!




?用電腦點(diǎn)擊這里進(jìn)行在線創(chuàng)作

---

Build with Mapbox br/>霓虹燈風(fēng)格地圖 80‘s 8-bit 誕生記 | Mapbox 地圖設(shè)計(jì)思路
br/>如何制作富有質(zhì)感的城市 3D 肌理圖？| Mapbox 一分鐘
br/>「抖音風(fēng)格」動(dòng)態(tài)地圖制作方法已上線
br/>2 個(gè)《怪物奇語》電影主題地圖模版上線 Mapbox Studio，超美、超玄幻