古往今來(lái)，人們通過(guò)地圖認(rèn)識(shí)世界，并遵循科學(xué)測(cè)量的法則，使用幾何的線(xiàn)條和形狀對(duì)地球的進(jìn)行抽象化。地圖也反映了制作者對(duì)世界的認(rèn)知，而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀(guān)。本文分析了數(shù)字時(shí)代下的地圖設(shè)計(jì)，一起來(lái)看看吧。

如今人們出行都離不開(kāi)手機(jī)，都通過(guò)手機(jī)接觸過(guò)互聯(lián)網(wǎng)地圖，手機(jī)地圖憑借著可手勢(shì)直觀(guān)操作、地圖可快速迭代、信息可實(shí)時(shí)更新的優(yōu)勢(shì)，形成了成熟的地圖交互體驗(yàn)。在解析手機(jī)地圖的體驗(yàn)設(shè)計(jì)前，讓我們先看看地圖的發(fā)展歷程。

一、地圖的發(fā)展

地圖擁有著古老的歷史，記錄了人類(lèi)對(duì)世界認(rèn)知的演進(jìn)過(guò)程，經(jīng)歷過(guò)泥板、壁畫(huà)、羊皮、紙張等載體，依據(jù)使用和文化需要擁有著豐富多樣的美術(shù)形式。不同時(shí)期、材質(zhì)、美術(shù)形式的地圖見(jiàn)證人們認(rèn)識(shí)世界的過(guò)程。

隨著照相機(jī)和飛機(jī)的發(fā)展，出現(xiàn)了航空攝影測(cè)量技術(shù)，讓地圖的測(cè)繪精準(zhǔn)度達(dá)到頂峰。交通、旅游、印刷業(yè)的發(fā)展，讓紙媒地圖開(kāi)始融入人們的生活，地圖的平面設(shè)計(jì)更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。

再隨著衛(wèi)星影像、瓦片地圖技術(shù)和互聯(lián)網(wǎng)的發(fā)展，人們可以日常地使用電子地圖。受限于網(wǎng)絡(luò)速度的限制，矢量地圖應(yīng)運(yùn)而生，在特定范圍顯示相應(yīng)的矢量瓦片信息，讓互聯(lián)網(wǎng)地圖的形狀趨向統(tǒng)一化。

iPhone革命性的觸屏體驗(yàn)，通過(guò)手勢(shì)與地圖進(jìn)行直觀(guān)自然的交互體驗(yàn)，結(jié)合內(nèi)置GPS、陀螺儀傳感器，小藍(lán)點(diǎn)成為地圖定位的通用標(biāo)志，激發(fā)更多地圖的功能和創(chuàng)意。

二、手機(jī)地圖的創(chuàng)新體驗(yàn)

手機(jī)地圖繼承了互聯(lián)網(wǎng)電子地圖的可快速迭代、信息可實(shí)時(shí)更新的優(yōu)勢(shì)，結(jié)合觸屏手勢(shì)操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類(lèi)服務(wù)和社交娛樂(lè)中，這些場(chǎng)景也不斷豐富和完善著地圖的信息。

1. 手勢(shì)交互：讓地圖從移動(dòng)到縮放都高效地動(dòng)起來(lái)，激勵(lì)人們探索更廣的區(qū)域。更革命性的是讓地圖從平面到立體之間的順滑轉(zhuǎn)換，幫助人們更好的映射到真實(shí)世界。
2. 可視化信息：是互聯(lián)網(wǎng)地圖的主要優(yōu)勢(shì)之一，將數(shù)據(jù)轉(zhuǎn)化為可視化圖形，歸類(lèi)在不同的數(shù)據(jù)層，可以單個(gè)或多個(gè)層級(jí)疊加在地圖上展示，傳達(dá)位置上的數(shù)據(jù)。
3. 底圖：是手機(jī)地圖的基礎(chǔ)，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內(nèi)容不斷細(xì)化和歸類(lèi)，在不同的縮放層級(jí)下，展示符合用戶(hù)查看場(chǎng)景的核心內(nèi)容。

三、手勢(shì)交互：全方位呈現(xiàn)地圖立面

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

1. 單指拖動(dòng)

拖動(dòng)是地圖最基本的閱讀操作，一般以用戶(hù)的定位為初始中心點(diǎn)，用戶(hù)可以有目的有方向地查看附近的地點(diǎn)。

2. 單指劃動(dòng)

當(dāng)用戶(hù)想快速翻閱時(shí)會(huì)撥走要略過(guò)的內(nèi)容，劃動(dòng)模擬了這一行為。地圖被劃動(dòng)后也會(huì)模擬物理世界以一定的摩擦力停下，向用戶(hù)展示地圖的新區(qū)域，是比拖動(dòng)要快速的瀏覽方式。

3. 雙指拖動(dòng)縮放

物理控件只能讓地圖根據(jù)屏幕中心進(jìn)行縮放，而觸屏縮放能讓地圖根據(jù)兩個(gè)指尖的中心點(diǎn)縮放，并同時(shí)位移，符合用戶(hù)空間操控認(rèn)知。

4. 雙指劃動(dòng)縮放

劃動(dòng)縮放和劃動(dòng)一樣，讓用戶(hù)以更輕量的手勢(shì)加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶(hù)快速找到目標(biāo)位置。

5. 單指快捷縮放

為了讓用戶(hù)能單手并可控地縮放地圖，不少地圖都設(shè)計(jì)了自己獨(dú)有的縮放方式。

zenly，通過(guò)屏幕兩側(cè)的邊緣，直接完成地圖的最大和最小縮放跨度。

snapchat拖動(dòng)右側(cè)邊可緣喚起縮放滑塊，并使用emoji來(lái)表達(dá)距離，充滿(mǎn)幽默感。

騰訊地圖，通過(guò)劃動(dòng)右側(cè)的滑塊，實(shí)現(xiàn)單手順滑地縮放，滑塊也支持劃動(dòng)手勢(shì)。

百度地圖，通過(guò)點(diǎn)擊一個(gè)縮放控件，讓地圖以當(dāng)前中心點(diǎn)進(jìn)行分段縮放。

6. 無(wú)限循環(huán)的地圖

地球是圓的，可以無(wú)限巡航，一些應(yīng)用將縮到最小的世界地圖做循環(huán)處理，以呼應(yīng)地球的循環(huán)轉(zhuǎn)動(dòng)體驗(yàn)。

7. 方向視角切換

在陌生的環(huán)境用戶(hù)未必能分得清楚南北方向，利用手機(jī)的陀螺儀，可以告知用戶(hù)正在面向的方向。定位按鈕的二次點(diǎn)擊，將地圖從南北向轉(zhuǎn)到用戶(hù)面向的方向，有助于用戶(hù)二次確認(rèn)自己的定位。

更多地圖使用了2D/3D視角的切換方式，2D是南北向的標(biāo)準(zhǔn)地圖，3D是用戶(hù)面向方向的地圖，幫助用戶(hù)更直觀(guān)地對(duì)應(yīng)物理空間。

8. 旋轉(zhuǎn)方向

可通過(guò)雙指或陀螺儀旋轉(zhuǎn)地圖，地圖上的文字也做出相應(yīng)調(diào)整，保持水平、沿道路方向調(diào)整，以保證可讀性。

3D的旋轉(zhuǎn)也一樣，在保持水平和沿道路方向的同時(shí)，文字保持垂直。

當(dāng)縮小到足夠遠(yuǎn)時(shí)，用戶(hù)面向的方向意義就不大了，蘋(píng)果在縮小到一定范圍時(shí)，將地圖回彈保持南北向。

9. 雙指拖動(dòng)調(diào)整視角

地圖3D視角也支持自由調(diào)節(jié)，通過(guò)雙指平行的上下滑動(dòng)，可以平順調(diào)整3D視圖鳥(niǎo)瞰的角度。

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

遠(yuǎn)近也能影響鳥(niǎo)瞰的視角變化，視角越低越接近平視，拉進(jìn)時(shí)有俯沖的感覺(jué)。

四、可視化信息：生動(dòng)呈現(xiàn)地圖動(dòng)態(tài)數(shù)據(jù)

從古代開(kāi)始，人們就已經(jīng)懂得通過(guò)繪制山脈、河流、海洋、建筑等對(duì)重要位置信息進(jìn)行標(biāo)記，地圖本身就是一個(gè)信息可視化工具。

互聯(lián)網(wǎng)地圖最大的優(yōu)勢(shì)，就是能提供實(shí)時(shí)的信息數(shù)據(jù)。將數(shù)據(jù)標(biāo)記在相應(yīng)位置的坐標(biāo)上，并分別歸類(lèi)在不同的層級(jí)，疊加在地圖上查看。

地圖的常用數(shù)據(jù)形式可大致分為：點(diǎn)、線(xiàn)、面、熱力圖等，一個(gè)地圖可同時(shí)喚起多種類(lèi)型、多個(gè)圖層的信息內(nèi)容。

1. 點(diǎn)數(shù)據(jù)

點(diǎn)數(shù)據(jù)是單個(gè)地理坐標(biāo)上的標(biāo)記，代表該位置上的信息，是地圖上最常用的數(shù)據(jù)信息。地圖通過(guò)不同的小圖標(biāo)來(lái)區(qū)分位置類(lèi)型，使用頻率越高的樣式越簡(jiǎn)潔，地標(biāo)建筑做形象化圖形標(biāo)識(shí)。

2. 聚合圖

在地圖上呈現(xiàn)也是點(diǎn)數(shù)據(jù)，它實(shí)質(zhì)是顯示一定區(qū)域內(nèi)的信息聚合，但不強(qiáng)調(diào)具體的區(qū)域。聚合圖可以避免因?yàn)樵搮^(qū)域的點(diǎn)數(shù)據(jù)過(guò)多，在地圖上信息過(guò)于密集。

百度的充電樁地圖就是以區(qū)域聚合充電樁數(shù)量，根據(jù)縮放調(diào)整數(shù)據(jù)的聚合。

騰訊地圖的文博地圖也是聚合圖，并根據(jù)文物的類(lèi)型做了快速篩選。

3. 線(xiàn)數(shù)據(jù)

線(xiàn)數(shù)據(jù)在地圖上呈現(xiàn)為線(xiàn)性，一般都沿著可行道路展示信息。導(dǎo)航路線(xiàn)是最常用的線(xiàn)數(shù)據(jù)，它提供具體行駛路線(xiàn)方案，并實(shí)時(shí)展示線(xiàn)路行駛的進(jìn)度與方向。

也有粗略表示進(jìn)度的線(xiàn)路數(shù)據(jù)，如快遞的物流進(jìn)度路線(xiàn)就不需要具體的實(shí)際線(xiàn)路，只需要示意大致進(jìn)程。

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

4. 面數(shù)據(jù)

面數(shù)據(jù)要展示地圖上的具體區(qū)域，疫情環(huán)境下出現(xiàn)了區(qū)域風(fēng)控需求，需通過(guò)了面數(shù)據(jù)畫(huà)出區(qū)域范圍。疫情地圖采用了聚合圖、面區(qū)塊兩種數(shù)據(jù)形式。

zenly使用了反向的面數(shù)據(jù)，根據(jù)用戶(hù)的行走記錄，將用戶(hù)走過(guò)的范圍擦亮，用戶(hù)未走過(guò)的地方是一塊彩色的平面，充滿(mǎn)娛樂(lè)感。

5. 熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區(qū)域的熱度，熱力圖的數(shù)據(jù)不會(huì)指向地圖上具體的位置，它能呈現(xiàn)熱度變化的趨勢(shì)。百度地圖用熱力圖直觀(guān)展示地區(qū)上的擁擠程度。

高德地圖的空氣質(zhì)量地圖，使用聚合圖作為空氣質(zhì)量評(píng)分，熱力圖作為空氣質(zhì)量范圍。

snapchat使用熱力圖來(lái)表現(xiàn)該區(qū)域用戶(hù)發(fā)布動(dòng)態(tài)的熱度，引導(dǎo)用戶(hù)發(fā)現(xiàn)內(nèi)容，由于熱力圖不指向具體位置，能更好的保護(hù)用戶(hù)隱私。

熱力圖并不局限于面，路線(xiàn)也可以反映道路的熱度。Strava利用用戶(hù)的騎行數(shù)據(jù)，生成光點(diǎn)線(xiàn)路的熱力圖，可以看出哪些是熱門(mén)的騎行線(xiàn)路和必經(jīng)地點(diǎn)。

路況也是一種線(xiàn)性的熱力圖，路況使用按段測(cè)量的方式，熱力值的梯度相對(duì)跳躍。

6. 讓數(shù)據(jù)動(dòng)起來(lái)

地圖是安靜的，但真實(shí)世界是忙碌的，讓數(shù)據(jù)動(dòng)起來(lái)，給地圖增添更多情感化設(shè)計(jì)，緩解用戶(hù)的等待壓力。

忙碌的商家

外賣(mài)小哥端午節(jié)雨中送餐

公交努力奔來(lái)

五、底圖：為更好呈現(xiàn)信息的色彩系統(tǒng)

手機(jī)地圖的底圖最常使用矢量瓦片地圖，因?yàn)閿?shù)據(jù)體積小，在互聯(lián)網(wǎng)環(huán)境下讀取速度快。矢量地圖用幾何圖形來(lái)表達(dá)區(qū)域，不展示具體細(xì)節(jié)，因此需要通過(guò)顏色去傳達(dá)不同區(qū)域的屬性或功能。

人們對(duì)于顏色和環(huán)境是能建立一定的聯(lián)想的，如綠色想到大自然，藍(lán)色想到水，紅色想到警示。根據(jù)人們對(duì)色彩的聯(lián)想，給矢量地圖中不同屬性的區(qū)域進(jìn)行配色，幫助用戶(hù)理解地圖。谷歌地圖就曾經(jīng)為不同類(lèi)型的信息標(biāo)記出700多種顏色，最后簡(jiǎn)化為25個(gè)顏色，形成了地圖的色彩系統(tǒng)。

工具類(lèi)地圖應(yīng)用以地圖為核心基礎(chǔ)，對(duì)矢量圖形有最全面的歸類(lèi)，因而擁有最豐富的配色系統(tǒng)。由于人們對(duì)區(qū)域功能的顏色聯(lián)想是相似的，各地圖廠(chǎng)商的標(biāo)準(zhǔn)地圖的配色都很接近。地圖用色素雅，才能讓多個(gè)顏色能和諧的同時(shí)存在，降低用戶(hù)的視覺(jué)疲勞，并能突出地圖上的信息圖層，讓用戶(hù)聚焦所關(guān)心的數(shù)據(jù)。

而一些垂直場(chǎng)景的應(yīng)用，地圖區(qū)域功能的描述相對(duì)次要，通常會(huì)對(duì)地圖的用色進(jìn)行大幅度精簡(jiǎn)。以打車(chē)應(yīng)用為例，地圖用色少且色調(diào)相近，突出核心的打車(chē)狀態(tài)信息顏色，同時(shí)體現(xiàn)應(yīng)用的品牌特色。

不少運(yùn)用地圖的概念設(shè)計(jì)中，會(huì)更極致的使用單色系地圖，僅突出數(shù)據(jù)信息的顏色，充滿(mǎn)未來(lái)感。

六、未來(lái)的地圖

隨著網(wǎng)絡(luò)速度的提升，手機(jī)硬件的升級(jí)，順應(yīng)AR/VR技術(shù)的發(fā)展，地圖逐步進(jìn)入3D和全真時(shí)代。蘋(píng)果地圖在現(xiàn)有的地圖的3D視圖下，已對(duì)地標(biāo)建筑賦予更多細(xì)節(jié)，并在夜間模式模擬了燈光效果。

3D地圖就像是虛擬世界中的基礎(chǔ)建設(shè)一樣，蘋(píng)果地圖添加精細(xì)地標(biāo)模型后，同時(shí)應(yīng)用到Carplay的導(dǎo)航中，在駕駛時(shí)可直觀(guān)看到與現(xiàn)實(shí)世界對(duì)應(yīng)的3D地標(biāo)。

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

同時(shí)全真模擬日照和天氣系統(tǒng)，和現(xiàn)實(shí)一樣模擬東升西落的光線(xiàn)方向，模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化，地圖的數(shù)據(jù)也將向空間延伸。相對(duì)全真地圖而言，人們本身就身置真實(shí)的地圖場(chǎng)景中，未來(lái)借助AR設(shè)備，人們無(wú)需對(duì)照地圖即可完成導(dǎo)航。

七、結(jié)語(yǔ)

地圖歷來(lái)是人們借助藝術(shù)的手法，以極具想象力的方式對(duì)世界進(jìn)行再現(xiàn)，它遵循科學(xué)測(cè)量的法則，使用幾何的線(xiàn)條和形狀對(duì)地球的進(jìn)行抽象化。地圖反映了制作者對(duì)世界的認(rèn)知，而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀(guān)。

但地圖并非單純地呈現(xiàn)地球，而是呈現(xiàn)人們眼中的世界，它寄托著人們對(duì)美好生活的想象，更好的認(rèn)識(shí)、探索和規(guī)劃世界。