登录页面——请不要这么设计

本文翻译自： http://bradfrost.com/blog/pos...

原文作者：Brad Frost

译文原地址：https://weyunx.com/2019/03/17...

随着 1Password 以及 Chrome 的密码管理越来越普及，有些网站的登录页面的弊端就显现出来了，本文就来总结一下有哪些不好的设计，同时来看一下如何改进。

首先网站开发人员需要明白的是用户是怎样去登录他们的网站，然后基本的一个原则就是简单、直接、不突兀以及适配密码管理器。

让我们先看几个例子吧：

不要这么做

下面是几个反例，我认为需要避免的：

不要弹出登录页面

Hertz 以及它一系列的网站使用的是弹出窗口或弹出层来跳转登录页面，这样会有如下两个问题：

• 额外的登录步骤 - 「1.点击菜单按钮，2.选择登录，3.填写信息」。以往的用户可以直接通过搜索、历史记录、书签、密码管理器等来直接跳转，进而填写登录信息，只需要 2 步。
• 登录页面没有链接 - 这对客服来说是致命的，因为他们需要提供一系列的操作介绍来指引用户如何登录，这比直接提供一个登录链接麻烦的多。同时这也让密码管理器无法自动填充，毕竟登录页面是隐藏的。

不要隐藏输入项

Delta 官网的登录页面将 “Last Name” 输入项给隐藏了，原因应该是为了让页面看起来更简洁。但问题是这个输入项是必输的，而因它的隐藏又导致了密码管理器不能自动填充。

MacOS 的登录也隐藏了密码输入项来简化 UI，这可能是为了鼓励使用 TouchID，但是这同样可能会给用户带来一些使用上的困惑。

不要异想天开

这种使用邮箱验证码登录的方式先后在 Slack 、Notion 上出现。这种方式完美的避免了忘记密码的烦恼，但是：

• 这种方式及其愚蠢 - 「1、输入邮箱。2、打开邮箱应用。3、打开收件箱。4、寻找邮件。5、打开邮件。6、拷贝密码。7、回到登录页面。8、粘贴密码。9、登录。」可见步骤之繁琐。
• 不适配密码管理器
• 强制用户去适应新的习惯 - 用户长久以来通过潜移默化的形式来学习例如登录、导航、退出等操作。不是说不应该去创新，但是我们需要明白用户进入我们的网站或产品的时候，他们对网络操作已经有了自己的一个认知和习惯，我们不能自作聪明，让他们去熟悉新的流程，况且这操作流程更繁琐了。

不要将登录拆分为多个页面

Shopify 有个烦人的操作就是会把登录页面分成两页。当然，本意是好的：他们想让页面更简洁，但是这种方式其实更适合特定的场景，比如电商的某些页面，像账单信息、物流信息、配送地址和信用卡信息这些，显然如果用在登录页面上就有些用力过猛了：

• 需要额外的步骤来登录 - 同样的三个输入项的登录页面，结果用户需要三个页面才能完成，显然多此一举。
• 不适配密码管理器

这么做

所以，好的登录页面应该是什么样的呢？我认为经典的登录页面就是最好的，如：

以及:

你看，简单明了不花哨，完美适配密码管理器。

OK，让我们看一下结论：

• 一个可以直接跳转的登录页面
• 展开所有的输入项
• 一个页面搞定
• 不要异想天开，经典就好