重庆网站建设公司润雪科技
业成于勤
,守于挚
技精于专
,做于细
重庆网站建设 新闻动态 公司动态

巧用地图元素的优秀设计案例

2018-08-09      发布者:润雪科技      浏览量:2483

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

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

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

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

Rolex Awards 2014


image.png


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

TFI World Map


image.png


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

Sailing Seas of Plastic


image.png


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

Cost of Living


image.png


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

Alfoart Photo Travel


image.png


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

Deutschland


image.png


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

Beyond the Track


image.png


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

Galapagos


image.png


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

Everyday Moments


image.png




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

Windward


image.png


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

Wellesley


image.png


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

Svenska Kyrkans Internationella Arbete


image.png


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

Oil Spills in the Beaufort Sea


image.png


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

Get the Look


image.png


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

Give Holland


image.png


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

Explorez


image.png


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

Anywayanyday



image.png


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

Ferias para Curtir


image.png


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

Grano Armando


image.png


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

Lotr Project


image.png


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

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


本文由重庆网站建设公司润雪科技原创,文章地址:/news/id/1538.html

重庆网站建设公司 - 润雪科技

地址:中国 · 重庆市南岸区南坪亚太商谷7幢23-10、23-11        电话:400-807-5908        手机:186-9655-6121        客服QQ:714-287-173

重庆网站建设公司润雪科技,专注于重庆网站建设重庆网站制作重庆网站设计重庆做网站,公司都秉承以“产品”为核心“用户”为中心,从实际出发为客户提供更优质的服务为宗旨,联系电话:400-807-5908
COPYRIGHT (©) 2017 网站建设公司润雪科技渝ICP备15012622号