超好用的信息展示模块,你get了没?(上)

目前产品中基于位置的服务越来越多,除了熟悉的地图导航、派送、出行服务,还有景点讲解、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种,可以根据业务需要增加相关内容推荐、快捷操作、功能入口。


参考引文

Map Icons(谷歌地图icon库)http://map-icons.com/

《地图产品:如何高效地传递信息?》http://1t.click/aNNK

《地图产品:专门聊聊专题图层》http://1t.click/aNNT

《国际化司机端-首页改版总结》http://1t.click/aYAu




本文来自:海盐社    作者:海盐社

文章版权归原作者,内容为网络收集。如有侵权请告知我们并会及时删除。邮箱: hello@sketchui.net