网页中的地图设计实例[译] Product & UX

网页中的地图设计实例[译]

Interact & Mockup, Product & Prototype 还没人评论 »

10年04月08日

随着移动通讯技术和移动设备的更新换代，移动互联网越来越深入生活，除了随时在线、不间断的跟好友保持联系，各种基于Local的应用也有机会突破以前依赖电脑网络的种种限制和不便，在移动互联网上大显身手。说到基于Local的应用，大概最直观的印象可能就是地图了。用什么样的形式，满足什么样的功能，在各种类型的移动设备上对各种操作方式提供最简单快捷的体验并呈现满意的结果，大约是不少设计师们在不远的未来将要接触到的问题了。

今天在Smashing_Magazine上面看到一篇说网页中的地图设计的文章，于是拿过来分享一下。虽然说的不是针对移动设备的，但其中的一些要点和思路也不妨拿过来举一反三。

==========开场白之后的华丽分隔线============

地理定位在2009年是个热门话题。通过很多支持GPS的智能手机上的应用程序，普通人可以接触到越来越多的地图。但是设计师和开发人员如何利用日益增长的有Local意识的用户群呢？这篇文章对现在的常用惯例、趋势和一些地图交互中可能使用的功能进行了探讨。

在线地图的基本原则

当大多数人想到网络上的地图的时候，最先想到的可能是Google, MapQuest and TomTom。这些是行业中的巨人，但是它们却没有什么创意。这些公司把地图当作是一项服务提供给大众。对于这篇文章里你将看到的地图应用，Google没有什么市场。有创意的地图应用领域还是一片蓝海。

这并不是一堂制图的课程，但是得知道地图在新的设计中如何为目标服务。对于大多数的任务，可以归纳为3个主要的方面：

导航和确定方位
从地理上反映关系和趋势
标示热点

Interactive Maps 交互式地图

在过去10年中技术的发展为网络上的信息展现提供了无数可能的方式。而交互与展现方面提升最快的工具就是地图。

网络上,交互式的地图在操作方面有着最高的信息展现效率。当用户改变视图的时候，交互式地图可以很容易的体现出信息之间的关联。这些是传统的地图所没有的优势。如果一张印刷的地图有点不清楚，人们几乎就没有办法去理解它了。但是网络上的交互式地图可以通过很简单的滚动条操作来展现信息和内容之间的联系。

平移屏幕和缩放屏幕是交互式地图最基本的操作。这样的操作让用户可以把他们的浏览器聚焦在他们觉得最合适的信息量上。

不需要图例

在传统的印刷地图上，人们需要通过图例去理解那些地图上使用的符号。很多在线地图通过使用弹出窗口改变了这种方式。用户直接点击某个点来得到更多的信息，而不用参考地图边上的那些图例说明。这通过更少的点击和更少的视觉焦点的移动就达到了目的。想看看这种方式对用户来说有多直观，可以去试试“America’s_Best_Adventures”下面这个地图：

点击某个点会打开一个弹出窗口

但是某些特定的情况下还是会用到图例，例如热区（点）图，通过色差来表现强弱程度，用户会需要一个参考栏来理解那些信息是什么意思。弹出窗口并不会让图例消失，只是让热点的展示更加简单。

Common Types Of Map Navigation 将地图用来导航的常见模式

除了平移和滚动屏幕，还有很多有趣的方式来显示数字化的地图。下面是一些新的交互式地图中最常见的。记住，其中的大多数是可以混用或者组合使用的；并不会用了一个其他的就不能用了。

Drill-Down （不知道怎么翻，聚焦模式？看了下面的图就容易理解了）

当用户需要进入不同层次的特定信息的时候，通常会使用“drill-down模式”来导航。“drill-down模式”把大图上广泛散布的信息清晰的组织在一起并显示在一块单独的区域里。

Google Analytics 在它的地图上提供了一种drill-down显示方式。当点击某个国家的时候，地图自己弱化了其他的国家，点击不同的州和城市时也是一样。这让用户可以决定显示多少信息而不会被大量信息弄晕掉。

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

Timeline 时间轴模式

通过时间轴滚动条可以在地图上展现时间的进程。时间轴滚动条并不一定要表现出时间本身，它最主要的目的是表现出时间轴的刻度与地图上内容的关系。

Zoom 缩放模式

这与“drill-down模式”不同的地方在于，在任何一个放大倍率，地图（上的信息）都不会被重新构建或重新组织过。通过缩放，地图上的信息会靠的更近，而不是为一块小地方重新组织显示的信息。

地图上有些信息可能会不可见，除非到了某个特定的放大倍率。这保证了当前倍率下地图不会被一堆没什么关联的细枝末节弄的乱78糟的。例如街道的名称，当放大倍率低的时候，它们将在地图上隐藏。

Before and After 前后对照

类似于“时间轴模式”，“前后对照”模式也可以显示地图上同一个位置的多种状态。不同的是“前后对照”模式只显示两种状态。这种模式后面会更频繁的出现，特别是和卫星影象相结合。

最近海地的灾难发生之后，纽约时报使用卫星拍摄的合成图片制作了一个交互式地图，反映了这场毁灭性的灾难。结果很显著：before-and-after illustration of the earthquake’s destruction of Port-au-Prince. （Port-au-Prince遭到地震毁坏的前后对比图）

Point of Interest 热点模式

在设计“热点模式”地图时，除了目标区域之外的所有东西都弱化到背景里面去。这样可以让用户立即把注意力放到和热点上去。附加的信息可以通过相关的标志标注出来，这样很容易就能看出不同的热点之间的关联。

Odopod在它的联系人页面上把这个主意更向前推进了一步，它把办公地点的照片放在了地图上。现在很容易就可以找到那所房子了。

Maps As Informational Tool 将地图用作传达信息的工具

网络和电子化的信息将会给印刷地图带来很有趣的发展。结合调查和反馈来使用，地图可以实时的表现信息。用这种方式，同时比较2个指标只需要选择好期望范围就好了。

国家地理网站上的地图展示了交互式的地图如何用来显示世界范围内趋势的变化数据。首先会有一个世界地图，侧边有一个菜单，用户可以通过菜单来控制地图上显示的数据，例如人口、肉类消耗和森林砍伐情况。

注：这个图建议去原网站看一下，效果很赞。要是能把不同的数据叠加对比，是不是会在更方便对比分析？

例如，想知道人口教育程度和森林砍伐情况之间有什么关系，把数据放在图上，叠加一下就能比较直观的有个印象了。

From the Political World 在政治领域

地理位置是时事发生的背景舞台。所以，通过网络上创新的地图进行可视化的新闻的组织就不显得奇怪了。

也许使用这类地图最多的时候要数2008美国总统大选了。交互式的地图每天刷新显示最新的选举情况。任何一张选票的投出，这个地图都会跟进刷新。因为地图上的信息需要和持续更新的数据绑定在一起，所以静态的地图很可能要不了多久就没用了。

当选举正火热的时候CNN发布了一个工具，用户可以进行投票然后预测哪位候选人将会获胜。这个地图已经不仅是显示信息了，而是成为了一个产生信息的工具。

当选举结束的时候，全国的投票格局也被用地图展示出来。其中最有意思的是华盛顿邮报按县分割的版本，该图用FLASH技术展示了360度全视角的选举趋势，整个战役的结果都被归纳总结到一张图里，非常高效的显示出来。

这就是地图越来越接近（甚至直接成为）信息图表的地方，只是展现方式和设计不一样。在华盛顿邮报的地图里面，信息被直接和一块特定区域绑定在一起，然后这个数据就只和它被绑定的区域相关联了。一个30岁的女性在加洲投了一票和一个30岁的女性在纽约投的票可是不一样的。

Unconventional Maps 非常规的地图

虽然这篇文章里大大多数地图都是基于物理上的位置的，但是不要只是这样认为。地理地图并不是地图唯一的种类。地图可以用来研究很多抽象的信息，不象静态的信息图表。好的图象展现就例如“和谐之路”，在逻辑和灵感上都很有创意。

“和谐之路”打破了基于位置的地图模式。

The Future of Location 地理定位的将来

大多数我们看到的地图都是基于实际的地点或者是建筑。将来交互式的地图必须要试着适应基于人的定位，而且，人与墙和马路是不一样的，人是会动的。

像 Foursquare and Gowalla 这样的服务证实，地图和定位已经是智能手机用户日常生活的一部分了。Twitter也立即扩展了它的API来支持地理定位的数据。在任何时间里，你的位置就有了不寻常的含义，它会被传送到网络上收集这些数据的网站上，然后转化成地图来表现那些动态和趋势。

Mapping Action from Location 把动态反映到地图上

想想今年的SXSWi会议有多少人checked in，会议能被反映到地图上全靠那些那些与会者的基于地理定位的标记。这与个别人偶尔上传他们的位置不同，这是一次“把整个活动的参与个体通过他们的行动标注在地图上”的示范表演。不少与会者checked in了每一个活动，这些数据可以用来了解很多事情，从饮食习惯到兴趣小组。

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

People-Centric Maps 以人为中心的地图

认为GPS只能标记建筑的想法很快就会成为过去了。也许我们很快就会看到某些设计师们的网站上联系信息页面上有一部分是“现在在这里可以找到我”，而且完全是基于GPS坐标的。NFL选手Chad Ochocinco 已经把这种交互带到了一个更高的级别。没有什么能阻止越来越多的普通人也加入尝试（尽管有隐私问题在）。