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更多资源、正版授权的伙伴,请咨询【客服】了解

标签:
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!