← 返回封面 打开原型 真机截图

PC 全链路说明文档

当前版本:UI/技术评审版 V1。已覆盖核心业务链路及当前可核实关键状态;非核心及受环境限制状态采用持续补充机制。本文按「背景 → 目标 → 原型说明 → 范围 → 业务规则基准 → 页面 → 数据 → 业务流程 → 状态 → 交互 → 异常 → 视觉 → 验收」组织。现网/UAT 参考环境:https://newuat-sportpc.uatsptcn.com/。

给 UI 评审时看这些

  • 最终视觉、弹窗样式、系统维护页(404 / 全站维护 / 地区限制)以评审确认后的 UI 设计稿为准。
  • 矩阵「待核实」≠「无」。矩阵中标记为「待核实」的状态,当前阶段不作为 UI 设计完整性的强制验收项;如 UI 设计过程中发现该状态影响页面或组件设计,可反馈产品进一步确认。
  • 对照第 10 章视觉、原型结构与截图包;文末「当前待补充/待核实项」按已识别待核实处理。以下待核实项当前不作为 UI 设计缺失项;如涉及当前设计稿完整性,可在设计过程中反馈产品补充确认。

给技术 实现时看这些

  • 已定义的校验红字、进馆结果、Toast 原文必须一致;「无」仅表示经确认不存在;「待核实」表示当前尚未确认,不得直接视为“不存在”或“无需处理”。待核实项确认后,根据是否影响本期核心链路确定本期补充或后续优化。
  • 业务流程、交互章节与矩阵「点击后状态」两边要对上;未明确调整的历史逻辑沿用现网,冲突反馈产品,不自行择一实现。
  • 演示账号、验证码、极验拖滑块、造数开关仅原型用;生产对接真实接口。产品负责业务规则、用户侧业务反馈及已明确交互口径;UI 负责视觉及组件状态完整性;技术负责技术实现、异常识别及技术兜底机制;测试负责场景验证。设计、开发及测试过程中发现未覆盖业务状态时,由相关角色反馈产品共同确认最终用户侧处理口径。

1. 背景 双方

当前 PC 端产品已上线运行,但历史版本缺少完整的产品原型及 UI 设计底稿,现有页面、业务链路及交互状态主要以线上/UAT 实际表现为准。

为支持本次 PC 视觉改版及后续持续维护,产品基于现网可操作业务链路、UAT 环境及已确认业务规则,对现有 PC 页面进行反向梳理并补充产品原型、业务链路及关键状态说明。

本次原型主要用于明确页面结构、业务链路、关键交互及状态口径,为 UI 补充正式设计稿及技术评审提供业务基线。

本次原则上不重新定义现网成熟业务规则。未明确提出调整的业务逻辑默认沿用现网。

2. 目标 双方

  1. 设计规范统一:统一 PC 页面布局、组件及交互表现,为 UI 建立完整设计基线,并降低后续页面维护及产品迭代成本。
  2. 体验优化:优化页面布局、信息层级及交互状态,降低用户操作成本,提升使用体验。

3. 原型使用说明 双方

本次产品原型主要用于表达:

原型中的颜色、字号、间距、Icon、图片、组件视觉样式等不作为最终 UI 验收标准,最终视觉效果以 UI 正式设计稿为准。

如产品原型与现网历史业务规则存在冲突,应在评审阶段确认,不默认以原型覆盖现网历史业务规则。

4. 范围 双方

本次需求范围为现有 PC 前端页面的视觉、布局、交互改版;核心业务规则原则上不变。涉及新增功能、业务规则调整及后端逻辑变更的内容,须经产品明确提出并评审通过后才纳入,不默认进入本次改版范围。给 UI 最终视觉以正式设计稿为准。

5. 业务规则基准 双方

6. 页面 给 UI

给 UI 点击可打开对应原型。弹窗视觉以 UI 设计稿为准。矩阵中标记为「待核实」的状态,当前阶段不作为 UI 设计完整性的强制验收项;如 UI 设计过程中发现该状态影响页面或组件设计,可反馈产品进一步确认。

模块画面打开原型

7. 数据 给技术

演示账号 双方

角色账号密码手机登录后
会员testtom1995zz12312315698669866会员首页 + 平台公告;余额 367.92;消息 3。提现微信码默认未绑,绑完本会话显示已添加
主播zuoyi01aa12345613800001111主播首页 + 平台公告;余额 100.00;消息 2;侧栏德甲瓷砖、无个人中心项

短信 / 找回密码验证码固定 123456。极验:拖动滑块到最右侧通过(对应真机拼图);中途松开为失败,点「重新验证」重来;点 × / 蒙层关窗,回到原登录/注册/发码窗,表单保留,登录钮从「登录中...」恢复为「登录」。

校验规则(实现必须一致) 给技术

字段规则用户看见的红字
登录账号6–20 位数字或字母空:请输入账号;格式:账号由6-20位数字与字母组成
登录/新密码8–20 位数字或字母空:请输入密码;格式:密码由8-20位数字与字母组成
注册账号6–12 位数字或字母请输入6-12个字母及数字组成的账号
手机号1 开头 11 位请输入正确手机号 / 请输入手机号
验证码6 位;演示环境必须 123456未输完:请输入验证码;错:验证码错误
昵称必填,≤12 字请输入昵称 / 超出校验格式
生日可选;年龄不得 <15生日设置小于15岁
反馈内容必填,0–100 字请输入内容 / 内容 0-100
充值金额必须 >0 的数字请输入金额;整页另有低于最小金额 / 超过单笔限额
开播赛事+标题必填请选择您要关联的赛事 / 请填写直播的标题
改登录密码新旧不得相同Toast:密码相同,请重新设置

进馆结果(本号) 给技术

场馆已登录结果
V体育转账新开三方场馆页(馆内页待核实,本期评审不要求穷举馆内)
其它体育(DB/FE/IM/沙巴/FB)Toast 游戏参数初始化失败
棋牌全部Toast 游戏参数初始化失败
彩票全部Toast 获取游戏token失败
电子捕鱼 / 电竞进电子大厅(馆内再往下待核实)
真人全部新开三方落地,不画馆内
游客点任何进入游戏账号登录弹窗,无失败 Toast

8. 业务流程 双方

  1. 游客浏览:无直播 Tab;足球/篮球均为卫星卡片(直播中+未开赛),足球另有直播画面;点登录/注册/进馆/更多比赛/盘口 → 登录窗;点充值 → Toast 后再登录窗。
  2. 账号登录:空钮置灰 → 填合法账号密码 → 钮变「登录中...」并出极验滑块 → 拖到右侧通过。匹配演示账号则进对应首页+公告;不匹配回到登录窗(钮恢复「登录」)+ 顶栏红 Toast「账号或密码错误,请重试!」(字段下无红字)。关极验或失败重试后钮必须恢复,不能停在「登录中...」。
  3. 短信登录:合法手机 → 获取验证码(极验+倒计时+Toast 发送成功)→ 6 位码 → 极验 → 进首页+公告。关发码极验回到短信窗。
  4. 注册:账号或手机号路径校验通过 → 极验 → 会员首页+公告。关极验回到注册窗。
  5. 找回密码:空账号「下一步」置灰 → 账号存在进第 2 步 → 必须先点获取验证码并过极验 → 再填 123456 才能下一步(可点上一步)→ 第 3 步只填一栏新密码,点「重置」→ Toast 密码重置成功 → 登录窗。未发码时第 2 步「下一步」置灰。
  6. 进入场馆:侧边栏游戏场馆,飞出层点击后,跳转新开页面三方场馆(馆内页待核实);失败则按上面进馆表出 Toast。
  7. 直播下注:会员点赔率 →出弹窗显示「观看直播」「立即投注」,点击立即投注投注三方页面(馆内页待核实);
  8. 直播跟单:加入聊天后点跟单 → 提示「请前往场馆内进行投注,以享受最佳赔率」→「立即投注」新开三方(馆维护则留在直播页并出「游戏维护中」);「观看直播」关窗。游客点跟单出登录窗。
  9. 充值:未绑手机底钮「添加手机号」;已绑选通道填金额点「立即充值」后进入 C体育(待支付等内页待核实)。无 Toast「订单已提交」。
  10. 提现:未绑到账方式时下拉写「请先添加银行卡 / 微信收款码」,金额、预约、普通/大额和立即提现仍在。点立即提现走添加。已绑后的提现表单、C体育处理中待核实。
  11. 会话过期:Toast「登录已过期,请重新登录」+ 登录窗。

9. 状态 给技术

每个模块按下面 8 列描述。单元格状态标记统一如下(禁止只写正常、禁止「其他异常」):

状态标记说明

标记含义
已定义产品已确认该状态及对应处理规则(矩阵中已写出具体用户可见表现时,即属已定义)。
无经确认当前业务不存在该状态。
沿用现网现网已有明确处理逻辑,本次需求不调整,继续保持现有逻辑。
待核实受环境、账号、数据、第三方状态或造数条件限制,当前暂无法确认。

特别注明:「待核实」不等于「无」;原型未展示某一状态,不代表该状态不存在或不需要技术处理。本次目标是准确表达当前产品已确认到什么程度,避免将「未覆盖」误认为「不存在」。没有依据时不自行补充异常文案或 Toast。

列含义
正常状态默认有数据/可操作时用户看见什么
空状态无数据时看见什么;经确认无空数据写「无」;暂无法确认写「待核实」
加载状态请求中看见什么(转圈「加载中」/按钮置灰/倒计时)
异常状态该模块具体失败文案;已确认的一条条写死;暂无法确认写「待核实」
禁用状态置灰、不可点、不渲染时看见什么
点击后状态必须含操作前、操作中、操作后
Toast底部短提示原文;经确认无 Toast 写「无」
Popup接着打开的弹窗名;经确认无弹窗写「无」

全表见文末矩阵。统计:

10. 状态覆盖边界 双方

本次原型优先覆盖核心业务链路及产品当前可确认的关键状态,包括正常状态、关键异常状态、表单校验、Toast、Popup、权限及业务结果反馈等。

由于本项目属于对已上线 PC 产品的反向梳理,部分接口异常、第三方异常、弱网/超时、特殊账号状态、特殊权限组合及需要特定数据条件才能触发的历史状态,产品无法通过常规操作全部造数和穷举。

对上述当前无法核实的状态,产品不自行假设或创造业务表现,由产品、UI、前端、后端、测试在设计、开发及测试过程中结合现网逻辑共同补充确认。

原型未展示某一技术异常状态,不代表产品要求删除或不处理该异常。

11. 遗漏及补充机制 双方

12. 交互 给技术

给技术 下列链路的前/中/后与矩阵「点击后状态」列一致,实现时两边都要对上。

登录(账号)

操作前:登录窗,空值时登录钮置灰不可点。操作中:格式合法则钮置灰、文案「登录中...」,叠极验滑块。操作后:滑块通过后要么进首页+公告,要么回到登录窗(钮恢复「登录」)并顶栏红 Toast「账号或密码错误,请重试!」。关极验或失败重试,钮同样恢复,表单值保留。

获取验证码

操作前:「获取验证码」可点。操作中:极验;通过后按钮改为「59秒后重试」递减。操作后:Toast「验证码发送成功」,验证码框可输入;倒计时结束按钮恢复。

游客点充值

操作前:右浮标或 Banner 相关充值入口。操作中:先出 Toast「请先登录账号,再进行充值」。操作后:账号登录弹窗。

会员点盘口

操作前:投注 Tab 赔率高亮可点。操作中:按下。操作后:出弹窗;取消回投注 Tab;确认后新开三方(馆内待核实)。

进馆

操作前:飞出层「进入游戏」或首页「更多比赛」。操作中:按钮按下。操作后:V体育转账新开三方场馆页(馆内待核实);其它馆按进馆表 Toast 或落地。游客点则出登录窗。

直播跟单

操作前:已入房,聊天工具条或金牌导师可见「跟单」。操作中:出提示窗「请前往场馆内进行投注,以享受最佳赔率」。操作后:「立即投注」新开三方(馆维护则留在直播页并出「游戏维护中」);「观看直播」关窗。游客点跟单出登录窗。

提现未绑

操作前:提现 Tab,未绑时「请先添加微信收款码」或「请先添加银行卡」。操作中:点立即提现或去添加。操作后:打开对应绑定流程。绑完后的提现表单待核实。

资料保存 / 反馈 / 回馈 / 开播

操作前:表单可填。操作中:校验失败出红字且按钮可再点;通过则按钮置灰。操作后:对应成功 Toast,窗或页按矩阵关/留。

消息删除

操作前:已选消息或点删除已读。操作中:确认弹窗。操作后:确定 → Toast「删除成功」并刷新列表;取消 → 列表不变。

13. 异常 双方

给 UI 系统维护页(路由不存在、全站维护、地区限制)视觉以设计稿为准。给技术 下列已确认业务异常必须用原文(或矩阵该行红字),不要汇总成「失败」。未列出的技术异常见「状态覆盖边界」与「遗漏及补充机制」,不得因原型未画而删除处理。

场景用户看见
账号密码不匹配顶栏红 Toast:账号或密码错误,请重试!(字段下无红字)
找回密码账号不存在红字:账号不存在
验证码错红字:验证码错误
验证码发送失败Toast:验证码发送失败,不进倒计时
极验失败窗内:验证失败请重新尝试
账号已存在 / 手机号已注册Toast:账号已存在 / 该手机号已注册
游客充值Toast:请先登录账号,再进行充值
棋牌进馆失败Toast:游戏参数初始化失败
彩票进馆失败Toast:获取游戏token失败
其它体育进馆失败Toast:游戏参数初始化失败
聊天空发送Toast:请输入内容
跟单时馆维护留在直播页,顶栏:游戏维护中
改密新旧相同Toast:密码相同,请重新设置
原密码错误Toast:原密码错误
未绑手机点提现密码Toast:请先绑定手机号
会话过期Toast:登录已过期,请重新登录 + 登录窗
路由不存在404 整页 + 在线客服(视觉以设计稿为准)
全站维护 / 地区限制视觉以设计稿为准;业务触发条件沿用现网

14. 视觉 给 UI

15. 验收 双方

怎么跑通(演示) 给技术

操作输入对了输入错了
账号登录testtom1995 / zz123123 → 拖滑块到右侧 → 会员首页+公告;zuoyi01 / aa123456 → 主播号。关滑块后钮恢复「登录」,可再点空钮置灰;格式红字见数据表;不匹配顶栏红 Toast「账号或密码错误,请重试!」
短信登录15698669866 + 123456 → 会员手机红字「请输入正确手机号」;码错「验证码错误」
注册6-12 新账号 + 8-20 密码,完成验证 → 已登录首页未过校验按钮置灰+红字
找回密码演示账号 → 获取验证码(过极验)→ 123456 → 一栏新密码点重置 → Toast「密码重置成功」空账号下一步置灰;未发码下一步置灰;账号不存在;验证码错误;格式失败
游客充值 / 进馆—充值先 Toast 再登录;进馆直接登录窗
会员进馆更多比赛 / 进入游戏 → 新开三方(馆内不跑)其它体育/棋牌/彩票按进馆表 Toast
直播跟单加入聊天 → 跟单 → 提示前往场馆 → 立即投注 → 新开三方游客点跟单出登录窗;观看直播关窗;馆维护不新开页,顶栏「游戏维护中」
提现未绑—请先添加银行卡 / 微信收款码;点立即提现走添加。已绑表单不跑
棋牌 / 彩票—游戏参数初始化失败 / 获取游戏token失败

当前待补充 / 待核实项 双方

以下场景因当前测试账号、数据条件、第三方状态或 UAT 环境限制暂无法完整触发,已作为待核实项记录,不影响当前核心链路及 UI/技术方案评审。后续在 UI 设计、技术开发或测试过程中具备触发条件后,再结合现网实际表现补充确认。如核实结果影响核心业务链路,则纳入本期补充;如属于非核心、低频或非功能性场景,经评估后纳入后续优化。以下待核实项当前不作为 UI 设计缺失项;如涉及当前设计稿完整性,可在设计过程中反馈产品补充确认。给技术 「待核实」表示当前尚未确认,不得直接视为“不存在”或“无需处理”;不要自行编造未确认的业务表现,亦不得因「待核实」而默认删除现网已有处理。待核实项确认后,根据是否影响本期核心链路确定本期补充或后续优化。

【页面 × 模块 × 状态矩阵】 给技术

格式:序号 | 页面 | 模块 | 正常状态 | 空状态 | 加载状态 | 异常状态 | 禁用状态 | 点击后状态 | Toast | Popup。筛选按页面名、模块名或序号。状态标记见第 9 章。「待核实」≠「无」;表中未写出具体表现的技术异常,不代表可不处理。已写出具体表现的单元格视为已定义。

序号 页面 模块 正常状态 空状态 加载状态 异常状态 禁用状态 点击后状态 Toast Popup