门店定位系统 是做什么的？
目的
门店定位系统提供了一种设计物理位置发现界面（如分行查找器、零售定位器、经销商网络或医疗诊所查找器）的方法论。该系统定义了将数字搜索与实体目的地连接起来所需的空间构成、响应式适配、交互同步和无障碍护栏。它确保用户能够在不产生认知过载、布局不稳定或无障碍障碍的情况下，找到附近的位置、评估门店详细信息并导航前往。
使用场景
- 零售与经销商网络： 引导顾客前往实体店面、合作零售商或授权服务中心。
- 医疗与诊所： 帮助患者找到附近的急诊中心、医院或专科诊所。
- 金融机构： 显示自动取款机网络和分行位置，并提供特定服务能力（例如，免下车服务、公证服务）。
- 餐厅与连锁餐饮： 协助顾客查找附近门店，查看实时营业状态，并启动取餐或配送订单。
何时不使用
- 单一地点企业： 如果一家公司只有一两个实体办公室，完整的定位器界面就显得多余。一个带有嵌入式静态地图的简单联系页面就足够了（请参阅
site-navigation-system或联系页面指南）。 - 纯数字/电商品牌： 没有实体存在或实体提货点的企业。
- 动态物流与路线规划： 先进的拼车或实时配送跟踪应用程序需要持续的 GPS 跟踪和动态路线规划，这属于专门的 GIS/实时交通系统范畴。
输入
- 位置元数据清单： 坐标集（纬度/经度）、物理地址、联系详情（电话、电子邮件）、营业时间以及特定的位置特色或服务（分面）。
- 用户位置信号： 地理定位 API 可用性、用户输入的邮政编码/邮编或城市/州文本输入。
- 地图平台能力： 底层地图提供商（例如 Google Maps API、Mapbox GL JS、Leaflet）的约束和自定义样式参数。
- 用户主要目标： 用户主要是想立即前往（需要路线和营业时间）、联系该地点（需要电话）还是核实库存（需要与库存系统关联）？
输出
- 空间布局蓝图： 响应式空间布局规范（桌面分屏比例 vs. 移动端堆叠标签面板）。
- 结构规范： 位置卡片、搜索/过滤标题和地图标记的详细设计。
- 交互与状态图： 定义标记点击同步、悬停状态、列表加载指示器以及卡片/标记关联的行为。
- 无障碍地标与键盘图谱： 定义详情视图的焦点陷阱机制、屏幕阅读器 aria-live 通告以及非视觉地图导航路径。
工作流程
1. 建立空间构成
设计地图与位置列表之间的空间关系：
- 桌面布局（分屏）： 使用分屏设计。
- 侧边栏面板（35% 到 40% 宽度）： 放在左侧（用于从左到右阅读的语言），以确立其作为阅读层次起点的地位。它必须独立于主页面滚动，使搜索输入框和位置列表保持可访问。
- 地图面板（60% 到 65% 宽度）： 设置为固定的、始终显示在右侧的元素。
- 移动布局（可切换标签）： 由于地图和列表无法在窄视口中并排显示，请在屏幕顶部或底部实现一个切换栏：
- “列表视图”标签： 显示搜索输入框和垂直卡片列表。建议作为默认标签。
- “地图视图”标签： 显示全屏地图。
- 操作层： 确保浮动控件（例如，“搜索此区域”按钮或地理定位图标）舒适地位于地图上方，而不会遮挡导航。
2. 定义位置卡片结构
位置卡片是主要的信息单元。按认知扫描优先级排列其元素：
+-------------------------------------------------------------+
| [类别标签] [距离：0.8 英里] |
| **位置标题 / 分行名称** |
| [星级评分 / 评论（可选）] |
| |
| 123 物理街道地址，城市，州 邮政编码 |
| 状态指示器：[营业中 / 已关闭]（晚上 8:00 关门） |
| |
| [按钮：路线] [按钮：呼叫] [链接：详情] |
+-------------------------------------------------------------+
- 一级信息： 位置名称和距搜索中心的距离。距离必须实时计算并且高度可见（右上角）。
- 二级信息： 街道地址和实时营业/关闭状态（使用颜色编码配合文本，例如，绿色表示营业，红色表示关闭）。
- 三级信息： 主要操作以高度可触摸的 CTA 按钮形式呈现（例如，“路线”、“呼叫”、“查看详情”）。
3. 设计搜索与分面过滤
在侧边栏的标题部分提供高度直观的查询和过滤工具：
- 搜索输入框： 一个组合输入框，支持邮政编码、城市名称和街道地址，并带有自动完成菜单。
- “我的位置”触发器： 一个突出且可访问的地理定位按钮，使用标准的“十字准线”图标表示，并带有适当的屏幕阅读器标签（
aria-label="查找当前位置附近的门店"）。 - 半径过滤器： 一个下拉菜单，允许用户细化搜索半径（例如，5、10、25、50 英里）。
- 分面下拉菜单： 针对门店特定功能的快速过滤器（例如，“免下车服务”、“轮椅无障碍”、“24 小时营业”）。在过滤按钮上使用徽章来显示已选中的数量。
4. 实现双向交互同步
地图标记和列表卡片必须作为一个统一的系统运行。建立清晰的交互关系：
- 列表卡片悬停/聚焦 -> 地图标记： 悬停或聚焦列表卡片必须触发其对应地图标记的视觉状态变化（例如，放大、改变颜色或使用 z-index 调整将其置前）。
- 地图标记点击 -> 列表卡片： 点击地图标记必须：
- 自动滚动侧边栏列表以将对应的卡片带入视野。
- 使用短暂的过渡动画（例如，微妙的背景脉冲）高亮显示该卡片。
- 在标记上方打开一个地图“信息窗口”（弹窗），其中包含门店名称、距离和“路线”链接。
- 搜索此区域（地图拖动）： 提供一个“搜索此区域”浮动按钮，该按钮仅在用户平移或缩放地图远离初始搜索中心时出现在地图面板的顶部中央。
5. 建立移动端触摸与地图适配
管理移动设备上的交互以防止用户受挫：
- 避免滚动劫持： 默认禁用移动端地图的手势缩放（需要双指拖动来平移或缩放）。这可以防止用户在试图向下滚动页面时“卡”在地图中。
- 浮动控件： 将浮动缩放（+ / -）控件和地理定位按钮放置在地图的右下角，样式上使用高对比度阴影，且最小触摸目标为 44x44 像素。
- 卡片轮播覆盖层： 在移动端地图视图上，在视口底部提供一个可横向滑动的卡片轮播，显示当前活动的或最近的位置，将地图探索与详情展示统一起来。
决策规则
- “默认搜索”规则： 当定位器页面加载时，如果没有搜索查询或地理定位权限：
- 不要显示空白地图。
- 默认显示基于 IP 地理定位的最近位置，或者按字母顺序/优先级显示所有位置。
- “无结果”恢复规则： 如果用户在某个区域搜索但没有找到任何位置：
- 缩小地图以显示最近的可访问位置。
- 在侧边栏列表中显示一条有帮助的消息（例如，“在 [查询] 附近 25 英里范围内未找到门店。以下是离您最近的门店：”）。
- 提供一个“查看所有门店”的链接。
- 弹窗 vs. 详情面板规则：
- 如果该位置的元数据最少（仅地址和营业时间），则在地图标记的信息窗口弹窗中显示所有信息。
- 如果该位置具有大量元数据（库存、团队列表、照片），则点击“查看详情”必须在侧边栏内滑出一个全高度详情面板，将键盘焦点困在该面板中，并提供一个清晰的“返回列表”按钮。
约束条件
- 无障碍（键盘导航）：
- 键盘用户必须能够在不直接使用地图的情况下浏览整个搜索流程和位置列表。
- 地图标记必须可以通过键盘聚焦（
tabindex="0"）或由可访问的列表替代项表示。 - 当搜索结果更新时，使用
aria-live="polite"元素向屏幕阅读器宣告更改（例如，“在西雅图，华盛顿州附近找到 3 个位置”）。
- 触摸目标大小： 所有按钮、地图标记和过滤控件必须满足 WCAG 2.2 SC 2.5.8（最小 24x24 像素且周围有间距），卡片和浮动控件上的主要操作触发器大小应为 44x44 像素，以确保拇指操作的舒适性。
- 视觉对比度： 首选高对比度地图。标准标记和活动标记标签与地图背景的对比度至少为 3:1。卡片和弹窗内的文本必须满足 WCAG AA（4.5:1）。
- 防止布局偏移： 在活动搜索期间，使用侧边栏中的骨架卡片为加载状态预留垂直/水平空间，以防止累积布局偏移 (CLS)。
常见失败模式
- 移动端滚动陷阱： 用户卡在页面上，因为他们在移动屏幕上滚动时只会平移/缩放地图，导致无法滚动过地图组件。
- 双向同步断裂： 点击地图标记会打开一个弹窗，但不会滚动到侧边栏中匹配的卡片或将其高亮显示，从而迫使用户手动匹配名称。
- “盲地图”（键盘排除）： 将地图标记实现为不可聚焦的 SVG 形状或 Canvas 元素，使得物理位置对于屏幕阅读器和纯键盘用户完全无法访问。
- 无查询空死胡同： 在初始页面加载时显示完全空白的屏幕和一片寂静的地图，要求用户猜测必须先进行搜索。
- 地图拖动卡顿： 尝试在每次小地图拖动时实时获取和渲染数百个标记，导致界面冻结。对地图边界变化实施去抖（250–400 毫秒）并聚合近距离的标记。
验证标准
- 空间布局已定义，包括桌面端（分屏侧边栏）和移动端（可切换的列表/地图标签）。
- 双向同步已明确（点击标记可高亮显示/滚动到卡片；悬停/聚焦卡片可高亮显示标记）。
- 默认禁用移动端手势缩放（需要双指滚动）以避免移动端滚动劫持。
- 已设计加载状态（骨架屏）以避免搜索查询更新时出现布局偏移 (CLS)。
- 已定义无障碍替代方案：键盘用户可以浏览所有位置、阅读其详情并获取路线，而无需使用鼠标悬停在地图画布元素上。
- 当搜索结果更新时，屏幕阅读器会收到描述性的、礼貌的
aria-live通告。 - 所有交互式卡片元素、标记和缩放按钮的触摸目标至少满足 WCAG 2.2 24x24 像素的最小要求（主要 CTA 建议使用 44x44 像素）。
- 位置卡片和地图弹窗内的文本对比度满足 WCAG AA（4.5:1）。
- 为零结果搜索和位置权限拒绝设计了清晰的回退流程。