axure高级功能.ppt

Axure高级功能纲要• 逻辑条件 • OnChange事件 • OnKeyUp事件 • OnFocus事件 • 变量 • OnPageLoad事件逻辑条件• 概述1. 逻辑条件演示2. 逻辑条件3. 建立条件逻辑条件演示•新建一个工程，包括登 录页面和用户账户 页 面； •在登录页面，添加用户 名输入框、密码输入框 、登录按钮、动态面板 ，各个组件的位置见左 图；•右键密码输入框，选择 Edit Text Field -> Mask Text(Password Field)，把密码输入框 的文字修改成密码类型 ；逻辑条件演示•把用户名输入框标记(Label)为 UserName Field； •把密码输入框标记为Password Field； •把动态面板标记为Error Panel ； •把按钮标记为Login Button，并 输入显示文字”Login”；•在动态面板添加一个状态state ； •打开状态编辑页面，放置Text Panel组件，并写入”This username and password is invalid. Please try again.” •在主页面，右键动态面板，把 面板设为隐藏。

逻辑条件演示•点击Login Button，在 Interactions添加一个 OnClick Case； •在Case属性窗口，Step 1 下方，点击Add Condition 链接；•在弹出的Condition Builder 窗口，设置此Case的条件 判断； •选择判断对象类型为：text on widget逻辑条件演示•选择对象：UserName Field（创建输入框时 ，输入的标记便于识别组件）； •选择条件：equals（等于）； •选择判断值类型：value（输入框中的值）； •在输入框输入判断值”Axure”； •即：当输入框UserName Field的值为Axure时 ，判断通过•在第一个条件最右边，点击”+”按钮，继续添 加下一个判断条件； •同理，设置第二个判断条件为：当输入框 Password Field的值为12345时，判断通过•在Condition Builder窗口左上方satisfy，选择 符合的判断数，选择all，即当用户名和密码输 入框的值都满足设置条件时，调用Case•点击OK，保存判断逻辑条件演示•返回Case属性窗口； •在Step 2: Select Actions，选择 Open Link in Current Window； •在Step 3 点击Link蓝色链接； •在弹出的Link属性窗口，选择页面 ，点击OK。

•在Case属性窗口，点击OK•再为Login Button添加一个Case； •在Interactions点击Add Case； •在弹出Case属性窗口Step 2选择 Show Panel； •在Step 3点击Panel蓝色链接； •在弹出的Panel选择窗口，选择 Error Panel，点击OK； •在Case属性窗口，点击OK逻辑条件演示•按F5生成原型；•在原型的Login窗口，输入用户 名Axure，密码12345，点击 Login，打开用户账户页面•在原型的Login窗口，输入用户 名AxureRP，密码12345，点击 Login，在用户名上方显示错误 提示逻辑条件Conditional Login• 一个写得好的Case description，可以变成一种有效的方 法为逻辑条件或流程建立链接，也非常容易进行维护和更 新有时候，也可以通过复杂的设计，实现更多功能、更 高精确度的原型• 功能的逻辑条件可以添加到你设计的任何一个case的 interaction判断条件可以基于原型组件的输入值，比如 checkboxes的选择状态、text fields的输入值判断条件 还可以基于变量。

建立条件•要添加条件，首先，在Interactions pane中为事件添加一个Case在弹出 的Interactions Case Properties窗口， Step 1的下方，点击Add Condition蓝 色链接•Condition Builder窗口打开此窗口用 于构建一个条件表达式，比如“If text on widget UsernameField equals ‘axure’ and text on widget PasswordField equals ‘12345’”如果 Case的情节被执行，在原型就会判断 这个表达式 是否成立•在Condition Builder窗口可以添加一行 或多行条件点击每行末尾的”+”按钮 ，添加一行条件点击”-”按钮，去掉 一行条件•如果全部的条件都要满足，在Satisfy 下来选项中，选择all选择any，表示 只要满足任意一个条件就通过判断建立条件• 在条件中，有6中值的类型可以被使用： – Check state of(状态选择) – Selected option of（选项选择） – Value of variable（变量值） – Length of variable vaule（变量值的长度） – Text on widget（组件的文本） – Length of widget value（组件值的长度）(在5.5版本，有8中选项，多了state of panel面板状态和visibility of panel面板可见度)建立条件•完成条件设置后，点击Ok，返回到Interacation Case Properties窗口 。

在Step 3选择条件满足后触发的actions •设置后，在Interactions pane的Cases描述中，包含了一个”If”语句进 行条件描述并且，整个事件的图标都会变成绿色的高光显示建立条件•一旦事件的Case定义了条件，后续的Cases都以”Else If”开头如果 后续的Cases没有定义条件，则描述显示为”Else If True” •默认在原型中，满足判断条件时，执行第一个Case •在Interactions pane右键“Else If”s，选择Change to IF可以改为”If”s 如果多个条件满足，多个Cases都会被执行OnChange事件• 概述1. OnChange事件2. 在OnChange事件使用条件OnChange事件•OnChange事件应用在Droplist和List Box组件•OnChange事件在droplist或list box的选项被选择时触发•在原型的droplist（下来列表）导航应用OnChange事件，当选择 droplist的选项就链接到各自的页面在OnChange事件使用条件•与其他事件的Cases一样，OnChange事件的Cases也可以在 Interaction Case Properties窗口的Step 1定义条件。

•一般在OnChange事件，Cases的条件是比较droplist和list box的选项 值OnKeyUp事件• 概述1. OnKeyUp事件2. 使用示例：实时的表格确认OnKeyUp事件•OnKeyUp事件应用在Text Field和Text Area组件•OnKeyUp事件在用户释放正在组件输入的键盘键时触发•事件在text fields和text areas进行键盘输入时做出响应使用示例：实时的表格确认•做一个OnKeyUp事件的实例，在设计表格时，对用户输入的数据提 供实时的反馈 •考虑Zip code的text field，输入值的长度必须等于5个字符 •在Text field的OnKeyUp事件的第一个Cases，设置一个对text field输 入值长度等于5的检查在此Cases，一个message显示输入值有效 •在第二个Cases，一个message显示输入值无效和输入值的要求使用示例：实时的表格确认•左图是在Zip Code输入框输入 不等于5个字符的message显示 •左图是在Zip Code输入框输入 等于5个字符的message显示OnFocus事件• 概述1. OnFocus和OnLostFocus事件2. 使用示例 OnFocus和OnLostFocus事件•OnFocus和OnLostFocus事件应用在Text Field, Text Area, DropList, List Box, Checkbox和Radio Button组件。

•OnFocus事件在组件被点击或TAB到时触发•OnLostFocus事件在光标离开组件时触发使用示例•OnFocus和OnLostFocus可以在关联的组件，使用显示或隐藏动态消 息 •OnLostFocus在组件失去聚焦时，可以触发数据生效变量• 概述1. 变量演示2. 变量3. 管理变量4. 设置变量值5. 在条件使用变量6. 设置Text时使用变量变量演示•新建工程； •在菜单栏选择wireframe -> Manage Variables •在Manage Variables窗口，可 以对默认的变量 OnLoadVariable进行重命名、 删除，还可以添加新的变量 •在Add New Variable输入 NameVariable，点击Add，在 变量列表添加了变量 NameVariable ； •通过Move Up和Move Download按钮可以更改2个变 量的位置 •点击OK，保存变量设置变量演示•从Widgets pane拖放Text Field、Button和Text Panel组件到 Wireframe pane，位置摆放见下图；•把Text Field组件标记为NameField，并清空Text框内默认的文本； •把Button组件标记为Submit Button，并双击按钮输入文本Submit； •把Text Panel组件标记为NameText，并清空Text框内默认的文本。

变量演示•点击Submit Button，在 Interactions pane的OnClick事件 添加Cases； •在Case属性窗口的Step 2选择Set Variable and Widget value(s) equal to Value(s)； •在Step 3点击蓝色链接；•在变量设置窗口设置变量； – 变量1：”value of variable”、 ”NameVariable”等于”text on Widget”、”NameField”，即把 NameField文本框的内容赋值到变 量NameVariable； – 变量2：”text on Widget”、 ”NameText”等于”value”，Edit text蓝色链接表示可以编辑的文本 ，即把编辑的文本赋值到 NameText的文本内容变量演示•在Enter Text窗口的工具条选择 显示的字体类型、大小、加粗 、颜色、位置； •在输入框输入文字”Welcome,” •点击Insert Variable按钮；•在弹出的Insert Variable窗口， 选择变量NameVariable，点击 OK；•返回Enter Text窗口，可以看到 变量被赋值到文本框中，在文 本末尾加一个”!”号，点击OK。

•返回的窗口都点击OK保存变量 设置变量演示• 按F5生成原型； • 在原型的输入框内，输入Steve； • 点击Submit按钮； • 在输入框的下方显示”Welcome,Steve!”变量•变量应用：你在原型点击时，从一个页面存储和传递数据到另一个页 面 •在Axure RP，一个文件最多能设置25个变量变量可以在 interactions pane设置，应用到interaction case的条件判断管理变量•变量可以在Manage Va。