账号流程演示 PMFans 产品经理学院
产品经理新人练手专用 · 纯静态零依赖

把「账号体系」讲清楚：
注册 · 登录 · 找回密码 全流程交互演示

这不是截图，也不是原型，而是一个可以真实点击、真实校验、真实报错的 Demo。 你会看到验证码 60 秒倒计时、密码强度实时分级、连续输错 5 次锁定 15 分钟、 重置凭证 30 分钟过期，以及每一种异常对应的用户提示文案。

开始注册体验 已有账号登录 找回密码
8个页面
20+异常拦截分支
0外部依赖 / CDN
100%本地数据可重置

三步核心流程

账号体系说到底是三件事：让用户进来（注册）、让用户回来（登录）、让用户回得来（找回密码）。 每一项背后都有一堆"如果……怎么办"的异常分支，这才是账号产品设计的主要工作量。

注册：把用户请进来

  • 手机号 / 邮箱两种账号形态
  • 验证码 60 秒倒计时，防刷
  • 密码强度实时分档（弱 / 中 / 强）
  • 必须勾选协议，留痕合规

登录：让用户回来

  • 账号不存在 / 密码错误要分开提示吗？
  • 连续失败 5 次锁定 15 分钟
  • 「记住我」7 天 vs 当前会话
  • 登录后跳回原来想去的页面

找回密码：别让用户流失

  • 先验证身份，再设置新密码
  • 重置凭证 30 分钟过期、一次性使用
  • 新密码不能与旧密码相同
  • 重置后强制重新登录

五个入口，覆盖完整闭环

建议按顺序体验一遍，再回来看「业务逻辑说明」，理解会更深。

注册账号 验证码 + 密码强度 + 协议勾选 登录 记住我、失败计数、锁定倒计时 找回密码 验证身份并获取 30 分钟重置凭证 个人中心 登录态守卫、到期倒计时、退出登录 业务逻辑说明 流程图、状态机、规则表、测试用例 异常页面示例 看看"错误页"该怎么给用户台阶下

适合谁看？

产品经理新人

理解"一个注册按钮背后有多少分支"，学会写异常流与提示文案， 知道哪些规则必须写进 PRD（验证码有效期、锁定策略、token 时效）。

交互 / UI 设计师

看实时校验的节奏（什么时候报错、什么时候闭嘴）、 倒计时的状态保持、错误定位与可访问性（aria 属性）如何落地。

前端初学者

参考分层写法：config（配置）→ storage（数据）→ validation（校验）→ mock-api（接口）→ ui（视图原子）→ 页面脚本（编排）。

演示数据控制台

所有业务数据都存在你浏览器本地的 localStorage 里（键名前缀 pmfans_auth_demo_）。 下面这块面板把"平时看不见的数据"摊开给你看，方便讲解和排查问题。

本地存储数据一览

数据只在本机，随时可一键重置

localStorage