在生活中留意觀察的話，經(jīng)常會(huì)見(jiàn)到各種專(zhuān)題地圖，如火車(chē)站的“全國(guó)高鐵路線圖”，城市宣傳冊(cè)上的“景點(diǎn)分布圖”，地理書(shū)上的“年降水量分布圖”等。我們平時(shí)使用的手機(jī)地圖里，除了經(jīng)常用到的普通地圖外也有專(zhuān)題圖層。本文從小處著手，介紹一些專(zhuān)題圖層的設(shè)計(jì)初衷和設(shè)計(jì)點(diǎn)。

一、什么是專(zhuān)題圖層？

2005年Google發(fā)布了一款全新的地圖產(chǎn)品：Google map，PV量一夜之間暴漲到1000萬(wàn)。

不過(guò)讓谷歌內(nèi)部的人也沒(méi)想到的是：Google map 發(fā)布三天后，出現(xiàn)了一個(gè)專(zhuān)門(mén)展示房產(chǎn)信息的網(wǎng)站：housingmaps.com，原來(lái)是一位開(kāi)發(fā)小哥為了方便找房子，將房產(chǎn)網(wǎng)站的信息扒下來(lái)標(biāo)注到了谷歌地圖，緊接著又出現(xiàn)了專(zhuān)門(mén)標(biāo)注芝加哥犯罪記錄的網(wǎng)站。

這些專(zhuān)門(mén)展示一種或幾種要素特征的地圖就是專(zhuān)題地圖，不論是抽象的社會(huì)經(jīng)濟(jì)現(xiàn)象還是有實(shí)體的自然地理要素都可以制作成專(zhuān)題圖層。

日常生活中，除了使用普通地圖搜索地點(diǎn)規(guī)劃路線外，專(zhuān)門(mén)查看某一類(lèi)信息的場(chǎng)景也很多，如醫(yī)療代表推廣產(chǎn)品要查區(qū)域內(nèi)所有的醫(yī)院、計(jì)劃買(mǎi)學(xué)區(qū)房的家長(zhǎng)專(zhuān)門(mén)看全市的小學(xué)、規(guī)劃去云南自駕游提前了解云南的景點(diǎn)，貨車(chē)司機(jī)為了規(guī)劃路線看高速公路和國(guó)道省道。

所以Google map發(fā)布之后，很多網(wǎng)站都開(kāi)始借助地圖來(lái)展示專(zhuān)門(mén)信息，面對(duì)大量的開(kāi)發(fā)者，4個(gè)月之后谷歌團(tuán)隊(duì)發(fā)布了免費(fèi)的地圖API。

在國(guó)內(nèi)也同樣，不論是百度地圖還是高德地圖都有開(kāi)發(fā)者平臺(tái)，供其他APP調(diào)用地圖能力。我們?cè)谑褂闷渌鸄PP時(shí)經(jīng)常會(huì)見(jiàn)到建立在專(zhuān)題地圖之上的功能，如馬蜂窩的<地圖模式找景點(diǎn)>，鏈家的<地圖找房>、墨跡的<地圖模式看空氣質(zhì)量>等。

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

除了缺少認(rèn)知外，更多是因?yàn)橛脩?hù)最大量的需求”查看某一類(lèi)信息”在電子地圖上通過(guò)”泛搜索”滿(mǎn)足了（對(duì)泛搜索的介紹見(jiàn)前文http://theventurebank.com/pd/1171114.html）。所以當(dāng)泛搜索滿(mǎn)足不了的時(shí)候，才需要用專(zhuān)題地圖補(bǔ)充。

在地圖app內(nèi)，專(zhuān)題地圖的作用可以歸納為兩種：

1. 展示非標(biāo)準(zhǔn)地圖上的地理要素；如路況事件、收藏的點(diǎn)、實(shí)時(shí)公交等。
2. 查看一個(gè)范圍內(nèi)某種要素的分布、形態(tài)；對(duì)比范圍間的數(shù)值差異。如全國(guó)范圍內(nèi)的985大學(xué)分布、地勢(shì)圖、各省5A 景區(qū)的數(shù)量等。

想清楚專(zhuān)題地圖的使用場(chǎng)景，才能著手設(shè)計(jì)一份專(zhuān)題圖層。

專(zhuān)題圖層的本質(zhì)是數(shù)據(jù)在地圖上的可視化表達(dá)，但不論是定性數(shù)據(jù)還是定量數(shù)據(jù)，每個(gè)數(shù)據(jù)一定有對(duì)應(yīng)的地理位置（可能是精確的點(diǎn)坐標(biāo)，也可能是一個(gè)范圍），根據(jù)地理數(shù)據(jù)的分布可以將要素簡(jiǎn)單分為點(diǎn)狀要素、線裝要素和面狀要素。

以下介紹幾款地圖APP的專(zhuān)題圖層，個(gè)人感覺(jué)，有的實(shí)用有的有趣：

二、如何著手設(shè)計(jì)專(zhuān)題圖層？

專(zhuān)題圖層所表達(dá)的內(nèi)容豐富多樣，設(shè)計(jì)樣式也非常靈活，歸納起來(lái)要考慮三方面：專(zhuān)題要素、地理底圖、輔助要素。

專(zhuān)題要素是最主要的內(nèi)容，而且不同分布類(lèi)型的專(zhuān)題要素對(duì)應(yīng)不同的設(shè)計(jì)方法，接下來(lái)分別介紹各種專(zhuān)題要素的設(shè)計(jì)。

1. 點(diǎn)狀要素的設(shè)計(jì)

點(diǎn)狀要素展示在地圖上，主要是表達(dá)要素的分布，如果有多個(gè)類(lèi)別，可以看到多個(gè)要素之間的關(guān)系，非常直觀。

（1）icon設(shè)計(jì)要醒目有辨識(shí)性，并考慮到不同類(lèi)別信息的差異化

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

2016年百度地圖接入三亞市的交通監(jiān)控?cái)z像頭，初衷是方便用戶(hù)查看實(shí)時(shí)路況信息，在地圖上用紅色的icon （類(lèi)似路況事件的icon）表示此地有攝像頭，點(diǎn)擊即可查看實(shí)時(shí)的視頻信息。

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

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

（2）隨著地圖層級(jí)的縮放，考慮到點(diǎn)的融合壓蓋情況

如果沒(méi)有設(shè)計(jì)融合策略，當(dāng)?shù)貓D縮小到一定比例尺的時(shí)候icon之間會(huì)壓蓋，既不美觀也會(huì)影響對(duì)地圖的使用，如高德和百度對(duì)于收藏點(diǎn)的處理，百度地圖的顯然更清爽一些。

（3）根據(jù)查看專(zhuān)題要素的場(chǎng)景，對(duì)背景信息做相應(yīng)的調(diào)整

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

常用的弱化手段包括降級(jí)、去色、隱藏；如小區(qū)名稱(chēng)做了降級(jí)處理，部分地點(diǎn)icon去色處理。

但是弱化底圖元素有一定的風(fēng)險(xiǎn)，尤其是采用降低顯示級(jí)別的策略，可能會(huì)影響到基本地圖的使用，比如高德地圖的“公交地圖”圖層，開(kāi)啟后突出了公交站、地鐵站，但弱化了底圖信息，導(dǎo)致查看圖面時(shí)有明顯的元素少、信息缺失感覺(jué)。

谷歌采取了另外一種策略：地圖上默認(rèn)展示公交地鐵路線，如果駕車(chē)用戶(hù)覺(jué)得這些元素是干擾，則可以選擇關(guān)閉公交地鐵路線圖層。

（4）根據(jù)點(diǎn)背后承載的信息量，設(shè)計(jì)點(diǎn)擊單個(gè)元素之后的交互

如果信息量比較少，在放大地圖查看時(shí)，自動(dòng)展示出來(lái)，如果信息多可采用底部tips的方式，盡量避免全屏/蒙層/彈窗這種阻斷式的形式，因?yàn)橛脩?hù)在使用專(zhuān)題地圖時(shí)，通常會(huì)多個(gè)點(diǎn)來(lái)回切換比較。

在keep app內(nèi)找到一個(gè)阻斷交互的例子，在推薦路線圖層，當(dāng)選擇查看一條路線詳情后，無(wú)法直接點(diǎn)選其他路線，必須要退出后才能再選擇，過(guò)程有阻斷感。

2. 線狀要素的設(shè)計(jì)

線狀要素常用來(lái)表達(dá)各種界線、輪廓、走向。

分為精確線狀分布（如省界對(duì)應(yīng)的地理坐標(biāo)是精確的）和模糊線狀分布（如洋流方向?qū)?yīng)的地理坐標(biāo)范圍很廣），在地圖內(nèi)主要是精確的線狀分布，且不聊模糊線的設(shè)計(jì)。

（1）平衡線狀要素和底圖要素的視覺(jué)重點(diǎn)

如果專(zhuān)題圖層獨(dú)立于基礎(chǔ)地圖，那根據(jù)需要對(duì)地圖要素做弱化處理就可以，如地鐵圖是最極端的例子，直接將底圖去掉。

如果專(zhuān)題圖層作為一種元素疊加在基礎(chǔ)地圖上，則要著重考慮和底圖元素的關(guān)系。因?yàn)榫€裝要素形狀細(xì)，一般通過(guò)高飽和度的顏突出表現(xiàn)，但高飽和度的線狀要素可能會(huì)搶奪地圖要素的視覺(jué)焦點(diǎn)，對(duì)查看基礎(chǔ)地圖造成干擾。

如：老版本里高德地圖的路況線較粗，整個(gè)線壓蓋在道路上，并且沒(méi)有根據(jù)道路等級(jí)做展示級(jí)別的控制，導(dǎo)致開(kāi)啟路況后，在視覺(jué)上底圖信息都被擠掉了。改版后，將路況線調(diào)細(xì)，并貼到道路兩側(cè)，這樣即使在開(kāi)啟路況圖層的狀態(tài)，地圖信息收到很小的影響，圖面上的字也更清晰易讀了。

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

線不同于點(diǎn)，不易點(diǎn)選，可以嘗試在線形上增加元素承載深度信息，當(dāng)用戶(hù)放大的時(shí)候主動(dòng)透出來(lái)，控制展示密度即可。比如停車(chē)位增加標(biāo)簽表示價(jià)格，路況線上增加箭頭表示走向等。

粗略地思考：如果我設(shè)計(jì)停車(chē)場(chǎng)圖層，價(jià)格檔位相對(duì)固定，我會(huì)采用圖例來(lái)展示價(jià)格信息，減少對(duì)地圖的遮擋，如果可以獲取到停車(chē)余位信息，則將動(dòng)態(tài)信息展示在地圖上。

3. 面狀要素的設(shè)計(jì)

面狀要素大致可分為零星不連續(xù)的面狀分布，連續(xù)的面狀分布兩種。零星不連續(xù)的面狀分布，主要使用范圍法，比如北京市水系分布圖，通過(guò)面狀符號(hào)將水系信息勾勒出來(lái)即可。

連續(xù)面狀分布，可采用質(zhì)地法、等值線法、等值區(qū)域法。以降雨量地圖為例，將整個(gè)區(qū)域面劃分柵格，統(tǒng)計(jì)每個(gè)格子內(nèi)的降雨量，然后展示對(duì)應(yīng)顏色。

面狀要素的設(shè)計(jì)，在交互上有個(gè)小細(xì)節(jié)，面狀要素會(huì)影響基礎(chǔ)地圖的使用，所以不會(huì)長(zhǎng)期開(kāi)啟，設(shè)計(jì)一個(gè)單獨(dú)的圖層更合理，需要的時(shí)候進(jìn)入專(zhuān)題圖層，看完后退出。不要作為要素疊加在基礎(chǔ)地圖上。

如百度的“熱力圖”，開(kāi)啟和關(guān)閉都不方便：

三、專(zhuān)題圖層還有哪些可能？

1. 隨著政府信息逐漸放開(kāi)，地圖與政府合作會(huì)有更多專(zhuān)題圖層出現(xiàn)

比如2017年北京市公開(kāi)了“政務(wù)公開(kāi)惠民便民地圖http://map.beijing.gov.cn”，之后百度地圖也逐步上線便民地圖。前段時(shí)間高德與國(guó)家旅游局合作，推出全域旅游圖層，幫助用戶(hù)找景點(diǎn)廁所。

2. 作為一種內(nèi)容去運(yùn)營(yíng)，進(jìn)而拓展用戶(hù)使用地圖的場(chǎng)景

比如地圖本身具有一定的知識(shí)屬性，可以制作一些有趣的、有知識(shí)點(diǎn)的圖層，如與《國(guó)家地理》合作，將其精選圖片扎在地圖上；冬天展示候鳥(niǎo)遷徙路線；也可以和季節(jié)、時(shí)事結(jié)合，春天展示賞花地點(diǎn)等、地震期間上線尋人地圖等。

如美國(guó)選取期間，谷歌馬上推出了“投票地點(diǎn)”圖層；最近是感恩節(jié)，谷歌地圖用2017年的數(shù)據(jù)做了一些交通擁堵分析發(fā)布在twitter上，給用戶(hù)提供避開(kāi)擁堵的建議。以下比較有意思的兩個(gè)圖。

3. 邀請(qǐng)用戶(hù)一起創(chuàng)建一些有趣的圖層，增加趣味性

如邀請(qǐng)用戶(hù)上傳景點(diǎn)照片，上傳自駕路線、騎行路線等，還在開(kāi)腦洞中。

參考資料

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

本文由 @喬北一 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議