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

本文翻译自： 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 上出现。这种方式完美的避免了忘记密码的烦恼，可是：

• 这种方式及其愚蠢 - 「一、输入邮箱。二、打开邮箱应用。三、打开收件箱。四、寻找邮件。五、打开邮件。六、拷贝密码。七、回到登陆页面。八、粘贴密码。九、登陆。」可见步骤之繁琐。
• 不适配密码管理器
• 强制用户去适应新的习惯 - 用户长久以来经过潜移默化的形式来学习例如登陆、导航、退出等操做。不是说不该该去创新，可是咱们须要明白用户进入咱们的网站或产品的时候，他们对网络操做已经有了本身的一个认知和习惯，咱们不能自做聪明，让他们去熟悉新的流程，何况这操做流程更繁琐了。

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

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

• 须要额外的步骤来登陆 - 一样的三个输入项的登陆页面，结果用户须要三个页面才能完成，显然画蛇添足。
• 不适配密码管理器

这么作

因此，好的登陆页面应该是什么样的呢？我认为经典的登陆页面就是最好的，如：

以及:

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

OK，让咱们看一下结论：

• 一个能够直接跳转的登陆页面
• 展开全部的输入项
• 一个页面搞定
• 不要异想天开，经典就好