VTY 客户端全局前端交互、状态与校验规则
适用端：PC / H5 / Android App / iOS App
适用范围：首页、登录注册、体育、投注、直播、活动、充值、提款、钱包、个人中心、消息、公告等客户端业务。
版本：v1.0 · 评审稿 · 2026-09-16
1. 使用原则
现网参考
本次统一
规范补充
端特性差异
职责边界：本规范由产品侧定义业务规则、交互规则、状态规则、校验条件和反馈方式，不定义字体、字号、颜色、圆角、间距、阴影、图标样式、组件具体尺寸等视觉参数。上述视觉规范由 UI 统一制定；接口、缓存、存储、防抖、请求方式等具体实现方案由技术确定。
规范优先级：具体业务 PRD 有明确特殊规则时，以业务 PRD 为准；业务 PRD 未单独说明时，默认执行本规范。
统一目标PC、H5、App 统一业务规则、状态定义、反馈层级、校验逻辑和文案口径；因设备能力产生的 鼠标悬停状态、键盘、安全区、系统返回等允许端特性差异。
现网参考已核查或既有全链路明确的行为作为现网参考，不把未验证状态写成现网事实。
本次统一发现多端表现不一致或现网语义不统一时，本规范给出统一口径，并明确标记为“本次统一”。
规范补充现网未自然触发但属于完整前端流程必须具备的状态，按常规产品流程补充，并标记“规范补充”。
职责边界产品定义业务状态、交互、校验和反馈规则；UI负责视觉规范及设计稿；技术负责具体实现方案并确认现网能力；测试依据产品规则和最终设计稿验收。
2. 现网差异与本次统一口径
以下用于评审识别“沿用现网”与“本次改版统一”的边界。
| 项目 | 现网观察 | 本次统一规范 | 标记 |
|---|
| 轻提示 | 现网存在顶部/底部及业务文案差异 | 统一反馈层级与时长；位置按端统一规则 | 本次统一 |
| 字段校验 | 登录、注册等已存在字段红字；部分业务错误使用 轻提示 | 格式/必填优先字段内反馈；跨字段/服务端业务结果使用 轻提示 或 确认弹窗 | 本次统一 |
| 提交中 | 部分链路已有“登录中…”、倒计时、按钮置灰 | 所有提交型操作请求中禁止重复提交 | 本次统一 |
| 空态 | 现网页面文案存在语义不一致，如赛事空态曾出现“暂无直播” | 按业务对象区分：暂无赛事 / 暂无直播 / 暂无记录 / 暂无数据 | 本次统一 |
| 加载中 | 已观察到按钮级状态；全站模块级表现未完全覆盖 | 统一页面级 / 模块级 / 按钮级三级 加载中 | 规范补充 |
| 异常 | 现网已有登录失败、验证码失败、进馆失败、维护等具体反馈 | 字段错误、轻提示、局部异常、整页异常分层处理 | 本次统一 |
| PC / H5 / App | 业务链路应保持一致，终端操作方式不同 | 业务规则一致；鼠标悬停状态、键盘、安全区、系统返回等按端适配 | 端特性差异 |
3. 反馈方式与使用优先级
核心原则：能定位到具体字段的问题，不优先使用 轻提示；需要用户做决定的问题，不使用自动消失的 轻提示；技术失败不得伪装成业务空态。
| 场景 | 反馈方式 | 统一规则 | 补充 |
|---|
| 单字段为空/格式/长度错误 | 字段错误 | 对应输入框错误态 + 字段下文案 | 不使用 轻提示 代替可定位字段错误 |
| 服务端返回账号密码不匹配 | 轻提示 | 账号或密码错误，请重试！ | 沿用已确认业务反馈；不重复在账号、密码两字段同时报错 |
| 操作成功且无需用户决策 | 轻提示 | 保存成功、删除成功、复制成功 | 短反馈，不阻塞后续操作 |
| 不可逆/高风险操作 | 确认弹窗 | 删除、退出、重要资金确认等 | 必须明确主/次按钮及后果 |
| 单模块接口失败 | 局部异常 | 模块内失败说明 + 重试 | 其他模块正常展示，不升级为整页错误 |
| 整页核心数据不可用 | 整页异常 | 异常说明 + 重新加载/重新连接 | 不得用“暂无数据”掩盖接口失败 |
| 无网络 | 页面/局部异常 | 网络异常，请检查网络后重试 | 根据页面是否仍可使用决定局部或整页 |
| 登录失效 | 轻提示 + 登录流程 | 登录已过期，请重新登录 | 登录成功后返回触发登录的业务位置 |
3.1 状态冲突优先级
系统/整页不可用 ＞ 登录失效/权限 ＞ 提交中 ＞ 局部异常 ＞ 业务空态 ＞ 正常态。 同一模块同时满足多个状态时，优先展示更高等级状态，避免同时出现互相矛盾的提示。
4. 轻提示规范
| 规则 | PC | H5 | App | 来源 |
|---|
| 位置 | 页面顶部居中；避开顶部固定导航及关键操作区域 | 页面顶部居中；避开浏览器顶部工具栏及安全区域 | 页面顶部居中；避开系统状态栏、刘海及安全区域 | 本次统一 |
| 默认时长 | 3 秒后自动消失 | 3 秒后自动消失 | 3 秒后自动消失 | 本次统一 |
| 成功/普通提示 | 自动消失，不要求手动关闭 | 同PC | 同PC | 本次统一 |
| 关键失败 | 短文案可用 轻提示；需要用户处理的改用字段错误/确认弹窗/异常页 | 同原则 | 同原则 | 本次统一 |
| 连续触发 | 同类 轻提示 不叠加；新提示替换上一条并重新计时 3 秒 | 同PC | 同PC | 规范补充 |
| 长文案 | 原则上不超过2行；超过则改用 确认弹窗/页面说明 | 同原则 | 同原则 | 规范补充 |
4.1 已确认业务文案参考
- 账号或密码错误，请重试！
- 验证码发送成功 / 验证码发送失败
- 请先登录账号，再进行充值
- 游戏参数初始化失败
- 获取游戏token失败
- 请输入内容
- 游戏维护中
- 密码相同，请重新设置
- 原密码错误
- 请先绑定手机号
- 登录已过期，请重新登录
- 删除成功
具体业务已有固定文案时沿用业务文案；本规范主要统一反馈形式、位置、时长和使用边界。
5. 弹窗与底部弹层规则
| 规则 | 统一要求 | PC | H5 / App |
|---|
| 使用场景 | 需要用户确认、补充信息、风险提示或阻断流程时使用 | 居中 确认弹窗 为主 | 居中 确认弹窗 或 底部弹层，按信息量和操作场景选择 |
| 关闭方式 | 普通弹窗提供明确关闭入口；强制确认/安全校验可禁止蒙层关闭 | 可支持 ESC；是否点蒙层关闭由业务性质决定 | 支持系统返回/关闭按钮；关键流程避免误触蒙层关闭 |
| 按钮 | 主操作在视觉上唯一突出；取消/返回为次操作 | 按钮顺序全站统一 | 移动端主按钮保证触控热区 |
| 提交中 | 确认后进入加载中并防重复提交 | 按钮加载中 | 按钮加载中 |
| 危险操作 | 删除、退出、重要资金确认等需明确后果 | 确认文案不得只写“确定”而不说明动作 | 同PC原则 |
8. 页面与模块状态规范
| 状态 | 定义 | 统一处理 |
|---|
| 正常状态 | 数据正常、功能可操作 | 展示业务内容和可用操作 |
| 加载中 加载态 | 首次进入/刷新/提交请求中 | 页面骨架、模块加载中或按钮加载中，不混用 |
| 空数据状态 | 接口成功但业务数据为空 | 展示对应业务空态，不展示技术错误 |
| 异常状态 | 接口失败/数据异常 | 局部或整页异常 + 可重试 |
| 网络断开状态 | 检测到网络不可用 | 网络异常说明 + 重试；恢复网络后允许重新请求 |
| 请求超时状态 | 请求超过技术约定阈值 | 退出加载中，按异常层级反馈，不无限转圈 |
| 不可操作状态 | 业务不可操作/权限关闭/维护 | 明确置灰或维护态；是否可点击由业务规则决定 |
| 无权限状态 | 用户无权限访问 | 登录拦截、权限提示或不可见，按业务敏感度选择 |
| 维护状态 | 系统/模块/场馆维护 | 统一维护状态，不与接口失败混淆 |
8.1 加载中层级
- 页面级：首次进入且核心页面结构依赖数据时，可用骨架屏/页面加载中。
- 模块级：单模块刷新不阻塞其他模块，模块内部显示加载中。
- 按钮级：提交型请求使用按钮加载中并防重复提交。
8.2 空态文案
按业务对象表达：体育赛事使用“暂无赛事”；直播使用“暂无直播”；历史/列表记录可使用“暂无记录”；通用非业务列表可使用“暂无数据”。不得把接口失败显示成“暂无数据”。
8.3 图片失败
头像、Banner、场馆、活动图等加载失败时使用对应占位/默认资源；不得出现浏览器破图图标。Banner无配置与Banner图片加载失败属于两个不同状态。
9. 导航、登录拦截与状态保持
| 场景 | 统一规则 |
|---|
| 游客访问登录后功能 | 进入统一登录流程；可按业务需要先给前置说明，但不得不同端走不同业务结果 |
| 登录成功 | 返回触发登录的原业务页面/模块；从“我的”等入口发起时回对应入口 |
| 登录失效 | 提示“登录已过期，请重新登录”并进入登录；成功后尽量恢复原业务上下文 |
| 返回 | 不得造成重复提交；表单是否保留按业务敏感度处理 |
| 外链/三方 | 明确当前页/新开方式；失败有业务反馈；不得无响应 |
| 页签/筛选 | 页面内切换原则上保持用户当前上下文；返回是否恢复由业务PRD说明 |
| 主题/侧栏等偏好 | 如产品定义为记忆型设置，应跨刷新保持；具体存储方式由技术确定 |
10. 重点业务场景统一规范
| 模块 | 统一状态要求 | 已知/建议反馈 |
|---|
| 登录/注册 | 空值按钮禁用或提交校验；合法后进入验证/请求中；失败恢复按钮并保留可修正输入 | 账号密码不匹配：轻提示“账号或密码错误，请重试！”；字段格式错误用字段红字 |
| 获取验证码 | 验证通过后进入倒计时；倒计时期间不可重复获取；结束后恢复 | 成功：验证码发送成功；失败：验证码发送失败，不进入倒计时 |
| 游客访问登录功能 | 统一进入登录流程；登录成功后回到原触发业务位置 | 充值等可保留业务前置提示；一般场馆/投注直接登录拦截 |
| 体育投注 | 可投/封盘/赔率变化/提交中/成功/失败必须区分 | 赔率变化不得仅靠颜色；提交中禁止重复下注 |
| 直播 | 未开播/直播中/已结束/加载失败/断流需区分 | 断流和“暂无直播”不能混用 |
| 聊天室 | 未加入/已加入/禁言/发送中/发送失败/空消息 | 空发送：请输入内容；登录拦截、禁言按业务规则 |
| 充值 | 金额格式、通道限额、提交中、防重复提交 | 游客先登录；金额错误优先字段内提示 |
| 提款 | 未绑收款方式、金额校验、支付密码、提交中、结果反馈 | 未绑时进入绑定流程；安全确认按业务PRD |
| 消息 | 未读0/普通数字/99+；列表空态；删除确认 | 删除成功刷新列表；取消不改变列表 |
| 活动 | 未开始/进行中/已结束/无资格/已领取/领取失败 | 按钮文案和可用态必须与活动状态一致 |
11. PC / H5 / App 跨端规则
| 能力 | PC | H5 | App | 说明 |
|---|
| 鼠标悬停状态 | 需要：按钮、链接、卡片等可交互元素 | 无 | 无 | 端特性差异 |
| 输入聚焦状态 | 键盘/鼠标焦点清晰可见 | 输入框焦点 | 输入框焦点 | 统一可用性原则 |
| Enter提交 | 表单允许；避免文本域误提交 | 软键盘完成键按业务处理 | 软键盘完成键按业务处理 | 端特性差异 |
| ESC关闭 | 非强制确认确认弹窗可支持 | 无 | 无 | 端特性差异 |
| 返回 | 浏览器/页面返回保持合理历史栈 | 浏览器返回不得造成重复提交 | 系统返回/导航返回行为一致 | 端特性差异 |
| 软键盘 | 无 | 不得遮挡当前字段/主按钮 | 不得遮挡当前字段/主按钮，处理安全区 | 端特性差异 |
| 安全区 | 无 | 适配浏览器可视区域 | iOS/Android安全区、底部手势区 | 端特性差异 |
| 触控热区 | 鼠标可点击区域明确 | 核心按钮建议≥44×44 CSS px等效热区 | 核心按钮建议≥44×44 pt/dp等效热区 | 规范补充 |
跨端统一不等于视觉完全相同。 同一业务结果必须一致；组件形态可根据终端操作方式调整，但不得因此改变业务规则。
12. 极限态与内容容错
| 类别 | 需要覆盖 | 统一规则 |
|---|
| 文本 | 昵称、赛事名、活动标题、公告、多语言 | 优先单行省略；需要完整理解的内容支持悬浮提示/详情；移动端按组件允许换行 |
| 数字 | 余额、投注额、奖金、人数 | 不得溢出容器；金额格式和小数位由业务定义；极大值需验证 |
| 角标 | 未读消息 | 0隐藏；1–99显示实际数量；≥100显示99+ |
| 图片 | Banner、头像、场馆、活动图 | 加载失败使用对应占位/默认资源，不显示浏览器破图 |
| 列表 | 0条/1条/大量数据 | 0条空态；大量数据按分页/加载更多规则，不无限渲染 |
| 多语言 | 中文/越南语等 | 按钮和输入框必须预留扩展；不通过缩小到不可读字号解决溢出 |
13. 文案规范
- 提示用户下一步动作，优先使用“请输入 / 请选择 / 请重试 / 请先…”等明确表达。
- 同一业务对象全端使用同一名称，不出现“暂无直播”代替“暂无赛事”等语义错用。
- 错误提示不暴露接口名、错误码、堆栈、域名等技术信息。
- 按钮使用动作词：登录、保存、确认删除、重新加载、重新连接；避免含义不清的“好的”“确定”滥用。
- 中文、越南语等多语言以同一业务含义为基准，允许字数不同，不允许因空间不足删掉关键业务信息。
14. 可用性与基础无障碍
- 错误状态不得只依赖红/绿颜色表达，同时提供文案或图标。
- PC键盘焦点可见；表单可按合理顺序页签切换。
- 点击/触控区域不能只覆盖文字本身，移动端核心操作提供足够热区。
- 弹窗打开后焦点/操作范围应在弹窗内；关闭后回到合理触发位置。
- 动态加载中、倒计时、错误反馈不得导致页面布局大幅跳动。
15. 角色使用说明
| 角色 | 主要关注内容 | 职责边界 |
|---|
| 产品 | 触发条件、业务流程、状态定义、校验条件、提示内容、操作结果、跨端统一口径。 | 不规定具体视觉参数，不指定接口、缓存、存储等技术实现。 |
| UI | 根据产品定义的业务状态提供对应页面和组件状态设计。 | 字体、字号、颜色、圆角、间距、尺寸、图标、阴影等由UI自行形成设计规范。 |
| Web前端 | PC/H5触发逻辑、状态切换、异常反馈、防重复操作、登录回跳及公共能力复用。 | 具体代码和实现方案由技术内部确定。 |
| App移动端 | Android/iOS业务结果一致性、系统返回、软键盘、安全区域、前后台切换等适配。 | 原生实现方案由移动端技术确定。 |
| 测试 | 按正常、加载、空数据、异常、不可操作、极限状态及游客/登录状态覆盖验收。 | 不重新定义产品规则。 |
16. UI / 前端 / 测试验收清单
| 角色 | 必须确认 |
|---|
| UI | 核心组件至少提供 默认状态 / 输入聚焦状态或鼠标悬停状态 / Disabled / 加载中 / Error；补齐空态、局部异常、整页异常、图片兜底和移动端安全区表现。 |
| 前端 | 同一组件跨页面复用；请求中防重复提交；业务错误正确映射；不得把接口失败当空态；PC/H5/App业务结果一致。 |
| 后端 | 业务错误提供可识别的稳定返回；不要要求前端通过文案猜错误类型；限额、资格、订单状态等以服务端为准。 |
| 测试 | 按 Normal / 加载中 / Empty / Error / Disabled / Extreme 及登录/游客状态覆盖；同时验证跨端业务结果和文案一致性。 |
| 产品 | 特殊业务与全局规范冲突时在具体PRD明确覆盖规则；未说明则执行本规范。 |
16.1 本次评审重点
- 轻提示统一顶部居中展示、默认3秒后自动消失，作为三端统一交互标准。
- 字段错误 / 轻提示 / 确认弹窗 / 局部异常 / 整页异常的反馈层级是否认可。
- PC/H5/App是否已有可复用公共组件；现有组件与本规范冲突的改造范围。
- 现网固定业务文案是否存在站点/语言差异，需要单独维护多语言表。
- 未核查到的加载中、断网、超时、图片失败等补充状态，是否统一纳入本次前端改版基础组件。