登录界面的最佳实践

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

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

Sign in 
Email 
Password 
Show password 
Eight or more characters, witn at least one lowercase and one uppercase letter. 
Sign in 
sign-in-form 
Share 
View Source

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

使用有意义的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和输入的宽度,如下图所示:

Sign in 
Sign in 
Label and input width is limited when both are on the same line.

使用<button>

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

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

确保正确表格的提交

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

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

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

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

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

不要重复输入

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

充分利用元素属性

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

帮助用户更快地开始

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

. and X + 
C https:J/siwWform.gRev.mR 
Sign in 
in 
Autofocus provides clear visual focus on desktop.

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

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

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

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

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

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

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

Sign 
Sign 
qwe r i • o' p

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

t'y•u i' op 
d f g hik

在多个设备上进行测试

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

Sign in 
• oaaaaoaa 
aaaoaoo 
aaaaa 
Sign in 
aaoaaomaa 
goaaoaoaa 
-.JPaaaoa 
Sign in 
oaaoana 
The Sign in button: obscured on iPhone 7 and 8, but not on iPhone 11.

考虑使用两个页面

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

o z xcv b n 
Two-stage sign-in: email or phone, then password.

一般来说这个都是使用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则会显示可以选择的邮箱列表,然后根据它自动填充密码:

Sign 
Autocomplete sign-in flow in Chrome 84.

使用浏览器来建议强密码

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

dn 
dn u6!S 
dn u6'S

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

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

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

Sign in 
Email 
foo@example.corn 
t V uiO p

空间的设置

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

确保输入和按钮足够大

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

Machine generated alternative text:
unstyled sig nin for m 
•e C https://unstyled-form.glitch.me 
Password 
Sign in

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

为拇指而设计

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

让文本足够大

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

Machine generated alternative text:
Unstyled signin form 
https://unstyled-form.glitch.me 
Email too@example.com 
Password 
Sign in 
4 
q 
w 
e 
o 
asdfghjkl 
Oz x c: v b n m €3

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

输入之间留足够的距离

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

确认输入能够清晰地显示

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

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

Machine generated alternative text:
Sign in 
in 
4 
a s d f g hjkl 
p

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

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

Machine generated alternative text:
Sign in 
Pa—d

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

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

有必要的时候使用js

显示密码

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

Machine generated alternative text:
Forgot password ? 
Next

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

<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.');
  }
}

最终的结果如下所示:

Machine generated alternative text:
Signin•form.glitch.me 
Sign in 
Email 
foo@example.com 
password 
Show password 
Sign in 
password 
aaaoooo 
Eight rue charaMers, at one bwercase and btter 
Sign in

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *