Axure RP 8 制作登录界面

1、打开Axure RP 8软件，左侧元件库内拖出一个矩形Bg和一个文本标签BgText，做背景面板

 

2、添加两个文本标签：NameText、PwdText并修改了标签显示内容；

再添加两个输入框:NameInput01、PwdInput01，（注：点击密码输入框，在右侧的属性中将【类型】选为密码，这样输入密码时就不会显示）

 

 

3、再拖出两个连接按钮：忘记密码ForgetLink、注册RegLink。

• 给【注册】添加链接，点击注册在右侧属性中选择【鼠标单击时】-【添加用例】

• 修改用例名-点击【添加条件】-在左侧的链接下【打开链接】选择任意项-在右侧选择需要连接的页面

• 【忘记密码】的链接也类似以上步骤完成

 

4、添加一个复选框：记住用户名和密码RemberBtn；

 

5、添加一个提交按钮：登录LogBtn

 

6、制作登录按钮的提示

• 添加用于显示错误信息的文本标签NameTip“用户名不能为空”、PwdTip“密码不能为空”，在右侧【样式】栏内勾选【隐藏】，将提示文本隐藏起来

• 与上述的添加链接步骤相似，点击登录按钮，在右侧【属性】栏-【鼠标单击时】-【添加用例】
• 修改用例名-点击【添加条件】-选择输入用户名的元件-点击【确定】

• 在左侧元件下选择【显示】-右侧选择刚刚隐藏的文本提示-点击确定即可

效果：

注：当错误提示后，用户要再次输入时，错误提示应消失，否则会影响用户体验。

可以进行以下操作：点击标签文本框NameInput01-右侧属性栏内选择【获取焦点时】-【添加用例】-左侧选择【元件 隐藏】-选择要隐藏的元件-完成

 

7、其他的登录判断显示可以根据具体的用例进行设置

8、完成，按F5在浏览器上预览。

 

附上该原型中的完整元件：