# frontend-miniapp 用户体验与界面审查报告

日期：2026-05-28  
分支：`analysis/ux-ui-audit-2026-05-28`  
项目范围：`museum-guide-v4.0/frontend-miniapp`  
审查对象：uni-app / Vue 3 小程序与 H5 导览前端，包括地图、讲解、搜索、详情页、路线、设施、音频和 3D 地图模块。

## 1. 执行摘要

### 1.1 总体判断

当前项目已经具备“导览原型”的主要界面部件：2D 腾讯地图、Three.js 3D 馆内地图、顶部导览/讲解切换、搜索框、设施筛选、讲解抽屉、音频播放器、展品/展厅/设施/路线详情页。

但从真实到馆任务看，它还没有形成可完整测试的用户体验闭环。最关键的问题不是视觉细节，而是入口、数据、状态和操作结果之间没有打通：

- 用户能看到搜索框，但搜索结果体系分散且首页搜索只 `console.log`。
- 用户能点击地图点位，但 `TencentMap.vue` 同时触发底部详情浮层和页面跳转。
- 用户能看到路线详情页，但没有路线入口，“开始导览”只是 `uni.navigateBack()`。
- 用户能看到音频按钮，但不同入口各自维护状态，且首页回退到 `https://example.com/audio.mp3`。
- 用户能进入 3D 地图，但首页传入空 POI 数组，`ThreeMap.vue` 不会回退默认点位。
- 项目标题是深圳自然博物馆，但核心数据仍是“蒙娜丽莎”“星空”“经典艺术之旅”等艺术馆 mock 内容。
- 无障碍语义、键盘焦点、读屏标签和颜色对比度基础不足。

### 1.2 最高优先级建议

| 优先级 | 关键发现 | 用户影响 | 建议 |
| --- | --- | --- | --- |
| P0 | `pages.json` 的 `tabBar.list` 为空，`BottomTabBar` 未接入 | 用户找不到路线、服务、我的等一级任务 | 重建一级导航：地图、讲解、路线、服务、我的 |
| P0 | 地图 marker 点击既打开浮层又跳详情页 | 用户还没选择行动就被带离地图 | marker 点击只打开浮层，按钮再触发详情/导航/音频 |
| P0 | `AreaSelector` emit 与首页监听不匹配 | 设施筛选无法稳定驱动地图 | 统一为 `change(typeId)` 并过滤地图/列表 |
| P0 | 搜索、路线、音频、收藏大量占位 | 用户测试会卡在功能断点 | 先完成可测试闭环，再做视觉精修 |
| P0 | 自然馆数据缺失，艺术馆 mock 混入 | 用户画像和任务无法真实验证 | 替换自然博物馆 seed data |
| P0 | 无障碍和色彩基础不足 | 老年、低视力、视障用户不可用 | 建立语义按钮、图标标签、高对比 token |
| P1 | 视觉层级和底部浮层互相竞争 | 地图、抽屉、播放器会遮挡 | 定义 z-index 和底部避让规则 |
| P2 | 竞品已具备路线、音频、多语言、无障碍、AR/AI/客流 | 功能广度落后 | 分阶段补齐官方导览生态能力 |

### 1.3 推荐实施策略

不要先大面积重做视觉。建议用三条竖切片把产品打通：

1. 设施导航：搜索/筛选卫生间或电梯，地图定位，点击“到这里”，出现路线状态。
2. 展品讲解：搜索“恐龙/化石”，进入展品详情，播放真实音频，播放器跨页保留。
3. 推荐路线：从一级入口进入路线列表，选择亲子/镇馆/无障碍路线，点击开始后回到地图。

这三条链路打通后，再开展第一轮真实用户测试。

## 2. 审查方法与证据范围

### 2.1 本地源码审查

重点审查文件：

| 模块 | 文件 |
| --- | --- |
| 路由与导航 | `src/pages.json`、`src/pages/index/index.vue`、`src/components/navigation/TopTabBar.vue`、`src/components/navigation/BottomTabBar.vue` |
| 地图 | `src/components/map/TencentMap.vue`、`src/components/map/ThreeMap.vue`、`src/components/map/MarkerDetailSheet.vue`、`src/services/map/Map3DManager.ts` |
| 搜索 | `src/components/search/SearchBar.vue`、`src/components/search/SearchPanel.vue`、`src/pages/search/index.vue`、`src/utils/search.ts` |
| 讲解与音频 | `src/components/explain/ExplainList.vue`、`src/components/audio/AudioPlayer.vue`、`src/components/audio/FloatingAudioButton.vue` |
| 详情页 | `src/pages/exhibit/detail.vue`、`src/pages/hall/detail.vue`、`src/pages/facility/detail.vue`、`src/pages/route/detail.vue` |
| 数据 | `src/assets/data/exhibits.json`、`halls.json`、`facilities.json`、`routes.json` |
| 视觉 token | `src/App.vue`、`src/styles/variables.scss` |

### 2.2 竞品资料来源

官方资料与页面：

- 故宫博物院导览页：https://www.dpm.org.cn/Visit.html
- “数字故宫”小程序 2.0 官方发布稿：https://www.dpm.org.cn/classify_detail/257034.html
- 上海自然博物馆 App 下载页：https://www.snhm.org.cn/cgfw/appDown.htm
- 上海自然博物馆楼层导览：https://nao.snhm.org.cn/foreign/cszl/index.htm
- 上海自然博物馆虚拟漫游：https://nao.snhm.org.cn/foreign/cszl/virtualRoaming.htm
- British Museum Audio app：https://www.britishmuseum.org/visit/audio-app
- MoMA Audio / Bloomberg Connects guide：https://www.moma.org/audio/
- The Met Plan Your Visit / Digital Guide：https://www.metmuseum.org/plan-your-visit
- The Met Audio Guide：https://www.metmuseum.org/audio-guide

## 3. 核心用户测试场景设计

### 3.1 用户画像 A：首次访客

画像：

- 年龄 20-45 岁。
- 第一次到馆，对展馆楼层、展厅名称和服务设施不了解。
- 目标是“快速开始参观，不迷路”。

关键任务 A1：找到目标展品或展区。

| 项目 | 内容 |
| --- | --- |
| 任务 | 打开小程序，搜索或浏览“恐龙/化石/生命演化”相关内容，进入一个展品详情 |
| 成功标准 | 3 分钟内找到目标；不超过 2 次误点；能说出展品所在楼层/展厅 |
| 预期行为 | 先找搜索框或地图点位，然后进入详情，最后返回地图继续参观 |
| 当前风险 | 首页搜索只日志输出；数据仍是艺术馆 mock；详情页没有真实加载 id 数据 |

关键任务 A2：从地图点位了解“我点到的是什么”。

| 项目 | 内容 |
| --- | --- |
| 任务 | 点击地图上的一个展厅/展品点位，查看信息后选择“查看详情” |
| 成功标准 | 点击 marker 后停留在地图，浮层信息清晰；用户自主选择下一步 |
| 预期行为 | 点位先展开底部 sheet，再选择导航、详情、讲解或收藏 |
| 当前风险 | `TencentMap.vue` 点击 marker 后同时 emit 和 `navigateTo`，流程冲突 |

关键任务 A3：找到出口或服务台。

| 项目 | 内容 |
| --- | --- |
| 任务 | 在首页找到“出口/服务中心”，点击开始导航 |
| 成功标准 | 45 秒内找到；导航状态明确；能返回地图 |
| 预期行为 | 用户会找“服务”“设施”“地图上的按钮” |
| 当前风险 | 设施入口隐藏在横向标签中；导航动作多为 toast 或 `navigateBack()` |

### 3.2 用户画像 B：家庭游客

画像：

- 家长带 6-12 岁儿童。
- 注意力分散，需要短平快的路线和互动反馈。
- 目标是找到孩子感兴趣的内容，减少走冤枉路。

关键任务 B1：选择亲子路线。

| 项目 | 内容 |
| --- | --- |
| 任务 | 找到适合 60 分钟的亲子路线，查看站点并开始导览 |
| 成功标准 | 60 秒内发现路线入口；路线时长和站点可理解；开始后地图显示第一站 |
| 预期行为 | 用户优先找“路线”“推荐”“亲子”而不是手动搜索每个展品 |
| 当前风险 | 路线详情存在但无一级入口；`route/detail.vue` 开始导览只是返回 |

关键任务 B2：播放儿童友好讲解。

| 项目 | 内容 |
| --- | --- |
| 任务 | 从讲解列表或展品详情播放一条适合儿童的音频 |
| 成功标准 | 音频 10 秒内开始；标题和当前展品对应；切页后播放器仍存在 |
| 预期行为 | 用户会点击耳机/播放图标，期望自动开始 |
| 当前风险 | 音频状态分散；无儿童标签；无真实音频 URL 时请求 example.com |

关键任务 B3：完成一个小任务或打卡。

| 项目 | 内容 |
| --- | --- |
| 任务 | 找到一个“寻宝/打卡/问答”互动入口并完成一项 |
| 成功标准 | 入口可发现；反馈明确；儿童能理解完成状态 |
| 预期行为 | 家庭用户会被“任务”“徽章”“找一找”吸引 |
| 当前风险 | 当前没有互动任务体系，上海自然博物馆 App 已提供寻宝游戏方向参考 |

### 3.3 用户画像 C：资深爱好者

画像：

- 自然科学爱好者、摄影/标本/古生物爱好者。
- 愿意花 2-4 小时深度参观。
- 目标是按主题系统浏览并收藏内容。

关键任务 C1：按主题浏览展品。

| 项目 | 内容 |
| --- | --- |
| 任务 | 在讲解页按主题筛选，如古生物、矿物、生态、植物 |
| 成功标准 | 用户能理解主题分类；列表内容匹配主题；可进入详情 |
| 预期行为 | 从“讲解”或“路线”进入主题内容 |
| 当前风险 | `ExplainList.vue` 的“按展厅/按主题”只切 activeFilter，未真正重组数据 |

关键任务 C2：收藏并形成个人清单。

| 项目 | 内容 |
| --- | --- |
| 任务 | 收藏 3 个展品，稍后从“我的”或收藏页找回 |
| 成功标准 | 收藏状态可见；刷新或切页后保留；能批量查看 |
| 预期行为 | 用户点击爱心后期待保存到个人清单 |
| 当前风险 | 收藏是组件局部状态，无持久化和“我的”入口 |

关键任务 C3：在 3D 地图中理解空间关系。

| 项目 | 内容 |
| --- | --- |
| 任务 | 进入 3D 馆内地图，查看某楼层展厅和点位关系 |
| 成功标准 | 5 秒内出现可用模型或骨架；有 POI；可切换楼层 |
| 预期行为 | 用户会探索模型并点击点位 |
| 当前风险 | 首页传入空 `poiList`，3D 默认点位不会出现；3D 与路线/详情未连接 |

### 3.4 用户画像 D：学生与研学团队

画像：

- 中小学生、大学生或老师带队。
- 有明确学习目标，需要时间管理、知识点和团队路线。
- 目标是完成主题学习和记录。

关键任务 D1：按研学主题规划路线。

| 项目 | 内容 |
| --- | --- |
| 任务 | 选择“生命演化 90 分钟”或“地球矿物 60 分钟”路线 |
| 成功标准 | 路线有学习目标、站点、预计时长；可开始导航 |
| 预期行为 | 老师会先看路线目标，再看站点顺序 |
| 当前风险 | `routes.json` 是艺术路线，且路线没有地图状态 |

关键任务 D2：获取展品详细信息。

| 项目 | 内容 |
| --- | --- |
| 任务 | 进入某展品详情，查看介绍、年代、位置、讲解 |
| 成功标准 | 关键信息首屏可见；说明适合学习记录；有引用或延伸知识 |
| 预期行为 | 学生会截图、收藏、返回列表继续看 |
| 当前风险 | 展品详情是固定 mock，没有按 id 加载，内容和自然馆不匹配 |

关键任务 D3：完成小组集合点导航。

| 项目 | 内容 |
| --- | --- |
| 任务 | 找到集合点、服务台或出口并导航 |
| 成功标准 | 30 秒内找到，地图反馈明确 |
| 预期行为 | 用户会搜索“出口/服务台/电梯” |
| 当前风险 | 设施搜索和导航未闭环 |

### 3.5 用户画像 E：老年与无障碍需求用户

画像：

- 老年游客、低视力用户、视障用户、行动不便用户。
- 对复杂手势和小图标不敏感或不可用。
- 目标是独立完成找设施、听讲解、少走楼梯。

关键任务 E1：找到无障碍电梯和卫生间。

| 项目 | 内容 |
| --- | --- |
| 任务 | 选择无障碍设施，找到电梯或无障碍卫生间 |
| 成功标准 | 读屏能读出入口；目标点击区域不小于 44px；地图或列表明确反馈 |
| 预期行为 | 用户更依赖文字和清晰按钮，而不是图标猜测 |
| 当前风险 | 大量 emoji 和 `view @tap`；缺少 aria-label、focus、role |

关键任务 E2：使用语音讲解。

| 项目 | 内容 |
| --- | --- |
| 任务 | 进入展品详情或讲解页，播放、暂停、关闭音频 |
| 成功标准 | 读屏能读出播放状态；按钮可键盘触发；错误可理解 |
| 预期行为 | 用户需要稳定的“播放/暂停/关闭”文字反馈 |
| 当前风险 | 播放按钮缺少语义状态，进度条不可访问 |

关键任务 E3：选择少楼梯路线。

| 项目 | 内容 |
| --- | --- |
| 任务 | 选择“无障碍优先”路线并开始导览 |
| 成功标准 | 路线避开楼梯；明确提示电梯、坡道、休息区 |
| 预期行为 | 用户会寻找“无障碍”“电梯优先”设置 |
| 当前风险 | 路线数据没有无障碍属性 |

## 4. UX 交互逻辑系统分析

### 4.1 信息架构

当前 IA 示意：

```mermaid
flowchart TD
  A["首页 pages/index"] --> B["顶部 TopTabBar"]
  B --> C["导览 guide"]
  B --> D["讲解 explain"]
  C --> E["地图 + 搜索 + 设施筛选"]
  C --> F["点位详情 sheet"]
  D --> G["讲解抽屉 + 搜索"]
  E --> H["展品/展厅/设施详情页"]
  G --> H
  H --> I["导航/收藏/音频占位动作"]
  J["路线详情页"] -. "无稳定入口" .-> A
```

问题：

| 问题 | 证据 | 影响 | 建议 |
| --- | --- | --- | --- |
| 一级导航缺失 | `pages.json` 的 `tabBar.list` 为空；`BottomTabBar.vue` 未接入首页 | 用户只能看到“导览/讲解”，路线、服务、我的缺位 | 建立 5 个一级入口：地图、讲解、路线、服务、我的 |
| 路线入口过深或不存在 | 仅有 `pages/route/detail.vue`，无列表页和首页入口 | 时间敏感用户无法开始路线 | 新增 `route/index` 和首页/底部 tab 入口 |
| 内容分类不匹配 | `exhibits.json`、`halls.json`、`routes.json` 是艺术馆内容 | 自然馆测试失真 | 替换自然科学 taxonomy 和 seed data |
| 搜索 IA 重复 | 搜索页、SearchPanel、ExplainList 内各有 mock 数据 | 用户从不同入口得到不同结果 | 统一搜索服务和结果动作 |
| 服务信息缺位 | 没有开放时间、预约、票务、交通、临展、服务须知入口 | 到馆前/馆内服务链路断裂 | 新增服务页，整合官方服务能力 |

建议 IA：

```mermaid
flowchart TD
  A["底部主导航"] --> M["地图"]
  A --> N["讲解"]
  A --> R["路线"]
  A --> S["服务"]
  A --> U["我的"]
  M --> M1["2D/3D 地图"]
  M --> M2["楼层/设施筛选"]
  M --> M3["点位详情"]
  N --> N1["按展厅"]
  N --> N2["按主题"]
  N --> N3["当前播放"]
  R --> R1["亲子路线"]
  R --> R2["镇馆路线"]
  R --> R3["无障碍路线"]
  S --> S1["开放时间/预约"]
  S --> S2["卫生间/电梯/出口"]
  U --> U1["收藏"]
  U --> U2["历史"]
  U --> U3["无障碍偏好"]
```

### 4.2 交互流程

关键断点示意：

```mermaid
flowchart LR
  A["点击地图点位"] --> B["父组件打开 MarkerDetailSheet"]
  A --> C["TencentMap 内部 navigateTo"]
  B --> D["用户本应选择行动"]
  C --> E["页面已跳走"]
  D -. "被中断" .-> E
```

主要问题：

| 流程 | 当前问题 | 建议 |
| --- | --- | --- |
| 地图点位 | `TencentMap.vue` marker 点击同时 emit 和跳页 | marker 点击只打开 sheet，sheet 按钮触发详情/导航 |
| 设施筛选 | `AreaSelector` emits `change`，父组件监听 `area-click`、`floor-change` | 统一事件合约，筛选后更新地图点位和结果列表 |
| 3D 地图 | `poiList` 空数组传入后不回退默认 POI | 改为 `props.pois?.length ? props.pois : defaultPOIs`，再接真实数据 |
| 搜索 | 首页 `handleSearch` 只日志输出；搜索组件重复 mock | 一套搜索服务，多入口复用 |
| 音频 | 详情页只切换 `isPlaying`；首页 fallback 到 example.com | 统一音频 store，禁用无音频项，支持加载/错误/重试 |
| 路线 | `handleStartRoute` 只是返回 | 设置导航状态，回地图展示路线进度 |
| 收藏 | 组件局部 ref，无“我的” | 持久化收藏，增加收藏入口 |

操作步骤数量评估：

| 任务 | 理想步骤 | 当前可能步骤 | 问题 |
| --- | ---: | ---: | --- |
| 找卫生间并导航 | 3：服务/筛选 -> 选择卫生间 -> 到这里 | 5+，且可能无结果 | 入口、筛选、导航未闭环 |
| 播放展品讲解 | 2：展品 -> 播放 | 3-5，且可能是假 URL | 音频状态分散 |
| 开始推荐路线 | 3：路线 -> 选路线 -> 开始 | 无稳定入口 | IA 缺口 |
| 查看点位详情 | 2：点 marker -> 查看详情 | 1，但被自动跳页 | 缺少确认和行动选择 |

### 4.3 认知负荷

| 负荷来源 | 表现 | 用户后果 | 改进 |
| --- | --- | --- | --- |
| 功能命名抽象 | “导览/讲解”重叠 | 用户不确定去哪找路线、设施、音频 | 改为任务型一级导航 |
| 控件过多且叠加 | 顶部 tab、搜索、设施、楼层、地图按钮、抽屉、播放器 | 首屏决策复杂 | 分组并减少默认可见控件 |
| 状态不可见 | 收藏、路线、音频、筛选状态本地化 | 用户不知道操作是否生效 | 全局状态条和明确反馈 |
| 手势学习成本 | 抽屉拖拽、地图拖拽、浮层关闭同时存在 | 用户误触或不知道如何关闭 | 增加显性按钮，手势作为增强 |
| 图标语义不稳定 | emoji 用于设施、导航、收藏 | 读屏和跨端展示不可控 | SVG 图标 + 文字 label |
| 内容可信度低 | 自然馆里出现艺术名作 | 用户信任下降 | 换真实自然馆内容 |

## 5. UI 展示逻辑审查

### 5.1 当前首页层级示意

```text
┌──────────────────────────┐
│ 顶部 TopTabBar: 导览/讲解 │ z=1001
├──────────────────────────┤
│ 搜索栏                   │ z=1001
├──────────────────────────┤
│ 设施横向筛选             │ z=1001
│                          │
│        地图/3D模型        │ base
│        楼层按钮/定位按钮  │ map-control
│                          │
├──────────────────────────┤
│ Marker Sheet / 讲解抽屉   │ z=500 / 100
├──────────────────────────┤
│ 音频播放器               │ z=1000
└──────────────────────────┘
```

问题：顶部工具层和底部播放器层级接近，底部 sheet、讲解抽屉和音频条缺少互斥或避让规则。

### 5.2 视觉层次

问题：

- 主任务入口不突出，顶部只有两个文字 tab，缺少地图/路线/服务等核心任务权重。
- 详情页 hero 固定 450px，小屏首屏几乎只剩图片，标题和位置下沉。
- `MarkerDetailSheet` 的标题、位置、导航、音频、收藏都在 280px 内挤压。
- 3D 地图加载态视觉强，但失败态和回退态弱。
- 地图控件右侧堆叠，缺少任务分组。

建议：

- 一级导航使用底部 tab 或平台原生 tab，地图页内部再用 segmented control。
- 展品详情首屏优先级：标题、展厅/楼层、播放、导航，再是大图。
- 底部 sheet 两档：摘要态 180-240px，全屏态承载详细信息。
- 地图控件按“定位/缩放”“楼层”“模式”分区。

### 5.3 色彩系统

当前主色：

- `--museum-accent: #E0E100`
- `--museum-poi-marker: #5ED0E4`
- 多处硬编码 `#E0E100`。

对比度风险：

| 组合 | 对比度 | 结论 |
| --- | ---: | --- |
| `#E0E100` / 白色 | 约 1.41:1 | 不适合白底小图形、边框、细状态 |
| `#E0E100` / `#262421` | 约 11.01:1 | 适合作为深色文字背景 |
| `#5ED0E4` / 白色 | 约 1.81:1 | 白底可见性不足 |
| `#999999` / 白色 | 约 2.85:1 | 不适合正文 |

问题：

- 同一个黄色承担品牌、选中态、路径、地图建筑边界、音频、加载、按钮等过多语义。
- 缺少功能色：成功、警告、错误、信息、拥挤度、无障碍。
- 地图上浅色点位和浅色路径在复杂背景上不稳定。

建议：

- 保留黄色作为品牌背景和大面积 CTA，不作为白底细边框。
- 增加语义色 token：
  - `--color-info: #1463D9`
  - `--color-success: #1B7F3A`
  - `--color-warning: #9A5B00`
  - `--color-danger: #C62828`
  - `--color-accessible: #005A9C`
- 地图点位采用深色底、白描边、类型图标和文字缩写。

### 5.4 空间布局

问题：

- 大量固定高度：`100vh`、`450px` hero、`50vh` 抽屉、`46px` 控件。
- `AreaSelector.vue` 的展开面板 `top: 100%`，在 fixed overlay 内可能落在视口外。
- 设施标签固定 68px，长词如“无障碍设施”容易拥挤。
- 抽屉和播放器都在底部，没有全局占位变量。

建议：

- 详情图使用 `height: min(42vh, 320px)` 思路。
- 抽屉使用 `bottom: 0` 和明确 `max-height`，不要依赖 `top: 100%`。
- 设施标签改为内容自适应，常用设施用快捷按钮。
- 定义 `--bottom-player-height`，所有底部浮层避让。

### 5.5 响应式设计

风险：

| 视口 | 风险 | 建议验证 |
| --- | --- | --- |
| 375x667 小屏 | 顶部 tab + 搜索 + 筛选占用地图过多 | 首屏是否还能看到当前位置和地图点位 |
| 390x844 常规手机 | 抽屉、播放器、marker sheet 互相遮挡 | 播放音频时打开 marker sheet |
| 430x932 大屏手机 | 控件分散但仍偏移动端 | 检查底部操作区拇指可达 |
| 768x1024 平板 | 列表过窄，地图空旷 | 讲解列表可改侧栏 |
| 横屏 | 100vh 和底部栏遮挡严重 | 改为侧边工具栏或紧凑布局 |

建议：

- 增加 H5 视觉回归，至少覆盖上述 5 个视口。
- 平板/H5 使用地图 + 侧栏双栏布局。
- 小屏默认折叠非必要筛选，仅保留搜索和“最近设施”。

### 5.6 无障碍性

问题：

- 核心控件是 `view @tap`，H5 下缺少 button 语义。
- 未发现 `aria-label`、`aria-live`、`role="dialog"`、`aria-pressed`。
- emoji 图标用于卫生间、收藏、导航、播放等核心功能。
- 播放器进度条不可键盘操作，读屏无法知道当前时间。
- 抽屉打开后没有焦点陷阱，背景地图仍可被误触。

建议：

- 抽象 `AppButton`、`IconButton`，H5 输出语义 button，小程序端映射为可点击 view。
- 所有图标按钮必须具备文字 label 或 `aria-label`。
- 弹层用 `role="dialog"`，关闭按钮明确，打开时聚焦标题或第一个操作。
- 音频状态用 `aria-live="polite"`。
- 增加“大字/高对比/减少动画/无障碍路线优先”设置。

## 6. 竞品对比分析

### 6.1 竞品选择

本次选取 5 个官方移动端/数字导览生态：

1. 故宫博物院“数字故宫”小程序与官方导览页。
2. 上海自然博物馆 App/H5 楼层导览/虚拟漫游。
3. British Museum Audio app。
4. MoMA Audio + Bloomberg Connects digital guide。
5. The Met Audio Guide / Digital Guide / interactive map。

### 6.2 核心功能差异

| 功能 | 当前项目 | 故宫 | 上海自然博物馆 | British Museum | MoMA | The Met | 我们缺失 |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 一级导航 | 仅导览/讲解 | 导览、展览、探索、票务等 | 常设展览、参观服务等 | Visit 下含 audio app/map/accessibility | Visit 下含 map/audio/accessibility | Plan Visit 下含 audio/map/accessibility | 任务型主导航 |
| 官方路线 | mock 路线，无入口 | LBS 推荐路线、定制路线 | App 提供参观路线 | self-guided tours | self-guided tours | highlights / collection tours | 路线入口和开始导览 |
| 地图 | 2D/3D 原型 | 精确路线、AR 实景导航 | 楼层导览 | interactive map | interactive museum map | interactive map | 地图与路线/服务打通 |
| 音频 | 组件存在，未闭环 | 官方语音讲解 | 实时学习/导览生态 | 250 highlights、65 gallery intros、多语言 | 分主题音频、kids、verbal descriptions | 展览/藏品音频 playlists | 真实音频、分类、多语言、儿童/无障碍版本 |
| 收藏 | 局部状态 | 未作为本次重点 | 未作为本次重点 | favourites | digital guide 支持探索内容 | digital guide/audio guide | 持久化收藏和“我的” |
| 互动 | 无 | AI 助手、AR 瑞兽 | 寻宝游戏、AR 展品复原 | self-guided tours | highlights / exhibitions | featured tours | 亲子任务、AR、AI |
| 客流 | 无 | 舒适度指数 | 限流提示 | 无官方页面重点 | 无官方页面重点 | 访问计划信息 | 客流/拥挤度 |
| 无障碍 | 基础缺失 | 读屏、无障碍路线/设施 | 页面有基础服务，App 未见完整无障碍描述 | BSL、audio descriptive guide | verbal descriptions | accessibility guide | 读屏、无障碍路线、描述音频 |
| 离线/预下载 | 无 | 未见明确离线 | 建议到馆前下载 App | 建议到馆前下载 audio tours | Bloomberg Connects app | Digital guide/app store | 到馆前下载/缓存策略 |

### 6.3 交互设计亮点

| 竞品 | 亮点 | 可借鉴点 |
| --- | --- | --- |
| 故宫 | 将路线、语音讲解、AR 导航、舒适度指数、AI 助手、无障碍路线整合为到馆闭环 | 把“地图”升级为路线和服务中枢，不只是展示平面图 |
| 上海自然博物馆 | 楼层导览和虚拟漫游围绕自然科学主题，如起源之谜、生命长河、演化之道 | 当前项目应采用自然馆主题 taxonomy，而不是通用展品列表 |
| British Museum | 音频 app 有多语言、主题 tour、250 件重点藏品、收藏、互动地图、BSL 和描述音频 | 音频应按主题、语言、人群和无障碍类型组织 |
| MoMA | Audio 页面按 collection、kids、verbal descriptions 等分组，并接入 Bloomberg Connects | 讲解不只是列表，应有人群化入口，如儿童、描述音频、展览专题 |
| The Met | Plan Visit 聚合票务、地图、音频、无障碍、家庭访问；Audio Guide 支持 stop number 和 playlists | 到馆前信息和到馆中导览应在一条链路里 |

### 6.4 技术实现优势对比

| 方向 | 竞品优势 | 当前差距 | 建议 |
| --- | --- | --- | --- |
| 内容分发 | British Museum / MoMA / The Met 使用成熟的音频和导览内容体系 | 当前音频 URL、内容分类、详情加载均未成熟 | 建立内容模型和 CMS/API 接口 |
| 定位与路线 | 故宫 LBS 路线和 AR 导航 | 当前路径是模拟，详情导航只返回 | 先做静态路线状态，再接真实馆内定位 |
| 预下载 | British Museum 建议到馆前下载音频 | 当前没有缓存策略 | H5/小程序缓存地图、音频元数据、轻量图片 |
| 多语言 | British Museum、The Met、MoMA 支持多语言或 Bloomberg Connects 多语言能力 | 当前只有中文 | 中期增加中英双语，长期多语言 |
| 无障碍 | 故宫、British Museum、MoMA、The Met 都有可访问内容或服务入口 | 当前语义和内容均缺失 | 建立 a11y 组件规范和无障碍路线数据 |
| 性能 | 竞品多数使用轻量列表/音频/地图，3D 不作为首屏基础依赖 | 当前 3D GLB 可能成为性能风险 | 默认 2D，3D 按需加载，低端机降级 |

### 6.5 按优先级的竞品借鉴建议

P0：

- 借鉴 The Met / MoMA 的“Visit/Map/Audio/Accessibility”任务入口，重建主导航。
- 借鉴 British Museum 的音频内容模型：主题 tour、重点对象、收藏、地图信息。
- 借鉴上海自然博物馆的自然科学主题命名，替换艺术馆 mock。

P1：

- 借鉴故宫路线闭环：路线推荐、语音讲解、地图导航联动。
- 借鉴 MoMA 的 kids / verbal descriptions 分组，建立儿童和无障碍讲解入口。
- 借鉴 The Met 的计划访问页面，把开放时间、票务、地图、音频、无障碍聚合。

P2：

- 借鉴故宫舒适度指数，增加人工或实时客流状态。
- 借鉴上海自然博物馆寻宝和 AR 展品复原，做亲子互动任务。
- 借鉴故宫 AI 助手，但限制在官方知识库和地图数据内，避免编造。

## 7. 分阶段优化计划

### 7.1 短期，1-2 周：可测试版本

目标：修复 P0 阻塞，让 5 类用户任务能被真实测试。

| 编号 | 改进项 | 涉及模块 | 工作量 |
| --- | --- | --- | --- |
| S1 | 建立主导航：地图、讲解、路线、服务、我的 | `pages.json`、导航组件、首页 | 3-5 人日 |
| S2 | 修复 marker 点击冲突 | `TencentMap.vue`、`MarkerDetailSheet.vue` | 1-2 人日 |
| S3 | 修复设施筛选事件和展开面板 | `AreaSelector.vue`、`index.vue` | 2-3 人日 |
| S4 | 统一搜索服务和结果动作 | `SearchPanel`、`ExplainList`、`search/index`、`utils/search.ts` | 4-6 人日 |
| S5 | 替换自然馆 seed data | data JSON、详情页加载 | 3-5 人日 |
| S6 | 统一音频播放器，去掉假 URL | `AudioPlayer`、详情页、讲解列表 | 4-6 人日 |
| S7 | 路线入口和开始导览闭环 | 路线列表、路线详情、地图状态 | 5-7 人日 |
| S8 | P0 无障碍和对比度修复 | 基础按钮、图标、色彩 token | 4-6 人日 |

短期验收：

- 5 个用户画像至少各 1 条任务可完整执行。
- 地图点位、搜索、设施、音频、路线不再只停留在 toast 或 console。
- 读屏能识别核心按钮。

### 7.2 中期，3-6 周：体验一致性与内容体系

目标：降低认知负荷，提高导览效率，支撑第二轮用户测试。

| 编号 | 改进项 | 说明 | 工作量 |
| --- | --- | --- | --- |
| M1 | 全局状态模型 | 地图、路线、音频、收藏、搜索历史 | 5-8 人日 |
| M2 | 视觉层级和 z-index token | 顶栏、地图控件、sheet、播放器、modal | 2-3 人日 |
| M3 | 响应式专项 | 小屏、常规手机、平板、横屏 | 5-7 人日 |
| M4 | 内容分类体系 | 展厅、主题、展品、路线、设施 taxonomy | 5-8 人日 |
| M5 | 真实加载/空态/错误态 | 3D、音频、搜索、定位、路线 | 4-6 人日 |
| M6 | 收藏和我的 | 收藏、历史、设置、无障碍偏好 | 4-6 人日 |
| M7 | 多语言基础 | 中英字段、语言切换框架 | 5-8 人日 |

中期验收：

- SUS 目标 75+。
- 设施查找 30 秒内。
- 搜索结果一致性 100%。
- 关键视口无明显遮挡。

### 7.3 长期，7-12 周：官方导览生态和差异化

目标：补齐竞品能力，形成 3D + 自然科学 + 亲子/研学差异化。

| 编号 | 改进项 | 说明 | 工作量 |
| --- | --- | --- | --- |
| L1 | 服务与票务入口 | 开放时间、预约、票务、交通、临展 | 5-8 人日 |
| L2 | 无障碍路线 | 电梯优先、少楼梯、休息区、无障碍卫生间 | 8-12 人日 |
| L3 | 客流舒适度 | 先人工运营，后接实时数据 | 8-15 人日 |
| L4 | 亲子寻宝/研学任务 | 打卡、问答、奖励、路线 | 10-15 人日 |
| L5 | 3D 地图产品化 | POI、路线、楼层剖切、性能降级 | 12-20 人日 |
| L6 | AR 展品复原 | 古生物/化石复原场景 | 15-30 人日 |
| L7 | AI 导览助手 | 官方知识库、路线推荐、服务问答 | 15-25 人日 |

长期验收：

- 亲子路线、无障碍路线、深度主题路线均可测试。
- 3D 不只是模型展示，而能完成找展品/找设施/走路线。
- AI 回答有来源边界，不编造展品和场馆信息。

## 8. 工作量与资源需求

### 8.1 角色配置

| 阶段 | 前端 | UX/UI | 内容/策展 | 后端/API | 3D/图形 | QA | 备注 |
| --- | ---: | ---: | ---: | ---: | ---: | ---: | --- |
| 短期 | 1-2 人 | 0.5 人 | 0.5 人 | 0-0.5 人 | 0.2 人 | 0.5 人 | 以本地 seed data 为主 |
| 中期 | 1-2 人 | 1 人 | 1 人 | 0.5-1 人 | 0.5 人 | 0.5-1 人 | 建立状态、内容和响应式体系 |
| 长期 | 2 人 | 1 人 | 1-2 人 | 1-2 人 | 1 人 | 1 人 | 涉及客流、AR、AI、3D 性能 |

### 8.2 粗略工期

| 阶段 | 工期 | 人日估算 |
| --- | --- | ---: |
| 短期 P0 | 1-2 周 | 26-40 人日 |
| 中期 P1 | 3-6 周 | 30-46 人日 |
| 长期 P2/P3 | 7-12 周 | 73-125 人日 |

### 8.3 关键依赖

- 自然馆真实内容 taxonomy 和 seed data。
- 展厅、展品、设施、路线的统一 ID。
- 音频资源和版权状态。
- 馆内点位坐标和无障碍设施数据。
- 是否接入实时客流、定位、AR 或 AI 后端服务。

## 9. 用户测试计划

### 9.1 测试轮次

| 轮次 | 时间点 | 样本 | 目标 |
| --- | --- | --- | --- |
| 第 1 轮 | 短期 P0 完成后 | 8-10 人 | 验证核心任务是否可执行 |
| 第 2 轮 | 中期 P1 完成后 | 15-20 人 | 验证 IA、响应式、无障碍基础 |
| 第 3 轮 | 长期能力上线后 | 25+ 人 | 验证亲子、研学、无障碍和 3D 差异化 |

### 9.2 指标

| 指标 | P0 目标 | P1 目标 | P2/P3 目标 |
| --- | ---: | ---: | ---: |
| 核心任务完成率 | 80% | 90% | 95% |
| 找设施用时 | 45 秒内 | 30 秒内 | 20 秒内 |
| 路线入口发现率 | 70% | 90% | 95% |
| 音频播放成功率 | 90% | 95% | 98% |
| SUS | 68+ | 75+ | 80+ |
| 读屏核心按钮可识别率 | 80% | 95% | 98% |

## 10. 结论

当前项目最需要的不是再增加一个视觉模块，而是把已经存在的部件连接成真实任务：

1. 信息架构从“导览/讲解”改为“地图/讲解/路线/服务/我的”。
2. 地图点位先确认，再由用户选择导航、详情、音频或收藏。
3. 搜索、音频、路线、收藏都要统一状态和统一数据源。
4. 先替换自然博物馆内容，再做用户测试。
5. 先满足老年、儿童、首次访客的基础可用性，再上 AR、AI、客流、3D 深化。

建议下一步直接以“设施导航”和“展品讲解”两条竖切片启动 P0，实现后用 8-10 名用户做第一轮可用性测试。