Files

新版导览功能设计稿图片说明

说明

本目录图片基于 docs/Benchmark/guide-video-ux-logic-analysis.md 提炼出的对标导览应用功能逻辑生成,用于表达本项目新版“导览 / 馆内导览”的业务闭环、UX 状态和页面结构。

这些图片不是最终视觉规范,不用于直接切图落地;图片中的颜色、图标、细节文案和布局只作为功能逻辑设计参考。正式实现仍需以本项目设计规范、组件能力、路线数据 readiness 和产品评审结论为准。

生成方式:按 C:\Users\Administrator\.codex\skills\.system\imagegen\SKILL.md 使用内置 image_gen 工具逐张生成,并复制到本项目目录。

图片清单

文件 业务状态 依据的对标视频逻辑 本项目落地参考
01-guide-home.png 导览首页初始态 地图作为导览工作台,搜索、楼层、更多和快捷入口同屏可达 src/pages/index/index.vueGuideMapShell.vueThreeMap.vue
02-search-poi.png 搜索地点 / 筛选态 搜索不脱离地图上下文,结果可继续查看位置、设起点或设终点 src/pages/search/index.vue、未来可内聚到 GuideMapShell overlay
03-poi-selected.png POI 选中态 地图点位选中后成为任务枢纽,提供查看位置、从这里出发、去这里、相关讲解 index.vueselectedGuidePoi 卡片和 handleSetSelectedPoiAsStart/End
04-route-planning.png 路线规划态 起点 / 终点完整性校验,路线偏好和规划状态分层展示 RoutePlannerPanel.vueRoutePointPicker.vueguideRouteUseCase.ts
05-indoor-navigation-active.png 馆内导览进行中 从“看路线”进入“执行指令”,持续展示下一步、距离、当前楼层和退出能力 未来导航运行态;当前仅可作为模拟导览 / 产品目标
06-cross-floor-navigation.png 跨楼层导览态 跨层路线必须解释当前层路线、换层节点和下一层延续关系 未来 route_graphnav_data、楼层连接器和路线渲染
07-arrival-complete.png 到达目标 / 结束导览 导览闭环结束后提供查看详情、相关讲解、重新规划、返回首页 未来导航完成态;可复用位置详情、讲解联动和路线清理逻辑
08-error-fallback.png 异常 / 降级态 SDK、定位、路线不可用时给出明确原因和恢复路径不让用户卡死 src/domain/guideReadiness.tsroute/detail.vue 的降级提示、SDK 错误态

对标逻辑到本项目的转译原则

  • 不照抄对标小程序 UI只吸收任务闭环找点、选点、规划、导览中、跨层、到达、退出。
  • 地图保持为导览主工作台搜索、POI、路线面板尽量不打断空间上下文。
  • 当前路线数据未就绪时,只表达“位置预览 / 查看位置关系 / 能力不可用原因”,不承诺正式馆内导航。
  • “推荐路线 / 少走楼梯 / 电梯优先”需要真实拓扑、楼层连接器和可通行边权支撑后才能成为有效功能。
  • 馆外“来馆”和馆内导览是两条业务线,需要保持解耦。

需要产品确认的问题

  1. 首页快捷入口是否保留“推荐展厅 / 我的收藏”,还是只保留“馆内导览 / 来馆”。
  2. 搜索结果的默认动作优先级:先“查看位置”,还是直接支持“去这里”。
  3. NAV_ROUTE_GRAPH_READY=false 阶段,路线面板主按钮文案是否统一为“查看位置关系”。
  4. “模拟导览”是否作为正式导航前的演示能力开放,还是仅用于内部验证。
  5. 跨楼层导览是否优先支持“电梯优先”,以及无障碍路线是否需要独立入口。
  6. 到达目标后的下一步优先级:查看详情、相关讲解、收藏、重新规划如何排序。
  7. SDK 未加载、定位不可用、路线不可用是否需要统一错误码和诊断入口。

生成 Prompt 摘要

每张图均使用 ui-mockup 类型,移动端 H5 / 小程序竖屏构图,强调以下信息:

  • 画面名称和业务状态。
  • 用户当前目标。
  • 关键组件与交互意图。
  • 本项目视觉语气:浅灰绿地图底、白色浮层、黑色主按钮、低饱和边框、清晰中文层级。
  • 避免项:不复刻对标视频 UI不使用对标颜色 / 图标 / 字体 / 精确布局,不承诺未经验证的正式导航能力。