用户平台登录和注册功能页面设计：某Saas平台实例分析设计

视频制作工具：axure RP9

登录和注册功能似乎是一个大家都非常熟悉的功能模块，但由于个人易纠结的性格特质（这个要改），感觉用户在平台使用注册和登录页面的时候会遇到许多的可能性，于是花了一点点时间，以某一个案例来精细化的分析一下用户平台的登录和注册的路径和流程。

背景：

由于系统的历史性原因和为了保证系统数据的安全性，暂时不考虑第三方登录+立即绑定手机的方式。为了提升注册和登录过程中的良好体验，增加了手机号对于用户身份的唯一性校验，抵消了之前账号只能由已注册邮箱登录带来的收取验证码步骤多、路径长、时间久的问题。

功能点梳理：

未注册的新用户，系统需要获取其预留手机号来确定身份信息和分发相对应的用户权限。对于未登录用户，系统则需要完成手机号、密码、验证码三者的校验。

1. 注册流程：手机号和密码的位数、格式等提供实时校验；验证码验证；手机号注册需设置两次密码，密码要一致。

2. 登录流程：手机号和密码的位数、格式等提供实时校验；验证码验证；重置密码。

   
   

流程梳理：

1. 注册：

   a.注册的正常流程：输入手机号—>输入密码—>获取验证码—>输入验证码—>点击注册—>注册成功

   b.注册的异常流程：（括弧处可反复多次）

   ①输入手机号—>【提示手机号不符合要求—>输入手机号—>】输入密码—>【提示密码不合规—>输入密码—>】获取验证码—>输入验证码—>【提示验证码错误或者验证码超   时—>输入验证码】—>点击注册—>注册成功

   ②输入手机号—>提示手机号已注册—>重新输入

   ③输入手机号—>提示手机号已注册—>忘记密码

2. 登录：

   a.登录的正常流程：输入手机号—>输入密码—>获取验证码—>输入验证码—>点击登录—>登录成功

   b.登录的异常流程（括弧处可反复多次）：

   ①输入手机号—>【提示手机号不符合要求—>输入手机号—>】输入密码—>【提示密码不合规—>输入密码—>】获取验证码—>输入验证码—>【提示验证码错误或者验证码超时—>输入验证码】—>点击登录—>【提示手机号与密码不一致—>输入密码—>提示密码不合规—>输入密码—>】获取验证码—>输入验证码—>【提示验证码错误或者验证码超时—>输入验证码】—>点击登录—>输入手机号—>登录成功

3. 子流程忘记密码：
   

   a.忘记密码的正常流程：输入手机号—>获取验证码—>输入验证码—>输入新密码—>二次输入密码—>点击密码重置—>密码重置成功
   

   b.忘记密码的异常流程（括弧处可反复多次）：

   ①输入手机号—>【提示手机号不符合要求—>输入手机号—>】—>获取验证码—>输入验证码—>【提示验证码错误或者验证码超时—>输入验证码】—>输入新密码—>【提示密码不合规—>输入密码—>】二次输入密码—>【提示两次输入密码不一致—>输入密码—>】—>点击密码重置—>密码重置成功

每个产品每个客户端的登录注册都是与用户建立良好人机交互的第一道门槛，登录注册功能也会因为平衡目标用户的体验和业务模式的丰富来进行迭代更新。

但是不管如何，自己整理了一遍就感觉门儿特清，同时也希望这一小篇总结能够给你在做App、PC、H5的登录注册功能时带来一点点的指南作用~