交互设计：注册&登录设计最佳实践

导读

主题：交互设计：注册&登录设计最佳实践

作者：马林

阅读时间：约 3600 字，预计阅读时间 6 分钟

阅读收获：

Ⅰ 前言

注册&登录，是表单设计中一项重要的课题，是产品与用户建立信任的第一步。

当我们通过各种方式吸引他们到达网站或 APP，由游客注册而变成你产品的用户，此时，如果因为注册环节造成屏障而使他们流失掉，之前的各种努力都变成了沉默成本。

注册&登录，因为太普遍而可能被忽视。

每个产品都会有注册&登录的功能，它们实在太普遍了，对于产品设计者来说，只要设计好了输入框、字段、按钮等意味着用户就会使用，但是经常会因为一些细节问题导致用户无法注册或登录，把用户拦在了使用产品的第一步。

原则问题：我们希望用户快速完成注册或登录，但这个环节是需要用户实际输入、选择等操作，因此，我们的目标是帮助用户用最快的形式、方法完成注册或登录。

Ⅱ 实践

第三方账号登录

通常，用户登录产品时其目的是接着更深入的使用产品，因此登录环节力求简单。

使用现有的平台级产品账号作为注册账号，尤其是大体量产品，比如：微信、支付宝、微博、FaceBook、instagram 等，这为用户提供了快速有效的注册过程，无需再麻烦地创建账户并从头开始填写所有信息，他们只需点击对应的平台产品图标即可。

由于使用现有平台账户登录而不需要创建新账户，因此也省去了设置新密码、省去了每次回来使用产品时记住密码的过程。

使用第三方账户登录对用户来说非常简单

建议：当用户使用第三方账户登录时，在适当的时候提示绑定邮箱或者手机号码，目的是留下他们的联系方式后续可以再次触达他们，当然了，如果你的产品足够有吸引力，他们一定会再次回来的。

为用户选择常用平台的第三方账户，如：社交

取消确认密码字段

确认密码字段，似乎可以帮助用户避免在注册时拼错密码的机会，但是，它降低了注册表单的转化率。

这个过程包含几个步骤：第一次输入密码，再第二次输入，如果不匹配系统会提示错误，但用户无法看到并发现错误，他们只能删除密码再次从头输入，这个过程可能会重复多次，从而增加用户挫败感。

一个更好的既快速又高效的解决方案是为 Password 字段提供 Show Password 选项，用户可以单击该选项，查看他们正在输入的密码，从而在需要时立即进行更正。

密码确认的设计会增加注册过程的复杂性

相反，显示密码的选项可以轻松实现确认密码

指明大写锁定选项

在电脑上操作时意外按下 Caps Lock （大写锁定）键是很常见的。

注册和登录页面中的预期行为，是在用户尝试输入密码时向他们指明这一点。

指明大写锁定状态有助于帮助用户

如果用户不知道 Caps Lock 键是打开还是关闭，他们可能会根据自己的假设输入错误的密码。如果登录到应用程序或网站时设置的密码不匹配，这将引发错误。

建议：当用户在字段输入密码时立即给出指示，有助于避免再次使用密码时出现意外错误。

提供即时输入验证

即时输入验证，是提高注册和登录环节可用性的一种方式。

用户不必等待提交表单即可看到任何需要他们注意的错误。

即时验证帮助他们轻松地将反馈与他们刚刚提供的输入联系起来，并且可以立即更正它。

即时输入验证允许用户立即纠正他们的错误

提供有用的即时验证时，请注意：

当用户刚刚离开输入字段时才显示消息；

提供积极的错误提示有助于用户建立对您产品的信任；

提示应该清晰地说明问题以及如何解决问题。

即时输入验证允许用户立即纠正他们的错误

明确显示密码要求

始终向用户显示密码要求，不要假设他们必须了解强密码规则。

在密码控件附近显示要求，以便用户在输入密码时可以清楚地看到这些要求。

当输入密码时，立即显示密码要求

在错误发生之前对其进行处理，从而节省时间和额外的尝试

在默认视图中隐藏密码要求并仅在输入弱密码时才显示它们，这种设计会增加试错负担，造成浪费用户的时间，也会让他们对你的产品失去信心。

使用相关按钮标签

常规的设计形式，是根据用户在单击该按钮时将执行的操作来当作按钮标签，按钮标签始终在界面上定义其用途，这点与之前讨论过的 CTA 有相似之处。

通用按钮的设计，使用户很难将其与操作相关联，并且有可能会忘记他们实际上想要在界面上要操作。

按钮标签应始终反映其用途

提供登录与注册的功能切换

无论用户注册或登录，提供对应的入口，方便他们在两个流程中可以自由切换；

新用户或现有用户都有机会访问网站，通过登录与注册两种流程的组合切换，可以满足更多的适用场景。

支持用户从注册切换到登录

随着移动产品的普及，进行产品设计时需要考虑到不同平台的兼容性，还有不同场景下的登录与注册，例如：购物、支付、评论、发布等，因此，注册与登录模块在整个产品体系中可单独存在，实现灵活的功能组合、灵活的交互逻辑、灵活的用户流程。

支持用户从登录切换到注册

最优解用户名：电子邮件

用户注册产品时，避免使用用户名（即 ID，Identity Document，身标识号、账号、唯一编码，并不是昵称）。

通常平台只考虑数据库设计的便捷性而要求 ID 唯一，造成了用户在注册时要不断重试以找到唯一的用户名，结果是用户会忘记不同站点的多个用户名。

使用电子邮件、或手机号码，用户登录时不用记忆用户名。

避免使用用户名的设计，因为它们很难记住

使用电子邮件或电话号码创建帐户是一种方便的方式

说明密码无效的原因

尽量不要让用户尝试或猜测密码无效的原因，明确说明密码无效的原因及正确的规则；

如果用户不断尝试输入密码，造成非常糟糕的用户体验。

提示错误文案应清楚地指出输入密码无效的原因

拆分注册流程

谨记：注册过程中避免无关信息，要抓住核心重点，降低注册门槛以提升注册转化率。

如果一定有多分组表单信息，那么可使用多步骤表单。

多步骤表单使用户更容易以简化的方式管理大量信息。他们可以一次专注于一组属性。

在设计多步骤表单时，重要的是要使其对用户友好。命名与属性相关的步骤，在步骤之间提供简单的导航，并允许用户在提交表单之前查看他提供的信息的摘要。

剔除注册表单额外字段

如果一定需要，可将它们分成逻辑组分步实现

允许轻松恢复密码

当用户尝试使用电子邮件和密码登录时，很常见的情况是他们不记得所需的密码。

登录页面应当提供找回密码的功能，并且将找回密码功能布局在显著的区域内。

此选项将通过向用户注册的电子邮件地址，发送重置密码链接或向注册的手机号码发送唯一代码，使用户顺利完成恢复密码的过程。

与登录按钮一起显示忘记密码选项有助于用户轻松找

提供记住账户功能，让登录变得简单

提供明确的“记住我”选项，有助于用户就他们是否希望在返回网站时被记住给出自己的意见，他们很容易决定自己的偏好，如果他们不想让网站记住他们的电子邮件 ID，他们可以轻松地取该选项。

清晰的记住我选项，确认用户关于保存他们信息的意见

Ⅲ 总结回顾

向用户介绍注册的好处，以鼓励他们主动注册；
提供第三方平台账号的登录方式；
尽量删掉与注册无关的字段，不要重复输入字段，两个密码，两个邮件等；
不要要求用户通过电子邮件确认，如果考虑登录安全性，请通过向用户发送文本消息中的代码而不是通过电子邮件的链接来执行此操作，因为该代码将更容易键入而无需切换上下文，只需查看屏幕顶部显示的通知即可；
引导用户使用 Touch ID、面部识别等登录方式，提升登录效率；
默认情况下不显示密码，向用户提供一个显示密码的选项，允许他们显示查看密码。