本文主要介绍使用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微信公众号 了解产品的最新动态及最新资讯
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！