地圖產(chǎn)品:專(zhuān)門(mén)聊聊專(zhuān)題圖層

11 評(píng)論 9894 瀏覽 75 收藏 16 分鐘

在生活中留意觀察的話,經(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é)議

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

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

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

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

    回復(fù)
  5. 受教了,觀察的真仔細(xì)。
    停車(chē)位線裝信息的粗略地思考:如果我設(shè)計(jì)停車(chē)場(chǎng)圖層,我只會(huì)展示哪些位置可以停車(chē),不會(huì)展示滿(mǎn)員車(chē)位,因?yàn)橛脩?hù)只需要關(guān)注在哪里可以停車(chē),特別是開(kāi)車(chē)過(guò)程中。

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

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

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

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

      來(lái)自北京 回復(fù)
  8. 很受用,最近在做一個(gè)海洋地圖的項(xiàng)目

    來(lái)自上海 回復(fù)
    1. 能幫上點(diǎn)兒忙,對(duì)我最大的鼓勵(lì)了

      來(lái)自北京 回復(fù)