登录界面的最佳实践

假如你的网页需要用户注册/登录，那么一个好的注册/登录界面就非常重要了，尤其是在用户的网络状况不佳，或者使用移动设备，亦或是心情不太好的时候。一个不佳的界面可能会让用户再也不想访问你的页面。

下面就是一个简单的登录界面，它展示了所有的最佳实践需要关注的地方：

那么一个登录/注册界面有哪些地方需要注意的呢？我们一一道来：

使用有意义的HTML

使用下面这些HTML的tag来创建这个界面：<form><label>以及<button>，这些浏览器内建的功能，可以极大的改进可访问性。

使用<form>

你可能会使用<div>，然后在里面使用javascript来控制input的提交。其实最好还是使用原来的<form>元素。这样你的网站对屏幕阅读器或者别的辅助装备就更加友好，而且对旧的浏览器兼容也会好很多，设置在js失败的情况下也能够使用。

使用<label>

使用<label>来label一个输入：

<label for="email">Email</label>
<input id="email" …>

这样做有两个原因：

• 当点击lable的时候，它会自动聚焦到他的输入。把label和输入关联是使用它的‘for’属性，可以设置成管理输入的name或者id。
• 屏幕阅读器会阅读这个文本

不要在input label中使用占位符，人们很容易忘了他们输入的是什么，究竟是email的地址，电话号码还是一个用户id。最好把你的label放在输入的上面，这样在移动设备以及桌面的体验就一致了。而且label和输入都可以得到所有的宽度，你不需要调整label和输入的宽度，如下图所示：

使用<button>

对按钮来说，使用<button>元素。因为它提供了很多特性和内置的表格提交功能，而且可以有很多不同的风格。我们没有理由选择别的<div>等来实现类似的功能。

另外对提交按钮来说，确认它究竟是做什么，比如是创建account和登录，而不是提交或者开始等。

确保正确表格的提交

要协助密码管理理解一个提交的表格，有两种方法可以做这个：

• 跳转到一个不同的页面。
• 使用History.pushState()或者History.ReplaceState()来模拟跳转，当然同时移除密码表格

在使用XMLHttpRequest或者fetch请求之后，确保登录是成功的，就需要把这个登录界面从DOM中移除，这样就可以很成功地像用户显示操作的结果。

当用户点击了之后就禁用登录按钮，因为很多用户在完成点击后还是会点击很多次，哪怕你的网页反应很快。

而另外一个方面，不要在用户没有完成输入的时候就禁用登录按钮，比如说用户没有输入密码就不让它点登录按钮，因为有时候用户自己也不知道哪里没有输入，然后就不停地在尝试。或者最起码，你禁用按钮的同时告诉用户为什么会禁用。

不要重复输入

有些网站让用户输入email和密码两次，这有可能会减少错误，但是会增加大多数用户的输入负担。尤其是很多时候浏览器自动填充了这些信息，那么输入两次就更没有意义了。更好的方式就是让用户确认他们的邮箱（反正你也肯定需要这么做），然后提供一个很方面的重置密码的方式就行。

充分利用元素属性

浏览器有很多内置的特性可以使用各种元素的属性。

帮助用户更快地开始

加一个autofocus属性到你注册表格的第一个输入，这样可以让用户知道从哪里开始，至少在桌面应用我们可以这么做，这样用户不需要点击输入框，然后再开始输入。

保护密码–但是在用户想要看到的时候可以让他们看到

密码的输入需要使用type=”password”，这样就可以隐藏输入的密码，同时也让浏览器知道输入的是密码。同时，你也需要加入显示密码的图标，这样用户可以点击它来看到自己输入的密码是多少，当然同时也不要忘记加入一个“忘记密码”的链接，如下所示：

给移动用户一个正确的键盘

使用<input type=”email”>，这样移动用户就会跳出正确的键盘，并且会使能浏览器基础的内建email地址的验证，而不需要加入额外的js代码来做这件事。

假如你想使用电话号码而不是邮箱，那可以这样设置：<input type=”tel”>，这样就会跳出电话号码的键盘。当然你还可以使用inputmode=”numeric”来设置数字的输入。

防止移动设备的键盘挡住登录的按钮

假如你不小心，那么移动设备跳出的键盘可能会挡住输入，或者会挡住注册/登录按钮，用户甚至会因此而放弃登录。

所以，尽量把email/phoe和密码输入以及登录按钮防止你的页面最上方，把别的内容放到下面：

在多个设备上进行测试

你需要在多个设备上进行测试，并进行相应的调整。

考虑使用两个页面

有很多网页（比如amazon）他们规避这个问题的方法就是把email/phone和密码的输入放到了两个页面，这个方法同时也简化的流程，用户一次只要输入一个内容：

一般来说这个都是使用js代码进行控制，当输入邮箱的时候就把密码的输入界面隐藏了，然后再隐藏另外一个，实现也不复杂。

帮助用户避免重复输入

你可以使用浏览器来记住输入的内容，然后自动进行填充，这样用户就不要重复输入邮箱和密码了，毕竟他们真的很容易输错。

这里有两个方面需要注意：

• Autocomplete, name, id和type属性可以帮助浏览器理解各个输入的角色， 这样就有助于自动填充。现在的浏览器也要求输入有一个固定的name或者id值而不是随机产生的，并且要求它是在一个<form>中，并且有submit的按钮。
• autocomplete属性可以帮助浏览器使用保存的数据自动填充

对email的输入使用autocomplete=”username”，因为username是浏览器中密码管理进行识别用户名的部分，你可以使用type=”email”来表明这是一个邮箱。

对于密码输入来说：

Autocomplete=”new-password”表示这是一个新的密码。使用autocomplete=”current-password”来表示使用一个存在的密码。所以：

对注册界面来说：

<input type="password" autocomplete="new-password" …>

对登录的界面来说：

<input type="password" autocomplete="current-password" …>

支持密码管理

不同的浏览器其实对邮箱的自动填充和密码建议是不同的，不过总得效果是类似的。比如在Safari11以上的桌面系统中，密码管理器会显示，并且生物验证会跳出来（指纹或者面部识别）：

而chrome则会显示可以选择的邮箱列表，然后根据它自动填充密码：

使用浏览器来建议强密码

现代浏览器支持强密码建议，下面是Safari的建议：

使用浏览器的内建密码非常方便，用户不需要记住密码是什么，直接使用自动填充就可以了。当然最大的问题就是没有办法在不同的平台之间分享密码。

帮助用户理解哪些部分是必须输入的

在email和密码域都加入required的属性，这样浏览器会自定跳到并且聚焦到没有输入的数据处，这里不需要任何javascript代码的处理：

空间的设置

很多时候默认的大小是不够的，我们需要注意下面这些问题：

确保输入和按钮足够大

默认的输入框大小和按钮大小都太小了，哪怕在移动设备上都比较小。

Android的建议大小是7-10mm，Apple的建议是48*48px，W3C的建议是最少44*44 CSS pixels。基于这个建议，再最少在移动设备上加上15px的padding，或者桌面设备上加上10px的padding。

为拇指而设计

拇指其实比食指要大很多，所以设计的时候要考虑好间隔，而且现实中很多人都会使用拇指来操作，所以设计的时候要考虑好这个方面。

让文本足够大

默认的输入字体以及按钮字体其实都太小了，尤其在移动设备上：

因为不同平台的浏览器字体有很大不同，所以很难说那种大小的字体最好。有一个调查说13-16pixels的字体是最好的（桌面设备）。

输入之间留足够的距离

在输入之间留下足够的空间，这样不会因为误点击触碰到别的输入框。换句话说，最好留下一个手指的宽度。

确认输入能够清晰地显示

默认的输入大小是很难看清楚的，在很多设备上很难看清楚，比如Android平台的chrome浏览器。

同样padding和border也是这样，在一个白色背景上，一个比较好的规则是使用#ccc或者darder。

使用浏览器内置功能来做无效输入的判断

浏览器支持form的判断，只要设置好相关的type就可以了。当你提交一个不合法的输入的时候，浏览器会给出警告：

你可以使用CSS选择器中的:invalid来高亮invalid的数据，使用:not(:placeholder-shown)来避免选择没有内容的输入：

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

有必要的时候使用js

显示密码

我们前面提到，你需要假如一个图标，这样就可以显示密码。这个功能并没有内置的功能可以实现，所以你需要通过结合Javascript代码来实现：

下面就是一个示例的代码：

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

下面是CSS让这个按钮看起来像一个文字：

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size); 
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

下面是用来显示密码的JS代码：

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

最终的结果如下所示：

上面就是我们关于登录界面设计的一些建议，希望大家能从中学到一些内容。