地圖產(chǎn)品:專門聊聊專題圖層

11 評論 9903 瀏覽 75 收藏 16 分鐘

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

一、什么是專題圖層?

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

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

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

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

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

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

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

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

在地圖app內(nèi),專題地圖的作用可以歸納為兩種:

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

想清楚專題地圖的使用場景,才能著手設(shè)計一份專題圖層。

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

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

二、如何著手設(shè)計專題圖層?

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

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

1. 點狀要素的設(shè)計

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

(1)icon設(shè)計要醒目有辨識性,并考慮到不同類別信息的差異化

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

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

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

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

(2)隨著地圖層級的縮放,考慮到點的融合壓蓋情況

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

(3)根據(jù)查看專題要素的場景,對背景信息做相應(yīng)的調(diào)整

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

常用的弱化手段包括降級、去色、隱藏;如小區(qū)名稱做了降級處理,部分地點icon去色處理。

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

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

(4)根據(jù)點背后承載的信息量,設(shè)計點擊單個元素之后的交互

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

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

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

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

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

(1)平衡線狀要素和底圖要素的視覺重點

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

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

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

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

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

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

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

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

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

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

如百度的“熱力圖”,開啟和關(guān)閉都不方便:

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

1. 隨著政府信息逐漸放開,地圖與政府合作會有更多專題圖層出現(xiàn)

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

2. 作為一種內(nèi)容去運營,進(jìn)而拓展用戶使用地圖的場景

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

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

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

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

參考資料

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

 

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

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 個人覺著百度地圖的圖像設(shè)計比高德好很多

    來自北京 回復(fù)
  2. 剛接觸地圖項目,啟發(fā)很大,受教了,真心感謝呢。

    來自廣東 回復(fù)
  3. 您好,看過您的文章,目前有地圖方向的機(jī)會,想跟您取得聯(lián)系。

    來自江西 回復(fù)
  4. 牛,牛,牛,啟發(fā)很大

    回復(fù)
  5. 受教了,觀察的真仔細(xì)。
    停車位線裝信息的粗略地思考:如果我設(shè)計停車場圖層,我只會展示哪些位置可以停車,不會展示滿員車位,因為用戶只需要關(guān)注在哪里可以停車,特別是開車過程中。

    來自北京 回復(fù)
    1. 好有道理~

      來自廣東 回復(fù)
  6. 哇,太贊了,剛接觸地圖相關(guān),看了以后對地圖有了系統(tǒng)了解~贊!

    來自北京 回復(fù)
  7. 作者是學(xué)地信了嗎……三篇文章都是分析地圖的 ??

    來自湖北 回復(fù)
    1. 專業(yè)和地圖沒有關(guān)系,但是工作在互聯(lián)網(wǎng)地圖領(lǐng)域,然后愛上了地圖 ??

      來自北京 回復(fù)
  8. 很受用,最近在做一個海洋地圖的項目

    來自上海 回復(fù)
    1. 能幫上點兒忙,對我最大的鼓勵了

      來自北京 回復(fù)