chore: initialize frontend miniapp repository

docs/UX/ux-ui-audit-2026-05-28.md

@@ -0,0 +1,669 @@
+# 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 名用户做第一轮可用性测试。