Files

lyf a90f63cef0 chore: initialize frontend miniapp repository

2026-06-09 21:08:45 +08:00

33 KiB

Raw Blame History

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 推荐实施策略

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

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

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

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 示意：

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：

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 交互流程

关键断点示意：

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 当前首页层级示意

┌──────────────────────────┐
│ 顶部 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 个官方移动端/数字导览生态：

故宫博物院“数字故宫”小程序与官方导览页。
上海自然博物馆 App/H5 楼层导览/虚拟漫游。
British Museum Audio app。
MoMA Audio + Bloomberg Connects digital guide。
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. 结论

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

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

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

33 KiB Raw Blame History Unescape Escape