Axure实例演示—登录界面

                                 实例演示 ——登录界面                                                 

                                             

 

①画原型

用Axure画一个简洁的登录页面,包括用户名(标签名为txtUserName)和密码(标签名为txtPassword)的输入框和登录按钮(txtSubmit)三个元素即可。

以上界面只是简单的拖曳元件即可完成。

交互设计:

①当用户文本框和密码文本框获得焦点时,则显示输入状态,删除提示文字(请输入密码,请输入用户名);如果失去焦点,且没有输入任何文字则显示提示文字。效果如下:

做法:选择用户输入框;单击获得焦点事件添加一个用例。

单击设置变量/部件值,选择打开设置值编辑器。

设置如下:部件文字  (txtUserName)等于值(空),即当用户名输入文本框获得焦点时置空。

当文本框失去焦点时,如果用户没有输入信息,则仍显示提示信息(请输入用户名、请输入密码):

首先添加失去焦点事件的用例:

添加条件:当用户没有输入任何值时:

继续设置部件值(请输入用户名)

②输入正确和错误的判断及提示

输入正确提示:

制作动态面板,设置其为隐藏:

单击SIGNIN,添加OnClick(点击时)用例,添加条件如下(添加方式看上文)

效果展示:

错误提示的方式跟上面的正确提示的方式类似,只是条件不同,条件为:

效果为:

 

       以上是简单的登录界面的实现,通过继续学习,我会逐步更新自己所学。

原文地址:https://www.cnblogs.com/jyh317/p/3179359.html