实例分析:从搜索结果看地图搜索的交互设计

每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。


每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

实例分析:从搜索结果看地图搜索的交互设计

无论是搜索引擎还是垂直搜索,都是用户输入搜索内容,数据库反馈搜索结果,并以列表方式展示。地图搜索区别与其他搜索的是,除了展示搜索结果列表,还要将结果位置直观标注与地图上。那么在地图搜索结果交互设计时,需要考虑到搜索结果与地图行为的互动。

以下从搜索范围、搜索结果与地图互动搜以及搜索结果排序方面,分享百度地图、高德地图等地图类产品的搜索体验,并进行相关分析。

一、搜索范围

百度地图搜索。当输入“美食”,然后更改地图范围,地图搜素结果数随之而更改。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

以高德地图搜索为例,输入“美食”,更改地图搜索范围,地图搜索结果数量不改变。始终是45页,每页20个。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

显然百度地图搜索以地图当前视野范围为准,而高德地图以当前所在城市为准。然而,当我点击百度搜索结果列表的下一页,下一页,再一页时,发现地图搜索范围一直在变更。如果以当前视野为范围的话,不是应该地图不改变,只是结果标注更改吗?于是忍不住一直点击下去。最后76页。然后再返回首页,更换一个地图范围继续,只点击搜索列表,一直点击下去,发现最后也是76页,再次重复几次,发现当前城市不改变时,搜索结果列表数量不改变。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

百度地图随“下一页”地图范围变化

可见百度地图搜索范围有两套,一套以地图上当前视野为搜索范围,一套以当前城市为搜索范围。当百度地图当前视野范围发生变化时,数据库重新进行检索,搜索结果返还当前视野范围的搜索结果数量,并在地图上标注检索结果,其中10个(对应一页检索列表)以醒目的数字形式标识,其他检索结果以红点方式表示;至于搜索列表一直以市区为检索范围,只是根据视野范围变化而重新排序。

高德地图搜索范围为所在城市,当地图范围发生变更时,检索结果重新排序,并将当前视野范围的检索结果优先排在第一页。

分析:

百度地图和高德地图都采用了全局搜索,并都将当前视野范围的结果优先排序,百度比高德更多的是将当前视野在搜索列表第一页以外的其他结果也在地图上标注,并告知用户当前视野范围搜索结果数量。

对于部分用户来说,也许只想在一定范围内(当前视野内)查找,而地图上只醒目标注的10或20个检索结果未必如用户所愿,因此在地图上标注其他检索结果,使用户获取更多信息,却有必要。搜狗地图、腾讯地图都是采用这种方式。但是,不是所有用户都确切了解当前视野内检索这一概念,一定有用户只是要检索相关内容的位置,而并没有考虑具体范围,这也是,所有关于搜索相关文章中说的,默认全局搜索的必要性。基于以上考虑,在天地图网站 ,采用了让用户做选择的方式,“视野内”或“当前城市”,满足了多种类用户的需求,然而不得不说相比“天地图” ,“百度地图”更加技高一筹,它将两种搜索范围做了更好的融合。

二、搜索结果列表与地图的互动

基于地图搜索范围不同,在搜索结果与地图的互动上有明显的差别,百度、搜狗、腾讯地图,这种基于地图范围的检索,当地图发生行为(平移、放大、缩小),检索结果迅速给出回应,并在地图上进行标注,用户的每一步行为都得到响应,这种用户体验很好。而高德采用以全市在检索范围,显然不会以地图行为触发检索,当移动高德地图的地图时,需要点击“搜索”按钮,触发后台数据库检索,搜索列表重新排序,并标注20个检索结果。当前视野范围不够20个时 还需要瞬间缩小地图以便满足当前地图屏幕标注20个搜索结果的需求。用户体验很不友好。对于所有电子地图网站,地图占据屏幕95%空间,不想到进行地图操作恐怕不太可能,而操作后没有即时响应,并在在点击“查看”后,地图又自动缩小以展示要查看的结果,这种交互体验不能令人满意。

三、搜索结果排序

百度地图和高德地图对于地图搜索结果都有默认排序和选择排序两种方式。

默认排序

各地图公司都有自己的默认算法。从表现形式来看,以当前视野为检索结果的搜狗地图、腾讯地图,点击下一页,地图不改变,地图上标注数据随检索结果列表下一页而更改标注。对于检索结果列表以全市为范围的百度地图和高德地图,则首先改变地图中心来平移地图展示当前地图级别的检索结果,然后随着检索结果列表的下一页逐级缩小地图比例尺。

筛选排序

百度地图在PC上的默认排序很奇怪,居然没有“距离优先”一项(APP上有),另外奇怪的是在“中餐馆”分类出现“火锅”,下面和“中餐馆”并列的大类又出现“火锅”,难道因为火锅是检索率最高的美食?

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

百度地图筛选

高得地图分类更多,而且排序更合理,表现形式也更良好。

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

实例分析:从搜索结果看地图搜索的交互设计

分析:

高德地图POI点分类更精细,数据量也更丰富(高德地图检索“美食”北京市内结果列表为45页,每页20个,总数量900个,而百度地图北京市内美食结果列表为76页,每页10个,数量为760个)。

总结:

每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

 

本文由 @giser 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25494/

(0)
CatherineCatherine
上一篇 2017-05-11 12:58
下一篇 2017-05-11 16:01

相关推荐

  • 如何保持交互与视觉的协调性

    转自微信号: 作者:小云子  我是UE / woshiue 我不想贬低文字的重要性,但也不想忽视视觉。两者是同等重要的交互设计元素。文字就是交互,但那些视觉元素(比如图标、菜单、图像等)才是用户实际上操作的东西。虽然…

    2015-03-30
  • 超全面的APP数据图表展现方式深度总结

    之前研究过一段数据图 表的最佳表达方式,随着手机端应用层出不穷地发展,这次将数据图 表的表现延用到手机端。相比 Web 端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?是否有更加合适的表现方式?下面是翻阅或试用了各种有数据的 App 后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表 的特性有更深的理解。

    2017-05-30
  • 价值重估的狗和鱼 一 有趣的哲学文章

    来源:经济观察报    李冬君 有人将庄子与古希腊哲人第欧根尼相比。两人同时,一个在东方,一个在西方,一个喜好在河边钓钓鱼,一个喜欢躺在街上像野狗那样晒晒太阳,在同一个天空下玩耍。   希腊是哲学的国度…

    交互设计 2014-09-21
  • 如何入手书写产品体验报告

    体验产品是PM工作中经常做的事情,企业也常留一些这样的实习作业给面试者,是因为产品体验报告一定程度上直观的反映了面试者的专业水平。求职过程中,如果能提交一份专业的体验报告,将大大提升简历通过率,获得面…

    2015-03-05
  • Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • 5个实用配图技巧,为产品带来优质体验

    图片不仅仅是装饰,更是强大的设计工具,可以帮你进行视觉传达,让你的产品脱颖而出。

    2017-05-12
  • 箭头符号:一个最常见却不容忽视的图标

    箭头符号可能是人类图形史上最伟大的创造。是的,这只是一个箭头,一个最常见不过的图标,但如何把它放在合适的位置,如何不过度的滥用这个符号,却是我们每一位设计师不得不每天面对的问题。“我怎么回去?”

    2017-05-13
  • 交互密度与最小交互区域

    体验优秀的App之所以优秀,往往是因为他们能让用户快速访问到各项功能。这里就涉及到多点触摸的交互密度,一个较大的触摸区域,在常规操作下十分好用。 或许对于一些用户来说,触控区域的大区块,视觉上可能有点难…

    2016-06-08
  • 什么样的体验是好的用户体验?

    互联网的时代,说是一个体验为王的时代,一点也不为过。在互联网时代,产品是否能够做成功,用户体验成为一个关键点,用户购买你的产品,并非是与你结束了交易,而是一个新的开始。当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

    2017-05-23
  • Axure官方教程中文版第2课:页面操作-木卫艾欧网原译

    Axure真正的官方教程,入门必备,木卫艾欧独家翻译,免费!

    2015-01-05