模块已加载但找不到入口点_超好用的信息展示模块，你get了没？（下）

目前产品中基于位置的服务越来越多，相关模块的设计也由单纯的文字展示，逐步向基于地图的可视化展示转变。

本文把基于地图的可视化信息展示分为“外露模块”和“详情模块”两种形式，上篇分析了“外露模块”的内容元素、使用场景等，传送门：

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

下篇将重点剖析“详情模块”。

什么是详情模块

详情模块，顾名思义，是详细地展示了位置相关服务信息的模块，如下图所示：

通常会在铺满全屏的地图上标注位置点、路线、区域等点、线、面状要素，辅以功能入口、内容详情卡片/列表等。

作用

地图详情模块相比传统的图文列表，具有很多优势，通过下图对比可以看出：

1. 用地图展示POI(Point of Interest，兴趣点)的位置信息更直观、可视化

2. 在相同的页面空间下可以展示更多POI的信息，用户更容易掌握全局概况

3. 方便划定区域、限定距离搜索

4. 可以将复杂的任务划分为两步：

   ①选定位置，②看详情判断

进入方式

点击外露模块或icon、位置/距离信息等其他形式的入口(如下图所示)，就会进入详情模块。

进入详情模块、信息加载时，如下图，可以适当增加动效：

以马蜂窝为例，加载附近的景点详情时，采用辐射扫描的动画。

当加载某区域内的景点详情时，采用焦点移动、局部放大的动画。

设计时可以根据内容展示逻辑选择恰当的方案。

另外，导航、出行、LBS社交、LBS游戏等应用，会直接将地图详情模块作为首页，展示信息与功能入口，如下图所示：

内容形式

详情模块通常由4类信息组成，如下图所示：

1. 基础的地图要素+控制按钮

2. 基于地图的点、线、面形式的服务信息

3. POI详情、提示消息等服务信息

4. 搜索、筛选等其他功能或入口

下面将对1、2这两部分内容进行详细介绍。

1. 地图基础要素+按钮

根据产品类型与风格，设计师可以在买来的地图包的基础上，削减无关要素、调整视觉风格，如下图：

Keep中减弱的地图的颜色，只展示标志性建筑名称；LBS社交应用Spot重新配置了地图上道路、绿地、名称等元素的配色和样式；景点讲解APP驴迹则重绘了景点地图。

在开发成本允许的情况下，还可以像Keep这样，提供多种配色方案供用户选择：

当要展示的要素过多、有重叠影响时，可以参考下图中的人口热力图、空气质量地图：

将这些内容放置在单独的图层或子页面展示，方便切换、独立查看。

到这儿地图要素就说得差不多了，再看看控制地图的按钮。按钮大致分为显示控制类、内容控制类两种，如下图谷歌地图的按钮规范中：

显示控制按钮有比例尺、缩放、回到当前位置、指南针、全屏等，内容控制按钮有搜索(除此之外，还有刷新、图层开关、2D/3D切换等)。

显示控制按钮的选择要考虑是否会频繁、深度地调整地图的大小、位置、角度等，而内容控制按钮的选择需要根据业务场景决定。

设计建议：

1. 要确定河流、道路、建筑、POI等要素的层次，比例尺不同时有序展示。避免页面信息密度过高或过低。

2. 当要素有所重叠时，根据层次高低、检索数等用户数据，将更重要的信息放在上层展示。

3. 根据产品定位与策略，可以调整整个地图的视觉风格，比如一起来捉妖、驴迹等，再比如可以基于真实世界的三维模型修改皮肤，设计游戏：

2. 基于地图展示的服务信息

以地理要素为基础，整合行业产业数据就形成了服务信息，如最近的加油站位置、区域内的好评餐厅等。形式上可以分为点、线、面三种：

· 点状要素

在地图上打点通常会用来展示当前位置或POI的分布。

当前位置通常使用带方向标的圆形、大头针或头像气泡表示。如下图所示：

POI虽然在不同的产品类型中大不相同，如旅游类-景点和酒店、出行类-车、游戏任务类-NPC或任务点等等。但在视觉表现形式上还是有共通之处的，如下图：

POI 通常都采用大头针或气泡样式作为背景，上层附着icon、文字、图片、声音或功能按钮等。另有配送类APP会使用配送员形象、店铺的三维模型等，也是可以借鉴的方式。

「点状要素的样式」

谷歌地图有定制一整套不同POI的展示方案，从icon图形到背景形状，再到配色方案，如下图所示：

对此，我们在设计点状元素时，也要建立统一的符号体系，保证信息可传达、稳定、一致，让用户可以清晰地认知。

PS.设计时建议使用阴刻icon，它有较大面积的背景图形色块，比阳刻icon或单独的icon更容易在纷杂的地图信息中突出，易于用户视觉搜索识别。

「点状要素的动态变化」

注意当地图比例尺较小时，点状要素的展示要进行一定的调整。如果还是显示全部同尺寸的气泡，就会像下图这样：

有较多的遮挡，视觉效果较差、可读性低，也难以准确点击。

此时可以借鉴贝壳找房APP中的设计方案，如下图：

若比例尺较大，展示具体的房屋点气泡；比例尺缩小时，配合比例尺将信息聚拢到区域级别进行展示，点击可以放大查看该区域的POI详情。

iOS照片则采用了另一种方案，如下图所示：

比例尺较小时，只展示照片数量较多的主要POI。随着比例尺的放大，逐步展示更多POI。 

设计建议：当用户对内容本身有一定的了解与把握、不需要用内容吸引用户时，APP可以采用与iOS照片类似的展现方式。反之，如上面提到的贝壳找房APP里，POI(房源)众多是吸引用户使用平台的一大重要因素，在各种比例尺下都应尽力地展示出这一点，因此不适合使用这种方式。

· 线状要素

线状要素大家肯定都很熟悉了，公交线路、路径规划、已行驶的路径等都是线状要素。都是基于坐标、交通线路、水系等加工得到的信息。

还有一些其它场景也需要使用线状要素：

如地图应用Yandex Maps中，泊车图层中用红色线条代表禁止停车、蓝色线条的深浅代表收费的多少。Keep用线条在地图上画出推荐的跑步路线。

设计建议：设计线状要素时为了表意明确、可读性强，线条应尽量纤细、顺滑、避免重叠，颜色、样式一定要与背景和其他图层在视觉上有明确区分。如果需要沉浸地查看该线状要素，可以只保留基础的自然地理要素、隐藏其他图层。

走过的路径、道路预测等线状要素，除了可以用静态的路线图来展示之外，还可以使用动效、视频等形式展示。如下图：

Keep中，除了基础的路径图片，还提供轨迹动画的展示方式。效果更生动，可以展示过程中距离节点、配速等深度内容信息的动态变化，是值得借鉴的路径回放方式。

· 面状要素

面状要素是基于区域的信息，如商圈、考勤打卡范围、商家可配送外卖的范围等信息。如下图企业微信后台设置打卡范围：

可以设置员工用户上班打卡的具体地址、范围信息，即定义了打卡的有效区域。

根据用户对区域边界的敏感程度，区域有不同的表现形式：

1. 敏感 — 明确、强硬的范围边界

2. 中等敏感 — 大致的范围边界

3. 不敏感 — 无需表明范围边界

敏感型如下图所示：

小蜜单车APP要求用户必须按照区域要求停车，否则将影响后续使用。APP中就使用了非常引人注意的蒙层颜色与边框表现不同的运营区域。

还有如司机奖励范围、商圈范围、区域PK、点亮国家/城市等用户敏感的面状要素，可以使用此方式来表达。

例外的情况是，外卖配送、小程序的辐射范围等面状要素，用户即便敏感也只是关注自己在不在范围内、而不是范围本身，所以可以不进行显性展示，在超出范围时提醒即可。

中等敏感型如找房子、找餐厅等，下图所示：

以自如APP为例，用户在概览房屋时，只想限定个大致的范围，不会要特别具体的边界。这时让用户能够圈出大致的区域搜索即可。

这也是一种直观边界地搜索POI的方式，基于位置搜索时很值得借鉴。

不敏感型，如下图所示的LBS游戏中：

在战区/街区竞技模块，会根据地理位置划分战队PK。此场景下，用户只关注所属队伍、对具体边界不敏感，所以只采取了图形标识、战队名称等元素表示不同战队，没有框出不同战队的具体边界。

展示区域内的服务设施(如快递驿站)等也是如此，只标明用户归属的区域、区域内的POI即可。

划重点 

· 在设计位置服务产品时，可以使用地图详情模块直观、可视、全局地展示信息。

· 要保证地图上信息密度适中，可以采用图层开关、根据比例尺不同展示不同颗粒度信息等方式调整。

· 地图上点、线、面形式的要素要清晰可读、稳定一致，满足用户对服务信息的浏览、检索需求。

参考引文

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

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

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

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