引言

如今人們出行都離不開手機，都通過手機接觸過互聯網地圖，手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢，形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前，讓我們先看看地圖的發展歷程。

一、地圖的發展

地圖擁有著古老的歷史，記錄了人類對世界認知的演進過程，經歷過泥板、壁畫、羊皮、紙張等載體，依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。

隨著照相機和飛機的發展，出現了航空攝影測量技術，讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展，讓紙媒地圖開始融入人們的生活，地圖的平面設計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。

再隨著衛星影像、瓦片地圖技術和互聯網的發展，人們可以日常地使用電子地圖。受限于網絡速度的限制，矢量地圖應運而生，在特定范圍顯示相應的矢量瓦片信息，讓互聯網地圖的形狀趨向統一化。

iPhone 革命性的觸屏體驗，通過手勢與地圖進行直觀自然的交互體驗，結合內置 GPS、陀螺儀傳感器，小藍點成為地圖定位的通用標志，激發更多地圖的功能和創意。

二、手機地圖的創新體驗

手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢，結合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。

手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換，幫助人們更好的映射到真實世界。

可視化信息是互聯網地圖的主要優勢之一，將數據轉化為可視化圖形，歸類在不同的數據層，可以單個或多個層級疊加在地圖上展示，傳達位置上的數據。

底圖是手機地圖的基礎，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內容不斷細化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內容。

三、手勢交互：全方位呈現地圖立面

觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。

1. 單指拖動

拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。

2. 單指劃動

當用戶想快速翻閱時會撥走要略過的內容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區域，是比拖動要快速的瀏覽方式。

3. 雙指拖動縮放

物理控件只能讓地圖根據屏幕中心進行縮放，而觸屏縮放能讓地圖根據兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認知。

4. 雙指劃動縮放

劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標位置。

5. 單指快捷縮放

為了讓用戶能單手并可控地縮放地圖，不少地圖都設計了自己獨有的縮放方式。zenly，通過屏幕兩側的邊緣，直接完成地圖的最大和最小縮放跨度。

snapchat 拖動右側邊可緣喚起縮放滑塊，并使用 emoji 來表達距離，充滿幽默感。

騰訊地圖，通過劃動右側的滑塊，實現單手順滑地縮放，滑塊也支持劃動手勢。

百度地圖，通過點擊一個縮放控件，讓地圖以當前中心點進行分段縮放。

6. 無限循環的地圖

地球是圓的，可以無限巡航，一些應用將縮到最小的世界地圖做循環處理，以呼應地球的循環轉動體驗。

7. 方向視角切換

在陌生的環境用戶未必能分得清楚南北方向，利用手機的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉到用戶面向的方向，有助于用戶二次確認自己的定位。

更多地圖使用了 2D/3D 視角的切換方式，2D 是南北向的標準地圖，3D 是用戶面向方向的地圖，幫助用戶更直觀地對應物理空間。

8. 旋轉方向

可通過雙指或陀螺儀旋轉地圖，地圖上的文字也做出相應調整，保持水平、沿道路方向調整，以保證可讀性。

3D 的旋轉也一樣，在保持水平和沿道路方向的同時，文字保持垂直。

當縮小到足夠遠時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。

9. 雙指拖動調整視角

地圖 3D 視角也支持自由調節，通過雙指平行的上下滑動，可以平順調整 3D 視圖鳥瞰的角度。

在地圖的最低視角做回彈處理，生動不呆板。

遠近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進時有俯沖的感覺。

四、可視化信息：生動呈現地圖動態數據

從古代開始，人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記，地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢，就是能提供實時的信息數據。將數據標記在相應位置的坐標上，并分別歸類在不同的層級，疊加在地圖上查看。

地圖的常用數據形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內容。

1. 點數據

點數據是單個地理坐標上的標記，代表該位置上的信息，是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型，使用頻率越高的樣式越簡潔，地標建筑做形象化圖形標識。

聚合圖在地圖上呈現也是點數據，它實質是顯示一定區域內的信息聚合，但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多，在地圖上信息過于密集。

百度的充電樁地圖就是以區域聚合充電樁數量，根據縮放調整數據的聚合。

騰訊地圖的文博地圖也是聚合圖，并根據文物的類型做了快速篩選。

2. 線數據

線數據在地圖上呈現為線性，一般都沿著可行道路展示信息。導航路線是最常用的線數據，它提供具體行駛路線方案，并實時展示線路行駛的進度與方向。

也有粗略表示進度的線路數據，如快遞的物流進度路線就不需要具體的實際線路，只需要示意大致進程。

街景地圖則僅展示有全景圖的道路范圍，不提供進度與方向。

3. 面數據

面數據要展示地圖上的具體區域，疫情環境下出現了區域風控需求，需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。

zenly 使用了反向的面數據，根據用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。

4. 熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區域的熱度，熱力圖的數據不會指向地圖上具體的位置，它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。

高德地圖的空氣質量地圖，使用聚合圖作為空氣質量評分，熱力圖作為空氣質量范圍。

snapchat 使用熱力圖來表現該區域用戶發布動態的熱度，引導用戶發現內容，由于熱力圖不指向具體位置，能更好的保護用戶隱私。

熱力圖并不局限于面，路線也可以反映道路的熱度。Strava 利用用戶的騎行數據，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經地點。

路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。

5. 讓數據動起來

地圖是安靜的，但真實世界是忙碌的，讓數據動起來，給地圖增添更多情感化設計，緩解用戶的等待壓力。

忙碌的商家

外賣小哥端午節雨中送餐

公交努力奔來

五、底圖：為更好呈現信息的色彩系統

手機地圖的底圖最常使用矢量瓦片地圖，因為數據體積小，在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域，不展示具體細節，因此需要通過顏色去傳達不同區域的屬性或功能。

人們對于顏色和環境是能建立一定的聯想的，如綠色想到大自然，藍色想到水，紅色想到警示。根據人們對色彩的聯想，給矢量地圖中不同屬性的區域進行配色，幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出 700 多種顏色，最后簡化為 25 個顏色，形成了地圖的色彩系統。

工具類地圖應用以地圖為核心基礎，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的，各地圖廠商的標準地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關心的數據。

而一些垂直場景的應用，地圖區域功能的描述相對次要，通常會對地圖的用色進行大幅度精簡。以打車應用為例，地圖用色少且色調相近，突出核心的打車狀態信息顏色，同時體現應用的品牌特色。

不少運用地圖的概念設計中，會更極致的使用單色系地圖，僅突出數據信息的顏色，充滿未來感。

六、未來的地圖

隨著網絡速度的提升，手機硬件的升級，順應 AR/VR 技術的發展，地圖逐步進入 3D 和全真時代。蘋果地圖在現有的地圖的 3D 視圖下，已對地標建筑賦予更多細節，并在夜間模式模擬了燈光效果。

3D 地圖就像是虛擬世界中的基礎建設一樣，蘋果地圖添加精細地標模型后，同時應用到 Carplay 的導航中，在駕駛時可直觀看到與現實世界對應的 3D 地標。

谷歌更是提出“沉浸式視圖”的高保真 3D 地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。

同時全真模擬日照和天氣系統，和現實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化，地圖的數據也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助 AR 設備，人們無需對照地圖即可完成導航。

結語

地圖歷來是人們借助藝術的手法，以極具想象力的方式對世界進行再現，它遵循科學測量的法則，使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知，而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球，而是呈現人們眼中的世界，它寄托著人們對美好生活的想象，更好的認識、探索和規劃世界。

歡迎關注作者微信公眾號：「騰訊ISUX」