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

 

阅读更多

没有更多推荐了,返回首页