Tagged: 登录页面

0

登录界面的最佳实践

假如你的网页需要用户注册/登录,那么一个好的注册/登录界面就非常重要了,尤其是在用户的网络状况不佳,或者使用移动设备,亦或是心情不太好的时候。一个不佳的界面可能会让用户再也不想访问你的页面。 下面就是一个简单的登录界面,它展示了所有的最佳实践需要关注的地方: 那么一个登录/注册界面有哪些地方需要注意的呢?我们一一道来: 使用有意义的HTML 使用下面这些HTML的tag来创建这个界面:<form><label>以及<button>,这些浏览器内建的功能,可以极大的改进可访问性。 使用<form> 你可能会使用<div>,然后在里面使用javascript来控制input的提交。其实最好还是使用原来的<form>元素。这样你的网站对屏幕阅读器或者别的辅助装备就更加友好,而且对旧的浏览器兼容也会好很多,设置在js失败的情况下也能够使用。 使用<label> 使用<label>来label一个输入: 这样做有两个原因: 当点击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...