基于AxureRP的简易注册登录页面设计

注册登录是最常见的页面了,基本上所有会员制的应用里面都会包含这部分。简易的注册登录页面只是包含了一些必备的基本元素,与应用的要求无关。看似简单,其实里面的设计细节很多,如密码输入框要遮盖显示,注册页面还要验证确认密码,验证密码的设置强度等等,在交互设计师眼里,简单的输入框会有很多提升用户体验的设计细节在里头,这里结合我自己的经验,简单的说一下常见的注册登录页面的设计注意点。

简单的登录页面包含用户名,密码这两项,有的还会有验证码,如下图:

1、用户名输入框要有输入内容的格式提示,提示用户输入诸如邮箱、手机号等;再则鼠标聚焦之后要消除提示,若没有填写内容,则失去焦点的时候还要恢复提示信息;如果用户名要求就是邮箱的话,最好有邮箱格式验证和输入的相关性提示,如新浪微博那样输入一个字符出现一长串的各式邮箱格式提示,并且点击邮箱提示可以代替输入。

用AxureRP来设计制作以上交互效果的原型的话,失去获取焦点使用OnFocus和OnLostFocus事件,提示信息可以默认设置。

2、密码输入框要能遮盖显示输入内容,可以是点号或者星号,AxureRP里面有设置点号显示的功能,另外就是在密码输入框旁边要有“忘记密码”的密码索回入口,方便用户找回密码。

AxureRP中输入框的右键菜单里面有遮盖显示的设置,可以直接使生成原型后的页面上的输入框变成遮盖显示。

3、验证码输入框旁边要有验证输入是否正确的功能,即输入校对功能,以便用户快速调整输入;旁边要有更换验证码的入口,方便用户更换看不清楚的验证码。

AxureRP中没有验证码的功能组件,这里可以用图片组件来加载一个验证码的显示图片,如果还要给“换一个”增加交互效果的话,这里要用动态面板来制作多个页面显示;验证是否正确就是用动态面板制作正确和错误两个页面,然后通过OnLostFocus事件来判断所输入的内容是否是“2342”。

4、登录页面上一定要有注册的功能,方便未注册的用户注册账号,登录注册是一对的,但是注册页面可以没有登录的功能,不过现在很多设计都是也有登录功能的,如新浪微博的注册页面。

5、要允许用户犯错,并给用户反馈,但提示信息要尽量准确,是用户名输入错误还是密码输入错误,最好能分开提示,而不是简单的提示“用户名密码错误”,方便用户快速的定位并解决问题。

6、要有cookie记忆功能,允许用户设置一段时间内能自动登录,这个为可选项,视产品安全性要求来定是否默认勾选。

简单的注册页面包含用户名,密码,确认密码,邮箱等必备项,如下图:

1、用户名输入框也要有输入内容的格式提示,提示用户输入诸如邮箱、手机号等应用支持的注册格式;再则鼠标聚焦之后要消除提示,若没有填写内容,则失去焦点的时候还要恢复提示信息,并且要有用户名输入格式出错的提醒;要有用户名输入的即时验证,即验证当前输入用户是否合法,是否已被注册,方便用户修改当前注册用户名;如果用户名要求就是邮箱的话,最好有邮箱格式验证和输入的相关性提示,如新浪微博那样输入一个字符出现一长串的各式邮箱格式提示,并且点击邮箱提示可以代替输入。

验证是否已注册的功能也可以放在OnLostFocus事件里面来做,也可以放在OnKeyUp事件里面来做,取决于所判断的条件和触发的时机,从设计角度来说应该是用户输入完毕即做判断,因此OnKeyUp事件更符合一些。

2、密码输入框也要能遮盖显示输入内容,可以是点号或者星号;最好有密码强度提示,告诉用户要设置一个更好的密码;另外有的地方也有密码格式验证,有些字符会不支持,这里也要一并做出提示。

密码强度判断是利用动态面板来显示弱、中、强三个状态(当然这里可以有多种表示方式,这里只是演示用的,就简单的用字来代替,有兴趣的朋友可以尝试下别的提示效果),这三个状态的判断在AxureRP里无法实现真的去判断字符组合,但是可以通过判断字符长度来做,字符长度越长,密码强度越强,演示的时候只要演示出效果就可以了。另外这里最好直接判断输入内容的长度,而不要先将输入内容赋值给一个变量,再去判断变量的长度,经本人测试,后一种办法无效。

3、确认密码输入框也要能遮盖显示输入内容,并且在输入完毕之后有校验的功能,即与前面输入的密码是否一致匹配,并给出提示。
这里就是判断输入内容是否一致就可以了,只是更改了判断条件,动作还是一样的。

4、注册邮箱输入框首先要有格式验证,即常规的电子邮箱格式,其次最好有输入的相关性提示,如新浪微博那样输入一个字符出现一长串的各式邮箱格式提示,并且点击邮箱提示可以代替输入。

这里使用到了提示效果,这也是用动态面版来实现的,默认设置隐藏,当输入一个字符后开始显示提示,然后根据输入内容显示,用的是OnKeyUp事件,AxureRP里好像无法实现点击提示代替输入的效果,有时间研究一下,应该是可以做到的。

5、验证码输入框的要求同登录页面的。

6、现在的设计趋势是注册页面上也有登录的功能,特别是邀请注册页面,因为很有可能被邀请的对象已经注册过了。

以上是个人对简易注册登录页面设计上的一些看法,可能还不是很完整,如大家有补充的话,可以回复提出,也可以至IT民工论坛—案例分享板块提出。详细的功能演示我用AxureRP设计出来了,大家可以查看演示文件。

其他的可参考《AxureRP案例–注册登录功能》。
比较详细的交互设计细节可参考:http://cued.xunlei.com/log029

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“基于AxureRP的简易注册登录页面设计”3 条评论

commenter

感谢博主的精彩分享,顶起~ http://taobao.057902.com

commenter

博主的文章很吸引人,还会常来的.支持博主,希望能和你交上朋友!

commenter

AxureRP并不仅仅可以用来做原型设计,也可以用其来研究交互设计的方法方式。