地圖是對資訊的抽象表達，“地圖學”是專門研究地圖製作和表達的學科，“符號論”“地圖感受論”是著重研究地圖表達的理論。手機地圖隨著智慧機的普及迅速發展起來，但是關於手機地圖的研究遠沒有紙質地圖那麼豐富系統。本文作者僅從小處著手，將自己工作中涉及到的梳理出來，供交流參考。

手機地圖不是按照標準、按照資料繪製出來的嗎，還需要設計？

需要，太需要了！

下文先介紹手機地圖的資訊型別，再討論地圖資訊的組織和表達。

一、地圖內的資訊型別

隨著科技發展，地圖的形式和內容都在變化，核心是不變的：

地圖是客觀世界的模型，是空間資訊的載體。

以紙為媒介的地圖，集資料儲存和資料展示為一體，一張地圖上的資訊量是有限的，以展示空間資訊為主。

以電子螢幕為媒介的地圖，實現了資料儲存與資料展示的分離，並且表現形式從單一的符號擴充套件為多媒體形式（圖片、影像、聲音等）

，因此電子地圖展示的資訊量更大，資訊型別更豐富。

概括為以下三類：

地理要素，包括自然地理要素（如水系、植被、交通等）和社會經濟要素（如行政區等），這些有實體的地理要素，按照空間分佈特徵可以抽象為點、線、面、體四種類型。

點、線、面之上負載的服務資訊，如加油站的油號價格；高速路上的路況事件；體育場的賽事、餐館的內部實景等等。服務資訊的時效性較強，比如路況是分鐘級重新整理、體育場賽事是天級重新整理，因此手機地圖更適合承載此類資訊。

反映自然和社會的多維資訊，以及多維資訊之間的分佈、組合、聯絡、制約及其在時空中的變化和發展。如反映景區內人口分佈的熱力圖、反映空氣質量的霧霾地圖等。

常見地理要素型別：

二、承載資訊的主要頁面

地圖是在製圖者和使用者之間傳遞資訊的載體，製圖者需站在使用者的角度去記錄、表達資訊（地圖傳輸理論）。手機地圖資訊量大但螢幕小，

所以手機地圖用多個頁面呈現資訊，並支援互動操作，讓使用者主動選擇在螢幕內展現的內容。

主要呈現資訊的頁面包括：

一開啟手機地圖看到的頁面：主圖

。使用者可以在主圖上透過平移、放大縮小的操作選擇自己感興趣的區域；可以旋轉、切換2D/3D模式選擇自己習慣的視角（在主圖上雙指下滑有驚喜呦）；還可以切換地圖模式選擇檢視的地圖資訊型別，如普通地圖、地形圖、衛星圖、衛星圖和道路結合的混合圖（hybrid）。

突出展示某個點資訊的頁面：搜尋結果頁

。使用者直接在地圖上點選icon或地點名稱來選中一個點，也可以使用搜索框搜一個確定的點，即可到達搜尋結果頁。在該頁面使用者還可以點選進入詳情頁，檢視該地點更豐富的資訊。

突出展示一

種或多種要素的頁面：專題圖層

使用者可以開啟地圖的某些圖層，重點檢視感興趣的資訊，特別適合展示資訊的分佈和變化。

地圖設計師主要考慮的問題是：怎麼展現資訊，能夠準確、高效的傳遞給使用者。

三、不同頁面的設計思考

1。 主圖

主圖的要素包括：地理要素，數學要素（座標網、比例尺、測量控制點），輔助要素（如：圖例、指南針等）。其中地理要素是最主要的內容，主要討論地理要素的組織和表現。

1.1 地圖渲染策略：分層、分級展示資訊，保證地圖負載量在可閱讀範圍內

地理要素型別非常多，所以地圖資料是分層儲存的，應用最多的方式是按照要素型別分層，一個圖層對應一類地理要素，如：河流層、道路層等。展現的時候也是分層展現，以保證不同型別的要素有序表達，多個圖層資訊疊加在一起，保證螢幕內顯示的資訊量易於閱讀，沒有壓蓋。

（1）不同型別的地理要素按比例尺有序展示

，以高德地圖為例，從1：1000Km-1：5m共分了18級，渲染產品負責定製渲染的規則，什麼比例尺下展示哪些內容，針對每一類地理要素設定渲染出現的級別區間。以下是在文獻裡找到的比較通用的分層：

（2）同類型地理要素分級展示避免資訊過載

，邏輯上越重要的資訊出現的越早，如何定義重要程度呢，不同的地理要素依據的標準不同，比較通用的是按照規模劃分，如道路會按照通行能力分為4級，逐級展示。如果同一級別的資訊在圖面上出現了碰撞，則按照地點的熱度（各家演算法不同，搜尋量是比較通用的一個維度）賦值，將熱度低的碰撞下去。

（3）針對特殊地點進行隱藏、提級、降級處理

，比如國家軍事機關不得展示在地圖上需隱藏處理，一些地標性建築則需提級處理，還有些地點型別級別高容易將其他低型別但重要的地點碰撞下去，如村的名稱級別高，則採取降級處理。

有些使用者會反饋在地圖上找不到某個點（排除掉資料缺失的原因），還有另外兩個原因：1。因為不可以展示隱藏了，2。因為渲染規則被碰撞下去了。如南鑼鼓巷，即是放大到1：5m的比例尺，也不能把所有的地點都展示出來。

（4）前面的策略都是為了避免資訊過載採取的措施，但是對於圖面資訊太少這件事制定的策略卻很少。

有使用者反饋：開啟地圖（預設1：100m比例尺）幾乎看不到有用的資訊，將圖面縮小更沒有可參照的資訊，將圖面放到很大後可以看到參照點，但是又少了全域性觀。

資訊過少的問題一般出現在POI稀疏的地區，如下圖北京市內資訊密度剛好，但是在葫蘆到資訊明顯太少，周圍有餐廳酒店，只是沒有渲染出來。這類問題量比較少但確實存在，隨著地圖的發展這些體驗問題會被提上日程，

根據區域的資訊密度，制定不同的顯示策略

。

粗略思考的解決方案是：地圖資料是分割槽儲存的，計算1：100米比例尺下的資訊密度值（關於地圖負載量的計算方式已經有比較成熟的方法，參考文獻1），根據值給各區塊分級，在資訊稀疏區塊內，對一些型別的資訊做提級展示。

1.2 地圖符號：符號、註記、配色整體設計，保證各要素協調，層級分明，文字清晰易讀

地圖符號系統的設計包括以下幾方面內容：圖形符號、註記（文字標註）、色彩。各家地圖在做符號設計時遵循著一些通用的準則（如：圖形要形象、簡單、規則，有通用性可拓展，儘量使用慣用符，大小協調，配色有層次等），但具體到設計上各家地圖自成體系。

（1）建立系統的符號體系，給使用者穩定的認知，同一符號在不同地區、不同比例尺下、不同頁面傳遞的資訊是一致的，

谷歌地圖是國際化的地圖，尤其要考慮到不同地區人群的認知習慣，以及icon表意的準確性。

以谷歌地圖為例：在地圖配色上谷歌今年做了較大的調整，梳理了配色、增加了新的icon型別。此外

符號體系需要與背景配合，資訊才能突出出來

，谷歌也非常明顯的將陸地面的顏色明度提高，以突出地圖之上的資訊。

關於icon風格，在地圖介面上資訊多，陰刻的顏色面更大，更易於識別和定位。高德地圖之前採用過陽刻風格的icon，後調整為陰刻風格也是出於這個原因。

（2）

根據使用者的環境、和閱讀習慣設計文字註記（指地圖上的文字說明）保證清晰易讀

。註記要考慮到的視覺變數非常多包括：字型、顏色、大小、粗細、字隔、字列、特效、底襯。其中字型在手機地圖中很少用到，都是跟隨系統字型。

字型大小是最顯著的影響因素，

尤其是對於花眼使用者字越大越易讀，但越大文字間的碰撞越嚴重。高德地圖增加了字型大小的設定項，給使用者選擇權利，非常貼心。谷歌地圖則採用響應式的設計，當用戶將地圖比例尺放大到1：5m的比例尺時，道路文字會放大便於使用者閱讀（僅安卓端的道路名稱）。

除大小外，顏色和粗細對閱讀的影響也比較明顯，調整字型時需結合使用者的使用環境來調整

，設計師在室內調整好的字型後，需要拿到室外做快速的測試。在真實環境下檢測效果，雖是簡單的道理，真的能堅持下來卻很不容易。

曾有個版本使用者反饋道路名稱太淺看不清，吭哧吭哧的調重了，到戶外做測試時才發現絕大部分使用者的手機主圖都開啟了路況，自己在做設計的時候卻根本沒有考慮到，一開啟路況，道路的名稱還是淹沒在路況的濃墨重彩中。

2。 搜尋結果頁

2.1 資訊分頁組織，支援頁面間靈活切換，提高閱讀效率

搜尋結果頁的通用樣式：分圖面和tips兩部分，圖面展示位置資訊，tips展示出行資訊（距離、地址、型別等）供使用者作出出行決策。而地點之上的服務資訊以圖片、文字為主，這些資訊組成詳情頁作為結果頁的延伸，

當用戶需要檢視時再展現，不干擾使用者的出行決策

。

以高德地圖為例，最近的一次改版，強化了

搜尋結果頁和詳情頁的切換以提高瀏覽效率

。

此外還在tips展現更豐富的資訊供使用者作出出行決策，減少了頁面跳轉。詳情頁的資訊也越來越豐富，除常見的文字、圖片外，谷歌地圖還支援檢視地點內部實景，對於提前瞭解餐廳、酒店的內部環境非常有用。甚至可以想象一下，之後地圖也會透過小影片的方式展示資訊，比如檢視景點的短影片瞭解景點整體的情況作出出行決策。

2.2 多樣的搜尋結果頁樣式，方便表現多樣的地理要素

（1）有實體的地理要素，按照空間分佈特徵可以抽象為點、線、面、體四種類型，設計師在做“符號”設計的時候，

根據要素的特徵去表現，直觀的展示樣式有利於快速的識別資訊。

透過扎點氣泡來表示點狀要素，對於不同的地點型別則透過氣泡內的icon樣式來區分，這點對於品牌的透出很有效，如麥當勞。（蘋果地圖在icon上做的很細膩，值得借鑑）

透過線條來表示線狀要素，如道路、河流；透過圈定輪廓來表現AOI，如頤和園、醫院；透過壓蓋面來表示面狀要素，如西城區、西單商圈。以高德地圖和蘋果地圖比較，顯然線狀、面狀的表現樣式更易讀（高德地圖的配色、粗細有待最佳化）

（2）隨著地圖內的資訊越來越豐富，使用者使用地圖的場景也越來越豐富，原有的“小tips”已經不能滿足豐富的資訊來，

需多樣的tips樣式以承載越來越豐富的資訊，方便使用者在搜尋結果頁快速讀取。

谷歌地圖設計了四種模版，分別表現不同型別的地點。最常見的是通用模版，如果地點有豐富資訊則採用有圖片模版，如果在地圖上戳公交站則突出展示公交路線資訊，最後是廣告模版。

高德地圖則設計了普通tips和加長版tips兩種模版，詳情頁內容豐富的地點採用加長版tips，比如美食、酒店、景點、城市等等。

谷歌和高德哪種方式更合適，還需使用者來檢驗，不過之後的

地圖設計趨勢一定是不斷的細化場景，針對線狀要素、面狀要素、AOI要素，探索合適的tips以表達豐富的資訊。

如針對內部資訊豐富的面狀要素，在圖面上展現更多資訊。比如有些使用者搜尋“西單商圈”除了想了解商圈的位置，還想了解商圈內的資訊，如店鋪多不多，美食多不多，人流量大不大，有什麼休閒設施，公共交通方便不方便等等。

感謝看了這麼久，關於專題圖層的設計，更類似於專題地圖，之後有機會再介紹。“地圖資訊的展現”本是非常非常大的命題，作為設計師也是不斷嘗試，從小處提升。如果你對地圖有任何想法、建議、痛點、癢點、興奮點，歡迎留言討論。

參考文獻：

［1］一種基於視覺感受的電子地圖載負量計算方法研究，測繪與空間地理資訊，2017（5）

［2］《地圖學》，江南，李少梅，崔虎平，方成，編著

本文由 @喬北一 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基於 CC0 協議