地图在现代网页设计的表现!
线上地图的基础知识
当大多数人认为在互联网上,谷歌,mapquest和tomtom公司可能浮现在脑海中的地图。这些都是业界的巨头,但他们是最有创意的远。这些公司提供服务的地图。正如你将看到来自各地的这篇文章中,谷歌并不拥有市场功能的映射应用程序。还有为创意地图创新的空间很大。
这并不是在制图课,但了解的目的是地图可服务于现代web设计是重要的。三个主要领域似乎代表了大部分任务:
导航和方向, 地理上的关系和趋势表明, 感兴趣的展示点。
互动地图
对web技术在过去10年扩张,开辟了若干门介绍在线数据。最迅速改善的工具之一是互动演示地图。
互联网上的互动式地图 目前最有效的数据时,他们邀请用户操作。显示数据之间的关系是容易当用户有能力改变视觉效果。这些优势,传统印刷的地图所没有的。如果打印地图最初并不清楚,一个人能做的很少做出清醒的认识。随着网上互动地图,移动滑块简单的动作周围揭示数据和内容之间的关系。
平移和缩放是基本的交互式地图。这些行动使用户能够专注于他们的信息量很舒服用自己的浏览器。
没有传说要求
在传统的印刷地图,传说作为符号翻译服务使用。 语境窗口需要消除对传说 在许多网上地图。而不必提及一个在边缘的象征解释,用户只需点击以了解更多有关这一点。在更少的步骤,减少眼球运动来达到同样的目的。为了说明这是多么直观的一种行动已成为网络用户,尝试了“美国最佳探险“下面的地图:
单击一个点带出了一个上下文窗口。
传说,还需要在某些情况下。热图,例如,通过颜色的深浅强度显示,用户通常需要一个参考,使酒吧的信息意识。上下文菜单不作一刀切过时的传说只是简单的“兴趣点”。
常见类型的地图导航
比平移和滚动外,还有一个有趣的方式介绍数字地图上。下面是一些现代的互动中最常见的地图。请记住,混合和匹配这些方法大多数是可能的;一不一定妨碍他人使用。
钻
当用户通过移动的数据,航行钻风格特异各级普遍提供。该钻清楚组从“大图片”到一个个别地方程度的信息。
谷歌分析提出了其世界地图钻取风格。通过点击一个特定国家,重新定位自己的地图静音其他国家,那么在国家和市级相同的。这允许用户控制而不被淹没的数据特异性。
时间轴
一个时间轴滑块显示进度随着时间的推移在地图上。滑块并不一定代表时间本身。其主要目的是显示滑块之间的相关性的度量和地图的内容。
放大
这是从下钻方法不同,因为与缩放, 地图通常不会重建或改组各放大级。随着缩放,地图信息,可以更仔细地考察,而不是一个较小的区域集中了数据。
某些数据可能要到一定程度的放大倍率达到可见。这样可以不受细节,都在这个规模不大凌乱的更广泛的意见。这是一个街道名称,这是从视图中隐藏在下面显示的放大的例子。
之前和之后
时间线的做法一样,这一个显示在同一地点的多个国家。所不同的是,之前与之后的方法只显示两个国家。这种风格已经显示了最近频繁得多,特别是卫星图像。
经过最近的海地灾害,纽约时报用于从太空拍摄的图像来创建一个综合的互动地图,显示了破坏。其结果是惊人的 之前和之后插图地震的太子港破坏。
兴趣点
在1点利益地图设计,简直是把目标区域的背景下降。这使得用户可以专注于感兴趣的有关要点即刻。额外的信息可以传达的 相对大小的标记,使其 没有杂乱容易辨别地点之间的关系。
odopod对这个观点有更进一步的联系页面上提供了其办公室的前照片。找到合适的建设,是现在容易得多。
地图作为信息工具
互联网和信息的数字化代表着一个有趣的改善印刷的地图。在调查和用户反馈一起使用,地图可以成为信息几乎是实时的代表性。使用这种方法,比较两个指标并排仅仅是一个理想的选择范围的问题。
在国家地理网站上的地图说明了如何使用互动式地图可从搜集的数据显示全球的趋势。大地的脉搏地图,例如,有一个侧面,它允许用户显示数据,如人口信息,肉类消费和毁林菜单。
从政治世界
位置给出上下文时事。这也不奇怪,那么,新闻机构可视化与web的地图,一些世界最具创新活动。
也许最沉重的时间映射时期是2008年美国总统选举。互动式地图显示每天创造了选民的意见。任何时候公布的一项民意调查,你可以肯定,一个交互式地图将很快跟进。由于信息是不断更新的数据捆绑,静态图将在数小时内已成为无关紧要。
在竞赛的白热化, 美国有线电视新闻网发布了一个工具 允许用户指定票和项目的候选人将最终获胜。因此,不仅在地图 提交 信息,而且成为 1产生的信息工具。
一旦大选结束后,该国的投票模式被映射为好。更有趣的版本之一,是华盛顿邮报的地图按县下来。该地图用flash来提供一个360度的选举趋势的看法。整个战役的结果 有效地总结了在一个图形。
这是地图往往重叠(甚至成为)资讯图像。所不同的是在演示和设计。在华盛顿邮报的地图, 这些资料是直接与某一特定地区。这些数据,然后,将只适用于它在收集范围内。一位30岁的女性选民在加州不是作为一个30岁的纽约女性选民一样。
非传统地图
虽然这篇文章中的地图大多数是物理位置,不要觉得你必须坚持这一点。 地理图是不是那里的地图只有一种。 地图也可以用来研究更多抽象的信息,而不是像 静态资讯图像。良好的说明了这与它的“和谐路线图“文稿。其结果是既符合逻辑和鼓舞地创造性。
“路线图和谐”打破了基于位置的地图模具。
未来的位置
在我们查看了地图大部分是物理位置和建筑物。互动地图的未来将要容纳人的作用,也和人有一点要比砖块和道路移动。
服务,如 四方 和 gowalla 是要确保 地图和位置的智能手机用户日常生活的一部分。 twitter的是迅速扩大其api,包括位置数据。凡你在任何时刻都具有显着的影响。这可能会导致网站,收集这些数据,使之成为地图,显示它的运动和趋势。
从位置映射行动
想想有多少人在今年检查的sxswi会议研究。整个会议的参加者是映射到基于位置的徽章感谢。这不仅仅是对个人偶尔更新其位置,它是一个示范如何 整个事件的“个性”,可以映射根据其参与者的行动。有了这么多的参加者在每个事件检查,数据可以被用于从饮食习惯,以决定一切的小组的兴趣。
以人为中心的地图
只有依靠对gps定位的建筑物可能很快成为历史陈迹。我们可能开始看到有一个“寻找我现在在这里”一节中,利用gps坐标完整网页设计师接触网页?橄榄球运动员 乍得ochocinco 已经采取了这种互动的水平 整个新的水平。并没有什么阻止跳机上的一般人,太(隐私问题尽管)。
在web地图的设计魅力
我们已经覆盖了许多基础知识今天。下面编译的魅力 更多的例子地图为你的灵感。由于 塔模式 为使所设计元素相对无痛的(尽管它尚未有地图节寻找的过程)。在下面的例子很多都是从那里清理和其他地点。
交互式地图为innovista,一个南卡罗来纳大学的庞大工程的未来发展。
酒店牛津方面提出在它的位置。
everyblock显示都市报作为点利益标记。
一个建筑物的位置夸大渲染。
克尼使用的地图显示工作室的地点。
即使不是也许规模,维星的地图提供的所有信息,你需要找到该公司。
一个粗略的指南找到酒吧。
这一次探索著名探险的路线。
一个开放的学校教师岗位的jquery供电地图。
一个虚构的魔兽世界的互动地图。
建立自己的
展望生成一个项目,您自己的地图?虽然javascript和html5的已经走了很长的路, 基于闪存的替代品如 ammaps 还提供用于最强大的互动式绘图解决方案的一些。几乎每一个在此文章中提到的地图可以使用此兴建(或类似)系统。
如果你正在寻找一个非flash替代看,carsonified最近出版了一大 案例研究使用jquery的互动映射,这说明这个过程。任何其他基于互联网的绘图系统,设计人员那里知道应该知道的?共享一个链接在下面的意见。