最近，网站上的授权开始让我很烦。 随着密码管理器（例如1Password （我使用）和Chrome密码管理器（我也使用））的普及，对于网站来说，考虑到这一事实非常重要。

让我们看看一些我认为不完善的登录模式。 然后考虑最佳做法。 TL; DR; 这些是简单，可预测的授权页面，位于常规页面上，并且与密码管理器友好。

不该做什么

这里有一些我会避免的例子。

不要将授权形式化

赫兹（Hertz）和其他许多站点在模式窗口中放置了登录表单。 这种方法有两个问题：

• 用户的其他步骤 ：“ 1。 按下菜单按钮，2.选择一个登录名，3.填写表格“，而不是转到授权页面（通过搜索，客户支持聊天，书签，密码管理器，直接通过主导航）并填写表格。
  
• 没有直接链接到该页面的页面 ，这可能会对支持服务造成痛苦（因为他们必须提供上述一堆说明，而不仅仅是通过链接发送人）。 由于模式窗口最初是隐藏的，因此也干扰了密码管理器的工作。 1Password具有令人惊叹的“打开和填充”功能，可让您打开网站并使用您的凭据填写登录表单。 此功能不适用于模态窗口。

不要隐藏字段

Delta站点将隐藏“姓氏”字段。 据我了解，通过引入渐进式设计元素来使界面更整洁。 问题在于该字段是必填字段，并且密码管理器无法自动填写该字段。 用户必须首先填写并退出另一个字段，此字段才会显示。 仅一个额外的不必要障碍，一个人就可以进入系统。

MacOS登录屏幕以“清除” UI的相同方式隐藏了密码字段（并且我还假设要推动用户通过TouchID登录），但是我认为这种清洁度可能会使人们感到困惑。

不要弄乱魔术链接

它可能是从Slack开始的，但是现在其他程序，例如Notion （顺便说一句，我很喜欢），通过电子邮件将临时密码发送到系统。 我可以欣赏此模板的窍门，因为它消除了不幸的用户的痛苦，这些不幸的用户难以记住另一个密码，并且不需要创建所有必需的基础结构来恢复忘记的密码。 但是

• 这条电路令人难以置信 。 1.在登录表单中输入电子邮件。 2.打开一个新选项卡或切换程序。 3.打开邮箱。 4.从服务中查找一条消息（如果您不受其他信件的干扰）。 5.打开消息。 6.复制abracadabra密码。 7.返回站点。 8.在其中插入abracadabra。 9.提交表格。 妈的
  
• 这根本不适用于密码管理器 ，这令人讨厌。 在设计中，我们谈论了很多一致性。 但是，我们不仅在谈论我们自己的生态系统中的一致性，还在谈论互联网的其余部分，即坚持树。
  
• 这迫使用户学习新的行为 ：用户已经学会了某些模式（登录，验证，导航等），并在许多应用程序中重复使用了许多年。 我并不是说永远不应该进行创新。 但是，重要的是要认识到，用户在使用产品时会获得大量有关如何使用Internet的知识。 当我们试图变得太聪明时，我们会迫使用户学习新的模式，这会减慢人们的速度（至少从一开始）。

不要将登录表单分成多个页面

Shopify（我最喜欢的服务中的另一个）烦人地将登录分为三个单独的屏幕。 同样，我可以理解动机：他们不想立即给用户提供很多信息。 在某些情况下，我同意这种模式（例如，在网上商店中，通常需要分几步输入付款信息，交付方式和地址，信用卡信息等）。 但是，为什么要为具有三个字段的表单呢？

• 添加了不必要的步骤以进入系统 ：这仍然是具有三个字段的表单，但是现在用户必须浏览三个屏幕。 当然，它会使人放慢脚步。
• 不适用于密码管理器 ：密码管理器只能填写页面上的一个字段。

怎么办

网页设计师做什么？ 我认为无聊的旧登录表单就可以了。 这是丰收 ：



这是WordPress：



简单，简洁，可预测的设计。 与密码管理器兼容。 一切就绪。 以下是一些注意事项：

• 在单独的页面上进行登录 ：支持人员将能够将客户发送到URL（domain.com/login），而不是提供关于在何处查找登录表单的大量说明。 密码管理器将保存此URL，单击打开的按钮并自动填写字段。
  
• 显示所有必填字段 ：如果需要输入姓氏，请立即显示此字段！
  
• 将所有字段放在一页上 ：输入应该快速，不要不必要的通道扩展到几页上。
  
• 不要幻想 ：可能是这些魔术链接和其他巧妙的登录模板一样，但是您应该考虑Internet上用户的习惯。 依靠这种无聊，可预测的既定做法。

该列表并不详尽。 我没有接触过社交媒体登录或两因素身份验证之类的东西。 如果遇到问题，请表达您对其他不规则模式的观察。