Axure实例演示—登录界面

    　　　　　　　　　　　　　　　　　　　　　　　　　　　　 实例演示 ——登录界面                                                 

                                             

 

①画原型

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

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

 

 

交互设计：

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

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

 

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

设置如下：部件文字  （txtUserName）等于值（空），即当用户名输入文本框获得焦点时置空。

当文本框失去焦点时，如果用户没有输入信息，则仍显示提示信息（请输入用户名、请输入密码）：

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

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

继续设置部件值（请输入用户名）

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

输入正确提示：

制作动态面板，设置其为隐藏：

单击SIGNIN，添加OnClick（点击时）用例，添加条件如下（添加方式看上文）

 

效果展示：

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

 

效果为：

 

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