×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 网站登陆界面设计详解

网站登陆界面设计详解

2015-06-291022分享

   对于一个会员系统的网站来说,网站登陆界面设计是很重要的。登陆界面的设计说难不难,说容易也不是那么轻松就可以做好的,要在安全和可用性之间找到登陆界面的平衡点,还是需要相当的经验来支撑的。今天梦创义小编就来给大家说说登陆界面的设计上细致入微,给大家参考~

   首先必需要考虑的就是用户体验,提升登陆界面的用户体验并没有看起来那么简单。当你让登陆界面越发漂亮、直观、快速且好用的同时,你还需要让这个过程不那么简单,不会被黑客或者其他心怀不轨者轻易入侵。通常,我们打开登陆界面,并不是为了查看登陆表单本身,而是由此登陆账户。表单本身仅仅只是获取个人信息的一个手段,而非目的。从这一点来看,登陆体验应该轻松而简单,一切设计都应尽力降低干扰,剪除障碍,让你更轻松完成登陆这一任务,而不用进行任何多余的操作。

网站登陆界面设计详解

一.简单易操作

   由于双重认证机制的加入,登陆过程比之前复杂了不少。比起之前仅需邮箱和密码的传统登陆方式,现在的登陆方式并非简单的一次输入决定登陆与否,新增的步骤使得登陆成了由几步构成的新流程:明确帐号是否有双重认证的相关设置,而用户选择的是哪种验证方法。在许多流程中,还应当包含使用备用的设备/联系方式,以及紧急备用代码。所有的这些因素我们必须完全考虑到,但是又不能让它们成为登陆的负担,让用户感到费力。


二.占位符和标签

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

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

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

网站登陆界面设计

三.尴尬的安全特性

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

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


四.验证和邮箱纠错

   如果你使用的界面比较小,比如移动设备,非常容易打错登陆邮箱和用户名,直到提交的时候才收到系统提醒,输入的密码或者帐号有误。

Mailcheck这样的邮箱名称纠错工具,能纠正绝大部分的邮箱地址输入错误,极大的降低了登陆输入错误率。我们在直接加入了这一组件这样用户体验会更好一些。

本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:http://www.mcykj.com/show-19-243-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

北京网站制作公司:常见的网页设计技巧
师通常要扮演多种角色,并且要掌握如何构建一个有效实用的网站布局知识……
网站首页设计:首页设计的基本原则
网站设计中需要注意到很多的问题,其中有一个关键问题,那就是网站首页……
网站建设论坛:常用系统及外链技巧
而且,随着网络技术的发展,建设一个论坛已经不再是什么难事。常用的网……
网站制作报价:为何差别那么多
如果忽视了自身的网站建设就等于失去了市场,而现在一些打算进行企业网……
网站建设计划书:应该如何建设网站
,确定网站规模、投入费用,进行必要的市场分析等。只有通过网站建设计……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.