文章目录

地图组件先明确四类动作:平移缩放、定位当前位置、选择标记和在列表中定位。再给筛选无结果、定位失败、标记聚合和加载失败画出回退。用界面设计工具把地图和列表放在同一组画板,能在评审时确认每次操作后用户是否仍知道位置。

地图组件怎么设计的核心关系与设计交付

先拆开地图动作

平移和缩放改变视野,定位把视野移到当前位置,选择标记则需要展示详情。四种动作的反馈不同,不能只放一个“地图已更新”的提示。移动端还要区分单指平移、双指缩放和点击标记,避免手势互相抢夺。

地图初始范围要有理由:可以是业务覆盖范围、用户上次位置或默认城市,并把原因写在设计说明中。定位权限未允许时不把默认中心点伪装成当前位置。

地图和列表要能互相定位

点击列表项应让地图高亮对应标记,点击标记则把详情和列表滚动位置同步。标记聚合时显示数量,放大后再拆开;不让一簇标记叠在一起却要求用户逐个猜。

列表与地图的筛选条件保持一致,并在结果数变化时给出文本反馈。用户切换区域后,地图视野、列表、图例和当前筛选都要有可察觉变化。

图例与空结果要有退路

图例解释颜色、形状和聚合标记的含义,不能只在地图上放一堆颜色点。空结果说明筛选条件和可执行的下一步,例如扩大范围、清除一个条件或查看全部门店。

定位失败、网络失败和单个门店详情加载失败分别设计,不用同一张错误图覆盖所有情况。失败后保留用户已选择的筛选,避免点击重试就回到默认范围。

补充移动端和非地图路径

在移动端把地图和列表分成可切换的视图,并保留当前区域和结果数;在键盘或读屏场景中提供列表等价路径,不把地图作为唯一信息来源。

设计稿中把缩放、标记、列表和失败状态按流程连起来,再交给研发确认地图 SDK 能否支持。Pixso 画布只用于表达界面和状态,不代表已接入真实地图服务。

地图的状态数量通常比静态页面多,先列状态表再画视觉稿:初始、定位中、定位成功、定位失败、加载中、空结果、标记聚合、单点详情和网络错误。每种状态都写出保留的数据和可执行的下一步,研发才不会自行合并。

对于门店、配送点等密集标记,列表是重要的替代入口。设计稿中给列表项提供名称、地址和开放状态等文本,不把颜色或地图位置作为唯一识别方式;用户切换到列表后仍能完成选择和导航。

地图控件的操作边界可参考Apple 地图界面指南;正文不承诺 Pixso 接入任何地图 SDK。