Axure RP 8 制作登录界面

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

Axure RP 8 制作登录界面_第1张图片

 

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

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

Axure RP 8 制作登录界面_第2张图片

 

 

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

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

Axure RP 8 制作登录界面_第3张图片

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

Axure RP 8 制作登录界面_第4张图片

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

 

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

Axure RP 8 制作登录界面_第5张图片

 

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

Axure RP 8 制作登录界面_第6张图片

 

6、制作登录按钮的提示

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

Axure RP 8 制作登录界面_第7张图片

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

Axure RP 8 制作登录界面_第8张图片

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

Axure RP 8 制作登录界面_第9张图片

效果:

Axure RP 8 制作登录界面_第10张图片

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

Axure RP 8 制作登录界面_第11张图片

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

Axure RP 8 制作登录界面_第12张图片

 

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

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

 

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

Axure RP 8 制作登录界面_第13张图片

 

你可能感兴趣的:(web)