Axure RP 8 制作登录界面 |
您所在的位置:网站首页 › 登录的流程图怎么做 › 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在浏览器上预览。
附上该原型中的完整元件:
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |