实例分析:室内地图交互体验分析

因为做室内定位项目,需要涉及到室内地图相关功能,故分析、探寻高德地图、百度地图APP的室内地图设计逻辑,以为项目借鉴。本文从室内地图展示,室内地图与导航栏的对应两方面来分析对比,并针对部分内容提出相关建议。


因为做室内定位项目,需要涉及到室内地图相关功能,故分析、探寻高德地图、百度地图APP的室内地图设计逻辑,以为项目借鉴。本文从室内地图展示,室内地图与导航栏的对应两方面来分析对比,并针对部分内容提出相关建议。

实例分析:室内地图交互体验分析

因为涉及到专有名词,如有不太理解的同学,可以查看下面来自百度百科的解释。

瓦片地图:

确定地图服务平台所要提供的缩放级别的数量N,把缩放级别最低、地图比例尺最大的地图图片作为金字塔的底层,即第0层,并对其进行分块,从地图图片的左上角开始,从左至右、从上到下进行切割,分割成相同大小(比如256×256像素)的正方形地图瓦片,形成第0层瓦片矩阵;在第0层地图图片的基础上,按每2×2像素合成为一个像素的方法生成第1层地图图片,并对其进行分块,分割成与下一层相同大小的正方形地图瓦片,形成第1层瓦片矩阵;采用同样的方法生成第2层瓦片矩阵。。。如此下去,直到第N一1层,构成整个瓦片金字塔。

首先用(如ArcGIS软件等)对地图数据进行处理,配成需要的图层方案,并保存方案。

再用软件自带功能进行切片,切片过程中选择切片方案,根据所选方案不同,例如金字塔级别不同,地图切片范围不同等,都会影响到切片的速度。切片之后的数据称为瓦片。

POI:

POI是“Point of Interest”的缩写,中文可以翻译为“兴趣点”。在地理信息系统中,一个POI可以是一栋房子、一个商铺、一个邮筒、一个公交站等

一、 室内地图展示

无论高德地图还是百度地图还是其他电子地图网站为提高浏览速度一般以瓦片形式来逐级展示具体数据,各POI点的图标和标注作为覆盖物覆盖在瓦片数据上。那么具体到室内地图这块,设计人员需要考虑室内地图应该如何展示?如果是逐渐展示,那每一级具体展示什么信息?展示效果应该是怎样?

1、展示效果

我们先看百度地图和高德地图的室内地图展示效果。

左图为百度地图,右边两幅为高德地图。可以看到百度地图,在标注1处,仍然有原室外地图建筑轮廓外露(颜色同标注2处一致),而且室内地图建筑物轮廓用色与室外区分不明显。右边两幅高德地图有室内地图的区域就只展示室内地图,建筑物轮廓与背景色反差也明显,整体看上去清晰明了。

实例分析:室内地图交互体验分析

显然百度地图是直接在室外地图上叠加室内地图图层,没有做任何处理。我们来分析如何做到像高德地图一样?实例分析:室内地图交互体验分析

实例分析:室内地图交互体验分析

上面图一个为高德地图的pc端一个为高德移动端的相同位置。PC端红框标出,很明显仍有室外轮廓外露,对应下面移动端相同位置数据,红框标出已经都没有了。那高德地图APP具体做法,个人认为首先应该排除删除原室外建筑这种做法,因为对于切片地图而言,如果要删除有室内地图的原室外建筑,那就得在各级别的瓦片上查找建筑,进行图片处理进行删除,这样做显然太麻烦。或者重新进行矢量地图制作去除掉室外建筑,再切片,然而有室内地图数据的建筑总是在更新,每次更新都要重新制作地图再切片显然不合理。个人认为高德的做法应该是先在叠加室内地图的区域覆盖一个与该区域相同颜色的纯色底图,底图大小要能将原室外地图轮廓都盖住,在此基础上再叠加室内地图。

2、逐级展示

因为室内地图结构比较简单,无论高德还是百度在各个级别室内地图展示内容都相同,只是随级别增加地图逐渐放大,图面上的POI点逐级增多,比如在100米时,开始显示室内地图,poi点只显示商场名称,在50米时增加几个poi点名称和图标,到25米,POI点图标更多。下图一从左到右依次为100米,50米,25米的西单大悦城地区百度室内地图。下图二从左到右依次为100米,50米,25米的西单大悦城地区高德室内地图。

实例分析:室内地图交互体验分析

实例分析:室内地图交互体验分析

分析:

虽然高德和百度室内地图均是逐级增加POI信息点,但是因为比例尺不太相同的原因(级别都是100米,但是100米对应的的实际屏幕尺寸不相同),从图面我们可以看出同一个西单大悦城百度地图室内地图在手机屏幕上看上去比高德的更小,受制于屏幕展示大小所以逐级添加的POI 信息点量也少。从出现室内地图,放大两级,至25米时看到的信息量依然很少,给用户感觉就是放大这个操作没有更多信息响应。而高德地图到20米级别时展示的poi信息量已经很丰富。

另还有一个细节:从图面上看百度地图是在100米时,展示了所有室内地图。而高德地图在100米,君太商城、西单新一代商城都没有室内地图,而是在地图到50米级别时才出现。高德将室内地图也做分级处理,保证了比例尺较小时,图面不拥挤,而且从易用性来看太小面积的室内地图展示也没有意义。

因此在室内地图的展示和逐级内容响应来看高德地图无论美观度还是交互体验明显优于百度。

具体做项目设计时在什么级别开始展示室内地图,在各个级别展示的POI点具体是哪些,这些都需要产品经理根据实际业务情况给出明确内容,保证地图图面美观与易用性,使用户交互体验更好。

二、楼层切换

一旦进入室内地图,那么我们需要考虑室内地图楼层切换。看起来很简单,只需要点击楼层切换条对应的楼层,地图上进行相应楼层展示即可。

不过这当中存在两个问题,楼层导航条何时出现(具体来说就是通过什么事件触发楼层导航条显示);如果出现多个建筑,楼层导航条与建筑物该如何对应。下面我们逐一进行分析。

1、楼层导航条

先上图,从左到右依次为100米级别下,初始进入没有楼层的西单大悦城区域地图,进行各种平移的西单大悦城区域地图,进行建筑物点击后的西单大悦城区域地图。

实例分析:室内地图交互体验分析

上图中这几种情况下都没有楼层导航条,推测这种交互的逻辑为初始显示室内地图时,因室内地图范围较小,用户即便切换楼层也看不到更多内容,所以在该级别无需进行楼层切换,故不需要展示楼层导航条。

实例分析:室内地图交互体验分析

上图为50米级别时,左图为进行平移,右图为进行点击选中建筑物后的互动效果图,依然不会出现楼层导航条。

实例分析:室内地图交互体验分析

上图为25米级别,开始展示室内地图,中间图为同样区域稍微挪动一点之后,楼层导航条消失,右图为点击选中一个区域,该区域进行自动平移至图面居中,并显示楼层导航栏。

通过以上对比可以看出,高德地图在楼层导航栏触发和存在的条件为:1、图面级别足够大(高德为25米级别);2、必须有建筑物在图面中心(高德地图应该是设定了一个屏幕中心点)。一旦不满足这两个条件之一楼层导航条就消失。

百度地图在楼层导航条的设计逻辑与高德地图相同,均以图面级别与建筑物在图面中心为必须条件。只是百度地图在50米级别即可以进行楼层切换(具体多大级别展示室内地图不在本文讨论,见仁见智。)

2、楼层导航条与建筑物对应

基于以上逻辑,无论有多少室内建筑,只需要考虑哪个建筑物的室内地图触发了设定的中心点,则楼层导航条对应该建筑物即可。

这里涉及到一个细节,高德地图无论室内室外,都是点击图面图标,该区域自动移至屏幕中心。高德地图当级别足够大可以出现室内地图时,点击某建筑室内地图则该室内地图自动移动至屏幕中心,则会触发楼层导航栏的对应,则楼层导航栏自动切换为该建筑物,以上流程简单来说就是高德地图用户点击哪个室内地图则导航栏对应该建筑。

而百度无论室内室外,点击图面图标,该区域位置不改变,那么当出现楼层导航条时,存在如下问题:楼层导航条对应西单大悦城,但是笔者想要看下君太百货的详情时,只能通过平移地图,如果点击君太百货,仅在底部展示君太百货概要信息,而楼层导航条依然对应于西单大悦城。这种交互响应有些欠缺,毕竟地图占据了足够大的屏幕。用户更关注图面信息。另外,从逻辑上来说,用户既然点击君太百货,必然是需要关注该区域。自动切换屏幕中心,并将楼层导航条自动对应才合理。

实例分析:室内地图交互体验分析

3、楼层切换

1)楼层导航条保留记忆

左图为西单大悦城5层,中间图为为君太百货,右图为从君太百货再次移动至西单大悦城,可以看到有图楼层导航条会保留记忆,自动显示为5层。百度地图与高德地图均有此功能。

实例分析:室内地图交互体验分析

2)导航条的使用

高德地图的楼层导航条保留五行,对应五个楼层,导航条第一行和第五行的楼层号灰色处理,二行和第四行为主要楼层切换区域,第三行表示当前楼层,凡是进行楼层切换,整体导航栏的楼层号自动上移或下移,使选中楼层对应到导航栏最中间第三行(见下图左图)。即将要切换到最顶层或者最底层时,上下区间都会保留一个空白格(见下图右图),这样用户操作不会存在无法选中这种情况,而且会给用户以相应提示已经到达最顶层或者最底层。

实例分析:室内地图交互体验分析

而百度地图如下图(左图和中间图),笔者用尽洪荒之力,依然无法再向上或向下移动一个楼层,想要切换4层或者10层,必须采用向上或者向下的楼层导航箭头进行切换,而笔者因为不够纤纤玉指,实在够不到啊,好不容易图面有所反应又是不小心选中了西单商场超市(见下图右图)。

实例分析:室内地图交互体验分析

分析:

百度地图的逻辑为如果需要进行楼层切换,点击向上向下箭头进行楼层移动即可,那么建议,向上向下的箭头行高适当做大一些,至少可以做到像楼层号一样。另外将楼层导航条做到右上方,再使用向上向下的箭头实在有种指长莫及的感觉。建议楼层导航条适当向下挪动。而且楼层导航下面的爱逛图标距离也太近了些,容易误操作。

三、  总结

逻辑决定交互,细节决定品质。本文对百度地图和高度地图的室内地图交互逻辑以及相关细节进行了分析,并提出相关建议,希望能够给大家一定启发。

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-09 04:15
下一篇 2017-05-09 06:06

相关推荐

  • 阿里UED:优秀阿里设计师如何养成

    编者按:一个优秀的专业交互设计师该具备哪9个素质?一个完整的交互设计流程该经历哪12个阶段?今天阿里的交互设计师从零开始一一帮你解答这两个问题,非常适合新人入门哟。一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后...

    2018-03-09
  • 申请授权的正确打开方式

    你知道吗,一款APP在安装后的三天内,平均会失去80%的活跃用户。大部分用户使用一次就会卸载。用户想要尝试不同的APP,在使用几天后决定继续使用还是删除它。

    2017-05-21
  • 5个关键词看小程序和App的UI设计异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

    2017-05-16
  • 用户体验让生活更美好

    我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。图片来源:亚朵官网-Life is Atour周四晚上拉着应用体验部的穆老师在产品交互问题上聊了一个多小时,深受启发,再结合上周末去天津游玩,入住了梁宁老师在得到里推荐的非常注重用户体验的亚朵酒店,所以我觉得今天有必要在这里和大家聊聊用户体验的话题。图片来源: Scorch先声明用户体验设计不是视觉设计或UI设计,后者只能算是前者的组成部分。“用户体验”一词是Don...

    2018-04-02
  • 各国货币简称及符号

      欧元,英镑,澳元,人民币,马来西亚币,印尼,新加坡币,新西兰,越南,韩币,泰铢,菲律宾,日元,美金等等货币的简称与符号,标准符号。 中国 人民币:元 Renminbi Yuan RMB¥ CNY 1CNY=10 jao (角)1 j…

    交互设计WiKi 2015-09-15
  • 在进入网易后,我对用户体验界限的思考

    作为一个用户体验设计师,除了接需求做需求之外,需要定期的对自己的项目进行反思,在反思的过程中,总结经验教训,这是在专业上成长的一个重要方式。这篇文章,就是来自于对自己进入网易后的一个反思。在我日常的反思中,比较天马行空,并没有特定的线索,也许是页面上一个按钮的使用方式,也许是当前业务的商业化路线。而本文的这个题目是今年最常思考的一个问题,主要关于自己对于界限的理解。

    2017-05-10
  • 让手势设计带你的产品体验“飞”…

    小Q在《细节体验|你离用户只差一个好的交互》一文中较为详尽的归纳了反馈给用户体验带来的好处,那么,今天我就继续讲讲“动作”(即为手势)是如何让你的产品体验可以“飞“起来的。本文所指的直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验。一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感,二是滑动过程中,用户的视觉可以看到的空间更整洁,体验更纯粹。

    2017-05-17
  • 交互设计专业排名最高的大学有哪些

    上周四,康石石在《珠宝设计专业排名最高的大学有哪些》中,为同学们于世界范围(英、比利时、美、意大利、荷兰、挪威、瑞典、德国、爱沙尼亚)内梳理了22所顶级珠宝名校,并在文末许诺阅读量达1000,即为最热情的上墙读者解答艺术留学问题。本周四,康石石兑现承诺,继续为大家推荐货真价实的全球顶级院校,供所有希望出国深造交互设计专业的同学们,提供一份足以信赖的院校清单。写在前面的话交互设计,对于90%同学而言,其实都是一个未知的概念,这直接导致了各...

    2018-02-02
  • 交互设计需要掌握哪些"必备"心理学知识?

    交互设计是以人为中心的设计,设计者要站在用户的角度出发,深入、全面的了解用户的需求才能够设计出具有良好用户体验的产品。而想要在作品集中向考官体现同学们对用户心理需求的把控能力,除了做好用户调研之外,也要掌握一些常用到的心理学知识。交互设计是人与其他一切事物之间的行为设计,而人的行为中包含感知和认知这两种与心理学密切相关的要素,因此,同学们在设计项目时,每一个功能设计、每一个操作流程以及UI的设计都要基于了解用户心理学的基础上开展设计。本...

    2018-04-10
  • UI 设计师如何让设计稿100%还原(上)

    大部分新手设计师可能都会遇到一个问题,设计效果很赞,为何还原效果那么差?是开发不行?然后就吐槽开发傻X,可很少有人想过是否是自自身的原因,在开发过程中就不断和开发撕逼。今天我介绍一些关键点,通过这套系统的方法来解决你的视觉还原度,希望这篇文章能帮助到你。

    2017-04-28