有关注册表单的最佳做法

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

Sam Dutton

如果用户需要登录您的网站，那么设计良好的注册表单 关键。对于网络状况不佳、使用移动设备或 时间紧迫或压力很大设计不佳的注册表单会获得较高的跳出率。 每次跳出都可能意味着用户流失和心怀不满，而不仅仅是错过注册 优化建议。

试试看 ：如果您希望通过实操教程了解这些最佳实践，请查看有关注册表单的最佳做法 Codelab。

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

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

核对清单

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

请尽可能避免登录

在您实施注册表单并要求用户在您的网站上创建账号之前，请考虑以下事项： 是否确实需要您应尽可能避免需要登录才能访问的功能。

最好不用注册表单！

要求用户创建账号，就相当于他们想要实现的目标。 您是在请求帮忙，并且要求用户信任您来处理个人数据。每个密码和每个项 的数据承载着隐私和安全方面的“数据债务”，成为企业面临的成本和责任 。

如果您要求用户创建账号的主要原因是在导航之间保存信息，或 浏览会话，不妨考虑使用客户端存储功能。适合购物 强制用户创建账号来购物是他们购物的主要原因 放弃购物车。您应该将“访客结账”设置为默认选项。

确保登录清晰醒目

明确说明如何在您的网站上创建账号，例如使用登录或登录功能 按钮。避免使用不明确的图标或含糊的措辞（“立即加入！” “加入我们”），不要在导航菜单中隐藏登录信息。易用性专家 Steve Krug 总结道 提高网站易用性的方法：如果您需要 说服网络团队中的其他人，可以使用分析来展示不同 选项。

<ph type="x-smartling-placeholder">

</ph>

将登录位置放在显眼的位置。图标可能模棱两可，但标志 in 按钮或链接。

。

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

。 <ph type="x-smartling-placeholder">

</ph>

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()}`);
}

明确了解如何访问账号详情

用户登录后，应明确说明如何访问账号详情。具体而言，请确保 更改或重置密码的分步说明。

告别表单杂乱

在注册流程中，您的职责是尽可能降低复杂性并让用户保持专注。告别杂乱。 这时可不要分心和诱惑！

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

避免干扰用户完成注册。

注册时，请尽可能少索要。收集其他用户数据（例如姓名和地址） 并且用户能够明确看到提供相应数据的好处时。注意事项 您通信和存储的每一项数据都会产生费用和责任。

不要仅仅为了确保用户能够准确输入详细联系信息，就重复输入信息。这会减慢 表单字段，如果自动填充表单字段，那就没有意义。而应发送确认 将代码发送给用户，然后继续创建账号 看到这些提示这是一种常见的注册模式，用户已经习惯了。

您可以考虑在用户每次登录时都发送一个验证码，从而实现无密码登录 新的设备或浏览器Slack 和 Medium 等网站使用的是此版本。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

在 medium.com 上免密码登录。

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

考虑会话时长

无论您采用何种方法识别用户身份，都需要针对会话 长度：用户保持登录状态的时长，以及可能导致您将其退出的原因。

考虑您的用户使用的是移动设备还是桌面设备， 他们是在桌面设备或共用设备上分享内容

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

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

您可以协助第三方和内置的浏览器密码管理工具建议和存储密码， 用户无需自行选择、记住或输入密码。密码管理工具在 现代浏览器、跨设备、跨平台所需的应用和 Web 应用同步账号，以及 。

因此，正确编写注册表单代码极其重要，尤其是要使用正确的 自动填充值。若要注册表单，请使用 autocomplete="new-password" 输入新密码，并将新密码添加到 尽可能将自动填充值更正为其他表单字段，例如 autocomplete="email" 和 autocomplete="tel"。您还可以使用不同的 name 和 id 来帮助密码管理工具 注册和登录表单中的值、form 元素本身的值以及任何 input、select 值 和 textarea 元素。

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

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

确保用户输入安全的密码

最好启用密码管理器来建议密码， 用户接受浏览器和第三方浏览器管理器建议的安全系数高的密码。

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

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

不允许使用已泄露的密码

无论您为密码选择何种规则，都绝不能允许 安全漏洞。

用户输入密码后，您需要检查确认您输入的密码不是已经输入过的密码 遭到入侵。have I Been Pwned 网站提供了一个密码 API 也可以自行将其作为服务运行

借助 Google 的密码管理工具，您还可以检查是否已有密码被盗 遭到入侵。

如果您拒绝了用户建议的密码，请明确说明拒绝密码的原因。 内嵌显示问题并说明解决方法， 在用户输入了值之后（而不是在他们提交注册表单并且必须 等待服务器响应。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

明确密码遭拒的原因。

不禁止粘贴密码

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

禁止粘贴密码会令用户反感，鼓励他们使用容易记住的密码（ 而且根据 UK National 网络安全中心实际上可能会降低安全性。 用户只有在尝试粘贴密码后，才会知道不允许粘贴内容，因此 禁止粘贴密码无法避免剪贴板漏洞。

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

请务必对密码进行加盐和哈希处理，并且不要试图自行编造哈希处理算法！

不强制更新密码

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

强制更新密码对 IT 部门来说代价高昂，让用户感到厌烦，而且 对安全性的影响。这还有助于鼓励人们 使用不安全的易记密码，或实际记录密码。

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

您还应为用户提供其账号登录历史记录的访问权限，让他们了解 以及登录的时间

<ph type="x-smartling-placeholder">

</ph>

Gmail 账号活动页面。

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

向用户明确说明在何处以及如何更新账号密码。在某些网站上 非常困难

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

为保障您的业务和用户的安全，请务必帮助用户 密码。为简化操作，您应该添加 /.well-known/change-password 的网址 重定向到您的密码管理页的网站。这样，密码管理工具就能 将用户直接转到可以更改网站密码的页面。此功能 现已在 Safari 和 Chrome 中实现，并将在其他浏览器中推出。帮助用户更改密码 来轻松更改密码一文介绍了如何 来实现这一点。

您还应确保用户可以根据需要轻松删除其账号。

通过第三方身份提供方提供登录服务

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

<ph type="x-smartling-placeholder">

</ph>

包含 Google 和 Apple 登录选项的 WordPress 登录页面。

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

您或许还能通过联合登录访问其他已通过验证的个人资料信息，例如 电子邮件地址，这意味着用户无需输入相应数据，您也无需 您需要自行完成验证联合登录还可以使用户 新设备。

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

注意 ：“首日体验”买到新设备就变得越来越重要了。用户希望通过多种设备登录，包括手机、笔记本电脑、桌面设备、平板电脑、电视或汽车。如果您的注册表单和登录表单无法顺畅运行，那么就有可能流失用户，或者至少在用户重新设置之前无法与他们联系。您需要尽可能让使用新设备的用户能够快速、轻松地上手在您的网站上使用。联合登录在这方面可以派上用场。

简化账号切换

许多用户使用同一浏览器共用设备并切换账号。用户是否可以访问 是否使用联合登录，都应简化账号切换。

<ph type="x-smartling-placeholder">

</ph>

Gmail 上的账号切换。

考虑提供多重身份验证

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

如果您的网站会处理个人或 敏感信息。

谨慎使用用户名

除非（或直到）您需要，否则不要强求用户名。允许用户注册和登录 仅电子邮件地址（或电话号码）和密码，或联合登录 自行选择。不要强迫他们选择并记住用户名。

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

此外，请确保使用 autocomplete="username" 作为用户名。

注意 ：与个人姓名一样，请确保用户名不仅限于拉丁字母中的字符。付款和地址表单最佳做法介绍了使用 Unicode 字母匹配进行验证的方式和原因。

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

在用户最常使用的平台上测试注册表单。表单元素功能可能会有所不同 和视口大小的差异都可能会导致布局问题。BrowserStack 针对 开源项目。

实现分析和真实用户监控

您需要实测数据和实验数据 了解用户使用您的注册表单的体验。Google Analytics 和真实用户监控 (RUM) 提供有关用户实际体验的数据，例如注册页面经过多长时间 负载、用户与（或未与哪些界面组件交互）以及用户完成操作所需的时间 注册。

• 网页分析：注册流程中每个网页的网页浏览量、跳出率和退出次数。
• 互动分析：目标漏斗 和事件 可以表明用户在哪个环节放弃了注册流程，以及点击按钮所占的比例； 链接和注册页的其他组件。
• 网站效果：以用户为中心的指标 告知您注册流程是否加载缓慢或看起来不稳定。

只需稍作调整，就能显著提高注册表单的完成率。分析和 RUM 让您能够优化更改并确定更改的优先级，并监控网站是否存在 进行过本地测试的结果

继续学习

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

照片由 @ecowarriorprincess 提供，由 Unsplash 用户发布。