荒野游园会 · H5 页面示意图

给设计与开发团队的页面 Wireframe & 交互标注
项目:饥困荒野类型:H5活动页屏幕:375×812版本:v1.02026-04-01
📑 总览
P1 游园地图
P2 角色展位
P3 任务中心
P4 游园护照
P5 奖励中心
P6 分享海报
P7 登录绑定
页面总览与导航结构
H5共7个核心页面,以游园地图为中心辐射。点击下方节点可跳转到对应示意图。
P7 登录/绑定
P1 游园地图(首页)
P2 角色展位
P3 任务中心
P4 护照
P5 奖励
P6 分享海报

1P1 游园地图

活动首页。俯视角地图展示9个角色展位+1个隐藏帐篷,顶部进度条,底部TabBar。按月分区,未开放显示"施工中"。

2P2 角色展位

点击地图展位进入。角色立绘、背景故事、家具预览。底部打卡/解锁按钮。每月开放3个展位。

3P3 任务中心

集中展示所有任务。分Tab:每日/探索/社交。任务卡片含名称、奖励、状态、领取按钮。

4P4 游园护照

长线身份凭证。10个印章位(9+1隐藏)、护照等级、参与数据、分享海报入口。

5P5 奖励中心

已解锁家具列表、里程碑进度、红包/实物记录。提示"上线后发放"。

6P6 分享海报

个性化海报生成。游园进度+已解锁家具+护照等级+邀请二维码。

7P7 登录绑定

首次进入弹出浮层。引导登录并绑定游戏预约账号。未预约者先引导预约。

全局交互规范
项目说明
底部TabBar固定底部,4个Tab:地图/任务/护照/奖励。当前高亮。所有页面可见(除登录浮层和海报页)。
顶部信息栏游园章计数(图标+数字)+ 护照等级。点击分别跳转任务中心和护照页。
返回逻辑角色展位页、分享海报页有左上角返回箭头。其余页面通过TabBar切换。
登录态未登录访问任何页面→先弹P7登录浮层。已登录→直接进P1。
月份切换地图按当前月自动展示对应展区。已过期展区保持开放。未到期显示"即将开放"。
动效要求① 获得游园章:章飞入顶部计数器
② 解锁家具:卡片翻转+星光特效
③ 隐藏帐篷:各月不同微动效
④ 页面转场:左右滑动
设计基调饥荒哥特手绘风。暗色调+暖光。线条感+手绘纹理。中文衬线标题+无衬线正文。
1
P1 · 游园地图(首页)
活动核心页面。俯视角地图展示全部展位,是用户的操作起点和每次回访落脚点。
2
P2 · 角色展位详情
从地图点击展位进入。展示角色信息和家具预览,引导完成浏览打卡。
3
P3 · 任务中心
集中展示所有可完成任务。分Tab管理,任务卡片明确展示奖励和状态。
4
P4 · 游园护照
长线身份凭证,贯穿4个月。展示印章收集、等级进度和个人数据。
5
P5 · 奖励中心
已解锁家具列表、里程碑进度和各类奖励记录。
6
P6 · 分享海报生成
生成个性化海报,带邀请码/二维码,服务裂变拉新。
7
P7 · 登录/绑定浮层
首次进入时弹出。引导登录并绑定游戏预约账号。这是一个覆盖在首页上的半屏浮层。
「荒野游园会」H5页面示意图 · 给设计与开发团队 · 内部文档 v1.0