| 需求名称 | 背景 | 用户痛点 | 需求目标 | 产品价值 |
| 移动端注册登录 | 移动端新增账号体系的前置能力,本期交付登录页、注册页、找回密码页三个页面。登录支持手机验证码登录、手机密码登录、微信快捷登录三种方式,并增加本机号码一键登录;新用户通过手机号 + 验证码注册并设置密码。 | ① 无账号体系,收藏、关注、观看记录等数据无法跨设备保留; ② 登录方式单一,换号、忘密码、不愿设密码的用户在登录环节容易流失; ③ 注册入口不明确,新用户在登录页找不到注册路径,被迫中断; ④ 缺少协议告知环节,存在合规风险。 |
① 一次登录页内提供四种登录方式,验证码登录与密码登录用 Tab 切换,微信与一键登录置于「其他登录方式」区; ② 新用户可在注册页完成手机号 + 验证码 + 设置密码,注册成功后自动回到登录页并预填手机号; ③ 忘记密码可通过手机号验证后重置,重置成功回到登录页; ④ 未填完整、格式错误、未勾选协议等场景均有明确提示; ⑤ 协议强制勾选,不默认勾选、不自动勾选。 |
补齐账号体系入口,降低登录环节流失;四种方式覆盖不同用户习惯与场景,提高登录成功率,为后续用户数据沉淀与跨设备同步打基础。 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 顶部区 | 关闭按钮「✕」 | 点击 | 关闭登录页,返回触发登录的来源页并保持原状态 | 由「未登录触发的功能入口」(关注、收藏、观看记录等)进入时展示关闭按钮;作为 App 冷启动首屏进入时不展示关闭按钮,页面不可返回 |
| Logo + 主标题「欢迎登录」+ 副标题「登录后可同步你的收藏、关注与观看记录」 | 无操作 | 无 | 文案固定,不随登录方式切换变化 | |
| 登录方式切换 | 两个 Tab:「验证码登录」「密码登录」 | 点击切换 | 切换下方表单字段;验证码登录展示验证码行,密码登录展示密码行与「忘记密码?」入口 | 默认选中「验证码登录」;两个 Tab 共用同一个手机号输入值,切换时保留已填手机号;验证码与密码各自不保留 |
| 表单区 | 手机号输入框(+86 前缀) | 输入 | 仅接受数字,最多 11 位,按 3-4-4 自动分组展示 | 手机号须为 11 位且以 1 开头;为验证码登录与密码登录共用字段 |
| 验证码输入框 | 输入 | 仅接受数字,最多 6 位 | 6 位数字;需与手机号匹配 | |
| 「获取验证码」按钮 | 点击 | 手机号校验通过 → 下发验证码,按钮进入 60 秒倒计时并置灰禁用;校验不通过 → Toast「请输入正确的手机号」 | 手机号未满 11 位或格式错误时不可下发;60 秒内不可重复获取;同一手机号单日获取上限 10 次 特殊说明:验证码为 6 位数字,有效期 5 分钟;连续输错 5 次锁定 10 分钟,锁定期间不可提交登录 |
|
| 密码输入框 + 明文切换图标 | 输入 / 点击图标 | 点击图标在密文与明文之间切换 | 密码 8-20 位且同时包含字母和数字,默认密文展示;仅「密码登录」Tab 展示 | |
| 「忘记密码?」入口 | 点击 | 进入找回密码页(见 3.4) | 仅「密码登录」Tab 展示 | |
| 协议区 | 圆形勾选框 + 「我已阅读并同意《用户服务协议》和《隐私政策》」 | 点击勾选框切换状态;点击协议名 | 勾选状态切换;点击协议名打开对应协议页(原型内以 Toast 占位) | 默认不勾选;未勾选时提交不做自动勾选,仅 Toast 提示「请先阅读并同意《用户服务协议》和《隐私政策》」;勾选状态只影响提交校验,不改变按钮可点击性 |
| 登录按钮 | 「登录」主按钮(全文最强调的蓝色按钮) | 点击 | 校验通过 → 进入登录成功页(见 3.7)并写入登录态;校验不通过 → Toast 提示,停留本页 | 手机号或验证码 / 密码未填完整时按钮置灰禁用;校验顺序:手机号格式 → 验证码 / 密码 → 协议勾选 特殊说明:验证码登录时手机号未注册,提示「该手机号未注册,请先注册」并跳转注册页、预填手机号(原型演示号:13800000000) |
| 其他登录方式 | 微信登录图标 | 点击 | 唤起微信授权弹层(见 3.5) | 依赖本机已安装微信,未安装时 Toast「请先安装微信」 特殊说明:未勾选协议时点击,先 Toast 提示协议,不唤起授权弹层 |
| 本机号码一键登录图标 | 点击 | 唤起一键登录授权弹层(见 3.6) | 号码取自本机 SIM 卡,界面以「138 **** 8000」脱敏展示;未勾选协议时先 Toast 提示协议 | |
| 底部入口 | 「还没有账号?立即注册」 | 点击 | 进入注册页(见 3.3) | 固定展示,不随登录方式切换变化 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 顶部区 | 返回按钮「‹」+ 标题「注册」 | 点击返回 | 返回登录页(见 3.2),已填写内容不保留 | 注册页由登录页「立即注册」进入,不作为独立入口直接打开 |
| 标题区 | 主标题「创建账号」+ 副标题「使用手机号注册并设置密码,注册后即可登录」 | 无操作 | 无 | 文案固定 |
| 表单区 | 手机号输入框(+86 前缀) | 输入 | 仅接受数字,最多 11 位,按 3-4-4 自动分组展示 | 手机号须为 11 位且以 1 开头 特殊说明:手机号已注册时提交,提示「该手机号已注册,请直接登录」并跳转登录页、预填手机号(原型演示号:13800138000) |
| 验证码输入框 + 「获取验证码」按钮 | 输入 / 点击 | 规则同登录页:校验通过后下发并进入 60 秒倒计时,不通过则 Toast 提示 | 获取规则与登录页一致:6 位数字、有效期 5 分钟、单日上限 10 次 特殊说明:连续输错 5 次锁定 10 分钟 |
|
| 设置密码输入框 + 明文切换图标 | 输入 / 点击图标 | 输入过程中实时校验并逐项反馈规则满足情况 | 密码 8-20 位且同时包含字母和数字;未满足的规则项以红色提示,满足后转为绿色 | |
| 确认密码输入框 + 明文切换图标 | 输入 / 点击图标 | 输入过程中实时与设置密码比对 | 两次输入不一致时提示「两次输入的密码不一致」 特殊说明:两次密码不一致时不可提交注册 |
|
| 协议区 | 圆形勾选框 + 「我已阅读并同意《用户服务协议》和《隐私政策》」 | 点击勾选框切换状态 | 勾选状态切换;点击协议名打开对应协议页(原型内以 Toast 占位) | 默认不勾选;未勾选时提交仅 Toast 提示,不自动勾选 |
| 注册按钮 | 「注册」主按钮 | 点击 | 校验通过 → Toast「注册成功,请使用新密码登录」并返回登录页、预填手机号;不通过 → Toast 提示,停留本页 | 表单未完整时按钮置灰禁用;校验顺序:手机号 → 验证码 → 密码规则 → 两次密码一致 → 协议勾选 |
| 底部入口 | 「已有账号?去登录」 | 点击 | 返回登录页(见 3.2) | 固定展示,不随状态变化 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 顶部区 | 返回按钮「‹」+ 标题「找回密码」 | 点击返回 | 返回登录页(见 3.2) | 由登录页密码登录 Tab 的「忘记密码?」进入 |
| 标题区 | 主标题「重置密码」+ 副标题「验证手机号后设置新密码」 | 无操作 | 无 | 文案固定 |
| 表单区 | 手机号输入框(+86 前缀) | 输入 | 仅接受数字,最多 11 位,按 3-4-4 自动分组展示 | 手机号须为 11 位且以 1 开头 特殊说明:手机号未注册时提交,提示「该手机号未注册,请先注册」并跳转注册页(原型演示号:13800000000) |
| 验证码输入框 + 「获取验证码」按钮 | 输入 / 点击 | 规则同登录页:校验通过后下发并进入 60 秒倒计时,不通过则 Toast 提示 | 获取规则与登录页一致:6 位数字、有效期 5 分钟、单日上限 10 次 特殊说明:连续输错 5 次锁定 10 分钟 |
|
| 新密码输入框 + 明文切换图标 | 输入 / 点击图标 | 输入过程中实时校验并反馈规则满足情况 | 新密码 8-20 位且同时包含字母和数字 特殊说明:新密码与原密码相同时提示「新密码不能与原密码相同」 |
|
| 确认新密码输入框 + 明文切换图标 | 输入 / 点击图标 | 输入过程中实时与新密码比对 | 两次输入不一致时提示「两次输入的密码不一致」 | |
| 重置按钮 | 「重置密码」主按钮 | 点击 | 校验通过 → Toast「密码重置成功,请用新密码登录」并返回登录页、预填手机号;不通过 → Toast 提示,停留本页 | 表单未完整时按钮置灰禁用;校验顺序:手机号 → 验证码 → 新密码规则 → 两次密码一致 特殊说明:重置成功后原登录密码立即失效,其他设备上的登录态不强制下线 |
| 底部入口 | 「想起密码了?去登录」 | 点击 | 返回登录页(见 3.2) | 固定展示,不随状态变化 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 弹层内容 | 微信图标 + 标题「微信登录」+ 说明「将获取你的微信公开信息(昵称、头像),用于创建和展示账号」 | 无操作 | 无 | 由登录页微信登录图标唤起;文案固定 |
| 操作按钮 | 「同意授权」主按钮 | 点击 | 关闭弹层 → 登录成功,进入登录成功页(见 3.7) | 授权成功后获取微信昵称、头像用于账号展示 特殊说明:本期微信登录不强制绑定手机号,授权通过后可直接登录并使用 |
| 「取消」按钮 | 点击 | 关闭弹层,停留登录页 | 取消不产生任何账号数据;再次点击微信登录图标可重新唤起 | |
| 遮罩区 | 点击遮罩 | 关闭弹层,停留登录页 | 点击遮罩等同于「取消」 | |
| 唤起前置 | 无 | 无 | 未勾选协议时点击微信登录图标,先 Toast 提示协议,不唤起弹层 | 依赖本机已安装微信,未安装时 Toast「请先安装微信」 特殊说明:未勾选协议时点击,先 Toast 提示协议,不唤起授权弹层 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 弹层内容 | 图标 + 标题「本机号码一键登录」+ 脱敏号码「138 **** 8000」+ 说明「运营商将校验本机号码,校验通过后直接登录」 | 无操作 | 无 | 号码取自本机 SIM 卡,界面脱敏展示,不展示完整号码 |
| 操作按钮 | 「本机号码一键登录」主按钮 | 点击 | 运营商校验通过 → 关闭弹层并登录成功,进入登录成功页(见 3.7) | 该号码已注册时直接登录;未注册时按验证码登录的未注册规则处理 特殊说明:运营商校验失败时 Toast「获取本机号码失败,请使用其他方式登录」 |
| 「其他方式登录」按钮 | 点击 | 关闭弹层,回到登录页 | 不产生账号数据 | |
| 遮罩区 | 点击遮罩 | 关闭弹层,回到登录页 | 点击遮罩等同于「其他方式登录」 | |
| 唤起前置 | 无 | 无 | 未勾选协议时点击一键登录图标,先 Toast 提示协议,不唤起弹层 | 特殊说明:未勾选协议时点击,先 Toast 提示协议,不唤起授权弹层 |
| 组件 | 展示内容 | 用户操作 | 系统响应 | 业务规则 |
|---|---|---|---|---|
| 成功状态区 | ✓ 图标 + 「登录成功」+ 账号 + 登录方式 | 无操作 | 无 | 账号展示为脱敏手机号(如 138 **** 8000)或微信昵称;登录方式展示「验证码登录 / 密码登录 / 微信快捷登录 / 本机号码一键登录」 |
| 进入首页 | 「进入首页」主按钮 | 点击 | 进入 App 首页;由功能入口触发登录时,回跳到来源页 | 登录成功后写入登录态,二次启动直接进入首页 特殊说明:微信登录且未绑定手机号的账号,账号位展示微信昵称,不展示手机号 |