Axure RP6 学习笔记（2）

 

学习资料【Axure 快速原型设计Axure Rapid Prototyping 作者：陈良泳】

    以学习的习惯，先来一个例子~~~

第一个实例  简单登陆界面

案例描述 

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

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

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

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

实现步骤

  步骤一、绘制线框图 

1、 打开 Axure 软件，新建一个 RP 文件，右键选择rename然后修改【home】为【Axure第一个例子】； 

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

所用到的控件清单如下： 

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

 

步骤二、设计控件交互

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

2、 在弹出的“交互场景属性”对话框中，点击“添加场景（Add case）…”这个链接，修改case description为输入验证；

3、 在弹出的“条件创建(Create condition)”对话框中，选择

      if text on widget username equals ""
     or text on widget password equals ""

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、 输入用户名和密码，点击登陆按钮，进行原型体验。

 

技巧：

   1. 目前的密码输入的是明文，如果要改为密文的，右键-》Edit Text Field-》Mask Text (Password Field)

 

欢迎交流: xqdd2004@163.com