141 lines
7.7 KiB
Markdown
141 lines
7.7 KiB
Markdown
# 导览首页精简版 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（三维地图操作态）
|
||
├─ 拖动 / 缩放地图 → 浏览空间
|
||
├─ 点击地图点位 → 展示点位预览卡
|
||
├─ 点击「查找点位」→ 点位搜索页
|
||
├─ 点击「设施」→ 展开服务设施筛选
|
||
└─ 点击「楼层」→ 展开楼层选择
|
||
```
|
||
|
||
### 与点位搜索页的关系
|
||
|
||
点位搜索页承接的是中间页底部 `查找点位` 的结果。进入点位搜索后，用户可以搜索地点、点击服务台 / 电梯 / 扶梯 / 洗手间 / 母婴室 / 出入口等分类，或切换楼层查看点位列表。点击任一点位后，建议返回三维地图操作态，并在地图上聚焦该点位。
|
||
|
||
### 能力边界
|
||
|
||
中间页只表达“浏览地图、查看位置、查找点位”的能力，不表达正式路线规划或实时导航。点位卡建议使用 `查看详情`、`查看位置`、`相关讲解` 等文案，避免使用 `开始导航`。
|