发表于: 2018-05-21 23:18:38

4 624


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 

上午看了一些学习资料,下午还是调研。
明天计划的事情:(一定要写非常细致的内容) 

继续调研。
遇到的问题:(遇到什么困难,怎么解决的) 

很多概念不懂,处于懵的状态。师兄和开发师兄谈论的东西都听不太懂。

收获:(通过今天的学习,学到了什么知识)

还是要耐心认真坚持枯燥的学习吧。抱着死磕心态会比较好点。


登录界面作为一个最基础的功能点,演化到现在有了好多种花样,比如说当前比较流行的一键跳转第三方授权登录、免注册手机号结合验证码登录、还有一种是最常见的账号密码登录,今天主要介绍的是最后一种方式。

一,三者的跳转流程如下:

图片.png

二,卡片式样式,动态面板做3个状态,登录、注册和找回密码无需跳转页面,来回切换,感觉还不错;

登录页:

图片.png

交互:单击注册跳转注册页,单击忘记密码跳转找回密码页,单击登录跳转首页;

必填字段要求:

1,未填写手机号或者全部未填写,直接点击登录:提示“请填写手机号码“;

2,未填写登录密码:点击登录时校验,提示:“请填写登录密码”;

3,未填写验证码:点击登录时校验,提示:请输入验证码;

4,输入手机号格式错误:填写框失去焦点时判断,提示“请输入正确的手机号”;

3,输入未注册的手机号:失去焦点时校验提示“手机号尚未注册”;

4,密码错误:点击登录时进行校验,提示“密码错误”;

5,验证码错误:点击登录时校验,提示“验证码错误”。

注册页:

图片.png

交互:单击登录跳转登录页,单击确认注册跳转登录页;

必填字段要求:

1,未填写手机号,直接点击获取验证码:提示“请填写手机号码“;

2,输入手机号格式错误:文本框失去焦点时判断,提示“请输入正确的手机号”;

3,输入已注册的手机号:失去焦点时校验提示“该手机号已注册,去登陆”;

4,未填写验证码:点击确认注册时,提示:请输入验证码;

5,验证码填写错误:点击确认注册时,提示“验证码错误”;

7,验证码有效时间为10分钟;

8,密码填写不符合要求:填写时校验,符合要求时消失,提示“密码过于简单,建议数字和字母组合使用”。

找回密码页:

图片.png

交互:单击登录跳转登录页,单击确认重置跳转登录页;

必填字段要求:

1,未填写手机号,直接点击获取验证码:提示“请填写手机号码“;

2,输入手机号格式错误:文本框失去焦点时判断,提示“请输入正确的手机号”;

3,输入未注册的手机号:失去焦点时校验提示“改手机号尚未注册”;

4,未填写验证码:点击确认重置时,提示:请输入验证码;

5,验证码填写错误:点击确认重置时,提示“验证码错误”;

7,验证码有效时间为10分钟;

8,密码填写不符合要求:填写时校验,符合要求时消失,提示“密码过于简单,建议数字和字母组合使用”;

9,重置密码过程中可点击可见或者不可见。

四,总结

小小的一个登陆页面就有这么多花样,怪不得听好多人说在面试的时候面试官很喜欢问登陆的问题,目前能想到的就这么多,希望各位大牛批评指正。





返回列表 返回列表
评论

    分享到