广州网站建设:在网站设计中巧妙使用地图

2019.08.16 mf_web

104

在网站设计中使用地图时,不成文的规则是使用Google地图填充常规联系页面以显示公司/代理商/商店/酒店等的位置。

凭借高端技术提供的一点想象力和强大的帮助,地图可以成为一个真正的人群拉动,改善项目,创造独特和难忘的用户体验。

从原始且不起眼的附加元素到视觉上吸引人的,吸引人的和基本的核心内容的惊人转变,通过整合各种互动元素,使整个设计成为可能:效果,微妙的动作,基于多媒体的工具提示,动态指针平面风格,多边形插图,漂亮的轮廓图形和古怪的粗略绘图等现代趋势也能够为地图注入新的活力,并对其进行了极大的改造。

广州网站建设今天我们编制了一份巧妙使用地图的清单,这些地图使地图多样化,振兴并使网站看起来独一无二。

Web设计中的地图示例

TFI世界地图

TFI世界地图

这里的地图的整洁,虚线样式版本用于将人们与他们的位置相匹配。以灰度模式进行的解读使该组件非常适合网站设计,并迅速将时尚影响者的图像置于聚光灯下。

塑料帆船海

塑料帆船海

黑暗和阴沉的色彩立即突出了项目中考虑的问题和情况的所有严重性。该团队巧妙地利用点和世界地图揭示了全球塑料分布。

生活成本

生活成本

想知道哪个欧洲首都居住最贵,哪个城市让您对预算紧张感到满意?然后探索这个有趣,充分说明的网络项目,地图让它变得有趣。

该项目显示哪个城市最“贪吃”,哪个城市最经济,包括如何省钱,参观什么和注意什么的实用建议。

Alfoart照片旅行

Alfoart照片旅行

如果您是参观历史名胜的粉丝,那么这个项目就是为您准备的。

这里的古董风格地图采用柔和的柔和色彩搭配,充满活力精致的图标,象征着各种着名的地标,是一个完美的互动和信息丰富的旅游指南。

五金

五金

谷歌允许您更深入地钻研德国。该网站提供了一个完全交互式的地图,其中填充了彩色动态图钉,可以发现25个不同的主题 您可以将任何语句翻译成您的语言并加入对话。

超越轨道

超越轨道

Beyond the Track是一款精彩的互动指南,让玩家能够以引人入胜的方式熟悉首屈一指的公路赛冠军Moto GP。

该网站包含五个顶级电路位置,包括有趣的事实,统计数据,文化亮点,住宿选择和其他有用的东西。

加拉帕戈斯

加拉帕戈斯

在这里,团队通过重新创建一个充满活力的三维交互式地图来寻求更具创造性的解决方案。从HTML5驱动的多边形插图中获得最大的收益,介绍看起来既复杂又独特,并以最佳方式展示加拉帕戈斯群岛。

日常时刻

日常时刻

Everyday Moments是一个交互式可视化,显示有关英国和爱尔兰日常生活的推文。由于柔和的色彩,细微的图形和令人赏心悦目的动态效果,地图的这种变化立即引起了人们的注意。

危险的道路

危险的道路

利用街景技术,该团队成功地将注意力吸引到世界上最危险的道路之一。虽然地图的插图版本仅用于“欢迎”部分,但整个项目基于地形描绘的概念。

迎风

迎风

在这里,蓝色,舒缓和平静的世界地图解释,用作静态背景,极大地促进了整个概念以及与图形和主要调色板的和谐回声。

韦尔斯利

韦尔斯利

头版具有壮观的背景,支持标语并显着增强了第一印象。完美无瑕的照片处理为网站带来了戏剧性和精致的外观。

Svenska Kyrkans Internationella Arbete

Svenska Kyrkans Internationella Arbete

该网站基于精心设计的地图,其中填充了交互式振动点。后者旨在展示遭受不同灾害的人的照片。

波弗特海的石油泄漏

波弗特海的石油泄漏

正如您可能从标题中猜到的那样,该网站试图通过展示揭示可能的影响和最坏情况排放的几种情景来引导用户注意海上运输造成的漏油事件。

更重要的是,它是一个复杂的多功能项目,您可以在其中添加图层,探索各个领域等。

看看吧

看看吧

精确执行的矢量地图用作额外的导航辅助工具,可视地支持放置在底部的主菜单。红色区域象征着项目中考虑的国家。

给荷兰

给荷兰

让荷兰休息是一个小型娱乐网络应用程序,基于一个美丽的半现实地图,充满壮观的照片,催化乐趣,并为用户提供纯粹的乐趣。

Explorez

Explorez

Explorez la legend是一款小型浏览器游戏,其中动画3D地图扮演着保持一切活力的关键元素的角色。

Anywayanyday

Anywayanyday

Anywayanyday是一个寻找和预订飞机票的热门网站。细微的线型世界地图是一个加载指示器,在系统搜索可用选项时吸引用户。

Ferias para Curtir

Ferias para Curtir

该网站采用小型卡通风格的地图变化,巧妙地丰富和加强了其中一个主要部分,并与整个设计和谐地融为一体。

格兰诺阿曼多

格兰诺阿曼多

一张精心标记的意大利地图优雅地装饰其中一个菜单部分,并与主页上的地图背景完美搭配。它用于生动地展示商店位置和支持品牌。虽然它只是一个没有任何令人愉快的效果的静态图像,但它完美地补充了首页。

Lotr项目

Lotr项目

很高兴看到粉丝创建专门用于他们喜爱的电影的复杂项目。

例如,Lotr项目描绘了中土世界的交互式地图。这个复杂的网站可以让您探索角色动作,学习活动和地点。

结论

交互式映射是HTML5和JavaScript的高端风格趋势和新鲜可能性的高端串联,可以提升用户体验,改善信息项目并支持娱乐应用程序。

广州网站建设

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP