Layerpin logo
开始创建

标记与形状:选择正确的地图项

掌握图钉、多边形、矩形、折线和标签的策略性使用,以创建干净、直观的交互式地图,轻松传达空间层次结构。

LP

Layerpin 团队

阅读需 7 分钟
带有精确标记和指定区域边界的地图

核心规则:点代表目的地,区域代表领土

交互式地图上最常见的错误是在大的地理区域中过度使用大头针标记,或者相反,为精确的对象绘制微小的形状。选择正确的地图元素从根本上决定了访问者消化您的布局的速度。

当位置是单个离散点时使用标记图钉:入口大门、信息亭、风景点、一台机器或一张特定的桌子。标记针回答了这个问题:“这件事到底在哪里?”*

当位置占据可测量的物理区域时使用形状(多边形和矩形):零售商店地块、住宅地块、办公楼、停车场或受保护的公园区。形状回答了这个问题:“这个空间的边界、足迹和范围是什么?”*

  1. 1
    评估访问者是否需要找到精确坐标或了解边界区域。
  2. 2
    默认为视口区域 5% 以下的兴趣点的标记图钉。
  3. 3
    房间、建筑物、土地和区域默认为多边形或矩形。

何时使用折线、连接线和自定义线

除了引脚和形状之外,Layerpin 还提供专门的矢量线工具:折线、箭头和标注连接器。

使用多段线来实现连续的线性要素:步行道、马拉松路线、公用设施管道、导游路径和公交线路。折线支持自定义笔划样式、虚线、箭头和多段顶点编辑。

当地图区域太密集而无法将标签直接放在项目上时,请使用 连接器。引导线将偏离中心的标题卡或图标连接到精确的坐标,而不会遮挡底层的建筑艺术品。

  1. 1
    为路径、边界、路线和公共设施渠道选择折线工具。
  2. 2
    对拥挤区域使用标注连接器以干净地偏移标签。
  3. 3
    调整线条粗细(2 像素到 6 像素)和虚线图案以区分不同的路径类型(例如,实线表示主要走廊,虚线表示紧急出口)。
交互式导航地图显示多边形路线和区域旁边的图钉

掌握形状样式:不透明度、边框和对比度

样式不佳的形状会掩盖其下方的地图绘制。风格良好的形状通过提供清晰的色调而不隐藏底层标签或纹理来增强绘图效果。

将默认形状填充不透明度设置为 15% 到 30% 之间。这种微妙的洗涤确立了领土,同时保持建筑细节的可读性。将其与对比色调的清晰 1.5 像素至 2.5 像素实心描边边框配对。

悬停和选择时,将不透明度提高到 40-50% 并加厚边框以提供清晰的交互式反馈。 Layerpin 允许您设置直接与您的品牌准则保持一致的自定义颜色标记。

  1. 1
    保持底部填充不透明度较低 (15-25%),以便背景图保持完全可见。
  2. 2
    使用在浅色和深色背景图像上突出的不同笔触颜色。
  3. 3
    配置突出的悬停和选定状态以实现无缝的交互式反馈。

和谐地结合标记和形状

高端交互式地图通常将形状和标记组合成紧密的复合系统。例如,围绕整个购物中心翼绘制一个多边形,并在其中放置特定类别图钉作为主力商店和紧急出口。

建立一致的交互规则:如果单击多边形会打开其租赁信息卡,则单击其内部的子图钉应打开特定的商户卡。确保子图钉具有更高的 z 索引堆叠,以便它们在多边形周边内保持轻松可点击。

使用 Layerpin 的图层管理面板重新排序元素并锁定背景形状,防止编辑过程中意外误点击。

Layerpin logo

准备好创建互动地图了吗?

先私下创建地图,检查访客视图,准备好分享后再发布。 No credit card needed.

免费开始