原型设计工具Axure RP案例：设计一个简单的登陆界面

---

Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具， 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格，现已成为设计Web APP的重要工具。

免费下载Axure RP 优惠购买Axure RP

本文将介绍设计一个简单的登陆界面的步骤，完成时输入用户名、密码后点击登陆按钮进行登陆，有以下三种情况： 

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

2.如果用户名或密码错误，则提示“用户名或密码错误”（红色字体）； 

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

---

实现步骤

步骤一、绘制线框图

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

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

所用到的控件清单如下：

控件名	作用	文本内容	标识符	其它属性
Rectangle	装饰底板			底色：灰色
Text Panel	信息提示	默认：登陆窗口	logInfo
Text Panel	信息提示	用户名：
Text Panel	信息提示	密码：
Text Field	输入用户名		userName
Text Field	输入密码		passWord
Button	点击登录	登陆	submitButton

步骤二、设计控件交互

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

2、在弹出的“交互场景属性”对话框中点击“添加场景…”链接；

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

4、回到“交互场景属性”对话框，Step 2中选择动作“Set Variable and Widget value 
equal to Value”，并点击Step 3中的链接；

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

点击Edit text…链接，输入“请输入用户名或密码”，并设置为蓝色；

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

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

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

步骤三、生成原型

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

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

---

想要获得Axure RP更多资源、正版授权的伙伴，请咨询了解

关注慧聚IT微信公众号 ???，了解产品的最新动态及最新资讯