▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識，幫助全球 1 億設(shè)計(jì)師成長

作者：曹競羽

編輯：李凱悅

共 4948 字 20 圖預(yù)計(jì)閱讀 13 分鐘

互動(dòng)地圖并非是新鮮的互動(dòng)元素了，但是能將地圖發(fā)揮極致作用并吸引用戶的案例并不多。本文介紹了 14 個(gè)非常棒的互動(dòng)地圖實(shí)例，并詳細(xì)解說了地圖的互動(dòng)方式。不同于傳統(tǒng)地圖的導(dǎo)航作用，這些互動(dòng)地圖有的能吸引用戶了解產(chǎn)品、有的能維護(hù)用戶的忠誠度。各式各樣的交互式地圖能夠更好的讓大家對于互動(dòng)和地圖元素進(jìn)行了解。

在網(wǎng)站上添加互動(dòng)元素能有效地吸引用戶積極參與進(jìn)來。相比起讓用戶隨意瀏覽被動(dòng)地發(fā)現(xiàn)業(yè)務(wù)信息，互動(dòng)元素能吸引他們的注意力，提高用戶參與度。

在所有的互動(dòng)元素中，互動(dòng)地圖在網(wǎng)頁設(shè)計(jì)中變得越來越流行。原因在于互動(dòng)地圖潛力無限。公司使用它們不僅僅是為了顯示公司位置。它們可以作為 3D 游戲或教育項(xiàng)目，也可以在世界各地激動(dòng)人心的地點(diǎn)創(chuàng)造身臨其境的旅游。

根據(jù)項(xiàng)目的主題，互動(dòng)地圖通常包含 360° 圖像以及引人入勝的音效和視覺元素。它們能快速有效地讓用戶放大他們感興趣的地點(diǎn)，同時(shí)也發(fā)現(xiàn)更多品牌信息。這樣一來，互動(dòng)地圖就成了表達(dá)公司理念的寶物，使理念更貼近用戶。

在本文中，我們將分享一些我們網(wǎng)絡(luò)上看到的優(yōu)秀互動(dòng)地圖實(shí)例。你會(huì)發(fā)現(xiàn)許多天馬行空的想法，讓網(wǎng)頁中的互動(dòng)地圖幫助內(nèi)容更具吸引力且印象深刻。我們將深入研究的實(shí)例包括：

夏爾多涅 - 泰耶
2021 的馬賽市
誰關(guān)心？
庫德
瑪魯西亞飲料集團(tuán)
BitSummit 游戲展會(huì)
《巫師》-- Netflix
挪威國家林業(yè)集團(tuán)
喀勒布尼山莊
數(shù)字營銷會(huì)議
懸空之上
隱秘的角落之國家公園
佩特拉的谷歌徒步旅行
巴士底獄：暴風(fēng)雨之眼

01. 夏爾多涅 - 泰耶

夏爾多涅-泰耶是法國的香檳品牌。進(jìn)入網(wǎng)站時(shí)，你會(huì)看到一個(gè)手繪的互動(dòng)地圖，上面有葡萄園、房屋和果木。在地圖上移動(dòng)鼠標(biāo)以了解法國鄉(xiāng)村，背景同時(shí)播放著柔和的古典音樂。只需點(diǎn)擊地圖上的葡萄園名牌，就能了解蘭斯山地區(qū)某個(gè)特定葡萄園的更多信息。隨著輕柔的動(dòng)效，葡萄園會(huì)放大呈現(xiàn)出來。你會(huì)發(fā)現(xiàn)自己置身于一幅美麗的葡萄園水彩插圖之中。當(dāng)你向下滑動(dòng)頁面時(shí)，水彩畫變成了香檳酒的氣泡，以華麗的特效消散于屏幕上，從而引出了葡萄園的特色故事。你還可以在屏幕的底部找到所有葡萄園的名稱。當(dāng)你點(diǎn)擊葡萄園列表中的名字時(shí)，在地圖上你會(huì)被立即傳送到選定的葡萄園。隱藏菜單在屏幕的左上角，以保證在任何時(shí)候都能無障礙呈現(xiàn)地圖。在頁面右上角有一個(gè) "地圖" 按鈕 -- 如果你點(diǎn)擊它，你就可以從高處俯瞰整個(gè)蘭斯山地區(qū)。

02. 2021 的馬賽市

2021 的馬賽市是使用 3D 地圖和實(shí)時(shí)渲染以介紹馬賽城市的網(wǎng)站。屏幕四周都有包含數(shù)字和指向箭頭的圓圈，指明四個(gè)方位上的景點(diǎn)數(shù)量。特色建筑和歷史景點(diǎn)都標(biāo)記于地圖上。當(dāng)鼠標(biāo)懸停在這些地方時(shí)，你會(huì)看到它們的名字。如果你想了解更多所選地點(diǎn)的信息，就點(diǎn)擊它。你將被帶到所選地點(diǎn)，享受全屏 360° 的視野去了解。屏幕的底部的 "所有地點(diǎn)" 的按鈕，鏈接了一個(gè)互動(dòng)列表，每個(gè)鏈接都指向地圖上的一個(gè)特色地點(diǎn)。

03. 誰關(guān)心？

"誰在乎？" 的目的是提高人們對非洲草原上的瀕危物種的認(rèn)識。它被設(shè)計(jì)成游戲，需要找到 10 種被歸類為稀有、易?；驀?yán)重瀕危的動(dòng)物。為了找到它們，你必須在草原內(nèi)虛擬村莊的插畫地圖上移動(dòng)鼠標(biāo)。當(dāng)你找到瀕危動(dòng)物時(shí)，你只需點(diǎn)擊一下鼠標(biāo)就可以為它們拍照。緊接著屏幕上會(huì)出現(xiàn)一個(gè)彈窗，顯示照片中動(dòng)物的更多信息。當(dāng)你在地圖上拖動(dòng)鼠標(biāo)時(shí)，還會(huì)偶然發(fā)現(xiàn)虛擬村落中的一些居民正在干活，這使得游戲更加真實(shí)。視覺效果和伴隨的音效增強(qiáng)了地圖的趣味性，增加了網(wǎng)站關(guān)于瀕危物種的悲痛事實(shí)的教育性。

04. 庫德

Kode 是一個(gè)體育俱樂部，將于 2022 年在開羅新區(qū)開業(yè)。網(wǎng)站提供了俱樂部的虛擬環(huán)游之旅，展示了開業(yè)時(shí)的盛況。整個(gè)網(wǎng)站仿佛一個(gè)活力滿滿、五光十色的游戲。通過移動(dòng)一個(gè)虛擬人物，在三維視圖中探索俱樂部。網(wǎng)站設(shè)置的菜單按鈕能夠自定義你的虛擬人物外觀。你可以與地圖上散布的工作人員交談以了解關(guān)于設(shè)施的更多情況。此外，你還可以收集俱樂部文化卡片，玩游戲，解鎖成就等等。你可以將虛擬人物從俱樂部的一個(gè)區(qū)域移動(dòng)到下一個(gè)區(qū)域，或者點(diǎn)擊屏幕底部的地圖預(yù)覽，跳到一個(gè)特定的設(shè)施或場館。右上角有鏈接可以查看你的成就，了解關(guān)于俱樂部的更多信息，以及成為他們的會(huì)員。

05. 瑪魯西亞飲料集團(tuán)

瑪魯西亞飲料集團(tuán)生產(chǎn)和銷售葡萄酒和烈酒。網(wǎng)站介紹了集團(tuán)位于幾大洲的所有子公司。網(wǎng)站背景包含一個(gè)詞語地圖。雖然你不能與地圖直接互動(dòng)，但是把鼠標(biāo)移到地圖上時(shí)，它會(huì)伸縮放大，構(gòu)建出探索的感受。當(dāng)你向下滑動(dòng)頁面時(shí)，你會(huì)看到集團(tuán)子公司列表。點(diǎn)擊其中任何一個(gè)子公司，地圖會(huì)放大至子公司的地理位置，并顯示有關(guān)分銷的更多信息。

06. BitSummit 游戲展會(huì)

BitSummit Gaiden 是一個(gè)日本獨(dú)立游戲展會(huì)。網(wǎng)站的設(shè)計(jì)很簡單，色彩很少。大多數(shù)元素都是藍(lán)色和黃色，偶爾會(huì)有粉紅色。實(shí)際上網(wǎng)站看起來就像某個(gè)復(fù)古游戲的介紹。它是由幾個(gè)島嶼組成的互動(dòng)地圖，每個(gè)島嶼都展示了某種類型的游戲以及風(fēng)靡日本的超級英雄和怪物。包含了怪獸、武士、騎手、俠客和機(jī)器人。所有角色都是動(dòng)態(tài)的，你可以看到怪獸的眼睛向附近的建筑物發(fā)射破壞性射線，或者武士轉(zhuǎn)動(dòng)他閃亮的劍。當(dāng)你點(diǎn)擊任何這些角色或島嶼時(shí)，你會(huì)看到屬于所選類別的游戲列表。在島嶼周圍的水面上，你會(huì)發(fā)現(xiàn)一些重要鏈接，比如通往 BitSummit 商店的鏈接（它被放在一艘被章魚攻擊的船上），任天堂和 PlayStation 的網(wǎng)站鏈接，以及其他一些鏈接。

07.《巫師》-- Netflix

《巫師》是 Netflix 的一部奇幻劇。它的情節(jié)很復(fù)雜，劇集經(jīng)常從一個(gè)時(shí)期跳轉(zhuǎn)到另一個(gè)時(shí)期。為了確保觀眾能夠跟上錯(cuò)綜復(fù)雜的情節(jié)，Netflix 創(chuàng)建了一個(gè)包含所有情節(jié)的中世紀(jì)互動(dòng)地圖。當(dāng)你在地圖上移動(dòng)時(shí)，你會(huì)注意到地圖上描繪的各種國家和地區(qū)都是可以點(diǎn)擊的，以便于發(fā)現(xiàn)更多相關(guān)地點(diǎn)和人物。在屏幕的底部還有一條時(shí)間線，幫助你了解重大事件的時(shí)間順序。如果你對劇中某些特定內(nèi)容感興趣，你可以使用搜索功能。

08. 挪威國家林業(yè)集團(tuán)

國家林業(yè)集團(tuán)是一家負(fù)責(zé)管理國家森林和山區(qū)房地產(chǎn)的挪威公司。萬木爭榮是公司的公益項(xiàng)目。每年捐贈(zèng) 100 萬挪威克朗來支持全國各地的各種項(xiàng)目，所有項(xiàng)目都顯示在萬木爭榮網(wǎng)站的互動(dòng)地形圖上。你可以使用網(wǎng)站左側(cè)的時(shí)間軸按年份探索這些項(xiàng)目，或者你可以選擇一次性顯示所有年份的項(xiàng)目。除了地圖，你還可以選擇 "列表" 視圖以瀏覽項(xiàng)目。在地圖視圖中，項(xiàng)目被顯示成分散在挪威各地的發(fā)光圓點(diǎn)。點(diǎn)擊后，每個(gè)圓點(diǎn)會(huì)顯示它所代表的項(xiàng)目名稱和為其籌集的資金數(shù)額。如果你點(diǎn)項(xiàng)目名稱，你將會(huì)被帶到一個(gè)有更多有效信息的專欄頁面中。

09.喀勒布尼山莊

喀勒布尼山莊是位于莫斯科其中一個(gè)著名街區(qū)的豪宅。網(wǎng)站包含豐富的水彩插圖、大型照片和優(yōu)雅的排版。“地點(diǎn)“ 頁面特別有趣，因?yàn)樗ㄒ粡埳角f的水彩地圖，上面標(biāo)有博物館、幼兒園和餐館。當(dāng)你點(diǎn)擊每個(gè)高亮的地方時(shí)，屏幕左側(cè)展現(xiàn)出一個(gè)包含所選地點(diǎn)圖片和簡短描述的側(cè)邊欄。這樣一來，任何可能考慮在喀勒布尼山莊購買公寓的人都能夠了解喀勒布尼山莊是否符合他們的需求。地圖的設(shè)計(jì)風(fēng)格與網(wǎng)站的其他頁面相匹配，呈現(xiàn)了一個(gè)視覺統(tǒng)一的作品。

10. 數(shù)字營銷大會(huì)

瀏覽 2019 年版數(shù)字營銷大會(huì)網(wǎng)站是難忘的創(chuàng)意之旅。網(wǎng)站呈現(xiàn)了將你囊括其中的黑色數(shù)字宇宙?；?dòng)鏈接環(huán)繞在你的周圍，邀請你去發(fā)現(xiàn)更多會(huì)議信息?；?360° 視野，你可以移動(dòng)鼠標(biāo)，向你喜歡的任何方向?yàn)g覽。如果你往下看，你能鳥瞰莫斯科地圖。所有的建筑物線條分明輪廓清晰，并且有一個(gè)大的紅點(diǎn)在會(huì)議廳以確保你不會(huì)遺漏它。你也可以看到最近的地鐵站和停車場。還有一條突顯的路線展示了從地鐵站到達(dá)大廳的最簡單方法。你可以在 VR 中探索網(wǎng)站以獲得完整地沉浸式的體驗(yàn)。

11. 懸崖之上

Un Printemps Suspendu 將實(shí)時(shí) 3D 互動(dòng)與背景音頻、視頻相結(jié)合，帶你開展阿爾卑斯山的冒險(xiǎn)。它由六集組成，每集專門介紹阿爾卑斯山的一個(gè)標(biāo)志性山峰。每一個(gè)標(biāo)志性山峰配著背景音樂，展示在旋轉(zhuǎn)的 3D 地圖上。當(dāng)你按住鼠標(biāo)鍵移動(dòng)時(shí)，歌曲開始以極其緩慢的節(jié)奏播放。當(dāng)你松開鼠標(biāo)時(shí)，節(jié)奏恢復(fù)正常。按下 "查看插曲" 按鈕后，你將游覽山頂。參觀過程中，3D 地圖視圖呈現(xiàn)滑雪者攀登阿爾卑斯山的過程以及面臨的挑戰(zhàn)。通過鼠標(biāo)雙擊，你可以進(jìn)入故事的下一章節(jié)。每一集結(jié)束后，你可以隨意漫游阿爾卑斯山，任意縮放和進(jìn)入你喜歡的任何方向。

12.隱秘的角落之國家公園

國家公園的隱秘世界是由谷歌藝術(shù)與文化開發(fā)的非凡項(xiàng)目。網(wǎng)站帶你云游覽美國國家公園的奇妙世界 -- 布萊斯峽谷、干龜國家公園、基奈峽灣、夏威夷火山和卡爾斯巴德洞穴。雖然地圖本身是不互動(dòng)的（你可以在地圖上看到每個(gè)公園的位置），但網(wǎng)站上展示的一切完全取決于你的行為和選擇。每次游覽開始時(shí)，都會(huì)有一段護(hù)林員導(dǎo)游解釋公園歷史的介紹視頻。然后，你可以和護(hù)林員一起參加一些有趣的活動(dòng)，如在珊瑚礁中游泳，爬進(jìn)洞穴，參觀火山崖，驚嘆于海格力斯星和北斗七星，以及許多其他的教育實(shí)踐。360° 的視覺效果，令人興奮的故事，只用動(dòng)動(dòng)鼠標(biāo)就能身臨其境地發(fā)現(xiàn)大自然的美。

13. 佩特拉的谷歌徒步旅行

佩特拉的谷歌徒步旅行帶你在約旦的歷史名城中進(jìn)行互動(dòng)探險(xiǎn)。這段旅程由幾個(gè)地點(diǎn)組成。你可以一個(gè)一個(gè)地參觀，或者打開地圖，選擇你想去的特定地點(diǎn)。360° 的圖像非常詳細(xì)地向你展示佩特拉，還有互動(dòng)圓點(diǎn)提供關(guān)于古納巴泰城市的有用信息。音效非常有效地使旅程更加真實(shí)。例如，你可以聽到碎石路上的腳步聲，以及聽約旦王后拉尼亞-阿卜杜拉講述玫瑰紅城市。

14. 巴士底獄：暴風(fēng)雨之眼

巴士底獄：暴風(fēng)雨之眼是英國獨(dú)立流行樂隊(duì)巴士底獄為配合其專輯《狂野世界》的發(fā)行而與 Spotify 合作的項(xiàng)目。它在 "狂野世界" 的互動(dòng) 3d 地圖上展示了樂隊(duì)音樂在世界的流傳度。一個(gè)城市的流傳度越高，地圖上的 "風(fēng)暴" 就越亮。你可以在全世界范圍內(nèi)移動(dòng)光標(biāo)，點(diǎn)擊你最感興趣的城市，看看城市中最受歡迎的五首巴士底獄歌曲。在屏幕的左側(cè)，有一個(gè)按流傳度排名的城市列表。在此點(diǎn)擊城市，地圖將直接帶你到選定的地方。

15. 最后的思考

互動(dòng)地圖有益于各類企業(yè)，從流行的電視節(jié)目、酒類公司到流媒體平臺、大自然項(xiàng)目，以及許多其他項(xiàng)目。互動(dòng)地圖無疑是一種重要工具，如果能有效使用，可以成為品牌的寶貴資產(chǎn)。

如果你正在考慮將互動(dòng)地添加入網(wǎng)站，考慮受眾以及觀眾如何從互動(dòng)地圖中受益是很重要的?？紤]怎樣的信息會(huì)讓受眾感興趣，和你想表達(dá)的內(nèi)容，思考地圖上的信息以及信息的最佳呈現(xiàn)方式。

互動(dòng)性為很多創(chuàng)造性的實(shí)驗(yàn)提供條件，把地圖變成有趣的探索游戲或令人興奮的教育性探險(xiǎn)。你足夠的空間將視頻和音頻加入其中，創(chuàng)造出完全沉浸式的、令人難忘的用戶體驗(yàn)。互動(dòng)地圖的表現(xiàn)形式可以采用任何你喜歡的風(fēng)格，無論是 3D、插圖、手繪還是像素化。只要能確保地圖直觀且易用，你還可以探索顏色和字體的結(jié)合，根據(jù)需求使地圖變得簡單或復(fù)雜。

原文：https://medium.muz.li/14-inspiring-examples-of-interactive-maps-in-web-design-62167d0fcd31

作者：Dusica Popovic

譯者：曹競羽

審核：劉倩茹、李澤慧、張聿彤

編輯：李凱悅

本文已獲得作者正式授權(quán)，截圖如下：

— The end —

?? 社區(qū)資料??

每日開眼，大廠內(nèi)部資料分享

期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長

?? 我們一起聊設(shè)計(jì) ???♂?

高質(zhì)量，學(xué)設(shè)計(jì)行交流微信群