首页 > 知识•资讯 > 地图在现代网页设计的表现! > 正文

地图在现代网页设计的表现!

2010-04-12 · 稿源:传诚信

地图在现代网页设计的表现!
线上地图的基础知识

当大多数人认为在互联网上,谷歌,MapQuest和TomTom公司可能浮现在脑海中的地图。这些都是业界的巨头,但他们是最有创意的远。这些公司提供服务的地图。正如你将看到来自各地的这篇文章中,谷歌并不拥有市场功能的映射应用程序。还有为创意地图创新的空间很大。

这并不是在制图课,但了解的目的是地图可服务于现代Web设计是重要的。三个主要领域似乎代表了大部分任务:

  1. 导航和方向,
  2. 地理上的关系和趋势表明,
  3. 感兴趣的展示点。

互动地图

对Web技术在过去10年扩张,开辟了若干门介绍在线数据。最迅速改善的工具之一是互动演示地图。

互联网上的互动式地图 目前最有效的数据时,他们邀请用户操作。显示数据之间的关系是容易当用户有能力改变视觉效果。这些优势,传统印刷的地图所没有的。如果打印地图最初并不清楚,一个人能做的很少做出清醒的认识。随着网上互动地图,移动滑块简单的动作周围揭示数据和内容之间的关系。

平移和缩放是基本的交互式地图。这些行动使用户能够专注于他们的信息量很舒服用自己的浏览器。

没有传说要求

在传统的印刷地图,传说作为符号翻译服务使用。 语境窗口需要消除对传说 在许多网上地图。而不必提及一个在边缘的象征解释,用户只需点击以了解更多有关这一点。在更少的步骤,减少眼球运动来达到同样的目的。为了说明这是多么直观的一种行动已成为网络用户,尝试了“美国最佳探险“下面的地图:

Points-of-interest-map in Maps In Modern Web Design: Showcase and Examples
单击一个点带出了一个上下文窗口。

传说,还需要在某些情况下。热图,例如,通过颜色的深浅强度显示,用户通常需要一个参考,使酒吧的信息意识。上下文菜单不作一刀切过时的传说只是简单的“兴趣点”。

常见类型的地图导航

比平移和滚动外,还有一个有趣的方式介绍数字地图上。下面是一些现代的互动中最常见的地图。请记住,混合和匹配这些方法大多数是可能的;一不一定妨碍他人使用。

当用户通过移动的数据,航行钻风格特异各级普遍提供。该钻清楚组从“大图片”到一个个别地方程度的信息。

谷歌分析提出了其世界地图钻取风格。通过点击一个特定国家,重新定位自己的地图静音其他国家,那么在国家和市级相同的。这允许用户控制而不被淹没的数据特异性。

Analytics-drilldown in Maps In Modern Web Design: Showcase and Examples

时间轴

一个时间轴滑块显示进度随着时间的推移在地图上。滑块并不一定代表时间本身。其主要目的是显示滑块之间的相关性的度量和地图的内容。

Immigration-timeline in Maps In Modern Web Design: Showcase and Examples

放大

这是从下钻方法不同,因为与缩放, 地图通常不会重建或改组各放大级。随着缩放,地图信息,可以更仔细地考察,而不是一个较小的区域集中了数据。

某些数据可能要到一定程度的放大倍率达到可见。这样可以不受细节,都在这个规模不大凌乱的更广泛的意见。这是一个街道名称,这是从视图中隐藏在下面显示的放大的例子。

Google-maps-zoom in Maps In Modern Web Design: Showcase and Examples

之前和之后

时间线的做法一样,这一个显示在同一地点的多个国家。所不同的是,之前与之后的方法只显示两个国家。这种风格已经显示了最近频繁得多,特别是卫星图像。

经过最近的海地灾害,纽约时报用于从太空拍摄的图像来创建一个综合的互动地图,显示了破坏。其结果是惊人的 之前和之后插图地震的太子港破坏

Before-after-haiti in Maps In Modern Web Design: Showcase and Examples

兴趣点

在1点利益地图设计,简直是把目标区域的背景下降。这使得用户可以专注于感兴趣的有关要点即刻。额外的信息可以传达的 相对大小的标记,使其 没有杂乱容易辨别地点之间的关系

Odopod对这个观点有更进一步的联系页面上提供了其办公室的前照片。找到合适的建设,是现在容易得多。

Odopod-point-interest in Maps In Modern Web Design: Showcase and Examples

地图作为信息工具

互联网和信息的数字化代表着一个有趣的改善印刷的地图。在调查和用户反馈一起使用,地图可以成为信息几乎是实时的代表性。使用这种方法,比较两个指标并排仅仅是一个理想的选择范围的问题。

在国家地理网站上的地图说明了如何使用互动式地图可从搜集的数据显示全球的趋势。大地的脉搏地图,例如,有一个侧面,它允许用户显示数据,如人口信息,肉类消费和毁林菜单。

Natgeo-earthpulse in Maps In Modern Web Design: Showcase and Examples

从政治世界

位置给出上下文时事。这也不奇怪,那么,新闻机构可视化与Web的地图,一些世界最具创新活动。

也许最沉重的时间映射时期是2008年美国总统选举。互动式地图显示每天创造了选民的意见。任何时候公布的一项民意调查,你可以肯定,一个交互式地图将很快跟进。由于信息是不断更新的数据捆绑,静态图将在数小时内已成为无关紧要。

在竞赛的白热化, 美国有线电视新闻网发布了一个工具 允许用户指定票和项目的候选人将最终获胜。因此,不仅在地图 提交 信息,而且成为 1产生的信息工具

Cnn-pick-electoral in Maps In Modern Web Design: Showcase and Examples

一旦大选结束后,该国的投票模式被映射为好。更有趣的版本之一,是华盛顿邮报的地图按县下来。该地图用Flash来提供一个360度的选举趋势的看法。整个战役的结果 有效地总结了在一个图形。

Election-2008-county-map in Maps In Modern Web Design: Showcase and Examples

这是地图往往重叠(甚至成为)资讯图像。所不同的是在演示和设计。在华盛顿邮报的地图, 这些资料是直接与某一特定地区。这些数据,然后,将只适用于它在收集范围内。一位30岁的女性选民在加州不是作为一个30岁的纽约女性选民一样。

非传统地图

虽然这篇文章中的地图大多数是物理位置,不要觉得你必须坚持这一点。 地理图是不是那里的地图只有一种。 地图也可以用来研究更多抽象的信息,而不是像 静态资讯图像。良好的说明了这与它的“和谐路线图“文稿。其结果是既符合逻辑和鼓舞地创造性。

Good-roadmap-harmony in Maps In Modern Web Design: Showcase and Examples
“路线图和谐”打破了基于位置的地图模具。

未来的位置

在我们查看了地图大部分是物理位置和建筑物。互动地图的未来将要容纳人的作用,也和人有一点要比砖块和道路移动。

服务,如 四方Gowalla 是要确保 地图和位置的智能手机用户日常生活的一部分。 Twitter的是迅速扩大其API,包括位置数据。凡你在任何时刻都具有显着的影响。这可能会导致网站,收集这些数据,使之成为地图,显示它的运动和趋势。

Twitter-local-trending in Maps In Modern Web Design: Showcase and Examples

从位置映射行动

想想有多少人在今年检查的SXSWi会议研究。整个会议的参加者是映射到基于位置的徽章感谢。这不仅仅是对个人偶尔更新其位置,它是一个示范如何 整个事件的“个性”,可以映射根据其参与者的行动。有了这么多的参加者在每个事件检查,数据可以被用于从饮食习惯,以决定一切的小组的兴趣。

Foursquare-at-sxsw in Maps In Modern Web Design: Showcase and Examples

以人为中心的地图

只有依靠对GPS定位的建筑物可能很快成为历史陈迹。我们可能开始看到有一个“寻找我现在在这里”一节中,利用GPS坐标完整网页设计师接触网页?橄榄球运动员 乍得Ochocinco 已经采取了这种互动的水平 整个新的水平。并没有什么阻止跳机上的一般人,太(隐私问题尽管)。

在Web地图的设计魅力

我们已经覆盖了许多基础知识今天。下面编译的魅力 更多的例子地图为你的灵感。由于 塔模式 为使所设计元素相对无痛的(尽管它尚未有地图节寻找的过程)。在下面的例子很多都是从那里清理和其他地点。

Explore-innovista in Maps In Modern Web Design: Showcase and Examples
交互式地图为Innovista,一个南卡罗来纳大学的庞大工程的未来发展。

Oxford-inns-map in Maps In Modern Web Design: Showcase and Examples
酒店牛津方面提出在它的位置。

Everyblock-spots in Maps In Modern Web Design: Showcase and Examples
EveryBlock显示都市报作为点利益标记。

Cuban-council in Maps In Modern Web Design: Showcase and Examples
一个建筑物的位置夸大渲染。

Kni-maps in Maps In Modern Web Design: Showcase and Examples
克尼使用的地图显示工作室的地点。

Victoria-star-3d in Maps In Modern Web Design: Showcase and Examples
即使不是也许规模,维星的地图提供的所有信息,你需要找到该公司。

Arc-inspiration-locations in Maps In Modern Web Design: Showcase and Examples
一个粗略的指南找到酒吧。

Good-wanderlust in Maps In Modern Web Design: Showcase and Examples
这一次探索著名探险的路线。

Teachingjobs-jquery-map in Maps In Modern Web Design: Showcase and Examples
一个开放的学校教师岗位的jQuery供电地图。

World-warcraft-map in Maps In Modern Web Design: Showcase and Examples
一个虚构的魔兽世界的互动地图。

建立自己的

展望生成一个项目,您自己的地图?虽然JavaScript和HTML5的已经走了很长的路, 基于闪存的替代品如 amMaps 还提供用于最强大的互动式绘图解决方案的一些。几乎每一个在此文章中提到的地图可以使用此兴建(或类似)系统。

Ammaps-sample in Maps In Modern Web Design: Showcase and Examples

如果你正在寻找一个非Flash替代看,Carsonified最近出版了一大 案例研究使用jQuery的互动映射,这说明这个过程。任何其他基于互联网的绘图系统,设计人员那里知道应该知道的?共享一个链接在下面的意见。

选择北京网站建设公司-传诚信,优质服务,绝对不容错过 !
1. 优秀的网络资源,稳定的网站和速度保证 
配送双线独立ip空间,国际A级BGP机房,99.5% 的主机在线时间) 
2. 7年北京网站建设经验,优秀的技术和设计水平,更放心 
3. 全程省心服务,不必担心自己不懂网络,更省心。 

-----------------------------------------------------------------------------------------------------
我们的与众不同之处:

    免费网络营销顾问:我们为您提供免费的网络营销顾问服务,您需要了解关于如何开展网络营销,电子商务网站设计等的事宜,欢迎随时联系我们。

    seo友好的网站管理系统:除了优质的网站空间,网站管理系统,和网站设计外,我们的网站管理系统更是seo友好的,包括:自定义栏目名,Google Sitemap自动生成,静态页面生成等等,让您的网站。

     免费网络营销培训:如何更好的投放网络广告,如何提高网络广告的投资回报,如何发帖子,
     如何优化网站,我们有丰富的经验开放给您!祝君成功!

联系我们:010-62199213 62122723-808 贾先生
北京网站建设公司-传诚信网站:www.ccxcn.com 点击查看经典网站案例

北京传诚信网站建设2010年建站套餐及优惠!点击查看!

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354