地圖是對(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ò)展為多媒體形式（圖片、影像、聲音等），因此電子地圖展示的信息量更大，信息類型更豐富。

概括為以下三類：

1. 地理要素，包括自然地理要素（如水系、植被、交通等）和社會(huì)經(jīng)濟(jì)要素（如行政區(qū)等），這些有實(shí)體的地理要素，按照空間分布特征可以抽象為點(diǎn)、線、面、體四種類型。
2. 點(diǎn)、線、面之上負(fù)載的服務(wù)信息，如加油站的油號(hào)價(jià)格；高速路上的路況事件；體育場(chǎng)的賽事、餐館的內(nèi)部實(shí)景等等。服務(wù)信息的時(shí)效性較強(qiáng)，比如路況是分鐘級(jí)刷新、體育場(chǎng)賽事是天級(jí)刷新，因此手機(jī)地圖更適合承載此類信息。
3. 反映自然和社會(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è)面包括：

1. 一打開手機(jī)地圖看到的頁(yè)面：主圖。用戶可以在主圖上通過平移、放大縮小的操作選擇自己感興趣的區(qū)域；可以旋轉(zhuǎn)、切換2D/3D模式選擇自己習(xí)慣的視角（在主圖上雙指下滑有驚喜呦）；還可以切換地圖模式選擇查看的地圖信息類型，如普通地圖、地形圖、衛(wèi)星圖、衛(wèi)星圖和道路結(jié)合的混合圖（hybrid）。
2. 突出展示某個(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)更豐富的信息。
3. 突出展示一種或多種要素的頁(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é)議