帮助用户轻松注册、登录和管理其账号详情。
如果用户需要登录您的网站，那么良好的注册表单设计至关重要。对于网络连接不佳、使用移动设备、匆忙或处于压力状态的用户，这一点尤为重要。设计欠佳的注册表单会导致跳出率较高。每次跳出都可能意味着失去一位不满意的用户，而不仅仅是错失了一次注册机会。
下面是一个非常简单的注册表单示例，展示了所有最佳实践：
核对清单
- 尽可能避免登录。
- 明确说明如何创建账号。
- 明确说明如何访问账号详情。
- 减少表单中多余的元素。
- 考虑会话时长。
- 帮助密码管理工具安全地建议和存储密码。
- 不允许使用已泄露的密码。
- 允许粘贴密码。
- 切勿以纯文本形式存储或传输密码。
- 不强制用户更新密码。
- 简化密码更改或重置流程。
- 启用联合登录。
- 简化账号切换流程。
- 考虑提供多重身份验证。
- 谨慎使用用户名。
- 在现场和实验室进行测试。
- 在各种浏览器、设备和平台上进行测试。
尽可能避免登录
在您实现注册表单并要求用户在您的网站上创建账号之前，请考虑是否确实需要这样做。您应尽可能避免仅在用户登录后才提供网站功能。
最佳注册表单是无需注册表单！
如果要求用户创建账号，就意味着您在用户和其想要实现的目标之间设置了一道障碍。 您是在请求用户提供帮助，并信任您会妥善处理其个人数据。您存储的每个密码和数据项都会产生隐私和安全“数据债务”，成为您网站的成本和责任。
如果您要求用户创建账号的主要原因是在导航或浏览会话之间保存信息，请考虑改用客户端存储。对于购物网站，强制要求用户创建账号才能购买被认为是导致购物车放弃的主要原因。您应将“游客结账”设为默认选项。
明确显示登录选项
明确说明如何在您的网站上创建账号，例如在页面右上角放置登录或注册按钮。避免使用模糊的图标或模糊的文字（例如“加入我们！”、“加入我们”），并且不要在导航菜单中隐藏登录选项。易用性专家 Steve Krug 总结了这种网站易用性方法：不要让我思考！如果您需要说服网站团队中的其他成员，请使用分析来展示不同选项的影响。
如果窗口大小大于此处所示，Gmail 会显示登录链接和创建账号按钮。
对于通过 Google 等身份提供方注册，同时也使用电子邮件和密码注册的用户，请务必关联其账号。如果您可以从身份提供方的个人资料数据中访问用户的电子邮件地址，并匹配这两个账号，则可以轻松实现此目的。以下代码展示了如何访问 Google 登录用户的电子邮件数据。
// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
var profile = auth2.currentUser.get().getBasicProfile();
console.log(`Email: ${profile.getEmail()}`);
}
明确说明如何访问账号详情
用户登录后，请明确说明如何访问账号详情。特别是，请明确说明如何更改或重置密码。
减少表单杂乱
在注册流程中，您的工作是尽可能减少复杂性，并让用户保持专注。减少杂乱。 现在不是分心和受诱惑的时候！
在注册时，尽可能少要求用户提供信息。仅在需要时收集额外的用户数据（例如姓名和地址），并且在用户能明显感受到提供这些数据的好处时收集。请注意，您传输和存储的每项数据都会产生费用和责任。
请勿仅为了确保用户的详细联系信息正确无误而重复输入。这会减慢表单填写速度，如果表单字段是自动填充的，则没有意义。请改为在用户输入联系详细信息后向其发送确认码，然后在用户回复后继续创建账号。这是常见的注册模式：用户已经习惯了。
您不妨考虑采用免密码登录方式，即在用户每次在新设备或浏览器上登录时向其发送验证码。Slack 和 Medium 等网站就使用了此版本。
与联合登录一样，这种方式还有一个额外的好处，即您无需管理用户密码。
考虑会话时长
无论您采用哪种用户身份方法，都需要仔细决定会话时长：用户保持登录状态的时长，以及可能导致用户退出账号的原因。
考虑用户使用的是移动设备还是桌面设备，以及他们是在桌面设备上共享还是在共享设备上共享。
帮助密码管理器安全地建议和存储密码
您可以帮助第三方和内置浏览器密码管理工具建议和存储密码，以便用户无需自行选择、记住或输入密码。密码管理工具在现代浏览器中运行良好，可在设备之间、跨平台应用和 Web 应用同步账号，并适用于新设备。
因此，正确编写注册表单非常重要，尤其是要使用正确的自动补全值。对于注册表单，请为新密码使用 autocomplete="new-password"，并尽可能向其他表单字段（例如 autocomplete="email" 和 autocomplete="tel"）添加正确的自动补全值。您还可以在注册和登录表单中为 form 元素本身以及任何 input、select 和 textarea 元素使用不同的 name 和 id 值，以便帮助密码管理工具。
您还应使用适当的 type 属性在移动设备上提供合适的键盘，并启用浏览器的基本内置验证。如需了解详情，请参阅有关付款和地址表单的最佳做法。
确保用户输入安全的密码
让密码管理工具提供密码建议是最佳方案，您应鼓励用户接受浏览器和第三方浏览器管理工具建议的安全系数高的密码。
不过，许多用户都希望输入自己的密码，因此您需要实现密码强度规则。美国国家标准与技术研究院说明了如何避免使用不安全的密码。
不允许使用已泄露的密码
无论您为密码选择了哪些规则，都绝不应允许使用在安全漏洞中泄露的密码。
用户输入密码后，您需要检查该密码是否已泄露。网站 Have I Been Pwned 提供了一个用于密码检查的 API，您也可以自行将其作为服务运行。
借助 Google 密码管理工具，您还可以检查您的现有密码是否已泄露。
如果您拒绝用户提议的密码，请明确告知用户拒绝的原因。在用户输入值后立即内嵌显示问题并说明如何解决，而不是在用户提交注册表单并等待服务器响应后再显示。
不禁止粘贴密码
某些网站不允许将文本粘贴到密码输入框中。
禁止粘贴密码会让用户感到不快，并鼓励用户使用容易记住的密码（因此可能更容易被破解）。据英国国家网络安全中心等组织称，这实际上可能会降低安全性。用户只有在尝试粘贴密码后才会发现系统不允许粘贴，因此禁止粘贴密码并不能避免剪贴板漏洞。
不以纯文本形式存储或传输密码
请务必对密码进行盐值处理和哈希处理，切勿尝试自行发明哈希算法！
不强制用户更新密码
强制更新密码对 IT 部门来说代价很高，对用户来说很烦人，而且对安全没有什么影响。它还可能鼓励用户使用不安全的易记密码，或手动记录密码。
您应监控账号活动是否异常，并向用户发出警告，而不是强制更新密码。 如果可能，您还应监控是否有密码因数据泄露而遭到破解。
您还应让用户能够查看其账号登录记录，了解登录发生的地点和时间。
简化密码更改或重置流程
向用户明确说明在哪里以及如何更新账号密码。在某些网站上，这令人惊讶地很难。
当然，您还应让用户在忘记密码时能够轻松重置密码。 开放式 Web 应用安全项目提供了有关如何处理忘记的密码的详细指南。
为了保障您的商家和用户的安全，如果用户发现自己的密码已泄露，请务必帮助他们更改密码。为简化此过程，您应向您的网站添加一个重定向到密码管理页面的 /.well-known/change-password 网址。这样，密码管理工具便可将用户直接转到可供他们更改您网站的密码的页面。此功能现已在 Safari 和 Chrome 中实现，并将很快在其他浏览器中推出。通过添加知名的更改密码网址，帮助用户轻松更改密码介绍了如何实现此功能。
如果用户希望删除其账号，您还应让他们能够轻松地执行此操作。
提供通过第三方身份提供商登录的选项
许多用户更喜欢使用电子邮件地址和密码注册表单登录网站。不过，您还应允许用户通过第三方身份提供方（也称为联合登录）登录。
这种方法具有多项优势。对于使用联合登录创建账号的用户，您无需询问、传达或存储密码。
您或许还可以通过联合登录访问经过验证的其他个人资料信息，例如电子邮件地址，这意味着用户无需输入这些数据，您也无需自行进行验证。联合登录还可以让用户在使用新设备时更轻松地登录。
将 Google 登录功能集成到您的 Web 应用介绍了如何将联合登录添加到您的注册选项。还有许多其他身份平台可供选择。
简化账号切换
许多用户会共用设备，并使用同一浏览器在账号之间切换。无论用户是否使用联合登录，您都应简化账号切换流程。
考虑提供多重身份验证
多重身份验证是指确保用户通过多种方式提供身份验证信息。例如，除了要求用户设置密码外，您还可以强制要求用户使用通过电子邮件或短信发送的动态密码进行验证，或者使用基于应用的动态密码、安全密钥或指纹传感器进行验证。动态短信密码最佳实践和使用 WebAuthn 启用强效身份验证介绍了如何实现多重身份验证。
如果您的网站处理个人信息或敏感信息，您当然应提供（或强制执行）多重身份验证。
谨慎使用用户名
除非（或直到）您需要用户名，否则请勿强制要求用户提供用户名。让用户只需使用电子邮件地址（或电话号码）和密码即可注册和登录，或者根据需要使用联合登录。请勿强制他们选择和记住用户名。
如果您的网站确实需要用户名，请勿对用户强加不合理的规则，也不要阻止用户更新其用户名。在后端，您应为每个用户账号生成唯一 ID，而不是基于用户名等个人数据生成标识符。
此外，请务必为用户名使用 autocomplete="username"。
在各种设备、平台、浏览器和版本上进行测试
在用户最常用的平台上测试注册表单。表单元素的功能可能会有所不同，并且视口大小的差异可能会导致布局问题。借助 BrowserStack，您可以在各种设备和浏览器上免费测试开源项目。
实现分析和实时用户监控
您需要实地数据和实验室数据来了解用户使用注册表单的体验。Google Analytics 和实时用户监控 (RUM) 可提供有关用户实际体验的数据，例如注册页面加载所需的时间、用户与哪些界面组件互动（或未互动）以及用户完成注册所需的时间。
- 网页分析：注册流程中每个网页的网页浏览量、跳出率和退出次数。
- 互动分析：目标漏斗和事件可显示用户在哪个位置放弃了注册流程，以及有多少比例的用户点击了注册页面的按钮、链接和其他组件。
- 网站性能：以用户为中心的指标可以让您了解注册流程是否加载缓慢或视觉效果不稳定。
对注册表单进行细微调整，就能显著提高表单填写完成率。借助 Google Analytics 和 RUM，您可以优化更改并确定优先级，还可以监控网站，以查看本地测试未发现的问题。
不断改进
- 有关登录表单的最佳做法
- 有关付款和地址表单的最佳做法
- 创建出色的表单
- 移动表单设计最佳实践
- 功能更强大的表单控件
- 创建无障碍表单
- 使用 Credential Management API 简化注册流程
- 使用 WebOTP API 在网络上验证电话号码
照片由 Unsplash 用户 @ecowarriorprincess 拍摄。