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 降级逻辑 |
需要确认的问题
- 0519 规范中的底部导航栏目是“首页 / 展览 / 券码 / 商城 / 我的”,本导览业务是否需要保留项目当前“导览 / 讲解”顶部入口,还是纳入底部主导航。
#E0DF00作为导览路线高亮是否足够清晰,还是路线应优先使用标签绿#2C854F,主色仅用于按钮和选中态。- 路线未就绪阶段,主按钮是否统一为“查看位置关系”,避免出现“开始导览”误导。
- “模拟导览”是否面向用户开放,还是只作为内部演示 / 测试状态。
- 跨楼层偏好是否需要在第一期只保留“电梯优先”,待 route graph 验证后再开放楼梯 / 扶梯。
- 到达页是否优先承接“相关讲解”,以形成导览到讲解的跨业务闭环。
生成方式
按 C:\Users\Administrator\.codex\skills\.system\imagegen\SKILL.md 使用内置 image_gen 工具逐张生成,再复制到当前目录。原始生成图保留在 Codex 默认生成目录中,未删除。