▲点击"三分设"关注，回复"社群"加入我们

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

作者：曹竞羽

编辑：李凯悦

共 4948 字 20 图预计阅读 13 分钟

互动地图并非是新鲜的互动元素了，但是能将地图发挥极致作用并吸引用户的案例并不多。本文介绍了 14 个非常棒的互动地图实例，并详细解说了地图的互动方式。不同于传统地图的导航作用，这些互动地图有的能吸引用户了解产品、有的能维护用户的忠诚度。各式各样的交互式地图能够更好的让大家对于互动和地图元素进行了解。

在网站上添加互动元素能有效地吸引用户积极参与进来。相比起让用户随意浏览被动地发现业务信息，互动元素能吸引他们的注意力，提高用户参与度。

在所有的互动元素中，互动地图在网页设计中变得越来越流行。原因在于互动地图潜力无限。公司使用它们不仅仅是为了显示公司位置。它们可以作为 3D 游戏或教育项目，也可以在世界各地激动人心的地点创造身临其境的旅游。

根据项目的主题，互动地图通常包含 360° 图像以及引人入胜的音效和视觉元素。它们能快速有效地让用户放大他们感兴趣的地点，同时也发现更多品牌信息。这样一来，互动地图就成了表达公司理念的宝物，使理念更贴近用户。

在本文中，我们将分享一些我们网络上看到的优秀互动地图实例。你会发现许多天马行空的想法，让网页中的互动地图帮助内容更具吸引力且印象深刻。我们将深入研究的实例包括：

夏尔多涅 - 泰耶
2021 的马赛市
谁关心？
库德
玛鲁西亚饮料集团
BitSummit 游戏展会
《巫师》-- Netflix
挪威国家林业集团
喀勒布尼山庄
数字营销会议
悬空之上
隐秘的角落之国家公园
佩特拉的谷歌徒步旅行
巴士底狱：暴风雨之眼

01. 夏尔多涅 - 泰耶

夏尔多涅-泰耶是法国的香槟品牌。进入网站时，你会看到一个手绘的互动地图，上面有葡萄园、房屋和果木。在地图上移动鼠标以了解法国乡村，背景同时播放着柔和的古典音乐。只需点击地图上的葡萄园名牌，就能了解兰斯山地区某个特定葡萄园的更多信息。随着轻柔的动效，葡萄园会放大呈现出来。你会发现自己置身于一幅美丽的葡萄园水彩插图之中。当你向下滑动页面时，水彩画变成了香槟酒的气泡，以华丽的特效消散于屏幕上，从而引出了葡萄园的特色故事。你还可以在屏幕的底部找到所有葡萄园的名称。当你点击葡萄园列表中的名字时，在地图上你会被立即传送到选定的葡萄园。隐藏菜单在屏幕的左上角，以保证在任何时候都能无障碍呈现地图。在页面右上角有一个 "地图" 按钮 -- 如果你点击它，你就可以从高处俯瞰整个兰斯山地区。

02. 2021 的马赛市

2021 的马赛市是使用 3D 地图和实时渲染以介绍马赛城市的网站。屏幕四周都有包含数字和指向箭头的圆圈，指明四个方位上的景点数量。特色建筑和历史景点都标记于地图上。当鼠标悬停在这些地方时，你会看到它们的名字。如果你想了解更多所选地点的信息，就点击它。你将被带到所选地点，享受全屏 360° 的视野去了解。屏幕的底部的 "所有地点" 的按钮，链接了一个互动列表，每个链接都指向地图上的一个特色地点。

03. 谁关心？

"谁在乎？" 的目的是提高人们对非洲草原上的濒危物种的认识。它被设计成游戏，需要找到 10 种被归类为稀有、易危或严重濒危的动物。为了找到它们，你必须在草原內虚拟村庄的插画地图上移动鼠标。当你找到濒危动物时，你只需点击一下鼠标就可以为它们拍照。紧接着屏幕上会出现一个弹窗，显示照片中动物的更多信息。当你在地图上拖动鼠标时，还会偶然发现虚拟村落中的一些居民正在干活，这使得游戏更加真实。视觉效果和伴随的音效增强了地图的趣味性，增加了网站关于濒危物种的悲痛事实的教育性。

04. 库德

Kode 是一个体育俱乐部，将于 2022 年在开罗新区开业。网站提供了俱乐部的虚拟环游之旅，展示了开业时的盛况。整个网站仿佛一个活力满满、五光十色的游戏。通过移动一个虚拟人物，在三维视图中探索俱乐部。网站设置的菜单按钮能够自定义你的虚拟人物外观。你可以与地图上散布的工作人员交谈以了解关于设施的更多情况。此外，你还可以收集俱乐部文化卡片，玩游戏，解锁成就等等。你可以将虚拟人物从俱乐部的一个区域移动到下一个区域，或者点击屏幕底部的地图预览，跳到一个特定的设施或场馆。右上角有链接可以查看你的成就，了解关于俱乐部的更多信息，以及成为他们的会员。

05. 玛鲁西亚饮料集团

玛鲁西亚饮料集团生产和销售葡萄酒和烈酒。网站介绍了集团位于几大洲的所有子公司。网站背景包含一个词语地图。虽然你不能与地图直接互动，但是把鼠标移到地图上时，它会伸缩放大，构建出探索的感受。当你向下滑动页面时，你会看到集团子公司列表。点击其中任何一个子公司，地图会放大至子公司的地理位置，并显示有关分销的更多信息。

06. BitSummit 游戏展会

BitSummit Gaiden 是一个日本独立游戏展会。网站的设计很简单，色彩很少。大多数元素都是蓝色和黄色，偶尔会有粉红色。实际上网站看起来就像某个复古游戏的介绍。它是由几个岛屿组成的互动地图，每个岛屿都展示了某种类型的游戏以及风靡日本的超级英雄和怪物。包含了怪兽、武士、骑手、侠客和机器人。所有角色都是动态的，你可以看到怪兽的眼睛向附近的建筑物发射破坏性射线，或者武士转动他闪亮的剑。当你点击任何这些角色或岛屿时，你会看到属于所选类别的游戏列表。在岛屿周围的水面上，你会发现一些重要链接，比如通往 BitSummit 商店的链接（它被放在一艘被章鱼攻击的船上），任天堂和 PlayStation 的网站链接，以及其他一些链接。

07.《巫师》-- Netflix

《巫师》是 Netflix 的一部奇幻剧。它的情节很复杂，剧集经常从一个时期跳转到另一个时期。为了确保观众能够跟上错综复杂的情节，Netflix 创建了一个包含所有情节的中世纪互动地图。当你在地图上移动时，你会注意到地图上描绘的各种国家和地区都是可以点击的，以便于发现更多相关地点和人物。在屏幕的底部还有一条时间线，帮助你了解重大事件的时间顺序。如果你对剧中某些特定内容感兴趣，你可以使用搜索功能。

08. 挪威国家林业集团

国家林业集团是一家负责管理国家森林和山区房地产的挪威公司。万木争荣是公司的公益项目。每年捐赠 100 万挪威克朗来支持全国各地的各种项目，所有项目都显示在万木争荣网站的互动地形图上。你可以使用网站左侧的时间轴按年份探索这些项目，或者你可以选择一次性显示所有年份的项目。除了地图，你还可以选择 "列表" 视图以浏览项目。在地图视图中，项目被显示成分散在挪威各地的发光圆点。点击后，每个圆点会显示它所代表的项目名称和为其筹集的资金数额。如果你点项目名称，你将会被带到一个有更多有效信息的专栏页面中。

09.喀勒布尼山庄

喀勒布尼山庄是位于莫斯科其中一个著名街区的豪宅。网站包含丰富的水彩插图、大型照片和优雅的排版。“地点“ 页面特别有趣，因为它包括一张山庄的水彩地图，上面标有博物馆、幼儿园和餐馆。当你点击每个高亮的地方时，屏幕左侧展现出一个包含所选地点图片和简短描述的侧边栏。这样一来，任何可能考虑在喀勒布尼山庄购买公寓的人都能够了解喀勒布尼山庄是否符合他们的需求。地图的设计风格与网站的其他页面相匹配，呈现了一个视觉统一的作品。

10. 数字营销大会

浏览 2019 年版数字营销大会网站是难忘的创意之旅。网站呈现了将你囊括其中的黑色数字宇宙。互动链接环绕在你的周围，邀请你去发现更多会议信息。基于 360° 视野，你可以移动鼠标，向你喜欢的任何方向浏览。如果你往下看，你能鸟瞰莫斯科地图。所有的建筑物线条分明轮廓清晰，并且有一个大的红点在会议厅以确保你不会遗漏它。你也可以看到最近的地铁站和停车场。还有一条突显的路线展示了从地铁站到达大厅的最简单方法。你可以在 VR 中探索网站以获得完整地沉浸式的体验。

11. 悬崖之上

Un Printemps Suspendu 将实时 3D 互动与背景音频、视频相结合，带你开展阿尔卑斯山的冒险。它由六集组成，每集专门介绍阿尔卑斯山的一个标志性山峰。每一个标志性山峰配着背景音乐，展示在旋转的 3D 地图上。当你按住鼠标键移动时，歌曲开始以极其缓慢的节奏播放。当你松开鼠标时，节奏恢复正常。按下 "查看插曲" 按钮后，你将游览山顶。参观过程中，3D 地图视图呈现滑雪者攀登阿尔卑斯山的过程以及面临的挑战。通过鼠标双击，你可以进入故事的下一章节。每一集结束后，你可以随意漫游阿尔卑斯山，任意缩放和进入你喜欢的任何方向。

12.隐秘的角落之国家公园

国家公园的隐秘世界是由谷歌艺术与文化开发的非凡项目。网站带你云游览美国国家公园的奇妙世界 -- 布莱斯峡谷、干龟国家公园、基奈峡湾、夏威夷火山和卡尔斯巴德洞穴。虽然地图本身是不互动的（你可以在地图上看到每个公园的位置），但网站上展示的一切完全取决于你的行为和选择。每次游览开始时，都会有一段护林员导游解释公园历史的介绍视频。然后，你可以和护林员一起参加一些有趣的活动，如在珊瑚礁中游泳，爬进洞穴，参观火山崖，惊叹于海格力斯星和北斗七星，以及许多其他的教育实践。360° 的视觉效果，令人兴奋的故事，只用动动鼠标就能身临其境地发现大自然的美。

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

佩特拉的谷歌徒步旅行带你在约旦的历史名城中进行互动探险。这段旅程由几个地点组成。你可以一个一个地参观，或者打开地图，选择你想去的特定地点。360° 的图像非常详细地向你展示佩特拉，还有互动圆点提供关于古纳巴泰城市的有用信息。音效非常有效地使旅程更加真实。例如，你可以听到碎石路上的脚步声，以及听约旦王后拉尼亚-阿卜杜拉讲述玫瑰红城市。

14. 巴士底狱：暴风雨之眼

巴士底狱：暴风雨之眼是英国独立流行乐队巴士底狱为配合其专辑《狂野世界》的发行而与 Spotify 合作的项目。它在 "狂野世界" 的互动 3d 地图上展示了乐队音乐在世界的流传度。一个城市的流传度越高，地图上的 "风暴" 就越亮。你可以在全世界范围内移动光标，点击你最感兴趣的城市，看看城市中最受欢迎的五首巴士底狱歌曲。在屏幕的左侧，有一个按流传度排名的城市列表。在此点击城市，地图将直接带你到选定的地方。

15. 最后的思考

互动地图有益于各类企业，从流行的电视节目、酒类公司到流媒体平台、大自然项目，以及许多其他项目。互动地图无疑是一种重要工具，如果能有效使用，可以成为品牌的宝贵资产。

如果你正在考虑将互动地添加入网站，考虑受众以及观众如何从互动地图中受益是很重要的。考虑怎样的信息会让受众感兴趣，和你想表达的内容，思考地图上的信息以及信息的最佳呈现方式。

互动性为很多创造性的实验提供条件，把地图变成有趣的探索游戏或令人兴奋的教育性探险。你足够的空间将视频和音频加入其中，创造出完全沉浸式的、令人难忘的用户体验。互动地图的表现形式可以采用任何你喜欢的风格，无论是 3D、插图、手绘还是像素化。只要能确保地图直观且易用，你还可以探索颜色和字体的结合，根据需求使地图变得简单或复杂。

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

作者：Dusica Popovic

译者：曹竞羽

审核：刘倩茹、李泽慧、张聿彤

编辑：李凯悦

本文已获得作者正式授权，截图如下：

— The end —

📚 社区资料📚

每日开眼，大厂内部资料分享

期待与更多优秀用户体验设计师一起成长

🙋 我们一起聊设计 🙋‍♂️

高质量，学设计行交流微信群