有关注册表单的最佳做法

帮助用户轻松注册、登录和管理帐号详情。

如果用户需要登录您的网站，那么良好的注册表单设计至关重要。对于网络连接质量不佳、使用移动设备、时间紧迫或压力大的用户尤其如此。如果注册表单设计不合理，跳出率就会较高。 每次跳出都可能意味着用户丢失并感到不满，而不仅仅是一个错过注册机会。

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

核对清单

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

尽可能避免登录

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

最好的报名表单是无须报名表单！

通过要求用户创建帐号，您可以介于他们和他们想要实现的目标之间。 您是在表达谢意，并请用户信任您，让他们放心地将个人数据提供给您。您存储的每个密码和数据项都意味着隐私和安全“数据债务”，这会给您的网站带来成本和责任。

如果您要求用户创建帐号的主要原因是在导航会话或浏览会话之间保存信息，请考虑使用客户端存储空间。对于购物网站，强制用户创建帐号以进行购买是导致购物车放弃的一个主要原因。您应该将“访客结账”设为默认付款应用。

让登录一目了然

明确如何在您的网站上创建帐号，例如使用页面右上角的登录或登录按钮。避免使用含糊不清的图标或含糊的措辞（“开始使用！”、“加入我们”），并且不要在导航菜单中隐藏登录名。易用性专家 Steve Krug 总结了这种方法提高网站易用性：别让我思考！如果您需要说服网络团队中的其他人，请使用“分析”来展示不同选项的影响。

对于通过 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" 作为用户名。

在各种设备、平台、浏览器和版本上进行测试

在用户最常用的平台上测试注册表单。表单元素功能可能会有所不同，并且视口尺寸的差异可能会导致布局问题。借助浏览器，您可以在各类设备和浏览器中对开源项目进行免费测试。

实现分析和真实用户监控

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

• 网页分析：您注册流程中每个网页的网页浏览量、跳出率和退出次数。
• 互动分析：目标漏斗和事件可表明用户在哪里放弃注册流程，以及点击注册页面上的按钮、链接和其他组件的用户所占的比例。
• 网站性能：通过以用户为中心的指标，您可以了解注册流程是加载缓慢还是视觉不稳定。

只需稍作更改，注册表单的完成率就会大有不同。借助 Google Analytics（分析）和 RUM，您可以优化更改并确定更改的优先级，并监控您的网站是否存在本地测试未发现的问题。

继续学习

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

照片提供者：@ecowarriorprincie，来源：Unsplash。