超好用的信息展示模块，你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