可在下方连接中关注原账号原文链接：https://mp.weixin.qq.com/s/0A6t3ZwFg-nq0wRaFexW1w地图上的交互与常规UI设计类似，同样也需要考虑明确的层次结构、显而易见的设计方式。卡片是移动端产品常见的设计形式，作为一个独立的容器，卡片可以在内容上进行良好的布…

 

 

地图上的交互与常规UI设计类似，同样也需要考虑明确的层次结构、显而易见的设计方式。

卡片是移动端产品常见的设计形式，作为一个独立的容器，卡片可以在内容上进行良好的布局组织，将信息分块，突出重点，从视觉感知上对内容进行了分隔，分明的层级能够引导用户的浏览视线，有秩序地阅读与点击。

这种设计形式同样也广泛运用在地图类应用中，设计过程中需要根据场景和内容确定合适的交互形式。

 

 

全文1739字 阅读约20分钟

 

 

在地图中常见的卡片交互形式有以下三种：

 

 

内容型渐进式卡片

 

渐进式卡片顾名思义：信息随着卡片的展开层层递进，是一个从简要到详细的过程。信息会按照内容属性进行分组，再对每组信息进行提炼和折叠，明确哪些信息对用户的决策影响更大，可优先展示。

展开过程一般分为3段：

• 1段展示最简单扼要的信息，如：名称、地址。用户操作地图时，对地图的探索意愿更强，此时卡片自动收起至1段，留出更多地图区域供用户查看。
• 2段展示折叠信息，折叠的目的在于在有限的卡片区域内尽可能展示更多类型的信息，吸引用户展开查看提高转化率。用户点击兴趣点时默认展示2段，此时用户对兴趣点的相关信息更为关注；2段信息帮助用户判断该点是否符合需求，是展开查看详情还是划走找更符合需求的兴趣点。
• 3段展示全部信息，通过展开和渐隐的动效弱化进入详情页的过程，用户的感知是展开卡片，实际则是进入了详情页。

与地图的对应关系——强：地图上对应标记点icon为选中状态，表现形式强且唯一，便于用户快速获取当前查看兴趣点在地图上的位置信息。

 

 

 

 

优点：

由于只需要对应地图上的一个点，所以屏幕内地图的展示区域可以缩小，给卡片2段信息留出更大的展示区域，卡片信息内容也可以展示更多。

缺点：

点与点之间切换的费力度相对较高。

地图下适用场景：

• 探索地图场景下，用户在地图上点击兴趣点时。
• 搜索场景，用户有明确且唯一的目标时；如搜索国家、城市等。

 

 

横向卡片信息流

信息以小卡的形式承载，通常划分为上下两个区域；上部展示信息摘要，

底部为功能区域；点击卡片信息区域可进入详情页，点击功能区域则触发对应的功能。卡片与卡片之间的信息相对独立，在屏幕下方整齐划一地展现出来；用户可以通过横向滑动的交互形式查看信息。

与地图对应关系——较强：

• 地图上与当前屏幕内卡片对应的标记点icon为选中态，用户滑动卡片浏览信息时，标记点icon的状态也会随之变化。
• 用户也可在地图上选中兴趣点，信息流会滚动到相应的卡片。

 

 

 

 

优点：

• 沉浸式的体验，用户浏览时的思维不容易被打断，留存更容易。
• 联动性强，用户可快速获取多个兴趣点的地理位置信息。

缺点：

• 用户无法了解内容总长度，对内容没有宏观掌控。
• 回溯时不容易定位到之前看到的内容。

地图下适用场景：

• 信息与搜索匹配比较模糊时，如搜索“汉庭酒店”或“迪士尼乐园”获得多个结果时，在结果地图上可采用这种交互方式，用户可快速比较多个结果后做出决策，提高效率。用户目的性不强的时候，如在“灵感地图”中，用户在全国范围内圈定一个意向区域后，放大地图进入区域内部后，信息流同样可以帮助用户快速对比并做出决策。

卡片式列表

卡片式列表是一种很好的集合信息的方式，融合了卡片和列表的优势。抽取关键信息，以卡片方式承载，然后对卡片按照一定规律进行有序排列，点击卡片后可进入详情页查看。

​

与地图对应关系——较弱：

• 多点对应多张信息卡片，对应关系无法一目了然。
• 可通过滚动列表，列表首位卡片对应地图的兴趣点icon为选中状态来实现联动，但是会出现底部大面积留白或列表底部卡片与地图始终对应不上等问题。

 

优点：

• 列表能够在一屏中展现的条数多，用户可通过快速浏览题目、概要、提示文字等来确定是否需要点击进入信息详情。
• 有具体的排序标准，按距离或热度等；用户抱着明确的目的而来，此时有秩序感的信息布局更合适。

缺点：

• 单张卡片的承载内容较少。
• 列表整体占用的屏幕面积较大，地图区域会被压缩。

地图下适用场景：

用户有明确的查找和对比意图（如想查找距离最近、热度最高、查看排行榜等），同时对探索地图的意愿较低；此类场景下使用卡片列表的形式是最高效的，列表越靠上的信息被认为与用户的筛选条件越匹配。

 

 

以上就是本人关于不同的卡片交互形式在地图APP中的应用与思考，希望通过这篇文章，给大家在地图类APP的卡片交互设计带来一些启发。