frontend-miniapp/docs/Benchmark/home-redesign-options

导览首页精简版 5 套方案

本目录提供 5 套移动端 H5 导览首页设计稿，画布比例为 390x844。设计目标是把首页收敛为三个核心模块：

• 三维组件：馆内 3D 或馆外地图主区域。
• 讲解入口：进入展厅 / 展品讲解内容。
• 来馆入口：进入到馆 / 馆外参考位置。

这些图片只表达首页布局、入口层级和交互逻辑，不承诺真实馆内导航、路线规划或到达判断能力。

输出文件

• option-1.png：地图画布 + 顶部双入口
• option-2.png：沉浸三维 + 右侧任务轨
• option-3.png：三维首页 + 底部任务面板
• option-4.png：馆内三维 / 来馆并列预览
• option-5.png：讲解优先浮层
• interaction-middle-map-operating.png：从首页进入点位搜索前的三维地图操作态
• options-overview.png：5 套方案总览，便于快速横向比较

生成说明

已按 imagegen skill 先读取项目材料和设计约束，并使用默认内置 image_gen 模式生成 5 张高保真 PNG。生成后的图片已从 $CODEX_HOME/generated_images/... 复制到本目录，文件名为 option-1.png 至 option-5.png。未修改 src 下业务代码。

现有首页功能点对照

从 src/pages/index/index.vue 和 GuideMapShell.vue 读取到的现有能力包括：

• GuideMapShell 承载馆内 3D、馆外地图、搜索、模式切换、楼层、缩放、更多入口、POI 点击等。
• 首页当前有 guide / explain 顶部 tab。
• 来馆 当前在更多菜单和 OutdoorNavigationPanel 中承接。
• POI 卡片包含查看位置、从这里出发、去这里、相关讲解。
• 路线规划面板已有起终点、交换、路线预览、模拟导览等结构，但正式馆内路线能力仍受门禁约束。

本次 5 套方案的共同取舍：

• 搜索：不作为首页核心组件展示，除方案一 / 二保留极弱入口外，其余收纳或移除。
• 楼层：只保留最小当前楼层提示或收纳，不展开完整楼层列表。
• 缩放 / 更多 / 工具按钮：默认隐藏，收纳到地图菜单或地图手势中。
• POI 卡片：不作为首页默认模块，只在用户点选地图后出现。
• 路线规划：不放在首页主入口，不承诺真实导航能力。
• 顶部 tab：弱化为直接的 讲解 入口，而不是占用首屏的复杂导航。

方案对比

方案一：地图画布 + 顶部双入口

• 三维组件：约占屏幕 75%，从标题下方延伸到底部主按钮上方。
• 讲解入口：顶部右侧胶囊按钮。
• 来馆入口：顶部右侧胶囊按钮，与讲解并列。
• 次要功能：保留极简 馆内3D / 馆外 切换和当前楼层提示；搜索、缩放、更多、路线规划不展开。
• 设计意图：最接近现有首页结构，改造成本较低，用户容易理解。
• 优点：稳定、清晰、落地阻力小。
• 缺点：仍然保留了一些地图工具感，不是最极简。

方案二：沉浸三维 + 右侧任务轨

• 三维组件：接近全屏，地图从顶部内容区一直延伸到底部。
• 讲解入口：右侧悬浮任务轨中的上半按钮，同时顶部也有弱入口。
• 来馆入口：右侧悬浮任务轨中的下半按钮，同时顶部也有弱入口。
• 次要功能：只保留 馆内3D / 馆外 极简切换；搜索、楼层、缩放、更多收纳到地图菜单。
• 设计意图：让首页更像一个沉浸式三维地图工具。
• 优点：三维组件存在感最强。
• 缺点：右侧任务轨需要验证是否遮挡地图主体。

方案三：三维首页 + 底部任务面板

• 三维组件：约占屏幕 60%，上半屏为地图主区域。
• 讲解入口：底部任务面板中的小卡片。
• 来馆入口：底部任务面板中的小卡片。
• 次要功能：地图上只保留当前模式和楼层提示；搜索、完整楼层、更多、路线规划全部收纳。
• 设计意图：把首页决策集中到底部，适合单手操作。
• 优点：任务入口非常明确，适合普通用户。
• 缺点：三维地图占比低于方案一 / 二。

方案四：馆内三维 / 来馆并列预览

• 三维组件：上半屏为馆内 3D 主区域，约占屏幕 45%。
• 讲解入口：顶部文字入口 + 底部讲解卡片。
• 来馆入口：下半屏独立来馆卡片，配馆外地图预览。
• 次要功能：搜索、楼层、缩放、更多完全移除；只保留三维和来馆两个空间入口。
• 设计意图：把“馆内”和“来馆”拆成两个明确任务区。
• 优点：来馆入口最突出，适合到馆前用户。
• 缺点：三维组件主导性弱一些。

方案五：讲解优先浮层

• 三维组件：作为全屏背景主视觉，承托首页空间感。
• 讲解入口：顶部前置大卡片中的主按钮。
• 来馆入口：顶部前置大卡片中的次按钮。
• 次要功能：搜索、楼层、路线规划明确收纳，不在首页展开。
• 设计意图：适合把首页定位为内容导览入口，而三维地图作为空间背景。
• 优点：首页最简洁，讲解入口最强。
• 缺点：如果产品希望三维地图可操作感更强，这套会偏内容入口。

推荐排序

1. 方案一：推荐作为第一落地方向。它保留三维地图主导地位，同时把 讲解 和 来馆 清晰前置，和现有组件结构最容易对接。
2. 方案三：适合强调首页任务选择和单手操作，产品表达最稳。
3. 方案二：视觉冲击和三维沉浸感最好，但需要进一步验证遮挡和触控区域。
4. 方案四：适合来馆任务权重很高的版本，但首页会更像入口聚合页。
5. 方案五：最极简，适合内容讲解优先策略；若导览首页必须突出地图操作，则优先级较低。

最终选择仍建议由产品确认首页主任务权重：如果“看地图”优先，选方案一或二；如果“选任务”优先，选方案三；如果“到馆”优先，选方案四；如果“听讲解”优先，选方案五。

首页到点位搜索的中间操作页

interaction-middle-map-operating.png 用于补全“首页沉浸态”和“点位搜索页”之间的交互断点。

页面定位

这个页面不是首页，也不是点位搜索页，而是用户点击首页 开始浏览 / 进入三维 后进入的三维地图操作态。它的作用是：

• 让三维地图从展示态进入可操作态。
• 允许用户拖动、缩放、点选地图。
• 通过底部 查找点位 按钮进入点位搜索页。
• 通过 设施 / 楼层 进入轻量筛选，不在首页直接堆功能。

推荐交互链路

导览首页
  ├─ 点击「讲解」→ 讲解内容入口
  ├─ 点击「来馆」→ 来馆 / 馆外参考入口
  └─ 点击「开始浏览」或「进入三维」
      → interaction-middle-map-operating.png（三维地图操作态）
          ├─ 拖动 / 缩放地图 → 浏览空间
          ├─ 点击地图点位 → 展示点位预览卡
          ├─ 点击「查找点位」→ 点位搜索页
          ├─ 点击「设施」→ 展开服务设施筛选
          └─ 点击「楼层」→ 展开楼层选择

与点位搜索页的关系

点位搜索页承接的是中间页底部 查找点位 的结果。进入点位搜索后，用户可以搜索地点、点击服务台 / 电梯 / 扶梯 / 洗手间 / 母婴室 / 出入口等分类，或切换楼层查看点位列表。点击任一点位后，建议返回三维地图操作态，并在地图上聚焦该点位。

能力边界

中间页只表达“浏览地图、查看位置、查找点位”的能力，不表达正式路线规划或实时导航。点位卡建议使用 查看详情、查看位置、相关讲解 等文案，避免使用 开始导航。