Axure RP案例教程-系统登陆

     快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮

助用户体验专家、设计师、工程师创造更加有用、可用的产品。

 

一、Axure RP简介

     Axure的完整英文名是AxureRP Pro。Axure的英文发音是Ack-sure，RP 是RapidPrototyping的缩写，意思为快速原型设计；Pro是―Professional的缩写，意思是专业版。Axure RP Pro是美国AxureSoftware Solution公司的旗舰产品，是一个让负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站线框图、原型、规格说明书的专业快速原型设计工具。Axure所针对的专家包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。

     在Axure中设计线框图和原型会使你更加高效；可以让团队成员一起体验你的设计；向用户演示和交流以确认用户需求；自动产生规格说明书；让团队进行多人协同设计和对版本进行管理控制；等等。  

 

二、Axure工作环境介绍

     Axure的可视化工作环境可以让你轻松快速的以鼠标拖曳的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单链接和高级交互。在线框图的基础上，可以自动生成HTML原型和Word格式的规格说明书。

 

以下是AxureRP工作环境的简要说明：

 

三、实战篇-系统登陆界面  

案例描述

这是一个较为简单的登陆界面，输入用户名、密码后，点击登陆按钮进行登陆校验：

1.如果未输入用户名或密码，则提示―请输入用户名和密码‖，蓝色字体；

2.如果用户名或密码错误，则提示―用户名或密码错误‖，红色字体；

3.如果用户名和密码都匹配，则提示―您好，【用户名】‖，黑色字体。

 

实现步骤

步骤一、绘制线框图

1、打开Axure软件，新建一个RP文件；

2、拖动控件面板中的控件到线框图面板中，绘制登陆界面如下图：

 

所用到的控件清单如下：

控件名     作用      文本内容    标识符  其它属性

TextPanel  信息提示  默认：登陆窗口 frmLogin 

TextPanel  信息提示  用户名：    

TextPanel  信息提示  密码：    

TextField  输入用户名userName  

TextField  输入密码  PassWord  

Button     点击登录  登陆  cmdLogin  

 

步骤二、设计控件交互

1、选中登陆按钮，在控件交互和注释面板中鼠标双击onClick事件；

 

 

2、在弹出的―交互场景属性对话框中，点击添加条件这个链接；

 

 

3、在弹出的―条件创建对话框中，添加条件如下：

 

 

4、回到―交互场景属性对话框中，Step2中选择动作设置变量和控件值，并点击Step

3中的链接；

 

5、在弹出的―设置变量和控件值‖对话框中，设置如下：

 

点击编辑文字链接，输入请输入用户名或密码，并设置为蓝色；

 

6、确定和关闭所有对话框，这时控件交互和注释面板如下：

 

 

 

 

以上我们实现了第一个场景：如果未输入用户名或密码，则提示―请输入用户名和密码，蓝色字体；

 

接下去，我们实现第2、3个场景，其步骤和实现场景1类似，只是要注意各个场景之间是―Ifelse关系。最终控件面板上的场景、条件、动作如下：

 

步骤三、生成原型

1、点击主菜单―生成->原型(F5)，选择要生成的原型地址，确定后就可以在浏览器中查看原型了。

2、输入用户名和密码，点击登陆按钮，进行原型体验。