当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 地图网站的需求,功能和体验

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 地图网站的需求,功能和体验


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 241 ::
收藏到网摘: n/a

地图现在太常见了,几乎每天在地铁上都能看到卖地图的小贩,”09年新版北京旅游交通图,1块钱一份”,买的人多半是外地来旅游的,这些人需要地图来告诉他们现在是哪,要去的地方在哪,可以坐什么车.瞧,就是这张地图:

开个玩笑,这是一张1923年的北京地图.它虽不是本文的重点,但从现在开始我们就要往地图相关的内容上靠了.信息时代,啥玩意发展的都快,北京交通旅游图年年都换,甚至恨不得一年内出好几版,目的只有一个–”赚钱”,呵呵,貌似仔细看了看,除了小广告有所不同以外,实际内容有啥改动还真考眼力呢…人类是最聪明的,总能根据需要创造出新的东西来帮着自己偷懒.

没错,人是越来越懒,不过也越来越智慧,电子地图的诞生正在逐步取代纸地图.过去我们与纸地图交互的唯一方式,就是用手指在上面比划来比划去;而现在不但可以直接在地图页面上点选,还能通过输入关键字,甚至是使用语音来查找地点.只是找个地方,方式变化却如此之大,这是为什么呢?

不妨今天我们坐下来考虑几个问题:地图网站的需求,功能和体验.也思考一下高科技在带给我们便利的同时,还带来了什么.

需求篇

需求是一个产品诞生的原始驱动力.电子地图,地图网站或地图服务的兴起,除了依托互联网相关技术的发展外,更主要的是人因.我们可以罗列一下,是哪些想法在推动着它:

  • 要更快速更准确的找到目的地;
  • 不想再凭眼力去找,我知道地方的名字,只是不知道具体在什么位置;
  • 从我这到目的地有多远,怎么才能过去;
  • 我们碰头的地点是A地,我想知道周边有哪些场所,见面后想在附近吃饭;
  • 懒的记途经的地名和换乘站,是否可以打印,或者能把这些信息发短信给我;
  • 要下班了,想知道那条路回家畅通一点,交通流量如何;
  • 目的地附近有哪些建筑,楼宇大概是什么样子的;
  • 要是能实时提示我该怎么走,那就更好了(GPS辅助);
  • 几个人不在同一个地方,但要能看到同一张地图;

先举这么多.看,我们的想法多五花八门,但它们都是为同一个目标–简单,准确,高效!这是电子地图和纸制地图相比,最大的特点所在.为了要实现这些需求,设计师和工程师们真的是下了不少工夫,要把北京地图,中国地图,甚至世界地图统统装到一个只有纸制地图1/6大的显示屏里来,也不是件容易的事(虽然现在看起来再普通不过).

需求是问题,那功能就是答案.怎么来回答这些问题?

功能篇

很多时候,我们想一口气把问题全答完.等等,喘口气,别答乱喽.功能也一样,要有针对性,别弄一大堆功能上来,看着挺”充实”,其实有用的没几个.作为设计师,先听好问题问的是什么,需求要的是什么,然后再做相应的功能.当然,如果能把几个交叉重复的需求,用更少个数的功能表示明白,我想用户会感谢你的,他们会为你的设计买单.

看看上面列举的需求,是如何转化为功能的:

这个是 谷歌地图 的一个截图,用简单的几个字,就逐一回答了之前的问题.

比传统纸制地图快就快在,系统可以根据输入的目的地关键字,帮你完成哪些”眼力劳动”.

和看纸制地图一样,看看这儿,看看那儿.因为这些动作都要在屏幕里去完成,因此放大缩小起到辅助浏览的功能:先缩小找到大体位置,再放大查看具体地点.

这个是最吸引人的功能,也是对用户帮助最大的功能.不管是开车,还是坐公交,有了这些数据,出行心里就更有底了.

体验篇

地图类的竞品有很多,比较有名的: 谷歌地图 , 百度地图 , 搜狗地图 ,MapABC , Mapbar , 我要地图网 等…虽然主要功能和达到的目的都一样,但使用上还是有差别的.这些功能的差别来源于针对人群的差异性,功能的设置,技术水平,以及对产品的认识.

1. 城市选择

谷歌: 默认城市是”北京市”,可同时细选各个区县

百度: 默认城市是”北京市”

搜狗: 默认是”北京”

MapABC: 默认是”北京”

Mapbar: 默认是”北京市”

我要地图网: 默认是”全国”

从上面的例子不能发现,多数网站都能通过ip获取用户当前所在的城市,在页面加载初始化的时候,就确定城市.这会让用户感到很亲切,也能少操作一步.

2. 初始界面

谷歌: 初始为北京市地图

百度: 初始为北京市地图

搜狗: 初始为北京市地图

MapABC: 网站本身界面

Mapbar: 网站本身界面

我要地图网: 网站本身界面

貌似以搜索见长的网站,初始界面焦点是北京市地图;而以地图为主产品的网站,焦点则是搜索框.或许专门的地图站点都有一个”首页”情节.

3. 关键字输入

谷歌: 自动匹配相关地名

百度: 没有自动匹配功能

搜狗: 没有自动匹配功能

MapABC: 没有自动匹配功能

Mapbar: 自动匹配相关地名

我要地图网: 自动匹配相关地名(可能是编码问题,匹配出来的字是乱码)

自动匹配(Auto Complete)虽然不是新鲜的东西,但考虑到技术成本,有些网站还是省掉了这个功能.其实这就是一个响应顺序的问题:自动匹配是事前响应,而没有这个功能的站点采用事后响应的方式,当用户触发”查找”动作以后,模糊查询含有关键字的地点,反应在地图上.体验上前者更好些,为什么这么说,是因为自动匹配其实是在帮助用户精确地段,缩小范围.

4. 地标指示及附加功能

谷歌: 地址,到这里去,从这里出发,周边搜索

百度: 地址,电话,到这里去,从这里出发,周边搜索

搜狗: 地址,电话,到这里去,从这里出发,周边搜索

MapABC: 地址,到这里去,从这里出发,周边搜索

Mapbar: 到这里去,从这里出发,周边搜索

我要地图网: 到这里去,从这里出发,周边搜索

从上图比较来看,地标提示框除了标明地点外,”到这里去,从这里出发,周边搜索”是其主要功能.这几个功能是较纸制地图最大的优势所在.传统地图只能告诉我们地点在哪,而电子地图解决了我们最关心的问题–怎么去!

5. 交互形式

用户可以在地图界面内,使用鼠标进行拖拽,改变页面框架内显示的区域.这是模拟我们在看传统纸制地图时用视线寻找地区的样子.屏幕内显示的内容有限,就算我们移动视线也看不到页面以外的东西,但拽进来不就看到了.正所谓”山不过来,我过去”.

依靠鼠标滚轮上下移动,我们可以放大缩小地图显示的范围.这也是优势之一.配合卫星功能(不是所有地图网站都有这个功能)还能看到建筑群是个什么样子.

6.用户界面

点在地图网站的界面都大同小异,一列显示备选地点,其余区域(尽量大)用来显示主地图.线框我就不画了,很好理解.道路,建筑等图示都模拟传统地图,降低学习成本.

发展趋势

随着科技发展,移动终端的丰富,互联网技术的提升,电子地图的载体正逐渐从家用电脑转向手机,GPS,便携式电脑.未来我们无论步行出游,驾车,还是出差,都可以通过无处不在的网络,更方便的使用电子地图带来的便利.快速定位,路线指引,周边搜索将越来越深入人们的生活.高效,信息更丰富将成为未来电子地图的主题.