网站设计之登录界面设计要点


网站设计之登录界面设计要点


网站设计 , 每个细节都是需要注意的 , 对于会员系统网站来说 , 我们的登录界面设计这块是比较重要的 。很多人觉得登录界面设计比较简单 , 这确实不假 , 但是要想设计的好就必须在安全性和可用性之间找到平衡点 , 好的界面是可以一下子吸引住我们用户的 。小编认为 , 登录界面设计要考虑的要点其实也是不少的 , 用户体验度这块是最关键的 。关于登录界面设计要点 , 小编整理了一些 , 我们一起来往下看看:
一、要简单而且容易操作


相较于以前那种复杂的登录 , 我们现在网站登录界面简单了不少 , 以前可能只能通过登录名和密码登录 , 现在可以通过一些其他的方式直接登录 , 比如说微信、手机号、qq等 , 即使忘记了用户名我们也是可以直接登录的 , 简单容易操作了很多 。


二、占位符和标签


网站设计 , 登录界面占位符和标签的设置也是比较重要的 。占位符在表单中的展现形式应该如何选 , 是一件非常棘手的事情 。从设计的角度上来看 , 占位符很不错 。但是要用好并不容易 , 尤其是需要兼顾到可访问性和表单那自动填充的时候 。如果你使用HTML来实现占位符 , 那么当用户输入的时候 , 占位符会消失 , 其结果是有的用户此刻会忘记他真正要输入的是什么 。更麻烦的是 , 如果你的浏览器会自动填充之前的信息的话 , 那么你永远看不到这个地方占位符 。


通过检测表单内容是手动输入还是自动填充 , 我们之前成功地规避了这个问题 , 当其中内容是浏览器自动填充之时 , 会有标签说明输入内容 , 如果是手工输入 , 则不会显示标签 。不过 , 后来我们发现 , 用户在提交之前喜欢有标签提醒 , 确保他们输入的内容是对的 , 这也就意味着 , 他们希望输入过程中 , 标签一直存在 。


所以 , 我们最终想到了一个优雅的解决方案 , 使用单独的元素来做占位符的标签 , 当用户输入的时候 , 占位符标签会自动移出输入框 。


三、安全特性需要考虑


网站设计 , 登录界面安全性也是我们需要考虑的 。最开始我们使用代码来控制这些标签和占位符的时候 , 并不复杂:每当表单中内容改变的时候 , 检测其中的内容;如果内容为空 , 占位符标签在表单中显示;如果不为空 , 那么就移动出去 。当页面刚刚加载的时候 , 系统会自动检测若干次 , 检测浏览器是否有自动填充内容 。


但是即便如此 , 依然存在问题 。Chrome浏览器中有一项安全特性 , 这一特性的特殊之处在于 , 它并不会将之前保存的帐号和密码字段直接填充到表单中 , 哪怕它们看起来填进去了(当然 , 用户通常也不希望浏览器自己填充内容之后还提交上去) , 只有当用户和页面进行交互(也就是提交内容的时候) , 浏览器中的表单才能检测到被填充了内容 。所以 , 浏览器的这一设计使得我们的标签会以这样的形式展现出来:

推荐阅读