生活中留意觀察的話，經常會見到各種專題地圖，如火車站的“全國高鐵路線圖”，城市宣傳冊上的“景點分布圖”，地理書上的“年降水量分布圖”等。我們平時使用的手機地圖里，除了經常用到的普通地圖外也有專題圖層。本文從小處著手，介紹一些專題圖層的設計初衷和設計點。

一、什么是專題圖層？

2005年Google發布了一款全新的地圖產品：Google map，PV量一夜之間暴漲到1000萬。

不過讓谷歌內部的人也沒想到的是：Google map 發布三天后，出現了一個專門展示房產信息的網站：housingmaps.com，原來是一位開發小哥為了方便找房子，將房產網站的信息扒下來標注到了谷歌地圖，緊接著又出現了專門標注芝加哥犯罪記錄的網站。

這些專門展示一種或幾種要素特征的地圖就是專題地圖，不論是抽象的社會經濟現象還是有實體的自然地理要素都可以制作成專題圖層。

日常生活中，除了使用普通地圖搜索地點規劃路線外，專門查看某一類信息的場景也很多，如醫療代表推廣產品要查區域內所有的醫院、計劃買學區房的家長專門看全市的小學、規劃去云南自駕游提前了解云南的景點，貨車司機為了規劃路線看高速公路和國道省道。

所以Google map發布之后，很多網站都開始借助地圖來展示專門信息，面對大量的開發者，4個月之后谷歌團隊發布了免費的地圖API。

在國內也同樣，不論是百度地圖還是高德地圖都有開發者平臺，供其他APP調用地圖能力。我們在使用其他APP時經常會見到建立在專題地圖之上的功能，如馬蜂窩的<地圖模式找景點>，鏈家的<地圖找房>、墨跡的<地圖模式看空氣質量>等。

對于地圖APP而言：專題圖層既不屬于核心功能也不在核心鏈路上，大部分用戶也不了解 “專題地圖”，對于地圖上的“圖層（layers）”按鈕完全沒有概念，數據顯示圖層按鈕的UV不足5%（不過“圖層”并不是唯一的入口，也有少量專題圖層通過搜索進入，如搜索“地鐵圖”展示的地圖圖層）。

除了缺少認知外，更多是因為用戶最大量的需求”查看某一類信息”在電子地圖上通過”泛搜索”滿足了（對泛搜索的介紹見前文http://www.woshipm.com/pd/1171114.html）。所以當泛搜索滿足不了的時候，才需要用專題地圖補充。

在地圖app內，專題地圖的作用可以歸納為兩種：

1. 展示非標準地圖上的地理要素；如路況事件、收藏的點、實時公交等。
2. 查看一個范圍內某種要素的分布、形態；對比范圍間的數值差異。如全國范圍內的985大學分布、地勢圖、各省5A 景區的數量等。

想清楚專題地圖的使用場景，才能著手設計一份專題圖層。

專題圖層的本質是數據在地圖上的可視化表達，但不論是定性數據還是定量數據，每個數據一定有對應的地理位置（可能是精確的點坐標，也可能是一個范圍），根據地理數據的分布可以將要素簡單分為點狀要素、線裝要素和面狀要素。

以下介紹幾款地圖APP的專題圖層，個人感覺，有的實用有的有趣：

二、如何著手設計專題圖層？

專題圖層所表達的內容豐富多樣，設計樣式也非常靈活，歸納起來要考慮三方面：專題要素、地理底圖、輔助要素。

專題要素是最主要的內容，而且不同分布類型的專題要素對應不同的設計方法，接下來分別介紹各種專題要素的設計。

1. 點狀要素的設計

點狀要素展示在地圖上，主要是表達要素的分布，如果有多個類別，可以看到多個要素之間的關系，非常直觀。

（1）icon設計要醒目有辨識性，并考慮到不同類別信息的差異化

當類別較多時，則輔助篩選和搜索功能。比如地圖上各種類型的路況事件是最典型的點狀要素，百度和高德兩家地圖地圖都采用了醒目的紅色表示。但是不同類型的要素要做出明確的區分，避免信息過載增加讀圖成本。

2016年百度地圖接入三亞市的交通監控攝像頭，初衷是方便用戶查看實時路況信息，在地圖上用紅色的icon （類似路況事件的icon）表示此地有攝像頭，點擊即可查看實時的視頻信息。

可是將地圖縮小后，到處都是紅色icon，給人一種滿屏車禍、修路的感受。路況時間有警示屬性所以采用紅色，但是攝像頭并不應該用警示色，用其他色更合適，但考慮到減少地圖界面的復雜性，還是決定不增加其他色系沿用紅色。

但是考慮到用戶即使查看攝像頭信息也是有目標的查看某些路口，相對而言在比較大的比例尺下操作，所以給出的解決辦法是：降低了攝像頭的展示級別，在大比例尺下僅展示路況事件。

（2）隨著地圖層級的縮放，考慮到點的融合壓蓋情況

如果沒有設計融合策略，當地圖縮小到一定比例尺的時候icon之間會壓蓋，既不美觀也會影響對地圖的使用，如高德和百度對于收藏點的處理，百度地圖的顯然更清爽一些。

（3）根據查看專題要素的場景，對背景信息做相應的調整

最常見的是弱化底圖元素，比如百度最近一次改版，將旅游地圖的底圖信息弱化，以突出與旅游相關的專題要素，使得地圖的信息更有層級，提高用戶在地圖上搜索、瀏覽的效率。

常用的弱化手段包括降級、去色、隱藏；如小區名稱做了降級處理，部分地點icon去色處理。

但是弱化底圖元素有一定的風險，尤其是采用降低顯示級別的策略，可能會影響到基本地圖的使用，比如高德地圖的“公交地圖”圖層，開啟后突出了公交站、地鐵站，但弱化了底圖信息，導致查看圖面時有明顯的元素少、信息缺失感覺。

谷歌采取了另外一種策略：地圖上默認展示公交地鐵路線，如果駕車用戶覺得這些元素是干擾，則可以選擇關閉公交地鐵路線圖層。

（4）根據點背后承載的信息量，設計點擊單個元素之后的交互

如果信息量比較少，在放大地圖查看時，自動展示出來，如果信息多可采用底部tips的方式，盡量避免全屏/蒙層/彈窗這種阻斷式的形式，因為用戶在使用專題地圖時，通常會多個點來回切換比較。

在keep app內找到一個阻斷交互的例子，在推薦路線圖層，當選擇查看一條路線詳情后，無法直接點選其他路線，必須要退出后才能再選擇，過程有阻斷感。

2. 線狀要素的設計

線狀要素常用來表達各種界線、輪廓、走向。

分為精確線狀分布（如省界對應的地理坐標是精確的）和模糊線狀分布（如洋流方向對應的地理坐標范圍很廣），在地圖內主要是精確的線狀分布，且不聊模糊線的設計。

（1）平衡線狀要素和底圖要素的視覺重點

如果專題圖層獨立于基礎地圖，那根據需要對地圖要素做弱化處理就可以，如地鐵圖是最極端的例子，直接將底圖去掉。

如果專題圖層作為一種元素疊加在基礎地圖上，則要著重考慮和底圖元素的關系。因為線裝要素形狀細，一般通過高飽和度的顏突出表現，但高飽和度的線狀要素可能會搶奪地圖要素的視覺焦點，對查看基礎地圖造成干擾。

如：老版本里高德地圖的路況線較粗，整個線壓蓋在道路上，并且沒有根據道路等級做展示級別的控制，導致開啟路況后，在視覺上底圖信息都被擠掉了。改版后，將路況線調細，并貼到道路兩側，這樣即使在開啟路況圖層的狀態，地圖信息收到很小的影響，圖面上的字也更清晰易讀了。

（2）線狀元素不局限于用線表達，也可以在線型上添加元素，表達更更豐富的內容

線不同于點，不易點選，可以嘗試在線形上增加元素承載深度信息，當用戶放大的時候主動透出來，控制展示密度即可。比如停車位增加標簽表示價格，路況線上增加箭頭表示走向等。

粗略地思考：如果我設計停車場圖層，價格檔位相對固定，我會采用圖例來展示價格信息，減少對地圖的遮擋，如果可以獲取到停車余位信息，則將動態信息展示在地圖上。

3. 面狀要素的設計

面狀要素大致可分為零星不連續的面狀分布，連續的面狀分布兩種。零星不連續的面狀分布，主要使用范圍法，比如北京市水系分布圖，通過面狀符號將水系信息勾勒出來即可。

連續面狀分布，可采用質地法、等值線法、等值區域法。以降雨量地圖為例，將整個區域面劃分柵格，統計每個格子內的降雨量，然后展示對應顏色。

面狀要素的設計，在交互上有個小細節，面狀要素會影響基礎地圖的使用，所以不會長期開啟，設計一個單獨的圖層更合理，需要的時候進入專題圖層，看完后退出。不要作為要素疊加在基礎地圖上。

如百度的“熱力圖”，開啟和關閉都不方便：

三、專題圖層還有哪些可能？

1. 隨著政府信息逐漸放開，地圖與政府合作會有更多專題圖層出現

比如2017年北京市公開了“政務公開惠民便民地圖http://map.beijing.gov.cn”，之后百度地圖也逐步上線便民地圖。前段時間高德與國家旅游局合作，退出全域旅游圖層，幫助用戶找景點廁所。

2. 作為一種內容去運營，進而拓展用戶使用地圖的場景

比如地圖本身具有一定的知識屬性，可以制作一些有趣的、有知識點的圖層，如與《國家地理》合作，將其精選圖片扎在地圖上；冬天展示候鳥遷徙路線；也可以和季節、時事結合，春天展示賞花地點等、地震期間上線尋人地圖等，美國選取期間，谷歌馬上推出了“投票地點”圖層。

3. 邀請用戶一起創建一些有趣的圖層，增加趣味性

如邀請用戶上傳景點照片，上傳自駕路線、騎行路線等，還在開腦洞中。

參考資料

1. 《地圖學》；江南、李少梅、崔虎平、方成編著
2. Google Maps，Keyhole后傳；作者：余晟

本文由 @喬北一 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。