有关注册表单的最佳做法

帮助您的用户轻松注册、登录和管理他们的帐号详细信息。

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 上免密码登录。

与联合登录一样，这还有一个额外的好处，那就是您不必管理用户密码。

考虑会话时长

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

考虑您的用户使用的是移动设备还是桌面设备，以及他们是通过桌面设备还是共享设备共享内容。

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

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

您可以帮助第三方和内置浏览器密码管理器建议和存储密码，这样用户就无需自行选择、记住或输入密码。密码管理工具适用于新型浏览器，可在各种设备、各平台专用应用和 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 支持在各种设备和浏览器上对开源项目进行免费测试。

实现分析和真实用户监控

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

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

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

继续学习

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

照片由 @ecowarriorprincess 分享，Unsplash 用户。