Wireframe UI Flow / iPhone 17 Pro

珠光宝气APP UI 介面流程稿

每个不同页面与关键状态独立产出一张图,方便后续视觉设计、原型串接与开发拆票。

设备移动端
画面比例1206 : 2622
稿件类型高保真 Wireframe
页面数量10 张独立稿

整体流程地图

1
首页壳层
默认芝麻开门
2
芝麻开门
任务列表与状态
3
领取确认
确认彩金领取
4
转盘抽奖
Overlay 转盘浮层
5
转盘结果
奖励回写
6
藏宝阁
通行证与许愿池
7
投掷完成
许愿提醒
8
体育包赔
提交窗口
9
点石成金
竞猜 UI
10
竞猜说明
状态与规则

独立页面 Wireframes

01

活动首页壳层

默认页三分页入口
珠光宝气首页壳层 iPhone 17 Pro wireframe
点击图片放大查看

用于定义全局活动框架:返回按钮、活动主标题、藏宝阁视觉区、「开启藏宝阁选项」与三分页按钮。首页主视觉与宝阁选项融合为同一区块以压缩高度;因默认分页为「芝麻开门」,下方预览区直接展示芝麻开门三项活动。

  • 进入活动默认选中「芝麻开门」。
  • 黄金宝阁 / 神品宝阁嵌入主图下缘,作为活动入口或宝阁等级展示。
  • 下方预览三张芝麻开门活动卡:指定会员免费礼金、单周打码转盘抽奖、USDT 钱包净存款红包抽奖。
02

芝麻开门任务列表

领取状态转盘入口
芝麻开门任务列表 iPhone 17 Pro wireframe
点击图片放大查看

承载三个芝麻开门活动:免费礼金、单周打码抽奖、USDT 钱包净存款红包抽奖。

  • 每张卡片显示活动名称、达标说明、当前状态与主按钮。
  • 状态包含「差一点、点击领取、不符合、已领取」。
  • 不符合状态使用灰色禁用按钮,并保留原因或缺口提示位置。
03

领取确认

确认弹窗彩金领取
芝麻开门领取确认 iPhone 17 Pro wireframe
点击图片放大查看

会员达标后点击「领取」出现的确认层,用来说明彩金金额与流水要求,避免误领。

  • 领取确认文案:恭喜您达成 xxx 元彩金成就,确认领取后仅需 xxx 流水。
  • 按钮固定为「确认」与「再想想」。
  • 确认后完成领取并更新活动卡状态;再想想则关闭弹窗回到任务列表。
04

转盘抽奖 Overlay

遮罩层游戏转盘
芝麻开门转盘抽奖 iPhone 17 Pro wireframe
点击图片放大查看

会员在单周打码或 USDT 净存款活动达标后点击抽奖,原芝麻开门页面保留在背景并加深色 overlay,上方出现转盘浮层。

  • 转盘区显示奖项:谢谢惠顾、灵石、天降横财。
  • 浮层需包含关闭按钮、游戏转盘、今日剩余次数与「开始抽奖」。
  • 抽奖过程中按钮需进入不可重复点击状态,动画结束后进入「转盘结果」。
05

转盘结果

结果弹窗奖励回写
芝麻开门转盘结果 iPhone 17 Pro wireframe
点击图片放大查看

转盘停止后出现结果弹窗,需清楚说明中奖或未中奖,并同步会员奖励状态。

  • 结果类型:谢谢惠顾、灵石、天降横财 18 元或按比例计算的彩金。
  • 若获得灵石,需刷新灵石余额;若获得彩金,需显示金额与流水条件。
  • 提供「确认」关闭结果,也可保留「查看记录」入口。
06

藏宝阁(通行证)主页

许愿池六个任务
藏宝阁通行证主页 iPhone 17 Pro wireframe
点击图片放大查看

通行证页的重心是许愿奖池与任务列表。用户先看到虚天鼎 / 许愿池,再看到许愿币余额与一键投掷。

  • 许愿池动态元素:硬币、足球、元宝、宝剑。
  • 任务包含每日登录、返水加成、官网福利、VIP 加速、体育包赔、VPN 报销。
  • 任务按钮需要支持领取、已领取、不符合、加速、已加速、申请等状态。
07

许愿币投掷完成提醒

遮罩弹窗投掷反馈
许愿币投掷完成提醒 iPhone 17 Pro wireframe
点击图片放大查看

用户点击「一键投掷」并成功消耗许愿币后出现,属于轻量反馈弹窗,目的在于告知奖池开启时间。

  • 背景保留藏宝阁通行证页,并加 overlay 遮罩。
  • 弹窗文案:成功投掷,虚天鼎将于 xxx 年月日自动开启。
  • 点击「关闭」回到藏宝阁页,并显示更新后的许愿币余额。
08

体育首单包赔提交窗口

申请表单审核状态
体育首单包赔提交窗口 iPhone 17 Pro wireframe
点击图片放大查看

用户点击「体育首单包赔申请」后出现,是资料提交流程,不应与投掷提醒合并。

  • 表单需包含注单号、上传注单截图、备注与规则提示。
  • 按钮为「提交」与「再想想」。
  • 提交后进入「已申请」,审核需补件时为「重新提交」,通过后显示「已通过」。
09

点石成金竞猜 UI

用户画面YES / NO
点石成金竞猜 UI iPhone 17 Pro wireframe
点击图片放大查看

这是用户实际看到的竞猜操作页,只保留题目、选项、灵石余额与提交动作,不混入流程说明。

  • 每次竞猜消耗灵石 ×1。
  • 用户选择 YES 或 NO 后点击「提交」。
  • 开奖时间与结果依据放在题目下方,避免用户提交前遗漏。
10

点石成金竞猜说明

规则页状态说明
点石成金竞猜说明 iPhone 17 Pro wireframe
点击图片放大查看

这是供设计、产品、开发对齐的说明页,用来独立表达竞猜流程、状态规则与资料字段。

  • 操作流程:查看题目、选择答案、确认消耗、提交锁定、开奖结算。
  • 状态规则:未选择、灵石不足、已提交、已开奖。
  • 资料字段:开奖时间、结果依据、用户选择、灵石余额。

状态与页面拆分原则

类别独立产出原因后续设计重点
首页壳层承载全活动导航与藏宝阁世界观,是所有分页共同框架。藏宝阁视觉、分页选中态、返回路径。
任务列表用户主要领取、达标、抽奖操作都发生在任务卡。状态可读性、按钮禁用态、缺口提示。
弹窗 / 结果涉及确认、提交、抽奖结果、审核结果,需要避免误操作。遮罩层、主次按钮、结果回写。
竞猜页点石成金是独立玩法,交互模式不同于领取任务。选项反馈、灵石扣除确认、开奖后状态。