2015.3 Panli 网站注册登录流程改版

@jean 2015-05-08T14:21:56.000000Z 字数 5110 阅读 2138

联合登录 登录 注册 支付密码 忘记密码

需求背景

由于 App 端的登录注册流程中先行上线了一些便捷的改动，和 PC 端有很多不一致的地方，导致很多用户无法正常在 PC 端登录使用。
因此把 PC 端上做相应的改动，使得注册用户在 PC 端能正常登录并使用。

需求调研结果

在调研过程中，遇到了以下问题：
1. App 端上用微信注册的用户，无法直接在 PC 端登录;
2. PC 端比 App 端多出了两个联合登录方式;
3. App 端没有支付密码，App 注册的用户支付时需要设置支付密码;
4. 设置支付密码需要登录密码;
5. 联合登录仅在登录页面中有入口，注册页面中没有入口;
6. App 端所有注册都不再需要邮件验证，这部分用户登录 PC 端后会存在没有联系邮箱的情况;
7. 使用忘记密码时，要求同时输入用户名或密码，对用急着找回密码的用户不太友好

此设计仅能有效地防止一些恶作剧。而恶作剧者并不能登录用户的邮箱，因此与账号安全完全没有关系。

需求列表

1. 登录页面突出微信/ Facebook 联合登录

(在新登录页面中)

点击登录模块右上角注册按钮时，从当前页面打开注册页面;
文本框左侧的说明文字整合至文本框内部，获得焦点时不隐藏内部的说明文字，直到用户开始输入信息;
页面打开后，光标自动定位在“用户名/邮箱”文本框;
密码文本框右边有一个切换密码可见性的按钮，默认显示暗文密码;
光标定位在任意文本框时，键盘上敲击Enter/回车等同于点击立即登录按钮;
光标定位在非验证码文本框时，键盘上敲击Tab会把光标定位在下一个文本框;
Facebook 登录按钮点击后,从新窗口打开“Facebook 授权”页面;
微信登录按钮点击后,从当前窗口打开“微信扫描二维码”页面;
社交账号登录的后续流程详见附件流程图;
原先两种登录方式QQ登录/微博登录收起至更多登录方式中，点击更多登录方式从新窗口打开一个公告页面(具体页面详见需求“3.QQ/新浪微博登录下线 ”);
下次记住我的复选框文字改成记住我，功能不变
当点击立即登录按钮时判断:
- 如果用户名/密码输入错误，则示“邮箱、用户名或密码输入错误 ”;
- 验证码部分采用新验证码(具体说明详见需求“8.验证码改动 ”)，如果验证码输入错误，则提示“验证码错误 ”;
- 原先多次密码输错提示，类似“因多次密码输入错误，账号已被管理员锁定，请联系客服”的提示，与 “邮箱、用户名或密码输入错误 ”共用同一个提示位，并且“联系客服 ”有一个超链接和蓝色下划线的样式，点击可跳转至“live 800 在线客服 ”
登录信息和验证码全部正确,点击立即登录按钮时，进入下个节点;
该流程结束后，如果账号没有邮箱，则跳转至需求“4.无邮箱登录时要求留邮箱”的页面，并且不再要求用户设置支付密码。有邮箱的话直接完成登录;
改版之前注册的用户，登录完成后如果邮箱没有通过验证，则依然要求验证邮箱才能登录;//补充了老用户未验证的情况，改动于2015.3.25 PM2:30
完成登录后，跳转至原页面(登录前的页面);
联合登录用户如果用户名过长(fb_/wx_的下划线后第一位算起，超过20个字符)时，个人中心显示用户名的第一行的末尾用省略号“...”表示被省略的字符。//补充了联合登录用户名过长时的情况处理，改动于2015.3.26 AM10:45

1.1 首页登录按钮的弹窗/快速登录层

首页登录大按钮点击后，会弹出一个弹窗，也需要调整。
把在现在快速登录层上的QQ登录/微博登录两个按钮去掉，增加一个微信小图标，后续流程详见附件流程图。
页面的设计以后有空再做调整。

2. 注册页面增加社交账号注册

(在新注册页面中)

点击注册模块右上角登录按钮时，从当前页面打开登录页面;
文本框左侧的说明文字整合至文本框内部，获得焦点时不隐藏内部的说明文字，直到用户开始输入信息;
页面打开后，光标自动定位在“用户名/邮箱”文本框;
光标定位在任意文本框时，键盘上敲击Enter/回车等同于点击立即注册按钮;
光标定位在非验证码文本框时，键盘上敲击Tab会把光标定位在下一个文本框;
密码文本框右边有一个切换密码可见性的按钮，默认显示暗文密码;
当切换文本框(@研发丢失焦点)或点击立即注册按钮时判断:
- 如果用户名不符合要求，则在文本框下方提示“用户名长度必须是2-8个汉字或4-16个字符 ”;
- 如果邮箱不符合要求，则在文本框下方提示“E-mail 格式不正确 ”;
- 如果密码不符合要求，则在文本框下方提示“密码长度必须是6-20个字符 ”;
- 新的注册流程不再需要用户确认密码;
- 验证码部分采用新验证码(具体说明详见需求“8.验证码 ”)，验证码输入错误时，提示“验证码错误 ”
Facebook 登录按钮点击后,从新窗口打开“Facebook 授权”页面;
微信登录按钮点击后,从当前窗口打开“微信扫描二维码”页面;
社交账号注册的后续流程详见附件流程图;
注册页面没有QQ登录/微博登录;
我已阅读并同意《Panli注册协议》的复选框文字和功能都不变，点击协议依然从新窗口打开http://www.panli.com/news/about.aspx?nid=10;
注册登录信息和验证码全部正确,点击立即注册按钮时，进入下个节点;
该流程结束后，如果账号没有邮箱，则跳转至“需求4.无邮箱登录时要求留邮箱”的页面，并且不再要求用户设置支付密码。有邮箱的话直接完成注册并登录，打开“注册成功提示页面: 新需求，需求“2.1增加注册成功提示页面”;
不论是邮箱注册还是社交账号注册，注册完成后帐号状态仍然是“未激活”状态。但现在这种“未激活”用户可以正常使用 Panli 网站服务，至此，用户这边的操作结束;
用户通过社交账号注册完成时，为其创建一个新账号，新账号的用户名规则与 App 端一致(fb_username/wx_username)，重复时也是用 App 端的重命名规则自动为用户重命名;
注册成功后仍然给用户发送激活邮件(与原来注册成功后相同)。

2.1 增加注册成功提示页面

当用户通过邮箱注册成功后，跳转到此页面:

点击立即激活邮箱时，从新窗口打开用户邮箱。//补充了按钮的功能说明，改动于2015.3.25 PM2:30
* 点击立即享受海外华人购物之旅进入到 Panli 首页

3. QQ/新浪微博登录下线公告

在登录页面点击更多登录方式时，会进入到此页面;
文字部分(标题、加粗和超链接部分的字体样式与其他内容不同，详见视觉稿):

Panli 联合登录关闭公告
亲爱的 Panli 会员们：
为了优化登录体验，2015年3月16日起，通过QQ和新浪微博账号联合登录 Panli 的渠道已关闭。
一、如果您是新用户，请注册 Panli 账号。
二、如果您曾使用 QQ 或新浪微博账号登录 Panli，仍想继续使用原账号 (余额、积分等信息不变)，请参见下列解决办法：
1．如果您已经在 Panli 验证过邮箱或设置过登录 Panli 的用户名及密码。
解决办法：请直接用邮箱或用户名登录。
如您不记得密码，可以点击找回密码。
2．如果您未有以上操作。
解决办法：请联系在线客服，立即帮您解决问题。
“一”和“二”开头的两句话突出;
鼠标悬停在几个超链接上时，会有一个正常的下划线样式，移出则恢复;
点击“注册 Panli 账号 ”从当前窗口打开“注册页面”http://passport.panli.com/Register;
点击“登录 ”从当前窗口打开“登录页面”,登录后跳转至 Panli 首页;
点击“找回密码 ”从新窗口打开“找回密码页面”http://passport.panli.com/ForgotPassword;
点击“在线客服 ”从新窗口打开“Live 800 在线客服 ”;
使用“会员登录”的头部。

4. 无邮箱登录时要求留邮箱

*此需求由于需求方和视觉设计重新提了很多改动，原型已删除，具体效果参考视觉稿。*

文字部分:

最后一步,
请留下您的 E-mail，以便我们能在第一时间联系到您。
打开页面时，光标自动定位在邮箱文本框上；
光标定位在邮箱文本框和密码文本框时，键盘上敲击Enter/回车等同于点击提交按钮;
获得焦点时不隐藏内部的说明文字，直到用户开始输入信息;
如果用户没有填写任何信息直接点击提交按钮时，在邮箱文本框下方提示“请填写邮箱 ”;
用户在邮箱文本框里填写信息，点击提交按钮时，进行判断:
- 如果填写的是一个非正常格式的邮箱，则在邮箱文本框下方提示“邮箱格式错误 ”;
- 如果填写了一个在 Panli 未注册的邮箱，则完成登录;
- [社交账号未在 Panli 注册过]如果填写了一个在 Panli 已注册的邮箱，则在邮箱文本框下方向下(Y轴方向)展开一个密码文本框，邮箱文本框右边出现一个重填按钮，并在邮箱文本框下方提示“该邮箱已注册，请输入密码验证 ”，并且将光标定位在密码文本框。密码文本框与注册登录页面的样式相同;
- [社交账号已在 Panli 注册过]如果填写了一个在 Panli 已注册的邮箱，则在邮箱文本框下方提示“该邮箱已注册，请输入一个新邮箱 ”，并且将光标定位在邮箱文本框;
(展开了密码文本框的情况下)用户在密码文本框输入时，点击提交按钮时，进行判断:
- 邮箱密码正确时，完成登录;
- 邮箱密码错误时，密码文本框下方提示“密码错误 ”;
点击重填按钮时，收回密码文本框，隐藏重填按钮，光标定位在邮箱文本框;
设置邮箱后不要求用户设置支付密码，完成登录后跳转至原页面;
使用“会员登录”的头部。

5. 找回登录密码

页面打开后，光标自动定位在“邮箱”文本框;
光标定位在任意文本框时，键盘上敲击Enter/回车等同于点击确认发送邮件按钮;
光标定位在非验证码文本框时，键盘上敲击Tab会把光标定位在下一个文本框;
原先中间一行“请输入您的 E-mail 地址 ” 整行删除;
原先上面那行“请输入您的用户名 ”改成“请输入您的用户名/邮箱 ”;
点击“确认发送邮件”按钮时，进行判断:
- 填写的是“已注册账号”的邮箱，且验证码输入正确时，则将邮件发至该邮箱中;
- 填写的是“绑定邮箱的已注册账号”的用户名，且验证码输入正确，则将邮件发至该用户名所在的邮箱中;
- 填写的是“未绑定邮箱的已注册账号”的用户名，且验证码输入正确，弹出对话框“操作失败，该账号尚未绑定邮箱 ”，并给予一个确定按钮;
- 填写的是“未注册”的邮箱，且验证码输入正确，弹出对话框“操作失败，该邮箱尚未注册 Panli 账号 ”，并给予一个确定按钮; //从上一条拆分出来，改动于2015.3.23 AM 11:30
- 填写的“未注册”的用户名，且验证码输入正确，弹出对话框提示“操作失败，该用户名尚未注册 Panli 账号 ”，并给予一个确定按钮;
- 不论输入的用户名和邮箱是否已注册，当输入的验证码错误时，提示“验证码错误 ”//验证码判断的优先级高于其他输入内容，改动于2015.3.23 AM 11:30
原先的“E-mail 与帐户不匹配”判断取消。

6. 设置支付密码

(不论用户是否联合登录进来)登录/注册完成后，不再要求用户设置支付密码。用户支付时依然可以设置，不会影响用户正常使用；
因为在支付流程时才会要求设置支付密码，原先用于跳过流程的[以后再说]按钮去除; //改动于2015.3.23 AM 11:30
页面打开后，光标自动定位在“设置支付密码”文本框;
光标定位在任意文本框时，键盘上敲击Enter/回车等同于点击确认设置按钮;
光标定位在非重复确认文本框时，键盘上敲击Tab会把光标定位在重复确认文本框。
按照是否绑定社交账号，设置页面分为两种情况: //请注意，两种情况都在同一页面中
[邮箱用户]如果用户账号未绑定 “Facebook /微信”中的任何一个社交帐号，设置支付密码的页面不变;
[联合登录用户]如果用户账号绑定了 “Facebook /微信”中的任何一个社交帐号(包括两个都绑定)，设置支付密码时，打开的是“联合登录用户特定的支付密码页面”，其中:

原先的“输入登录密码 ” 整行删除，下方的控件相应向上移动;

原先的“登录密码是否正确 ”的判断取消;

点击确认设置时，如果两次输入的支付密码相同，则设置成功并跳转到相应页面。

7. 找回支付密码

[联合登录用户]如果用户账号绑定了 “Facebook /微信”中的任何一个社交帐号(包括两个都绑定)，在点击支付密码找回时，页面有所变动——原先输入登录密码的文本框和右边提示去除(整行删除)，文本框上方的文案改成“点击按钮后，Panli 将发送一封支付密码重置邮件至您的联系邮箱”，按钮不变;
[邮箱用户]如果用户账号未绑定 “Facebook /微信”中的任何一个社交帐号，在点击支付密码找回时，页面和填写邮箱的不变。

8. 验证码改动

登录/注册/修改邮箱/修改密码 这四个地方的验证码，不再出现 I L J 0 O Q 9 2 Z 这9种字符，以防止用户输入错误;
不限定验证码大小写的规则不变。