H5 导览首页 5 套设计方向
本目录提供 5 套 H5 首页高保真方向稿,用于选择信息架构和首页主体验证。设计重点为:三维组件、讲解入口、来馆入口。其他功能仅作为弱辅助控件出现。
文件
00-contact-sheet.png:5 套方案总览图。01-01-map-first.png:方案一,地图画布 + 顶部双入口。02-02-immersive-rail.png:方案二,沉浸三维 + 右侧任务轨。03-03-bottom-dock.png:方案三,三维首页 + 底部三任务 Dock。04-04-poi-focus.png:方案四,点位聚焦 + 双入口卡片。05-05-ultra-minimal.png:方案五,极简三维主视觉。
每套 PNG 均配有同名 SVG 源稿,方便后续继续调整。
方案说明
方案一:地图画布 + 顶部双入口
三维地图占据主屏,讲解和来馆作为顶部轻量胶囊入口。适合保留传统导览首页结构,同时弱化其他功能。
方案二:沉浸三维 + 右侧任务轨
三维地图更沉浸,讲解和来馆在右侧任务轨中出现,强调地图操作感。适合希望首页更像地图工具的方向。
方案三:三维首页 + 底部三任务 Dock
三维地图在上,底部集中承接 讲解、来馆、开始导览。适合把首页主任务集中到下方操作区的方向。
方案四:点位聚焦 + 双入口卡片
默认突出一个展厅点位,底部提供 讲解和来馆两个卡片入口。适合首页默认带展厅推荐点位或当前位置点位的方向。
方案五:极简三维主视觉
最大幅度减少功能组件,只保留三维地图主视觉和底部核心任务选择。适合追求首页干净、低学习成本的方向。
需要确认
- 首页是否需要默认展示搜索入口,还是仅保留三维地图和任务入口。
讲解入口是进入讲解列表,还是进入当前展厅讲解。来馆入口是外部导航、路线说明,还是馆外地图页。开始导览是否仍作为首页主按钮保留,或被三维地图点击/点位点击替代。- 楼层、定位、图例、设施筛选是否必须首屏可见,还是可以收纳到地图工具菜单中。