1需求概览

需求名称 背景 用户痛点 需求目标 产品价值
移动端注册登录 移动端新增账号体系的前置能力,本期交付登录页、注册页、找回密码页三个页面。登录支持手机验证码登录、手机密码登录、微信快捷登录三种方式,并增加本机号码一键登录;新用户通过手机号 + 验证码注册并设置密码。 ① 无账号体系,收藏、关注、观看记录等数据无法跨设备保留;
② 登录方式单一,换号、忘密码、不愿设密码的用户在登录环节容易流失;
③ 注册入口不明确,新用户在登录页找不到注册路径,被迫中断;
④ 缺少协议告知环节,存在合规风险。
① 一次登录页内提供四种登录方式,验证码登录与密码登录用 Tab 切换,微信与一键登录置于「其他登录方式」区;
② 新用户可在注册页完成手机号 + 验证码 + 设置密码,注册成功后自动回到登录页并预填手机号;
③ 忘记密码可通过手机号验证后重置,重置成功回到登录页;
④ 未填完整、格式错误、未勾选协议等场景均有明确提示;
⑤ 协议强制勾选,不默认勾选、不自动勾选。
补齐账号体系入口,降低登录环节流失;四种方式覆盖不同用户习惯与场景,提高登录成功率,为后续用户数据沉淀与跨设备同步打基础。

2业务流程

打开 App 未登录状态 已有登录态? 进入首页 跳过登录流程 进入登录页 默认「验证码登录」 选择登录方式 验证码登录 手机号 + 短信验证码 密码登录 手机号 + 登录密码 微信快捷登录 授权获取昵称头像 本机号码一键登录 运营商号码校验 登录成功 写入登录态,回跳来源页 注册与找回密码子流程 登录页 点击「立即注册」 注册页 手机号 + 验证码 + 设置密码 校验通过? 注册成功 返回登录页并预填手机号 校验失败:停留本页并按字段提示错误 登录页 点击「忘记密码?」 找回密码页 手机号 + 验证码 + 新密码 校验通过? 重置成功 返回登录页用新密码登录 校验失败:停留本页并按字段提示错误

3功能说明

3.1完整流程原型

3.2登录页

组件展示内容用户操作系统响应业务规则
顶部区 关闭按钮「✕」 点击 关闭登录页,返回触发登录的来源页并保持原状态 由「未登录触发的功能入口」(关注、收藏、观看记录等)进入时展示关闭按钮;作为 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.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.4找回密码页

组件展示内容用户操作系统响应业务规则
顶部区 返回按钮「‹」+ 标题「找回密码」 点击返回 返回登录页(见 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.5微信授权弹窗

组件展示内容用户操作系统响应业务规则
弹层内容 微信图标 + 标题「微信登录」+ 说明「将获取你的微信公开信息(昵称、头像),用于创建和展示账号」 无操作 由登录页微信登录图标唤起;文案固定
操作按钮 「同意授权」主按钮 点击 关闭弹层 → 登录成功,进入登录成功页(见 3.7) 授权成功后获取微信昵称、头像用于账号展示
特殊说明:本期微信登录不强制绑定手机号,授权通过后可直接登录并使用
「取消」按钮 点击 关闭弹层,停留登录页 取消不产生任何账号数据;再次点击微信登录图标可重新唤起
遮罩区 点击遮罩 关闭弹层,停留登录页 点击遮罩等同于「取消」
唤起前置 未勾选协议时点击微信登录图标,先 Toast 提示协议,不唤起弹层 依赖本机已安装微信,未安装时 Toast「请先安装微信」
特殊说明:未勾选协议时点击,先 Toast 提示协议,不唤起授权弹层

3.6本机号码一键登录弹窗

组件展示内容用户操作系统响应业务规则
弹层内容 图标 + 标题「本机号码一键登录」+ 脱敏号码「138 **** 8000」+ 说明「运营商将校验本机号码,校验通过后直接登录」 无操作 号码取自本机 SIM 卡,界面脱敏展示,不展示完整号码
操作按钮 「本机号码一键登录」主按钮 点击 运营商校验通过 → 关闭弹层并登录成功,进入登录成功页(见 3.7) 该号码已注册时直接登录;未注册时按验证码登录的未注册规则处理
特殊说明:运营商校验失败时 Toast「获取本机号码失败,请使用其他方式登录」
「其他方式登录」按钮 点击 关闭弹层,回到登录页 不产生账号数据
遮罩区 点击遮罩 关闭弹层,回到登录页 点击遮罩等同于「其他方式登录」
唤起前置 未勾选协议时点击一键登录图标,先 Toast 提示协议,不唤起弹层 特殊说明:未勾选协议时点击,先 Toast 提示协议,不唤起授权弹层

3.7登录成功页

组件展示内容用户操作系统响应业务规则
成功状态区 ✓ 图标 + 「登录成功」+ 账号 + 登录方式 无操作 账号展示为脱敏手机号(如 138 **** 8000)或微信昵称;登录方式展示「验证码登录 / 密码登录 / 微信快捷登录 / 本机号码一键登录」
进入首页 「进入首页」主按钮 点击 进入 App 首页;由功能入口触发登录时,回跳到来源页 登录成功后写入登录态,二次启动直接进入首页
特殊说明:微信登录且未绑定手机号的账号,账号位展示微信昵称,不展示手机号