20款巧用地图元素的优秀网页设计欣赏

多数时候，我们在网页中看到的地图，都是用百度/谷歌地图来显示公司、机构或者店铺的地理位置。然而，地图在网页中的使用真的就只能这么单调么？

加入一点想象力，添加一些技术支持，你会发现地图可以让整个网页的逼格拔高不止一个层次。

将原始的、额外加入的地图元素转化成极具吸引力和视觉冲击力的组成部分，需要进行相当程度的调整，加入特效和互动元素：微妙的动效、基于多媒体的工具、动态指针、扁平化的风格、Lowpoly风的插画、现代风的线条图标，甚至是略显古怪的草图也能让地图焕发出生命力。

描述太过抽象，不妨看看脑洞大开的设计师们是怎样“改造”网页中的地图的吧。

Rolex Awards 2014

设计师使用色彩明亮的点和线搭建出一幅优雅而细腻的世界地图，它不仅以不同寻常的方式展现出五名年轻的梦想家，而且以一种优雅的方式营造出品牌独特的风格和氛围。

TFI World Map

和上一个案例颇为相似，设计师用小圆点优雅地搭建出世界地图，灰白的色调看起来雅致而时尚。用户头像在地图的映衬下成为视觉重心，一点违和感都没有。

Sailing Seas of Plastic

这个网页反映的是塑料在全球各地的分布情况，明暗对比鲜明的世界地图巧妙地揭示了问题的严重性。

Cost of Living

想知道哪个欧洲国家的首都生活成本最合理，最令人舒适么?试着探索一下这个项目吧，在地图上点击这些国家的首都，你会清晰地看到哪些成本高昂，哪些经济实惠。

Alfoart Photo Travel

如果你热衷于参观名胜古迹，那么这个项目就是为你量身定制的。复古的地图样式，精雕细琢的经典图标，充满活力而漂亮的地标，完美的互动性和丰富的信息整合在一起，你一定不要错过。

Deutschland

在Google的支持之下，你可以借助这个网站对德国进行更深入的了解。这个使用彩色地标的互动式地图为你展现了25个不同主题的内容，你可以以任何语言参与到其中的讨论。

Beyond the Track

Beyond the Track 是一个有趣而又实用的网站，它以一种更为引人入胜的方式展现了世界摩托车大赛冠军赛的相关信息，并提供了相关服务。你可以在这里查看比赛的五大赛道，相关的统计数据，周边的文化经典，住宿信息，等等等等。

Galapagos

这个网站的团队专注于寻找更富有活力的三位互动地图的创意解决方案。通过HTML5来驱动多边形图形，以精巧别致的地图展现出Galapagos的独特风景。

Everyday Moments

Everyday Moments 是一个交互可视化的网站，展示关于英国和爱尔兰的一些日常的推文。设计师采用了柔和的色调，微妙的图形和赏心悦目的动效，其中地图的设计最是抓人眼球。

Dangerous Roads

借助街景技术，这个网站的开发团队成功地呈现了世界上最危险的道路。虽然地图的插画仅仅只是在开头“欢迎”环节展示了一下，但是整个项目是基于这个地形来构建的。

Windward

打开网站，沉静的蓝色世界地图美得令人窒息。仅仅只是调整了颜色，稍加修改，就这个简单。

Wellesley

壮丽的美洲俯瞰图和大标题组合在一起，简单但精致。

Svenska Kyrkans Internationella Arbete

整个网站基于一幅精心定制、点缀许多可交互的地标的地图，而网站内容旨在通过照片展现人们遭受的各种灾难。

Oil Spills in the Beaufort Sea

正如同标题所说，这个网站试图引导用户关注海上石油管道泄漏所造成的恶劣影响和可能的解决方案。更重要的是，它是一个复杂而多功能的项目，你可以添加图层，针对特定领域进行探索。

Get the Look

这是一套精确的矢量地图，额外的导航菜单被放置在底部，红色的区域象征着项目所支持的国家。

Give Holland

Give Holland 这个网站使用了半写实的地图来展现那些壮观的图片，为用户提供了一种纯粹的乐趣。

Explorez

Explorez la legend 是一个网页游戏，3D地球是整个游戏最关键的因素。

Anywayanyday

Anywayanyday 是一个受欢迎的票务预订服务，线条勾勒的世界地图是它的加载动画，看起来颇为不错。

Ferias para Curtir

网站使用了漂亮的卡通式的地图插画，与整个网站风格非常协调。

Grano Armando

网页在菜单大图标中使用了优雅而标识清楚的意大利地图，复古风的网页中，这样的图标使用显得非常有范儿，不仅展现了店面的覆盖范围，还雅致地展现出品牌气质。

Lotr Project

很高兴能看到指环王的粉丝为自己喜欢的电影设计网站。设计者制作了可交互的中土世界地图，你可以借此查看相关的人物、事件和地方。

结语

可交互的地图通常使用HTML5和JS来实现这些功能，确保用户体验的同时，还为信息的展现提供了更多的可能性。