有关注册表单的最佳做法

帮助您的用户轻松完成注册、登录和管理其账号详细信息。

Sam Dutton

如果用户需要登录您的网站，那么良好的注册表单设计至关重要。对于网络连接不佳、使用移动设备、匆忙或处于压力状态的用户，这一点尤为重要。设计欠佳的注册表单会导致跳出率较高。每次跳出都可能意味着失去一位不满意的用户，而不仅仅是错失了一次注册机会。

试用：如果您希望通过动手教程学习这些最佳实践，请参阅“注册表单最佳实践”Codelab。

下面是一个非常简单的注册表单示例，其中演示了所有最佳做法：

注意：本文介绍了表单最佳实践。文中未说明如何通过第三方身份提供方（联合登录）实现注册，也不会说明如何构建后端服务以对用户进行身份验证、存储凭据和管理账号。将 Google 登录功能集成到您的 Web 应用中介绍了如何将联合登录添加到您的注册选项。用户账号、授权和密码管理的 12 项最佳实践概述了管理用户账号的核心后端原则。

核对清单

• 尽可能避免登录。
• 明确如何创建账号。
• 明确说明如何访问账号详情。
• 告别表单混乱。
• 考虑会话时长。
• 帮助密码管理工具安全地建议和存储密码。
• 不允许使用已泄露的密码。
• 允许粘贴密码。
• 切勿以纯文本形式存储或传输密码。
• 不强制用户更新密码。
• 简化密码更改或重置流程。
• 启用联合登录。
• 简化账号切换过程。
• 考虑提供多重身份验证。
• 谨慎使用用户名。
• 在现场和实验室中进行测试。
• 在各种浏览器、设备和平台上进行测试。

尽可能避免登录

在您实现注册表单并要求用户在您的网站上创建账号之前，请考虑是否确实需要这样做。您应尽可能避免仅在用户登录后才提供网站功能。

最好的注册表单是无需注册表单！

要求用户创建账号，就相当于他们想要实现的目标。 您是在请求用户提供帮助，并信任您会妥善处理其个人数据。您存储的每个密码和数据项都会产生隐私和安全“数据债务”，成为您网站的成本和责任。

如果您要求用户创建账号的主要原因是在导航或浏览会话之间保存信息，请考虑改用客户端存储。对于购物网站，强制用户创建账号才能购买被认为是导致购物车放弃的主要原因。您应将“游客结账”设为默认选项。

明确显示登录选项

明确说明如何在您的网站上创建账号，例如在页面右上角放置登录或注册按钮。避免使用模糊的图标或模糊的文字（例如“加入我们！”、“加入我们”）并不要在导航菜单中隐藏登录选项。易用性专家 Steve Krug 总结了这种网站易用性方法：不要让我思考！如果您需要说服网站团队中的其他成员，请使用分析来展示不同选项的影响。

让登录操作显而易见。图标可能含糊不清，但登录按钮或链接则很明显。

注意：您可能想知道是否应添加一个用于创建账号的按钮（或链接），以及另一个供现有用户登录的按钮。现在，许多热门网站只会显示一个登录按钮。当用户点按或点击该链接时，他们还会获得一个用于在必要时创建账号的链接。这是一种常见的模式，您的用户可能会理解，但您可以使用互动分析来监控单个按钮是否最有效。

Gmail 登录页面包含用于创建账号的链接。
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 等网站使用的是此类版本。

在 medium.com 上无需密码即可登录。

与联合登录一样，这种方式还有一个好处，即您无需管理用户密码。

考虑会话时长

无论您采用哪种用户身份方法，都需要仔细决定会话时长：用户保持登录状态的时长，以及可能会导致用户退出账号的原因。

考虑用户使用的是移动设备还是桌面设备，以及他们是在桌面设备上共享还是在共享设备上共享。

注意：您可以通过强制要求在使用敏感功能（例如进行购买交易或更新账号）时重新进行身份验证，来解决共用设备带来的一些问题。如需详细了解实现重新身份验证的方法，请参阅 Codelab 您的第一个 WebAuthn 应用。

帮助密码管理器安全地建议和存储密码

您可以协助第三方和内置浏览器密码管理工具建议和存储密码，以便用户无需自行选择、记住或输入密码。密码管理工具能够在现代浏览器中顺畅运行，并能在设备、平台专用应用和 Web 应用以及新设备之间同步账号。

因此，正确编写注册表单代码非常重要，特别是要使用正确的自动补全值。对于注册表单，请为新密码使用 autocomplete="new-password"，并尽可能向其他表单字段添加正确的自动补全值，例如 autocomplete="email" 和 autocomplete="tel"。您还可以通过在注册和登录表单中、为 form 元素本身以及任何 input、select 和 textarea 元素使用不同的 name 和 id 值来帮助密码管理工具。

您还应使用适当的 type 属性在移动设备上提供合适的键盘，并启用浏览器的基本内置验证。有关详情，请参阅付款和地址表单最佳做法。

注意：登录表单最佳实践中提供了更多提示，介绍了如何改进表单设计、布局和无障碍功能，以及如何正确编写表单代码，以便充分利用内置的浏览器功能。

确保用户输入安全的密码

启用密码管理器来建议密码是最佳选择，您应鼓励用户接受浏览器和第三方浏览器管理器建议的安全系数高的密码。

不过，许多用户希望输入自己的密码，因此您需要实现密码强度规则。美国国家标准与技术研究院介绍了如何避免使用不安全的密码。

警告：某些网站上的注册表单具有密码验证规则，不允许使用浏览器和第三方密码管理工具生成的安全系数高的密码。请确保您的网站不会这样做，因为这会中断表单填写、让用户感到厌烦，并要求用户自行编写密码，而自行编写的密码可能不如密码管理工具生成的密码安全。

不允许使用已泄露的密码

无论您为密码选择何种规则，都不应允许已遭遇安全漏洞的密码。

用户输入密码后，您需要检查该密码是否已泄露。Have I Been Pwned 网站提供了一个用于密码检查的 API，您也可以自行将其作为一项服务运行。

借助 Google 密码管理工具，您还可以检查您的现有密码是否已泄露。

如果您拒绝用户提议的密码，请明确告知用户拒绝的原因。在用户输入值后立即内嵌显示问题并说明如何解决，而不是在用户提交注册表单并等待服务器响应后再显示。

明确说明密码遭拒的原因。

不禁止粘贴密码

某些网站不允许将文本粘贴到密码输入框中。

禁止粘贴密码会给用户带来困扰，鼓励他们使用容易记住（因此可能更容易被破解）的密码，并且根据英国国家网络安全中心等组织显示，实际上可能会降低安全性。用户只有在尝试粘贴密码后才会知道不允许粘贴，因此禁止粘贴密码不会避免剪贴板漏洞。

不以纯文本形式存储或传输密码

请务必对密码进行盐值处理和哈希处理，切勿尝试发明自己的哈希算法！

不强制用户更新密码

请勿强制用户随意更新密码。

强制更新密码对 IT 部门来说代价很高，对用户来说很烦人，而且对安全没有什么影响。它还可能鼓励用户使用不安全的易记密码，或手动记录密码。

您应监控账号活动是否异常，并向用户发出警告，而不是强制更新密码。 如有可能，您还应监控是否有密码因数据泄露而遭到破解。

您还应让用户能够查看其账号登录记录，了解登录发生的地点和时间。

Gmail 账号活动页面。

简化更改或重置密码的操作

向用户明确说明在哪里以及如何更新账号密码。在某些网站上，这令人惊讶地很难。

当然，您还应让用户在忘记密码时能够轻松重置密码。 开放式 Web 应用安全项目提供了有关如何处理忘记的密码的详细指南。

为保障您的商家和用户的安全，如果用户发现自己的密码已泄露，请务必帮助他们更改密码。为简化此过程，您应向您的网站添加一个重定向到密码管理页面的 /.well-known/change-password 网址。这样一来，密码管理器就可以将用户直接转到可以更改网站密码的页面。此功能现已在 Safari 和 Chrome 中实现，并将很快在其他浏览器中推出。通过添加知名的更改密码网址，帮助用户轻松更改密码介绍了如何实现此功能。

如果用户希望删除其账号，您还应让他们能够轻松地执行此操作。

提供通过第三方身份提供商登录的选项

许多用户更喜欢使用电子邮件地址和密码注册表单登录网站。不过，您还应允许用户通过第三方身份提供方（也称为联合登录）登录。

WordPress 登录页面，其中包含 Google 和 Apple 登录选项。

这种方法具有多种优势。对于使用联合登录创建账号的用户，您无需询问、传达或存储密码。

您或许还可以通过联合登录访问经过验证的其他个人资料信息，例如电子邮件地址，这意味着用户无需输入这些数据，您也无需自行进行验证。联合登录还可以让用户在获得新设备时更轻松地。

将 Google 登录功能集成到您的 Web 应用中介绍了如何将联合登录添加到您的注册选项。您还可以使用许多其他身份平台。

注意：用户在拿到新设备后的“第一天体验”越来越重要。用户希望能够通过多种设备（包括手机、笔记本电脑、桌面设备、平板电脑、电视或汽车）登录。如果您的注册和登录表单无法顺畅衔接，那么您就有可能在用户重新进行设置之前失去他们，或者至少失去与他们的联系。您需要尽可能让使用新设备的用户能够快速、轻松地上手在您的网站上使用。联合登录还可以帮助解决这一问题。

简化账号切换

许多用户会共用设备，并使用同一浏览器在账号之间切换。无论用户是否使用联合登录，您都应简化账号切换流程。

在 Gmail 中切换账号。

考虑提供多重身份验证

多重身份验证是指确保用户通过多种方式提供身份验证信息。例如，除了要求用户设置密码之外，您还可以使用通过电子邮件或短信发送的一次性密码，或使用基于应用的一次性验证码、安全密钥或指纹传感器来强制执行验证。动态短信密码最佳实践和使用 WebAuthn 启用强效身份验证介绍了如何实现多重身份验证。

如果您的网站处理个人信息或敏感信息，您当然应提供（或强制执行）多重身份验证。

谨慎使用用户名

除非（或直到）您需要用户名，否则请勿强制要求用户提供用户名。让用户只需使用电子邮件地址（或电话号码）和密码即可注册和登录，或者根据需要使用联合登录。请勿强制他们选择和记住用户名。

如果您的网站确实需要用户名，请勿对用户名施加不合理的规则，也不要阻止用户更新用户名。在后端，您应为每个用户账号生成唯一 ID，而不是基于用户名等个人数据生成标识符。

此外，请务必为用户名使用 autocomplete="username"。

注意：与人名一样，请确保用户名不限于使用拉丁字母字符。有关付款和地址表单的最佳做法介绍了如何以及为什么使用 Unicode 字母匹配进行验证。

针对一系列设备、平台、浏览器和版本进行测试

在用户最常用的平台上测试注册表单。表单元素的功能可能会有所不同，并且视口大小的差异可能会导致布局问题。BrowserStack 支持在各种设备和浏览器上对开源项目进行免费测试。

实现分析和实时用户监控

您需要实地数据和实验室数据来了解用户使用注册表单的体验。Google Analytics 和实时用户监控 (RUM) 可提供有关用户实际体验的数据，例如注册页面加载所需的时间、用户与哪些界面组件互动（或未互动）以及用户完成注册所需的时间。

• 网页分析：注册流程中每个网页的网页浏览量、跳出率和退出次数。
• 互动分析：目标漏斗和事件可显示用户在哪个位置放弃了注册流程，以及有多少比例的用户点击了注册页面的按钮、链接和其他组件。
• 网站性能：以用户为中心的指标可以让您了解注册流程的加载速度是否缓慢或视觉效果是否不稳定。

对注册表单进行细微调整，就能显著提高表单填写完成率。借助 Google Analytics 和 RUM，您可以优化更改并确定优先级，还可以监控网站，以发现本地测试未发现的问题。

学无止境

• 有关登录表单的最佳做法
• 有关付款和地址表单的最佳做法
• 创建出色的表单
• 移动表单设计最佳实践
• 更强大的表单控件
• 创建无障碍表单
• 使用 Credential Management API 简化注册流程
• 使用 WebOTP API 在网络上验证电话号码

拍摄者：@ecowarriorprincess，合作伙伴：Un 创立网站。