【转】注册/登录界面设计理念

原文:https://juejin.cn/post/6985449685842395144

这是一份基于上千人调查研究出的关于登录界面设计优化的用户体验报告

交互设计的基本规则是:减少交互,减少点击,减少读取,减少等待,功能清晰

1. 自动聚焦于第一个字段

当页面加载完毕后,自动聚焦在第一个输入文本框。

image.png

2. 使用专用移动键盘

使用 type = "" 来限制移动端弹出的专用键盘。

image.png

3. 立即验证字段

当输入文本框失去焦点时,立即验证输入文本框格式是否正确。

image.png

4. 使标签可以点击

点击标签,可以自动定位到相应的输入文本框会使用户体验更美好

image.png

5. 当用户选择密码时显示密码要求

当用户点击输入文本框时显示格式要求

image.png

6. 让用户查看密码

注册时,允许用户查看他们输入的密码,比同时要求他们输入两次密码效果更好

image.png

7. 使用提交按钮时,页面应该有反应

在点击提交按钮,应该有过渡动画,和处理结果

image.png

8. 允许其他登录

应该允许用户使用QQ、微信等方式登录

image.png

9. 使用不同的术语进行"登录"和"注册"

保留“登录”标签。
“注册”标签换成“创建一个账户”,使用户更清晰地区别

image.png

10. 允许在"登录"和"注册"之间轻松切换

通过底部链接,允许"注册"和"登录"之间可以轻松切换

image.png

11. 使用电子邮件\手机号登录,而不是用户名

使用电子邮箱登录更容易记住账号,使用手机号登录可以快速实名

image.png

12. 如果用户输入无效密码,请说明为什么密码无效

如果使用户输入的密码和数据库中的不匹配,要告知用户密码为什么不对。

image.png

13. 输入错误密码

输入错误的密码后,应该清空密码,但不清理空账户名

image.png

14. "重置密码"屏幕应记住您已输入的账户名

如果输入账号密码后,提示错误,再点击“忘记密码”,应该保留已输入的账户名

image.png

15. 登录成功后,不反馈处理结果,自动跳转首页

如果反馈处理结果,要采用小提示,不用跳转新页面告知其处理结果。

image.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章