探讨在线互动地图应用的设计趋势和未来

http://www.itjxue.com  2015-08-07 21:33  来源:未知  点击次数: 

在2009年里,地理定位是一个热门的话题。随着大量支持GPS手机的应用,普通用户获取地图服务变得越来越便利。但是网站设计人员和开发人员怎么样能利用好这个日益增长的位置感知的用户群呢?这篇文章将探讨在线互动地图应用的当前趋势、惯例和可能的未来。

 


在线地图的基础

当大多数人想到在互联网上使用地图的时候,GoogleMapQuestTomtom可能已经想到了。它们都是这个领域的巨人,但是它们缺乏最有创意的想法。这些公司只是将地图作为一种服务。正如你将在整篇文章中看到的那些有特色的地图应用,Google并不占有这个市场。对于有创意的地图应用的空间仍然很大。

 

这不是一节制图学的课程,但是能理解地图应用到现代网站设计中这个目的是重要的。任务的主要部分似乎可以由以下三个主要领域来表示:

<!--[if !supportLists]-->1.      <!--[endif]-->导航和方向;

<!--[if !supportLists]-->2.      <!--[endif]-->地理关系和趋势的显示;

3.      <!--[endif]-->关键点的显示。


 

交互式地图

过去十年互联网技术的发展开辟了许多在线数据展示技术的应用。其中增长最快速的交互式展示工具是地图。


当互联网上的交互式地图邀请用户操作时,它们能最有效地为用户展示数据。当用户有能力改变显示效果时,显示数据间的关系是比较容易的。如果一张印刷地图起初不是很清晰,那么人们将不能很好地理解它。通过在线交互式地图,简单地移动滑动条就能够揭示数据与内容之间的关系。

 

平移和缩放是交互式地图的基本操作。这些操作能让用户把浏览器聚焦在感兴趣的信息上


 

不需要任何图例

在传统的印刷地图中,图例是作为符号解释器使用的。许多在线地图的上下文窗口减少了图例的使用用户只需简单点击地图上的点即可获取相关信息,而不是参考页边的图例这样做的结果是通过较少的步骤和眼睛移动达到了同样的目的。为了解释这对于网络用户是多么直观的操作,请访问America’s Best Adventures,打开的地图如下:


点击小圆点打开一个上下文窗口

在某些情况下,图例仍然是必需的。例如:Heat maps通过颜色的深浅来显示强度,用户通常需要一个参考栏来理解这些信息。上下文菜单并没有使得图例完全过时,这仅仅是针对简单的兴趣点。


 

地图导航的一般类型

 

除了平移和滚动,还有许多有趣的方式来展示数字地图。下面是一些在当前交互式地图应用中最常用的一些方法。记住,将这些方法中的多个结合起来使用是可行的。使用它们中的一种方法并不妨碍其它方法的使用。


Drill-Down

当不得不在特定数据的不同级别移动时,用户通常可以使用drill-down的导航方法。这种方法清晰地将信息分组,其范围覆盖了从“大图”到个人情况的任何地方。

Google Analytics在其世界地图应用中使用了drill-down模式。通过点击一个特定的国家,地图自己会重新定位到该国,而同时屏蔽掉其他国家。在州和市的级别上可以做相同的操作。这使得用户在没有被信息淹没的情况下能够控制特定的数据信息。



时间轴

 

一个时间轴滑动条显示了地图上随时间推移的进度。滑动条并不意味着时间本身。其主要目的是为了显示滑块和地图内容之间的相关性。



缩放

 

 

 

这种方法由于使用了缩放而不同于drill-down对于每一个级别的放大操作,地图通常不用重建或重组。地图通过缩放允许信息能更加紧密地被验证,而不需要为了较小的区域重组。

某些数据只有当放大到一定级别的时候才是可见的。这保持了较宽的视角,避免了在当前的尺度下因为一些无关细节信息而显得杂乱。例如街道名,在下面的显示中其被隐藏。

 

 



过去和未来

时间轴的方法显示了同一地区的多种状态,而过去和未来的方法与其区别在于只显示同一地区的两种状态。这种方法最近被频繁地使用,特别是在卫星地图上。

在最近的海地地震之后,纽约时报使用从太空拍摄的图片,生成了一个交互式地图,显示了海地受到的破坏情况。通过过去和未来的方法我们可以看到此次地震对于太子港的破坏结果是令人吃惊的。



关键点

在关键点地图的设计中,除了目标区域,一切都将放到背景中。这使得用户能立刻注意到相关感兴趣的地方。额外的信息可以通过标记的相对大小来表达,使其很容易地辨别出无杂乱信息干扰的地点之间的关系

Odopod采用了这种方法,在其联系页面上通过放置其办公室的正门照片。找到正确的大楼现在变得很容易。



地图作为一种信息工具

互联网和信息的数字化代表着印刷地图一个有意义的变化。将调查和用户反馈结合起来,地图可以几乎变成实时的信息表现。通过这种方法,同时比较两个度量对于想要的范围是一个简单的事。

在国家地理网站上的地图说明了如何使用交互式地图从搜集的数据来显示全球的趋势。例如,Earth Pulse的地图,在其侧面上有一个菜单,允许用户显示数据,如人口、肉类消费和森林破坏等信息。



来自政界

位置定位给当前事件赋予了事件发生的背景信息。新闻机构使用互联网上最有创新的地图应用可视化世界上的新闻事件,这一点也不奇怪。

也许2008美国总统选举是应用交互式地图最多的时期。交互式地图每天更新,用于显示民意。任何时候公布一项民意调查,你都能确信一个交互式地图将马上跟进。因为信息被绑定在可以时时更新的数据上,一个静态地图在数小时内变得无关紧要。

在竞选的白热化阶段,CNN发布了一个工具,允许用户投票预测哪一个候选人将最终获胜。因此地图不仅可以展示信息,而且也成了一个产生信息的工具


 

一旦选举结束,国家的投票方式也被绘制成地图。比较有趣的一件事是华盛顿邮报的地图,它使用flash提供一个360度关于选举趋势的视角。整个竞选的结果有效地总结在一张单一的图上


地图在这里与信息图表的功用重叠,甚至自身就是信息图表两者间的区别只在于表现方式和设计上。在华盛顿邮报的地图上,信息被直接绑定在一个特定的地区。那么这个数据将只与其被搜集来的地区相关。一个30岁加利福利亚的女性选民和一个30岁纽约的女性选民是不一样的。


非传统的地图应用

虽然这篇文章中的大多数地图是物理定位,但是你不要觉得必须这样做。地理学上的地图不是这里唯一类型的地图。地图也可被用于浏览抽象的信息,和静态信息图没有什么不同。GOOD网站用其“Roadmap to Harmony”演示说明了这一点。其结果是既符合逻辑又富有创造性。


“Roadmap to Harmony”打破了基于位置的地图模型。


定位服务的未来

我们看到的大多数地图都是物理的位置和建筑物。交互式地图的未来将不得不考虑到人的因素,而且人比砖头和道路具有较大的移动性。

Foursquare Gowalla 的服务正在使人们相信地图和定位服务正在成为智能手机用户日常生活的一部分Twitter很快地扩展了其API来包括了位置信息。在任何特定的时刻你在哪里都有着显著的影响。这可能会使得搜集这些数据并使之成为地图的网站能够显示其运动和发展的趋势。



 

位置映射行为

 

 

想想有多少人登记了今年的SXSWi会议。整个会议根据参与者基于位置的徽章被制作成了地图。这不仅仅是个人偶尔会更新其位置,这是一个演示:如何将整个事件的“个性”基于参与者的行为制作成地图。由于有这么多的参加者登记每一件事,该数据能被用来决定从饮食习惯到小组兴趣的任何事情。



 

以人为中心的地图

 

依赖GPS仅仅用来定位建筑物可能即将成为过去。我们可能开始看到网站设计师的联系页面,那里有一个用GPS坐标制作的“Find me here now”部分? NFL 玩家ChadOchocinco已将这一层次的互动推向一个全新的水平,没有什么能阻止普通人去做这种尝试(尽管涉及到隐私)。


 

网站设计中地图应用的展示

 

今天我们讨论了许多基础知识。下面为了让你有更多的设计灵感,我们提供了更多的例子。感谢Pattern Tap网站使得搜索这些例子的过程相对轻松些(即使它还没有地图应用的部分)。下面的例子中许多都来自于那里和其他网站。

  

 


关于Innovista未来发展的交互式地图,一个南卡罗来纳大学的庞大项目。

 


牛津饭店将其位置信息放入地图中


EveryBlock将城市新闻显示为关键点标记


一个关于建筑物定位的夸张渲染。

  


KNI使用地图显示工作室的位置。


 

即使不是精确,Victoria Star的地图提供了你需要找到该公司的所有信息。

 

  


一个粗略的酒吧寻找指南。


这个探讨了有名的远征路线。

  


一个jquery开发的关于开放学校教师岗位的地图

  


一个关于Warcraft虚拟世界的交互式地图。



  

创建自己的地图应用

很想在一个项目中为自己生成一个地图吗?虽然Javascriphtml5已经出现很久,但是像amMaps基于flash的可替换方案仍然提供一些最强大的互动式地图的解决方案。几乎每一个在此文中提到的地图都可以使用这个(或类似的)系统来创建。


如果你正在寻找一个非flash的解决方案,Carsonified最近发布了一个伟大的案例,研究使用jQuery来制作交互式地图,在其网站上解释了这一过程。除了这里的设计人员应该知道的以外,你还知道任何其他基于互联网的地图应用系统吗?如果你知道的话,请在下面的评论中分享一下链接。


Zach Dunn 是一名One Mighty Roar的合伙人,界面设计师和互联网狂热份子。他和他的孪生兄弟共同运营着一个名叫 Build Internet的博客,主要关注于网站设计、开发及其相关的商业活动。

(责任编辑:IT教学网)

更多