地圖產品:專門聊聊專題圖層
在生活中留意觀察的話,經常會見到各種專題地圖,如火車站的“全國高鐵路線圖”,城市宣傳冊上的“景點分佈圖”,地理書上的“年降水量分佈圖”等。我們平時使用的手機地圖裡,除了經常用到的普通地圖外也有專題圖層。本文從小處著手,介紹一些專題圖層的設計初衷和設計點。
一、什麼是專題圖層?
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內,專題地圖的作用可以歸納為兩種:
- 展示非標準地圖上的地理要素;如路況事件、收藏的點、實時公交等。
- 檢視一個範圍內某種要素的分佈、形態;對比範圍間的數值差異。如全國範圍內的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. 邀請使用者一起建立一些有趣的圖層,增加趣味性
如邀請使用者上傳景點照片,上傳自駕路線、騎行路線等,還在開腦洞中。
參考資料
- 《地圖學》;江南、李少梅、崔虎平、方成編著
- Google Maps,Keyhole後傳;作者:餘晟
本文由 @喬北一 原創釋出於人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基於 CC0 協議。