带你看世界！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来实现这些功能，确保用户体验的同时，还为信息的展现提供了更多的可能性。

【设计师的收藏夹】

《开工福利！300+值得收藏的设计师资源站》
《一网打尽！200+值得收藏的设计师资源站》
《免费高清！10个无版权限制的大图特供网站》
《免费高清第二波！12个无版权限制的大图特供网站》
《免费图库第三波！！22个无版权限制的高清无码图库站》

原文地址：designmodo
优设译者：@陈子木

「子木说」

对测绘有所了解同学应该知道所谓的地理信息系统（也就是GIS系统），咱们日常使用的地图APP可以算是GIS系统的一种应用形态，一个子集。从功能上来讲，GIS系统让地理和空间信息具备了更多的属性和更多的可能性，美观与设计应该也是需要考虑的元素。今天推荐的网站中，有许多都充分运用了GIS系统的特性。

当设计和专业领域结合起来，所迸发的能量还是无法小视的。

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量96万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：