# 0519 规范版导览功能设计稿 ## 说明 本目录为新版“导览 / 馆内导览”功能逻辑设计稿的 0519 视觉规范重生成版本。生成依据包括: - 对标逻辑分析:`docs/Benchmark/guide-video-ux-logic-analysis.md` - UI 规范目录:`E:\MyWork\深圳国际艺术馆\museum-guide\docs\UI设计\深圳自然博物馆小程序+设计规范0519` - 规范图片:`色彩.png`、`布局.png`、`按钮.png`、`文字.png`、`圆角.png`、`图标.png`、`示例.png` 这些图片只表达功能逻辑、UX 状态和页面结构,不是最终视觉规范或可直接切图的交付稿。正式落地仍需产品、设计和路线数据 readiness 共同确认。 ## 0519 规范应用要点 - 色彩:系统主色 / 按钮文字 `#E0DF00`,主按钮 `#000000`,选中文字高亮 `#BEBD02`,链接 `#1B6EC0`,标签 `#2C854F`,错误 `#E73333`,背景 `#F9FAFB`。 - 文本:主标题 `#000000`,正文 `#3F3F3F`,占位 / 默认提示 `#ADB0B4`,分割线 `#D9D9D9`。 - 布局:页面边距约 15-16px,基础间距 10px,保持 6 列网格感。 - 圆角:标签 / 选项 4px,按钮 / 输入框 / 搜索框 8px,卡片 / 弹框 16px。 - 字体:中文以微软雅黑、思源黑体、苹方风格为准;层级参考 20pt、18pt、16pt、14pt、12pt。 - 图标:线性小程序图标风格,未选中灰色,选中使用系统主色。 ## 图片清单 | 文件 | 业务状态 | 功能闭环 | 对应落地参考 | | --- | --- | --- | --- | | `01-guide-home-0519.png` | 导览首页初始态 | 地图作为导览工作台,搜索、楼层、快捷入口同屏可达 | `src/pages/index/index.vue`、`GuideMapShell.vue` | | `02-search-poi-0519.png` | 搜索地点 / 筛选态 | 搜索结果可查看位置、设起点、去这里,不脱离地图上下文 | `src/pages/search/index.vue`、未来地图内 overlay | | `03-poi-selected-0519.png` | POI 选中态 | POI 卡片承接查看位置、从这里出发、去这里、相关讲解 | `index.vue` 的 `selectedGuidePoi` 相关逻辑 | | `04-route-planning-0519.png` | 路线规划态 | 起终点完整性、偏好选项、路线 readiness 和降级文案 | `RoutePlannerPanel.vue`、`guideRouteUseCase.ts` | | `05-indoor-navigation-active-0519.png` | 馆内导览进行中 | 当前路线、下一步、当前楼层、进度、暂停 / 退出 / 重新定位 | 未来导航运行态;当前需受路线 readiness 约束 | | `06-cross-floor-navigation-0519.png` | 跨楼层导览态 | 当前层路线、换层节点、下一层路线关系 | 未来 `route_graph`、`nav_data`、楼层连接器 | | `07-arrival-complete-0519.png` | 到达目标 / 结束导览 | 到达确认、查看详情、相关讲解、重新规划、返回首页 | 未来导航完成态和讲解联动 | | `08-error-fallback-0519.png` | 异常 / 降级态 | SDK / 定位 / 路线不可用时返回位置预览或手动选择 | `guideReadiness.ts`、`route/detail.vue` 降级逻辑 | ## 需要确认的问题 1. 0519 规范中的底部导航栏目是“首页 / 展览 / 券码 / 商城 / 我的”,本导览业务是否需要保留项目当前“导览 / 讲解”顶部入口,还是纳入底部主导航。 2. `#E0DF00` 作为导览路线高亮是否足够清晰,还是路线应优先使用标签绿 `#2C854F`,主色仅用于按钮和选中态。 3. 路线未就绪阶段,主按钮是否统一为“查看位置关系”,避免出现“开始导览”误导。 4. “模拟导览”是否面向用户开放,还是只作为内部演示 / 测试状态。 5. 跨楼层偏好是否需要在第一期只保留“电梯优先”,待 route graph 验证后再开放楼梯 / 扶梯。 6. 到达页是否优先承接“相关讲解”,以形成导览到讲解的跨业务闭环。 ## 生成方式 按 `C:\Users\Administrator\.codex\skills\.system\imagegen\SKILL.md` 使用内置 `image_gen` 工具逐张生成,再复制到当前目录。原始生成图保留在 Codex 默认生成目录中,未删除。