七. 登录效果实现。

1.  增加安全登录选项

使用Dynamic Panel实现两种模式切换效果:

增加安全登录层,含“普通登录”和“安全登录”

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

制作“普通登录”效果:

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

2. 判断逻辑准备

当用户点击“普通登录”时,需要判断当前用户输入的用户名,密码是否正确(对验证码的校验效果相同),所以需要对登录按钮增加Interactions:

判断:当按下登录按钮时,判断Text控件的文本内容是否满足“ID=Cola”,“PW=Cola”?

如果用户名/密码正确,跳转到“登录成功页面”;

如果用户名/密码不正确,出现文案:“用户名名密码错”

注:此处用户名和密码可自定义,达到演示效果即可。

另外,在“会员名”输入框后放置“用户名密码错提示”文案提示,待调用,如图:

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

3. 逻辑实现

选择“普通登录”按钮,点击“Add Case”,养成良好的习惯,建议编辑每个Case名称,再点击“Add Condition”,如图:

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

当变量“ID”和“PW”同时满足条件时,如图:

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

当前页面打开“登录成功页面”

Axure,Axure RP,Axure教程,Axure案例,Axure例子,原型设计,产品设计,产品原型设计软件,Axure设计分享,产品经理

********************************************************************************

* 更多详细内容参见源文件Axure案例使用Axure模拟阿里软件平台登录.rp *

* 也可打开已经输出的页面“Axure案例使用Axure模拟阿里软件平台登录”演示页面 *

********************************************************************************

注:由于本期教程制作时间跨度过大,加上我记性不太好,导致教程内容和输出文件有不符之处,请大家谅解。最终内容以源文件及输入页面为准。

在后期的教程中,我会缩短教程篇幅,避免此类问题发生的同时使教程更具可读性。

另外在察看输出页面的时候如有疑问或拍砖讨论,请点击右上方的“e网打进”对话框,一般我都会在线

相关文章:

2009年6月8日    Axure教程|使用Axure模拟阿里软件平台登录和跳转(一)

2009年6月9日     Axure教程|使用Axure模拟阿里软件平台登录和跳转(二)

2009年6月12日   Axure教程|使用Axure模拟阿里软件平台登录和跳转(三)

2009年6月12日   Axure教程|使用Axure模拟阿里软件平台登录和跳转(四)

Posted from Hangzhou, Zhejiang, China.