地圖是對信息的抽象表達(dá)，“地圖學(xué)”是專門研究地圖制作和表達(dá)的學(xué)科，“符號論”“地圖感受論”是著重研究地圖表達(dá)的理論。手機(jī)地圖隨著智能機(jī)的普及迅速發(fā)展起來，但是關(guān)于手機(jī)地圖的研究遠(yuǎn)沒有紙質(zhì)地圖那么豐富系統(tǒng)。本文作者僅從小處著手，將自己工作中涉及到的梳理出來，供交流參考。

手機(jī)地圖不是按照標(biāo)準(zhǔn)、按照數(shù)據(jù)繪制出來的嗎，還需要設(shè)計(jì)？

需要，太需要了！

下文先介紹手機(jī)地圖的信息類型，再討論地圖信息的組織和表達(dá)。

一、地圖內(nèi)的信息類型

隨著科技發(fā)展，地圖的形式和內(nèi)容都在變化，核心是不變的：地圖是客觀世界的模型，是空間信息的載體。

以紙為媒介的地圖，集數(shù)據(jù)存儲和數(shù)據(jù)展示為一體，一張地圖上的信息量是有限的，以展示空間信息為主。以電子屏幕為媒介的地圖，實(shí)現(xiàn)了數(shù)據(jù)存儲與數(shù)據(jù)展示的分離，并且表現(xiàn)形式從單一的符號擴(kuò)展為多媒體形式（圖片、影像、聲音等），因此電子地圖展示的信息量更大，信息類型更豐富。

概括為以下三類：

1. 地理要素，包括自然地理要素（如水系、植被、交通等）和社會經(jīng)濟(jì)要素（如行政區(qū)等），這些有實(shí)體的地理要素，按照空間分布特征可以抽象為點(diǎn)、線、面、體四種類型。
2. 點(diǎn)、線、面之上負(fù)載的服務(wù)信息，如加油站的油號價格；高速路上的路況事件；體育場的賽事、餐館的內(nèi)部實(shí)景等等。服務(wù)信息的時效性較強(qiáng)，比如路況是分鐘級刷新、體育場賽事是天級刷新，因此手機(jī)地圖更適合承載此類信息。
3. 反映自然和社會的多維信息，以及多維信息之間的分布、組合、聯(lián)系、制約及其在時空中的變化和發(fā)展。如反映景區(qū)內(nèi)人口分布的熱力圖、反映空氣質(zhì)量的霧霾地圖等。

常見地理要素類型：

二、承載信息的主要頁面

地圖是在制圖者和使用者之間傳遞信息的載體，制圖者需站在使用者的角度去記錄、表達(dá)信息（地圖傳輸理論）。手機(jī)地圖信息量大但屏幕小，所以手機(jī)地圖用多個頁面呈現(xiàn)信息，并支持交互操作，讓用戶主動選擇在屏幕內(nèi)展現(xiàn)的內(nèi)容。

主要呈現(xiàn)信息的頁面包括：

1. 一打開手機(jī)地圖看到的頁面：主圖。用戶可以在主圖上通過平移、放大縮小的操作選擇自己感興趣的區(qū)域；可以旋轉(zhuǎn)、切換2D/3D模式選擇自己習(xí)慣的視角（在主圖上雙指下滑有驚喜呦）；還可以切換地圖模式選擇查看的地圖信息類型，如普通地圖、地形圖、衛(wèi)星圖、衛(wèi)星圖和道路結(jié)合的混合圖（hybrid）。
2. 突出展示某個點(diǎn)信息的頁面：搜索結(jié)果頁。用戶直接在地圖上點(diǎn)擊icon或地點(diǎn)名稱來選中一個點(diǎn)，也可以使用搜索框搜一個確定的點(diǎn)，即可到達(dá)搜索結(jié)果頁。在該頁面用戶還可以點(diǎn)擊進(jìn)入詳情頁，查看該地點(diǎn)更豐富的信息。
3. 突出展示一種或多種要素的頁面：專題圖層用戶可以開啟地圖的某些圖層，重點(diǎn)查看感興趣的信息，特別適合展示信息的分布和變化。地圖設(shè)計(jì)師主要考慮的問題是：怎么展現(xiàn)信息，能夠準(zhǔn)確、高效的傳遞給用戶。

三、不同頁面的設(shè)計(jì)思考

1. 主圖

主圖的要素包括：地理要素，數(shù)學(xué)要素（坐標(biāo)網(wǎng)、比例尺、測量控制點(diǎn)），輔助要素（如：圖例、指南針等）。其中地理要素是最主要的內(nèi)容，主要討論地理要素的組織和表現(xiàn)。

1.1 地圖渲染策略：分層、分級展示信息，保證地圖負(fù)載量在可閱讀范圍內(nèi)

地理要素類型非常多，所以地圖數(shù)據(jù)是分層存儲的，應(yīng)用最多的方式是按照要素類型分層，一個圖層對應(yīng)一類地理要素，如：河流層、道路層等。展現(xiàn)的時候也是分層展現(xiàn)，以保證不同類型的要素有序表達(dá)，多個圖層信息疊加在一起，保證屏幕內(nèi)顯示的信息量易于閱讀，沒有壓蓋。

（1）不同類型的地理要素按比例尺有序展示，以高德地圖為例，從1：1000Km-1：5m共分了18級，渲染產(chǎn)品負(fù)責(zé)定制渲染的規(guī)則，什么比例尺下展示哪些內(nèi)容，針對每一類地理要素設(shè)置渲染出現(xiàn)的級別區(qū)間。以下是在文獻(xiàn)里找到的比較通用的分層：

?（2）同類型地理要素分級展示避免信息過載，邏輯上越重要的信息出現(xiàn)的越早，如何定義重要程度呢，不同的地理要素依據(jù)的標(biāo)準(zhǔn)不同，比較通用的是按照規(guī)模劃分，如道路會按照通行能力分為4級，逐級展示。如果同一級別的信息在圖面上出現(xiàn)了碰撞，則按照地點(diǎn)的熱度（各家算法不同，搜索量是比較通用的一個維度）賦值，將熱度低的碰撞下去。

（3）針對特殊地點(diǎn)進(jìn)行隱藏、提級、降級處理，比如國家軍事機(jī)關(guān)不得展示在地圖上需隱藏處理，一些地標(biāo)性建筑則需提級處理，還有些地點(diǎn)類型級別高容易將其他低類型但重要的地點(diǎn)碰撞下去，如村的名稱級別高，則采取降級處理。

有些用戶會反饋在地圖上找不到某個點(diǎn)（排除掉數(shù)據(jù)缺失的原因），還有另外兩個原因：1.因?yàn)椴豢梢哉故倦[藏了，2.因?yàn)殇秩疽?guī)則被碰撞下去了。如南鑼鼓巷，即是放大到1:5m的比例尺，也不能把所有的地點(diǎn)都展示出來。

（4）前面的策略都是為了避免信息過載采取的措施，但是對于圖面信息太少這件事制定的策略卻很少。有用戶反饋：打開地圖（默認(rèn)1：100m比例尺）幾乎看不到有用的信息，將圖面縮小更沒有可參照的信息，將圖面放到很大后可以看到參照點(diǎn)，但是又少了全局觀。

信息過少的問題一般出現(xiàn)在POI稀疏的地區(qū)，如下圖北京市內(nèi)信息密度剛好，但是在葫蘆到信息明顯太少，周圍有餐廳酒店，只是沒有渲染出來。這類問題量比較少但確實(shí)存在，隨著地圖的發(fā)展這些體驗(yàn)問題會被提上日程，根據(jù)區(qū)域的信息密度，制定不同的顯示策略。

粗略思考的解決方案是：地圖數(shù)據(jù)是分區(qū)存儲的，計(jì)算1：100米比例尺下的信息密度值（關(guān)于地圖負(fù)載量的計(jì)算方式已經(jīng)有比較成熟的方法，參考文獻(xiàn)1），根據(jù)值給各區(qū)塊分級，在信息稀疏區(qū)塊內(nèi)，對一些類型的信息做提級展示。

1.2 地圖符號：符號、注記、配色整體設(shè)計(jì)，保證各要素協(xié)調(diào)，層級分明，文字清晰易讀

地圖符號系統(tǒng)的設(shè)計(jì)包括以下幾方面內(nèi)容：圖形符號、注記（文字標(biāo)注）、色彩。各家地圖在做符號設(shè)計(jì)時遵循著一些通用的準(zhǔn)則（如：圖形要形象、簡單、規(guī)則，有通用性可拓展，盡量使用慣用符，大小協(xié)調(diào)，配色有層次等），但具體到設(shè)計(jì)上各家地圖自成體系。

（1）建立系統(tǒng)的符號體系，給用戶穩(wěn)定的認(rèn)知，同一符號在不同地區(qū)、不同比例尺下、不同頁面?zhèn)鬟f的信息是一致的，谷歌地圖是國際化的地圖，尤其要考慮到不同地區(qū)人群的認(rèn)知習(xí)慣，以及icon表意的準(zhǔn)確性。

以谷歌地圖為例：在地圖配色上谷歌今年做了較大的調(diào)整，梳理了配色、增加了新的icon類型。此外符號體系需要與背景配合，信息才能突出出來，谷歌也非常明顯的將陸地面的顏色明度提高，以突出地圖之上的信息。

關(guān)于icon風(fēng)格，在地圖界面上信息多，陰刻的顏色面更大，更易于識別和定位。高德地圖之前采用過陽刻風(fēng)格的icon，后調(diào)整為陰刻風(fēng)格也是出于這個原因。

（2）根據(jù)用戶的環(huán)境、和閱讀習(xí)慣設(shè)計(jì)文字注記（指地圖上的文字說明）保證清晰易讀。注記要考慮到的視覺變量非常多包括：字體、顏色、大小、粗細(xì)、字隔、字列、特效、底襯。其中字體在手機(jī)地圖中很少用到，都是跟隨系統(tǒng)字體。

字體大小是最顯著的影響因素，尤其是對于花眼用戶字越大越易讀，但越大文字間的碰撞越嚴(yán)重。高德地圖增加了字體大小的設(shè)置項(xiàng)，給用戶選擇權(quán)利，非常貼心。谷歌地圖則采用響應(yīng)式的設(shè)計(jì)，當(dāng)用戶將地圖比例尺放大到1:5m的比例尺時，道路文字會放大便于用戶閱讀（僅安卓端的道路名稱）。

除大小外，顏色和粗細(xì)對閱讀的影響也比較明顯，調(diào)整字體時需結(jié)合用戶的使用環(huán)境來調(diào)整，設(shè)計(jì)師在室內(nèi)調(diào)整好的字體后，需要拿到室外做快速的測試。在真實(shí)環(huán)境下檢測效果，雖是簡單的道理，真的能堅(jiān)持下來卻很不容易。

曾有個版本用戶反饋道路名稱太淺看不清，吭哧吭哧的調(diào)重了，到戶外做測試時才發(fā)現(xiàn)絕大部分用戶的手機(jī)主圖都開啟了路況，自己在做設(shè)計(jì)的時候卻根本沒有考慮到，一打開路況，道路的名稱還是淹沒在路況的濃墨重彩中。

2. 搜索結(jié)果頁

2.1 信息分頁組織，支持頁面間靈活切換，提高閱讀效率

搜索結(jié)果頁的通用樣式：分圖面和tips兩部分，圖面展示位置信息，tips展示出行信息（距離、地址、類型等）供用戶作出出行決策。而地點(diǎn)之上的服務(wù)信息以圖片、文本為主，這些信息組成詳情頁作為結(jié)果頁的延伸，當(dāng)用戶需要查看時再展現(xiàn)，不干擾用戶的出行決策。

以高德地圖為例，最近的一次改版，強(qiáng)化了搜索結(jié)果頁和詳情頁的切換以提高瀏覽效率。

此外還在tips展現(xiàn)更豐富的信息供用戶作出出行決策，減少了頁面跳轉(zhuǎn)。詳情頁的信息也越來越豐富，除常見的文字、圖片外，谷歌地圖還支持查看地點(diǎn)內(nèi)部實(shí)景，對于提前了解餐廳、酒店的內(nèi)部環(huán)境非常有用。甚至可以想象一下，之后地圖也會通過小視頻的方式展示信息，比如查看景點(diǎn)的短視頻了解景點(diǎn)整體的情況作出出行決策。

2.2 多樣的搜索結(jié)果頁樣式，方便表現(xiàn)多樣的地理要素

（1）有實(shí)體的地理要素，按照空間分布特征可以抽象為點(diǎn)、線、面、體四種類型，設(shè)計(jì)師在做“符號”設(shè)計(jì)的時候，根據(jù)要素的特征去表現(xiàn)，直觀的展示樣式有利于快速的識別信息。

通過扎點(diǎn)氣泡來表示點(diǎn)狀要素，對于不同的地點(diǎn)類型則通過氣泡內(nèi)的icon樣式來區(qū)分，這點(diǎn)對于品牌的透出很有效，如麥當(dāng)勞。（蘋果地圖在icon上做的很細(xì)膩，值得借鑒）

通過線條來表示線狀要素，如道路、河流；通過圈定輪廓來表現(xiàn)AOI，如頤和園、醫(yī)院；通過壓蓋面來表示面狀要素，如西城區(qū)、西單商圈。以高德地圖和蘋果地圖比較，顯然線狀、面狀的表現(xiàn)樣式更易讀（高德地圖的配色、粗細(xì)有待優(yōu)化）

（2）隨著地圖內(nèi)的信息越來越豐富，用戶使用地圖的場景也越來越豐富，原有的“小tips”已經(jīng)不能滿足豐富的信息來，需多樣的tips樣式以承載越來越豐富的信息，方便用戶在搜索結(jié)果頁快速讀取。

谷歌地圖設(shè)計(jì)了四種模版，分別表現(xiàn)不同類型的地點(diǎn)。最常見的是通用模版，如果地點(diǎn)有豐富信息則采用有圖片模版，如果在地圖上戳公交站則突出展示公交路線信息，最后是廣告模版。

高德地圖則設(shè)計(jì)了普通tips和加長版tips兩種模版，詳情頁內(nèi)容豐富的地點(diǎn)采用加長版tips，比如美食、酒店、景點(diǎn)、城市等等。

谷歌和高德哪種方式更合適，還需用戶來檢驗(yàn)，不過之后的地圖設(shè)計(jì)趨勢一定是不斷的細(xì)化場景，針對線狀要素、面狀要素、AOI要素，探索合適的tips以表達(dá)豐富的信息。

如針對內(nèi)部信息豐富的面狀要素，在圖面上展現(xiàn)更多信息。比如有些用戶搜索“西單商圈”除了想了解商圈的位置，還想了解商圈內(nèi)的信息，如店鋪多不多，美食多不多，人流量大不大，有什么休閑設(shè)施，公共交通方便不方便等等。

感謝看了這么久，關(guān)于專題圖層的設(shè)計(jì)，更類似于專題地圖，之后有機(jī)會再介紹?！暗貓D信息的展現(xiàn)”本是非常非常大的命題，作為設(shè)計(jì)師也是不斷嘗試，從小處提升。如果你對地圖有任何想法、建議、痛點(diǎn)、癢點(diǎn)、興奮點(diǎn)，歡迎留言討論。

參考文獻(xiàn)：

[1]一種基于視覺感受的電子地圖載負(fù)量計(jì)算方法研究，測繪與空間地理信息，2017(5)

[2]《地圖學(xué)》，江南，李少梅，崔虎平，方成，編著

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

題圖來自 Pexels ，基于 CC0 協(xié)議