目前产品中基于位置的服务越来越多,除了熟悉的地图导航、派送、出行服务,还有景点讲解、LBS社交、LBS游戏等等。
相关模块的设计也由过去单纯的文字展示,逐步向基于地图的可视化展示转变,从而让信息展示直观形象,降低用户认知负荷。
本文把基于地图的可视化信息展示分为“外露模块”和“详情模块”两种形式,分别分析其中地图相关元素的展现方式、承载的内容信息以及使用场景等。
上篇首先介绍外露模块。
什么是外露模块
外露模块将用户十分在意的信息(如位置、状态变化等)提出来,上调到较高层级的页面,基于直观的地图背景进行展示。如下图所示:
在首页展示外卖送到哪了、周围有什么好吃好玩的,在租房内容页展示房屋所在位置等等,都是常见的应用场景。
也就是说,用户的需求、决策点或关注点围绕着地理位置信息时,都适合采用外露模块。
作用
基于地图可视化地展示关键信息,会提升信息传达的效率,让用户可以快速感知位置状态、快捷获取信息、保持掌控感。
同时外露的地图元素比icon形式的入口表意更加直接——“点击地图进入后,会看到更详细的地图”,可以吸引用户关注、点击进入地图详情模块。
地图还可以让用户有很好的户外氛围感,激发用户的情绪开始户外运动等活动。
内容形式
外露模块通常为卡片形式,以地图为底层图层,在上面放置点状要素等来展示信息。
点状要素在地理信息系统中称为POI(Point of Interest,兴趣点),可以由服务提供方采集坐标数据、定义名称和类别,添加到地图数据中。
具体的内容形式如下图的几个例子:
都是在地图背景上展示POI信息/功能入口:
- 以饿了么为代表的派送类APP可以用三维模型、气泡展示派送员的状态、距离,辅以文字说明订单商家名称、订单内容、预计送达时间等信息;
- 以马蜂窝为代表的团购、旅行、房屋租售等POI展示类APP,可以用位置点、气泡标注出目的地,辅以图片、名称、距离等信息和业务相关的功能入口;
- 以Keep为代表的运动类APP,可以将地图定位至当前位置,并放置开启按钮、其他功能按钮等。
应用场景
外露模块通常位于在首页、个人中心、关键一级页面或订单页面等。
根据产品业务的不同,展示的内容大致有订单位置状态变化、周边POI(Point of Interest,兴趣点)、某POI位置信息、个人足迹、环境氛围5种。
1. 订单的位置状态变化
展示订单位置状态变化时,外露模块通常会位于首页或订单相关页面(如订单列表、订单详情、订单位置追踪页),如下图所示:
- 以美团APP为例,产品架构体系庞大、外卖页面层级较深,但用户十分关注外卖的配送情况,可以把配送信息提炼到地图外露模块中,放置在首页金刚区或焦点图下方等视觉中心位置。
- 而饿了么则代表了外卖、派送类等业务垂直、架构轻量的产品,通常会有独立的订单模块。在当前订单内增加外露模块即可。
- 以京东APP为例的电商类产品,用户等待配送的时间阈值较高,不会像定外卖那样对时间、实时性那么敏感,在较深的订单详情相关页面展示外露地图即可。
此外,还可以将高频的功能操作提出来展示,如拨打配送员电话、复制订单号等,如下图21cake:
以缩短用户操作路径、提升效率。但气泡的应用方式是不建议的,其中承载的文字信息过多,没有发挥出外露模块的可视化优势。
2. 周边POI
团购、旅行、LBS社交等产品展示周边POI时,可以将外露模块置于首页或其它一级页面中。如下图马蜂窝的目的地页面:
外露模块上部基于地图纹样展示了景点名称、照片、距离等常规信息。出于马蜂窝集旅游服务、社交、UGC为一体的平台定位,模块下部还展示了附近用户的人数、笔记发布情况内容,力图在高效展示信息的基础上拉动用户社交、浏览笔记。
设计建议:可以在展示位置信息的基础上,增加可以吸引用户或者希望促活的业务内容。
3. POI位置信息
在房屋、照片、景点等的内容页,可以使用外露模块展示单个POI的具体位置信息。如下图所示:
以iOS的照片为例,外露模块可以帮助用户回忆起照片的拍摄地点、根据地点索引,还可以关联到在附近拍的照片、追溯回忆。
链家APP在外露模块中,使用文字气泡展示房屋的位置区域。此外还提供了查看房屋周边交通、医院等基础设施的入口。信息更加整合,操作也更加便捷。
在旅行、美食等专题首页,也会使用外露模块展示多个POI的具体位置信息。如下图马蜂窝的景点收藏单:
位于收藏单头部下方的外露模块,基于地图展示了收藏景点所位于的城市。
设计建议:在旅游、团购点评等应用的位置收藏、路径统筹规划模块中,可以在首页使用外露地图对内容进行提炼展示,如城市、商圈等,让用户有大致的印象;点击进入详情后展示细节的信息。
4. 个人足迹
当产品赋予POI(Point of Interest,兴趣点)特殊意义时,如收集、点亮足迹等,可以在个人中心页面将其外露展示。如下图穷游APP的点亮足迹:
穷游APP在个人中心页的头部放置了外露模块,在世界地图上点亮曾去过的国家POI,并提供补充足迹的功能入口。
设计建议:旅游打卡、美食打卡等基于位置的成就类信息,都可以采用此方式进行展示,就像是给用户的一面基于地图的勋章墙。
让用户在使用产品时有收集感、成就感,从而更加自发地发布内容、有更强的使用黏性和忠诚度。
5. 氛围
对于健身跑步这样要身体额外做功的活动,氛围、仪式感是十分重要的。Keep在这方面进行了不少设计,如下图:
左图是户外跑版块,营造跑步氛围的同时保持可以与后续路径记录功能的连贯。
右图则是在跑步机模式下,用摆着跑步机的室内环境的插画作为背景。保持了基本功能按钮的操作一致,且有品质地营造出了氛围与仪式感。
这种方式在劝导式设计、引导用户克服某些障碍等场景中值得借鉴。
划重点
在设计位置服务产品时,可以将用户关注的POI信息及其变化提到较高层级的页面,用地图外露模块直观地展示。
常见的应用场景有订单位置状态变化、周边POI展示、POI具体位置展示、个人足迹展示、氛围烘托5种,可以根据业务需要增加相关内容推荐、快捷操作、功能入口。
#专栏作者#
橙子的橙子,微信公众号:海盐社(ID:haiyans7),海盐社是一个凝炼知识,提倡“以教代学”的社团。我们坚信分享和积累的力量,每周都会定时交流学习心得。并在平台上分享所获知识,助力广大设计师共同成长。