地圖產(chǎn)品:如何高效地傳遞信息?
地圖是對(duì)信息的抽象表達(dá),“地圖學(xué)”是專門研究地圖制作和表達(dá)的學(xué)科,“符號(hào)論”“地圖感受論”是著重研究地圖表達(dá)的理論。手機(jī)地圖隨著智能機(jī)的普及迅速發(fā)展起來(lái),但是關(guān)于手機(jī)地圖的研究遠(yuǎn)沒有紙質(zhì)地圖那么豐富系統(tǒng)。本文作者僅從小處著手,將自己工作中涉及到的梳理出來(lái),供交流參考。
手機(jī)地圖不是按照標(biāo)準(zhǔn)、按照數(shù)據(jù)繪制出來(lái)的嗎,還需要設(shè)計(jì)?
需要,太需要了!
下文先介紹手機(jī)地圖的信息類型,再討論地圖信息的組織和表達(dá)。
一、地圖內(nèi)的信息類型
隨著科技發(fā)展,地圖的形式和內(nèi)容都在變化,核心是不變的:地圖是客觀世界的模型,是空間信息的載體。
以紙為媒介的地圖,集數(shù)據(jù)存儲(chǔ)和數(shù)據(jù)展示為一體,一張地圖上的信息量是有限的,以展示空間信息為主。以電子屏幕為媒介的地圖,實(shí)現(xiàn)了數(shù)據(jù)存儲(chǔ)與數(shù)據(jù)展示的分離,并且表現(xiàn)形式從單一的符號(hào)擴(kuò)展為多媒體形式(圖片、影像、聲音等),因此電子地圖展示的信息量更大,信息類型更豐富。
概括為以下三類:
- 地理要素,包括自然地理要素(如水系、植被、交通等)和社會(huì)經(jīng)濟(jì)要素(如行政區(qū)等),這些有實(shí)體的地理要素,按照空間分布特征可以抽象為點(diǎn)、線、面、體四種類型。
- 點(diǎn)、線、面之上負(fù)載的服務(wù)信息,如加油站的油號(hào)價(jià)格;高速路上的路況事件;體育場(chǎng)的賽事、餐館的內(nèi)部實(shí)景等等。服務(wù)信息的時(shí)效性較強(qiáng),比如路況是分鐘級(jí)刷新、體育場(chǎng)賽事是天級(jí)刷新,因此手機(jī)地圖更適合承載此類信息。
- 反映自然和社會(huì)的多維信息,以及多維信息之間的分布、組合、聯(lián)系、制約及其在時(shí)空中的變化和發(fā)展。如反映景區(qū)內(nèi)人口分布的熱力圖、反映空氣質(zhì)量的霧霾地圖等。
常見地理要素類型:
二、承載信息的主要頁(yè)面
地圖是在制圖者和使用者之間傳遞信息的載體,制圖者需站在使用者的角度去記錄、表達(dá)信息(地圖傳輸理論)。手機(jī)地圖信息量大但屏幕小,所以手機(jī)地圖用多個(gè)頁(yè)面呈現(xiàn)信息,并支持交互操作,讓用戶主動(dòng)選擇在屏幕內(nèi)展現(xiàn)的內(nèi)容。
主要呈現(xiàn)信息的頁(yè)面包括:
- 一打開手機(jī)地圖看到的頁(yè)面:主圖。用戶可以在主圖上通過平移、放大縮小的操作選擇自己感興趣的區(qū)域;可以旋轉(zhuǎn)、切換2D/3D模式選擇自己習(xí)慣的視角(在主圖上雙指下滑有驚喜呦);還可以切換地圖模式選擇查看的地圖信息類型,如普通地圖、地形圖、衛(wèi)星圖、衛(wèi)星圖和道路結(jié)合的混合圖(hybrid)。
- 突出展示某個(gè)點(diǎn)信息的頁(yè)面:搜索結(jié)果頁(yè)。用戶直接在地圖上點(diǎn)擊icon或地點(diǎn)名稱來(lái)選中一個(gè)點(diǎn),也可以使用搜索框搜一個(gè)確定的點(diǎn),即可到達(dá)搜索結(jié)果頁(yè)。在該頁(yè)面用戶還可以點(diǎn)擊進(jìn)入詳情頁(yè),查看該地點(diǎn)更豐富的信息。
- 突出展示一種或多種要素的頁(yè)面:專題圖層用戶可以開啟地圖的某些圖層,重點(diǎn)查看感興趣的信息,特別適合展示信息的分布和變化。地圖設(shè)計(jì)師主要考慮的問題是:怎么展現(xiàn)信息,能夠準(zhǔn)確、高效的傳遞給用戶。
三、不同頁(yè)面的設(shè)計(jì)思考
1. 主圖
主圖的要素包括:地理要素,數(shù)學(xué)要素(坐標(biāo)網(wǎng)、比例尺、測(cè)量控制點(diǎn)),輔助要素(如:圖例、指南針等)。其中地理要素是最主要的內(nèi)容,主要討論地理要素的組織和表現(xiàn)。
1.1 地圖渲染策略:分層、分級(jí)展示信息,保證地圖負(fù)載量在可閱讀范圍內(nèi)
地理要素類型非常多,所以地圖數(shù)據(jù)是分層存儲(chǔ)的,應(yīng)用最多的方式是按照要素類型分層,一個(gè)圖層對(duì)應(yīng)一類地理要素,如:河流層、道路層等。展現(xiàn)的時(shí)候也是分層展現(xiàn),以保證不同類型的要素有序表達(dá),多個(gè)圖層信息疊加在一起,保證屏幕內(nèi)顯示的信息量易于閱讀,沒有壓蓋。
(1)不同類型的地理要素按比例尺有序展示,以高德地圖為例,從1:1000Km-1:5m共分了18級(jí),渲染產(chǎn)品負(fù)責(zé)定制渲染的規(guī)則,什么比例尺下展示哪些內(nèi)容,針對(duì)每一類地理要素設(shè)置渲染出現(xiàn)的級(jí)別區(qū)間。以下是在文獻(xiàn)里找到的比較通用的分層:
?(2)同類型地理要素分級(jí)展示避免信息過載,邏輯上越重要的信息出現(xiàn)的越早,如何定義重要程度呢,不同的地理要素依據(jù)的標(biāo)準(zhǔn)不同,比較通用的是按照規(guī)模劃分,如道路會(huì)按照通行能力分為4級(jí),逐級(jí)展示。如果同一級(jí)別的信息在圖面上出現(xiàn)了碰撞,則按照地點(diǎn)的熱度(各家算法不同,搜索量是比較通用的一個(gè)維度)賦值,將熱度低的碰撞下去。
(3)針對(duì)特殊地點(diǎn)進(jìn)行隱藏、提級(jí)、降級(jí)處理,比如國(guó)家軍事機(jī)關(guān)不得展示在地圖上需隱藏處理,一些地標(biāo)性建筑則需提級(jí)處理,還有些地點(diǎn)類型級(jí)別高容易將其他低類型但重要的地點(diǎn)碰撞下去,如村的名稱級(jí)別高,則采取降級(jí)處理。
有些用戶會(huì)反饋在地圖上找不到某個(gè)點(diǎn)(排除掉數(shù)據(jù)缺失的原因),還有另外兩個(gè)原因:1.因?yàn)椴豢梢哉故倦[藏了,2.因?yàn)殇秩疽?guī)則被碰撞下去了。如南鑼鼓巷,即是放大到1:5m的比例尺,也不能把所有的地點(diǎn)都展示出來(lái)。
(4)前面的策略都是為了避免信息過載采取的措施,但是對(duì)于圖面信息太少這件事制定的策略卻很少。有用戶反饋:打開地圖(默認(rèn)1:100m比例尺)幾乎看不到有用的信息,將圖面縮小更沒有可參照的信息,將圖面放到很大后可以看到參照點(diǎn),但是又少了全局觀。
信息過少的問題一般出現(xiàn)在POI稀疏的地區(qū),如下圖北京市內(nèi)信息密度剛好,但是在葫蘆到信息明顯太少,周圍有餐廳酒店,只是沒有渲染出來(lái)。這類問題量比較少但確實(shí)存在,隨著地圖的發(fā)展這些體驗(yàn)問題會(huì)被提上日程,根據(jù)區(qū)域的信息密度,制定不同的顯示策略。
粗略思考的解決方案是:地圖數(shù)據(jù)是分區(qū)存儲(chǔ)的,計(jì)算1:100米比例尺下的信息密度值(關(guān)于地圖負(fù)載量的計(jì)算方式已經(jīng)有比較成熟的方法,參考文獻(xiàn)1),根據(jù)值給各區(qū)塊分級(jí),在信息稀疏區(qū)塊內(nèi),對(duì)一些類型的信息做提級(jí)展示。
1.2 地圖符號(hào):符號(hào)、注記、配色整體設(shè)計(jì),保證各要素協(xié)調(diào),層級(jí)分明,文字清晰易讀
地圖符號(hào)系統(tǒng)的設(shè)計(jì)包括以下幾方面內(nèi)容:圖形符號(hào)、注記(文字標(biāo)注)、色彩。各家地圖在做符號(hào)設(shè)計(jì)時(shí)遵循著一些通用的準(zhǔn)則(如:圖形要形象、簡(jiǎn)單、規(guī)則,有通用性可拓展,盡量使用慣用符,大小協(xié)調(diào),配色有層次等),但具體到設(shè)計(jì)上各家地圖自成體系。
(1)建立系統(tǒng)的符號(hào)體系,給用戶穩(wěn)定的認(rèn)知,同一符號(hào)在不同地區(qū)、不同比例尺下、不同頁(yè)面?zhèn)鬟f的信息是一致的,谷歌地圖是國(guó)際化的地圖,尤其要考慮到不同地區(qū)人群的認(rèn)知習(xí)慣,以及icon表意的準(zhǔn)確性。
以谷歌地圖為例:在地圖配色上谷歌今年做了較大的調(diào)整,梳理了配色、增加了新的icon類型。此外符號(hào)體系需要與背景配合,信息才能突出出來(lái),谷歌也非常明顯的將陸地面的顏色明度提高,以突出地圖之上的信息。
關(guān)于icon風(fēng)格,在地圖界面上信息多,陰刻的顏色面更大,更易于識(shí)別和定位。高德地圖之前采用過陽(yáng)刻風(fēng)格的icon,后調(diào)整為陰刻風(fēng)格也是出于這個(gè)原因。
(2)根據(jù)用戶的環(huán)境、和閱讀習(xí)慣設(shè)計(jì)文字注記(指地圖上的文字說明)保證清晰易讀。注記要考慮到的視覺變量非常多包括:字體、顏色、大小、粗細(xì)、字隔、字列、特效、底襯。其中字體在手機(jī)地圖中很少用到,都是跟隨系統(tǒng)字體。
字體大小是最顯著的影響因素,尤其是對(duì)于花眼用戶字越大越易讀,但越大文字間的碰撞越嚴(yán)重。高德地圖增加了字體大小的設(shè)置項(xiàng),給用戶選擇權(quán)利,非常貼心。谷歌地圖則采用響應(yīng)式的設(shè)計(jì),當(dāng)用戶將地圖比例尺放大到1:5m的比例尺時(shí),道路文字會(huì)放大便于用戶閱讀(僅安卓端的道路名稱)。
除大小外,顏色和粗細(xì)對(duì)閱讀的影響也比較明顯,調(diào)整字體時(shí)需結(jié)合用戶的使用環(huán)境來(lái)調(diào)整,設(shè)計(jì)師在室內(nèi)調(diào)整好的字體后,需要拿到室外做快速的測(cè)試。在真實(shí)環(huán)境下檢測(cè)效果,雖是簡(jiǎn)單的道理,真的能堅(jiān)持下來(lái)卻很不容易。
曾有個(gè)版本用戶反饋道路名稱太淺看不清,吭哧吭哧的調(diào)重了,到戶外做測(cè)試時(shí)才發(fā)現(xiàn)絕大部分用戶的手機(jī)主圖都開啟了路況,自己在做設(shè)計(jì)的時(shí)候卻根本沒有考慮到,一打開路況,道路的名稱還是淹沒在路況的濃墨重彩中。
2. 搜索結(jié)果頁(yè)
2.1 信息分頁(yè)組織,支持頁(yè)面間靈活切換,提高閱讀效率
搜索結(jié)果頁(yè)的通用樣式:分圖面和tips兩部分,圖面展示位置信息,tips展示出行信息(距離、地址、類型等)供用戶作出出行決策。而地點(diǎn)之上的服務(wù)信息以圖片、文本為主,這些信息組成詳情頁(yè)作為結(jié)果頁(yè)的延伸,當(dāng)用戶需要查看時(shí)再展現(xiàn),不干擾用戶的出行決策。
以高德地圖為例,最近的一次改版,強(qiáng)化了搜索結(jié)果頁(yè)和詳情頁(yè)的切換以提高瀏覽效率。
此外還在tips展現(xiàn)更豐富的信息供用戶作出出行決策,減少了頁(yè)面跳轉(zhuǎn)。詳情頁(yè)的信息也越來(lái)越豐富,除常見的文字、圖片外,谷歌地圖還支持查看地點(diǎn)內(nèi)部實(shí)景,對(duì)于提前了解餐廳、酒店的內(nèi)部環(huán)境非常有用。甚至可以想象一下,之后地圖也會(huì)通過小視頻的方式展示信息,比如查看景點(diǎn)的短視頻了解景點(diǎn)整體的情況作出出行決策。
2.2 多樣的搜索結(jié)果頁(yè)樣式,方便表現(xiàn)多樣的地理要素
(1)有實(shí)體的地理要素,按照空間分布特征可以抽象為點(diǎn)、線、面、體四種類型,設(shè)計(jì)師在做“符號(hào)”設(shè)計(jì)的時(shí)候,根據(jù)要素的特征去表現(xiàn),直觀的展示樣式有利于快速的識(shí)別信息。
通過扎點(diǎn)氣泡來(lái)表示點(diǎn)狀要素,對(duì)于不同的地點(diǎn)類型則通過氣泡內(nèi)的icon樣式來(lái)區(qū)分,這點(diǎn)對(duì)于品牌的透出很有效,如麥當(dāng)勞。(蘋果地圖在icon上做的很細(xì)膩,值得借鑒)
通過線條來(lái)表示線狀要素,如道路、河流;通過圈定輪廓來(lái)表現(xiàn)AOI,如頤和園、醫(yī)院;通過壓蓋面來(lái)表示面狀要素,如西城區(qū)、西單商圈。以高德地圖和蘋果地圖比較,顯然線狀、面狀的表現(xiàn)樣式更易讀(高德地圖的配色、粗細(xì)有待優(yōu)化)
(2)隨著地圖內(nèi)的信息越來(lái)越豐富,用戶使用地圖的場(chǎng)景也越來(lái)越豐富,原有的“小tips”已經(jīng)不能滿足豐富的信息來(lái),需多樣的tips樣式以承載越來(lái)越豐富的信息,方便用戶在搜索結(jié)果頁(yè)快速讀取。
谷歌地圖設(shè)計(jì)了四種模版,分別表現(xiàn)不同類型的地點(diǎn)。最常見的是通用模版,如果地點(diǎn)有豐富信息則采用有圖片模版,如果在地圖上戳公交站則突出展示公交路線信息,最后是廣告模版。
高德地圖則設(shè)計(jì)了普通tips和加長(zhǎng)版tips兩種模版,詳情頁(yè)內(nèi)容豐富的地點(diǎn)采用加長(zhǎng)版tips,比如美食、酒店、景點(diǎn)、城市等等。
谷歌和高德哪種方式更合適,還需用戶來(lái)檢驗(yàn),不過之后的地圖設(shè)計(jì)趨勢(shì)一定是不斷的細(xì)化場(chǎng)景,針對(duì)線狀要素、面狀要素、AOI要素,探索合適的tips以表達(dá)豐富的信息。
如針對(duì)內(nèi)部信息豐富的面狀要素,在圖面上展現(xiàn)更多信息。比如有些用戶搜索“西單商圈”除了想了解商圈的位置,還想了解商圈內(nèi)的信息,如店鋪多不多,美食多不多,人流量大不大,有什么休閑設(shè)施,公共交通方便不方便等等。
感謝看了這么久,關(guān)于專題圖層的設(shè)計(jì),更類似于專題地圖,之后有機(jī)會(huì)再介紹?!暗貓D信息的展現(xiàn)”本是非常非常大的命題,作為設(shè)計(jì)師也是不斷嘗試,從小處提升。如果你對(duì)地圖有任何想法、建議、痛點(diǎn)、癢點(diǎn)、興奮點(diǎn),歡迎留言討論。
參考文獻(xiàn):
[1]一種基于視覺感受的電子地圖載負(fù)量計(jì)算方法研究,測(cè)繪與空間地理信息,2017(5)
[2]《地圖學(xué)》,江南,李少梅,崔虎平,方成,編著
本文由 @喬北一 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Pexels ,基于 CC0 協(xié)議
感覺是學(xué)過GIS的PM ??
GIS很迷人
我身邊很多GIS專業(yè)的同事,居然沒人說過GIS很迷人這種話,你是真愛它!
感謝指導(dǎo)
感覺你從百度換到了高德,上一篇帖子用的對(duì)比圖都還是百度,哈哈哈
????兩家地圖在產(chǎn)品形態(tài)上,一直是,相互借鑒,相互借鑒
qiang