# 导览首页精简版 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` 用于补全“首页沉浸态”和“点位搜索页”之间的交互断点。 ### 页面定位 这个页面不是首页，也不是点位搜索页，而是用户点击首页 `开始浏览` / `进入三维` 后进入的三维地图操作态。它的作用是： - 让三维地图从展示态进入可操作态。 - 允许用户拖动、缩放、点选地图。 - 通过底部 `查找点位` 按钮进入点位搜索页。 - 通过 `设施` / `楼层` 进入轻量筛选，不在首页直接堆功能。 ### 推荐交互链路 ```text 导览首页 ├─ 点击「讲解」→ 讲解内容入口 ├─ 点击「来馆」→ 来馆 / 馆外参考入口 └─ 点击「开始浏览」或「进入三维」 → interaction-middle-map-operating.png（三维地图操作态） ├─ 拖动 / 缩放地图 → 浏览空间 ├─ 点击地图点位 → 展示点位预览卡 ├─ 点击「查找点位」→ 点位搜索页 ├─ 点击「设施」→ 展开服务设施筛选 └─ 点击「楼层」→ 展开楼层选择 ``` ### 与点位搜索页的关系 点位搜索页承接的是中间页底部 `查找点位` 的结果。进入点位搜索后，用户可以搜索地点、点击服务台 / 电梯 / 扶梯 / 洗手间 / 母婴室 / 出入口等分类，或切换楼层查看点位列表。点击任一点位后，建议返回三维地图操作态，并在地图上聚焦该点位。 ### 能力边界 中间页只表达“浏览地图、查看位置、查找点位”的能力，不表达正式路线规划或实时导航。点位卡建议使用 `查看详情`、`查看位置`、`相关讲解` 等文案，避免使用 `开始导航`。