如何设计出用户体验良好的登录/注册页面
对于开发者来说登录/注册页面是再熟悉不过的了，然而要想提供更好的登录/注册体验的话就需要一些技巧了。应用了下面这些小技巧的话，你的登录注册页面在实现基本功能的同时还能提供非常流畅的体验。
1、不要将”Sign In ”和”Sign Up”放在一起
看看下面这张图片，你需要花多长时间来区分”sign up”和”sign in”呢？
相信读者已经发现问题所在了。”Sign In”和”Sign Up”长得太像了！如果两个按钮的样式相近，按钮的文字又相似的话，用户很有可能会混淆。特别是在用户想要登录（log in）的时候，看到了”Sign In”之后下意识的就点了进去。发生这种错误是因为用户习惯性地扫了一眼屏幕并默认将第一眼看到的东西当做正确的。即便用户不犯这个错误，他们还是需要花时间来去区分这两个按钮。
最好的体验是：用户不需要停下来去区分这两个按钮而是一点就跳转到他们想看的页面。因此我们应该尽量避免同时使用“Sign In”和”Sign Up”这种易于混淆的词，可以尝试以下图方式来替代：
这样既可以避免文字的混淆，又通过不同的颜色来醒目地突出两个按钮的区别。
2、注册页面尽量少地让用户填写信息
在新用户注册页面，不要去问多余的信息，尽量让用户更快的完成注册。你在表单中设置的输入框越少，用户选择不填的可能性就越低。在设计注册页面之前，务必要想清楚你需要的用户信息到底是什么。另外，在设计的时候需要注意以下两点：
（1）不要让用户重复输入密码。相应的替代方案可以参考之后的第4个小技巧
（2）尽量减少非必填项目。如果这个信息不是必要的话那么就没必要让用户在填写它上浪费时间。你可以将非必填项目和必填项目分开设置，中间用一条横线隔开。同时，在非必填项目旁边醒目地标注“可选”或“非必填”。
3、将登陆和注册区分开
很多网站和应用将输入框个数相近的登陆和注册框并排放置（如下图所示）。
4、让用户可以看到密码
用户在登陆注册过程中最容易犯的错误便是输错密码，因为密码输入框通常都不是明文的。因此用户很容易输错，尤其是在移动设备上。很多网站和应用的解决方法是让用户再次输入密码并验证，如下图所示。
然而这并不能从根本上解决这个问题。用户从始至终看不见自己输入的内容，即便输入两次用户也有可能犯两次相同的错误，而且验证失败之后用户也不知道自己哪里输错了还得重新输入。
最好的解决方法是添加一个“显示密码”的选项。你可以在密码输入框附近添加一个checkbox，当用户勾选它时显示密码。
5、提供明确的引导提示
用户输入错误时一定要明确的指出到底错在哪，而不是简单地说一句“输入错误”，同时还应指导用户写出正确的答案。主要需要注意以下两点：
（1）错误提示应描述清楚并且便于阅读
“出于安全考虑，您的密码长度必须在6个字符到10个字符之间，并且包含至少1个大写字符、1个数字和1个符号”。这是一个典型的密码错误提示，但却不便于阅读。参考一下Mailchimp注册页面的做法（见下图），当用户的输入满足一个条件时，对应条件的错误提示便会变暗，当所有条件均满足之后会提示密码符合要求。
（2）实时输入验证
实时输入验证可以及时地告知用户输入的错误。这样用户可以及时更正错误，而不是在点击“提交”按钮后收到输入错误的通知。另外，表单验证不仅要提示用户输入错误，还应告诉他们怎么输入才是正确的。这样用户会更放心地进行后续操作。实时输入验证非常适合于用户名和密码一类信息的输入。Twitter的注册页面就是一个实时输入验证的示例。如下图所示，这个表单可以提示我该邮箱已经被注册并询问我是否需要登录或修改密码。
6、使用电子邮件地址或手机号作为用户名
如果你让用户自己创建一个用户名的话，你很容易会遇到两个问题：
（1）用户为了创建一个唯一且符合要求的用户名花费了很多时间；
（2）这个用户名并不是用户熟悉的，用户很快就会忘记
因此，最好让用户使用自己的邮箱或手机号来作为用户名，这样既保证用户名唯一又便于用户记忆。
7、允许用户使用第三方账号登录
为什么非要用户注册一个新的账号呢？使用一个第三方账号可以解决很多注册的问题。和通过邮箱注册相比，使用第三方账号既有优点又有不足之处。
（1）优点：用户无需填写注册表单、创建新的用户名密码或验证邮件。这大大减少了注册的耗时。最重要的一点便是用户不需要再记住一个新的用户名和密码了。
（2）不足：第三方账号登录会收集一些用户账号的信息，因此有些用户可能会不太乐意共享它的账号信息或是担心隐私被泄露。因此最好的方法是同时提供邮件注册和第三方注册，让用户来选择使用哪个。
8、保持用户的登录状态
很多网站在用户注册之后让用户再手动登录一次。这一步着实多余。最好将你的应用设计成：用户注册之后自动登录。（除非你的应用涉及银行或金融交易等对安全要求较高的领域）
9、简化重置密码的过程
用户很有可能忘记密码，因此密码找回工作尤为重要。尽可能地简化密码找回的流程可以提高用户的粘性。将“找回密码”的链接放在你的登陆注册页面中并始终显示，而不是在用户输错密码之后才弹出来。
10、遵循“买前试用“策略
如果你在非必须（涉及支付等安全度较高的操作）时强制用户注册的话，用户很可能会放弃使用你的服务。即便是在网站用户量不大的时候也不建议你在用户使用你的服务之前强制用户注册。过早地强制注册会使85%的用户放弃使用你的产品。
在用户注册之前提供一些试用性服务是不错的选择。“买前试用“策略给用户了解你的产品或服务的机会，可以使用户体验你的产品并产生注册的想法。当用户了解你的产品和体验之后再注册可以回馈给你更加真实的用户数据。比如，YouTube就允许用户浏览尽可能多的内容，只有当他们想上传自己的视频时才需要注册。
结束语
当你把注册的所有障碍排除之后，你将收获大量的注册用户。但是并不是所有注册用户都会转化为活跃用户。活跃用户才是你的产品或服务的关键。设计一个高效的登录/注册页面仅仅是第一步。
对于开发者来说登录/注册页面是再熟悉不过的了，然而要想提供更好的登录/注册体验的话就需要一些技巧了。应用了下面这些小技巧的话，你的登录注册页面在实现基本功能的同时还能提供非常流畅的体验。
1、不要将”Sign In ”和”Sign Up”放在一起
看看下面这张图片，你需要花多长时间来区分”sign up”和”sign in”呢？
相信读者已经发现问题所在了。”Sign In”和”Sign Up”长得太像了！如果两个按钮的样式相近，按钮的文字又相似的话，用户很有可能会混淆。特别是在用户想要登录（log in）的时候，看到了”Sign In”之后下意识的就点了进去。发生这种错误是因为用户习惯性地扫了一眼屏幕并默认将第一眼看到的东西当做正确的。即便用户不犯这个错误，他们还是需要花时间来去区分这两个按钮。
最好的体验是：用户不需要停下来去区分这两个按钮而是一点就跳转到他们想看的页面。因此我们应该尽量避免同时使用“Sign In”和”Sign Up”这种易于混淆的词，可以尝试以下图方式来替代：
这样既可以避免文字的混淆，又通过不同的颜色来醒目地突出两个按钮的区别。
2、注册页面尽量少地让用户填写信息
在新用户注册页面，不要去问多余的信息，尽量让用户更快的完成注册。你在表单中设置的输入框越少，用户选择不填的可能性就越低。在设计注册页面之前，务必要想清楚你需要的用户信息到底是什么。另外，在设计的时候需要注意以下两点：
（1）不要让用户重复输入密码。相应的替代方案可以参考之后的第4个小技巧
（2）尽量减少非必填项目。如果这个信息不是必要的话那么就没必要让用户在填写它上浪费时间。你可以将非必填项目和必填项目分开设置，中间用一条横线隔开。同时，在非必填项目旁边醒目地标注“可选”或“非必填”。
3、将登陆和注册区分开
很多网站和应用将输入框个数相近的登陆和注册框并排放置（如下图所示）。
4、让用户可以看到密码
用户在登陆注册过程中最容易犯的错误便是输错密码，因为密码输入框通常都不是明文的。因此用户很容易输错，尤其是在移动设备上。很多网站和应用的解决方法是让用户再次输入密码并验证，如下图所示。
然而这并不能从根本上解决这个问题。用户从始至终看不见自己输入的内容，即便输入两次用户也有可能犯两次相同的错误，而且验证失败之后用户也不知道自己哪里输错了还得重新输入。
最好的解决方法是添加一个“显示密码”的选项。你可以在密码输入框附近添加一个checkbox，当用户勾选它时显示密码。
5、提供明确的引导提示
用户输入错误时一定要明确的指出到底错在哪，而不是简单地说一句“输入错误”，同时还应指导用户写出正确的答案。主要需要注意以下两点：
（1）错误提示应描述清楚并且便于阅读
“出于安全考虑，您的密码长度必须在6个字符到10个字符之间，并且包含至少1个大写字符、1个数字和1个符号”。这是一个典型的密码错误提示，但却不便于阅读。参考一下Mailchimp注册页面的做法（见下图），当用户的输入满足一个条件时，对应条件的错误提示便会变暗，当所有条件均满足之后会提示密码符合要求。
（2）实时输入验证
实时输入验证可以及时地告知用户输入的错误。这样用户可以及时更正错误，而不是在点击“提交”按钮后收到输入错误的通知。另外，表单验证不仅要提示用户输入错误，还应告诉他们怎么输入才是正确的。这样用户会更放心地进行后续操作。实时输入验证非常适合于用户名和密码一类信息的输入。Twitter的注册页面就是一个实时输入验证的示例。如下图所示，这个表单可以提示我该邮箱已经被注册并询问我是否需要登录或修改密码。
6、使用电子邮件地址或手机号作为用户名
如果你让用户自己创建一个用户名的话，你很容易会遇到两个问题：
（1）用户为了创建一个唯一且符合要求的用户名花费了很多时间；
（2）这个用户名并不是用户熟悉的，用户很快就会忘记
因此，最好让用户使用自己的邮箱或手机号来作为用户名，这样既保证用户名唯一又便于用户记忆。
7、允许用户使用第三方账号登录
为什么非要用户注册一个新的账号呢？使用一个第三方账号可以解决很多注册的问题。和通过邮箱注册相比，使用第三方账号既有优点又有不足之处。
（1）优点：用户无需填写注册表单、创建新的用户名密码或验证邮件。这大大减少了注册的耗时。最重要的一点便是用户不需要再记住一个新的用户名和密码了。
（2）不足：第三方账号登录会收集一些用户账号的信息，因此有些用户可能会不太乐意共享它的账号信息或是担心隐私被泄露。因此最好的方法是同时提供邮件注册和第三方注册，让用户来选择使用哪个。
8、保持用户的登录状态
很多网站在用户注册之后让用户再手动登录一次。这一步着实多余。最好将你的应用设计成：用户注册之后自动登录。（除非你的应用涉及银行或金融交易等对安全要求较高的领域）
9、简化重置密码的过程
用户很有可能忘记密码，因此密码找回工作尤为重要。尽可能地简化密码找回的流程可以提高用户的粘性。将“找回密码”的链接放在你的登陆注册页面中并始终显示，而不是在用户输错密码之后才弹出来。
10、遵循“买前试用“策略
如果你在非必须（涉及支付等安全度较高的操作）时强制用户注册的话，用户很可能会放弃使用你的服务。即便是在网站用户量不大的时候也不建议你在用户使用你的服务之前强制用户注册。过早地强制注册会使85%的用户放弃使用你的产品。
在用户注册之前提供一些试用性服务是不错的选择。“买前试用“策略给用户了解你的产品或服务的机会，可以使用户体验你的产品并产生注册的想法。当用户了解你的产品和体验之后再注册可以回馈给你更加真实的用户数据。比如，YouTube就允许用户浏览尽可能多的内容，只有当他们想上传自己的视频时才需要注册。
结束语
当你把注册的所有障碍排除之后，你将收获大量的注册用户。但是并不是所有注册用户都会转化为活跃用户。活跃用户才是你的产品或服务的关键。设计一个高效的登录/注册页面仅仅是第一步。
如何设计出用户体验良好的登录/注册页面相关推荐
- UI设计灵感|App的登录注册页面案例参考
良好的交互细节是每一个优秀 App 的共同品质,而多数 App 被用户抛弃就是因为登录注册页面的问题,只有从用户场景和视角来思考产品,便能设计出打动人心的 App. 集设网www.ijishe.com ...
- 设计虚拟现实用户体验的深刻见解
沉浸式体验与我们日常所见的界面共享相同的核心组件.常见的界面遵循一个共同的模式:参与.培养同一性.完成目标.最终脱离. 界面会不断地更新迭代.幸运的是,人们已经善于适应新的体验.根据一些界面我们可以很 ...
- 搜狗输入法人机交互设计的用户体验
搜狗输入法人机交互设计的用户体验 用户体验要求: 1.评价手头正在使用的输入法或者搜索类软件产品 2.从用户界面.记住用户选择.短期刺激.长期使用的好处坏处.不要让用户犯简单错误方面评价 这周内四上课 ...
- 大数据和个性化设计是用户体验（UX）的未来
在20世纪90年代后期,大多数Web服务使用千篇一律的方法来解决用户需求.在他们开始关注人性化设计之前,这些模板化的解决方案已经盛行了近二十年. 以人为本的设计侧重于最终用户的需求,开发人员为每个用户 ...
- 如何通过交互设计增强用户体验
本文将展示有关微交互的例子.今天我就给大家讲一下如何改进用户体验以及什么是微交互测试.你可以使用这些信息来说服你的老板或你的设计团队(甚至你自己),微交互是灵活的,是设计丰富交互体验的一个不断变化的元 ...
- 原形图设计、用户体验设计
原形图设计.用户体验设计 作者:张福林 时间:2019年5月7日 原形图设计: 说原型图设计首先然我们知道原形图是什么,原形图是产品经理告诉UI设计师,顾客要求的最好工具.而原形图的设计不需要太多的设 ...
- 【交互设计】用户体验之手势交互设计原则
转载自:老二牛车教育 » [交互设计]用户体验之手势交互设计原则 手势识别指的是计算机设备侦测并识别人类手势.近几年来,随着手势识别技术的高速发展,以及3D传感器的广泛采用,手势交互已经得到广泛的普及 ...
- 登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下 如果电话号码已经存在,页面: 如 ...
- JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结 一.环境准备与开发工具 二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
最新文章
- Environ. Microbiol. | 土壤pH和温度调节农业生态系统中丰富和稀有细菌群落的构建过程...
- SAP RETAIL 补货类型RF之初探 I
- 在PyCharm中设置新建Python文件的模板格式方法
- C里面的scanf那个功能在matlab中实现
- 神策数据算法专家：推荐系统的实践与思考（上）
- 架构设计 | 基于Seata中间件，微服务模式下事务管理
- 视频教程-程序员的数学：线性代数-Python
- 飞机选座——附：东航320选坐攻略
- 大学计算机应用基础第二版习题答案,《大学计算机应用基础》各章习题参考答案...
- 1g1h1m mysql_mysql服务器优化
- 安装了MyIM，试验后感觉还不错
- Vue使用自定义字体
- 多核CPU 跟 进程/线程
- 如何成为Android高手
- PyTorch DDP
- ps -aux ps -ef 命令
- 修正牛顿法编程python_GitHub - Maples7/newtonMethod: 牛顿法求解复数域上x^4-1=0收敛域的程序 using Python...
- Web APIs：PC 端网页特效--常见网页特效案例--轮播图及节流阀思想
- 【Python】基础习题100例（51-75例）_努力做最通俗易懂版本
- ICASSP2020中语音合成部分论文阅读（未完待续）