美文网首页
[思考]设计模式杂谈-地图

[思考]设计模式杂谈-地图

作者: ShusQ | 来源:发表于2017-06-05 15:57 被阅读31次

    现在的地图已经进入了生活中更多的领域,LBS(Location Based Service 基于位置服务)丰富在了更多的线下场景,外出购物,路线导航,打车出行,预定房间,叫个外卖,甚至是附近交友,地图都会扮演一个重要的角色。相较于其他的个性化服务方式,LBS收集信息更为准确,易于实现。想想看,你去优化一个feeds推荐算法有多头疼。

    地图在app中的应用十分广泛,在这里谈谈如何在app中引入地图,并且让它易于使用,以及案例中的设计亮点。

    加入地图可以给产品带来哪些提升?

    地图可以让你的产品变得:直观,可视化;灵活,可操作性。

    直观,可视化

    地图上的信息是聚合的,并且可视化程度很高,你可以通过地图上的标识来读取到想要的信息,例如目标地点所处的方位,相距的距离,还有附近其它你可能关心的信息(预定房子你可能期望了解附近的商圈信息)。而这些信息,通过文字很难去表达,或者说不足以在页面中(尤其是移动端)做到精简地表达。

    一款app的附近餐厅

    在这个例子中,附近的餐厅以list的形式呈现,位置信息智能通过店名括弧后的信息显示,第三个item则显示不全。能够获取到的餐厅信息不多,也无法让用户产生探索欲。

    灵活,可操作性

    相较于文字或者列表,地图可以进行移动,缩放,旋转,元素化。丰富的交互类型,可以让用户直接在地图上操作,而无须在页面上递进跳转。相交于从表单和图片库中去苦苦搜寻,便捷了不少。

    如果用户并不关心地理和位置信息,或这些信息只是次要的内容,那么可能不适合引入地图,因为大量的次要/无关信息只会消耗用户的精力去探索,然后卸载。

    接下来谈一些设计上的小方法,一点点的提升地图的使用体验。

    1.始终明确的定位

    如果你提供的服务与用户所在的地点有关联的话,那么需要通过图钉或高亮的圆点,来明确用户当前所处的地点,让用户清楚自己当前的位置。并且在移动到其他区域丢失了图钉后,在页面中提供重新定位的按钮,帮助用户快速定位到当前的位置,降低重新寻找当前位置的成本和减少丢失目标的焦虑。

    2.适应比例尺的tips

    地图在不同的比例尺下,展示的信息密度是不同的,tips作为对重要信息的标识,也同样应该在不同比例尺下有不同的展示形式,因为用户在大地图和局部地图上对信息的期待是有层次的。

    Agoda的递进tips

    从左至右,是Agoda在不同比例下,对酒店tips的标注,从圆点,到图标,再到显示详细的价格,这是一个递进的过程,用户首先希望知道的是:目标地点有没有酒店?酒店分布大概有多少?这个位置的酒店价格是多少?

    想想看,如果从一开始就把所有的tips都标明价格,整张地图就所剩不多了,而且那些你不关心的酒店占据了绝大多数的屏幕。

    3.对呈现的信息进行约束

    地图上获取的信息可以有很多,但是我们需要对信息增加约束,控制呈现的数量和形式,不加思考地把信息扔给用户,会让你的产品不容易使用。

    booking的地图点

    booking在分区统计总数的方法也不错,但是稍微放大一下,就是密集恐惧症的噩梦了...

    除了优化算法,分层递进之外,你也可以尝试在页面上添加一个筛选条件,让用户可以主动的去选择自己想要看到的信息。

    Airbnb的筛选延续到了地图中

    airbnb增加的筛选条件可以帮助控制页面呈现的信息,相较于智能的推送,这让使用者更加灵活的操作。

    4.对tips进行区分

    对tips进行区分,加速对地图信息的阅读,你可能通过它的形状,颜色就能辨别出它是不是你所期望的目标。

    左:Spot  右:Hotel Tonight

    Spot,对餐厅和酒吧的图标作出区分,也许都能让你和朋友坐坐,但是你可以考虑的更细致了。

    Hotel Tonight maps,相较于前几类的地图,他在价格上的颜色上作出了些改动,即使你没有对价格作出筛选,也可以通过颜色来寻找期望价位的酒店。这里颜色的辨识度也挺重要,而且颜色应该也会影响到作出的选择。

    5.选择浮层面板

    在地图中会涉及到很多的操作,如果跳转到新页面的话无疑会增加许多的负担,所以在选择触发控件的时候,请更优先的考虑浮层形式,因为这不仅可以在当前页面保留地图信息和操作,而且也可以即时的更改和调整。用户无需担心某些参数改变后,地图上的信息是不是不一样了。

    Uber

    Uber就是这样一个优秀的例子,地图信息会在页面上保留,额外的操作作为浮层呈现,你可以根据自己的路线以及附近的车况来选择自己需要的车型。此外,UBer为人乐道还有引入了小车的图标,你不仅知道它在哪,还可以知道它前进的方向。

    6.避免让用户盲目的探索

    地图具有探索性,用户可以自由地点击滑动,去寻找想要了解的信息,但是产品本身并不应该让用户盲目地去探索,这会让使用者花费很多的时间,而收效甚微。你可以通过几种方法来解决这个问题:

    -预设安全区域

    将用户可能需要的信息优先呈现在屏幕中,即时无法完整呈现,也应该告诉用户在哪一块放大进行探索。

    -回拽提示

    如果用户离开了预设的区域很多,这个时候需要考虑重新对用户进行推荐,通过一些横幅或滑出层对用户提供推荐,引导至目标区域进行探索。

    摩拜单车

    摩拜会主动提示用户最近的一辆单车,并且展示上的更为优先,图标也大一些,你不需要再去想附近哪一辆最快能用上。摩拜在运营活动上对tips的运用也很丰富,不论是红包还是礼物,都增进了地图的探索性,可能你愿意多走50米去骑一辆红包车对吧?

    现在的开放API平台很多,高德,Google等等,如果你有兴趣也可以注册一个开发者账号,定位,地图,导航的SDK都能够获取,将它引入你的产品,然后探索吧~

    相关文章

      网友评论

          本文标题:[思考]设计模式杂谈-地图

          本文链接:https://www.haomeiwen.com/subject/cynifxtx.html