Axure-RP-8-交互原型设计案例教程第12章

1、第12章 插入条件Axure RP 8 交互原型设计案例教程（微课版）微课版条件常用的格式是：如果条件成立，就执行相应的动作。例如，如果全局变量a 3，就显示一个圆形。在这里，a 3 就是一个条件，显示一个圆形就是条件成立后执行的一个动作。条件可以是一个，也可以是多个。如果是多个，可以设置只要满足其中的一个就可以执行相应的动作，这个叫“或者”（or）；也可以要求满足所有的条件才可以执行相应的动作，这个叫“并且”（and）。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.1 认识条件12.1.1 理解条件在【用例编辑】对话框中单击【添加条件】按钮，如图12-1 所示。A

2、xure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.1 认识条件12.1.2 插入条件的方法图 12-1 【添加条件】按钮单击【添加条件】按钮后，打开图12-2 所示的【条件设置】对话框。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.1 认识条件12.1.2 插入条件的方法图 12-2 【条件设置】对话框在一个用例中可以插入一个条件，也可以插入多个条件，只要单击右侧的按钮，即可添加新的条件，如图12-3 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.1 认识条件12.1.2 插入条件的方法图 12-3 插入多个条

3、件在【条件设置】对话框中的“符合”下拉列表中可以看到“全部”和“任何”两个选项，如图12-4所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.1 条件的两种方式图 12-4 条件符合选项在【条件设置】对话框中可以选择设定条件的对象、选择逻辑运算符以及设置条件的内容等，如图12-5 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-5 条件设置选项下面介绍【条件设置】对话框中的参数。设定条件的对象值：将局部变量或者函数作为设定条件的对象。例如，当局部变量是

4、数值时，可以产生某个结果，该条件设置如图12-6 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-6 值条件设置图12-6 说明：当变量LVAR1 是数字时满足条件，如果是文本就不符合条件了。变量值：将全局变量作为设定条件的对象。例如，当全局变量包含“老林”字符时，可以产生某个结果，该条件设置如图12-7 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-7 变量值条件设置图12-7 说明：当全局变量OnLoadVariabl

5、e 包含“老林”字符时满足条件。例如，全局变量是“老林是个好同志”或者“老林就是林老师”时，都符合设置的条件。变量值长度：将全局变量值的字符长度作为设定条件的对象。例如，当全局变量满足8 个字符长度时，可以产生某个结果，该条件设置如图12-8 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-8 变量值的长度条件设置元件文字：将元件上的文件作为设定条件的对象。例如，当某个元件上的文字为指定的文本时，可以产生某个结果。该条件设置如图12-9 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条

6、件12.2 条件的高级应用12.2.2 条件设置选项图 12-9 元件文字条件设置图12-9 说明：当文本框中输入的文本是“老林”两个字时，满足设置的条件；如果文本框中输入的是“林老”就不符合设置的条件了。焦点元件文字：将获取了焦点的元件上的文字作为设定条件的对象。例如，获取焦点元件上的文字不包含某些字符时，会产生某个结果。该条件设置如图12-10 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-10 焦点元件文字条件设置元件文字长度：将元件上的文字的字符数作为设定条件的对象。例如，在文本框中输入的字符不超过

7、6 个时，会产生某个结果。该条件设置如图12-11 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-11 元件文字长度条件设置被选项：将列表框或者下拉列表框中的选项作为设定条件的对象。例如，当下拉列表中的被选项是某个指定的选项时，会产生某个结果。该条件设置如图12-12 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-12 被选项条件设置图12-12 说明：当下拉列表框中的选项是“北京市”时，满足设定的条件。选中状态：将元件

8、的选中状态作为设定条件的对象。例如，当选择指定的单选按钮后，会产生某个结果。该条件设置如图12-13 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-13 选中状态条件设置图12-13 说明：当指定的某个单选按钮被选中时，满足设定的条件。当然，也可以设置当指定的某个单选按钮不被选中时方可满足设定的条件，如图12-14 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图12-14 非选中状态条件设置面板状态：选择或不选择动态面板的某个状

9、态作为设定条件的对象。例如，当选择动态面板中的第四个状态时会产生某个结果。该条件设置如图12-15 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-15 动态面板的条件设置图12-15 说明：当动态面板中的第4 个状态不被选中时可以满足设定的条件。元件可见：将元件是否可见作为设定条件的对象。例如，当某个元件不可见时可以产生某个结果。该条件设置如图12-16 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-16 元件可见的条件

10、设置键盘按下键：将按下或者不按下键盘上的某个键或者组合键作为设定条件的对象。例如，当按下键盘的【Ctr+A】组合键后可以产生某个结果。该条件设置如图12-17 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-17 键盘按下键的条件设置图12-17 说明：当按下键盘组合键【Ctrl+A】时满足设定的条件。鼠标指针：将鼠标指针的某种行为作为设定条件的对象。例如，当鼠标指针进入指定的元件上时，会产生某个结果。该条件设置如图12-18 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2

11、 条件的高级应用12.2.2 条件设置选项图 12-18 鼠标指针的条件设置图12-18 说明：当鼠标指针进入指定的椭圆元件范围后满足设定的条件。元件范围：为某个元件接触或者未接触到另一个元件时会产生某个结果。该条件设置如图12-19所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-19 元件范围的条件设置图12-19 说明：当动态面板接触到指定的椭圆时满足设定的条件。自适应视图：当视图是或不是指定的某个自适应视图时会产生某个结果。该条件设置如图12-20所示。Axure RP 8 交互原型设计案例教程（微课版

12、）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-20 自适应视图的条件设置图12-20 说明：当自适应视图是中等分辨率时满足设定的条件。如果设置自适应视图不是中等分辨率时满足设定的条件，如图12-21 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.2 条件设置选项图 12-21 自适应视图不是指定的视图的条件设置一个事件中可以添加多个用例，而每个用例都可以添加条件。默认状态下，在用例中添加的第一个条件用IF 表示，从第二个用例开始，添加的条件则用ELSE IF 表示，如图12-22 所示。如果要将ELS

13、E IF 切换成IF 或者要将IF 切换成ELSE IF，则只需要在相应的条件上右击，从弹出的快捷菜单中执行【切换为IF/ELSE IF】命令即可，如图12-23 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IFAxure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-22 在多个用例中插入的条件图12-23 【切换为IF/ELSE IF】命令下面使用Axure RP 的条件实现上述效果。（1）首先在页面中创建一个文本框元件和

14、两个文本标签元件，如图12-24 所示。（2）将两个文本标签元件隐藏起来，如图12-25 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-24 创建的元件 图12-25 隐藏两个文本元件（3）选择文本框元件并双击【属性】子面板中的【文本改变时】事件，在打开的【用例编辑】对话框中单击【添加条件】按钮，设置的第一个条件如图12-26 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-26 添加的第一个条件（

15、4）设置第一个条件后，再添加【显示】和【隐藏】动作，具体参数设置如图12-27 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-27 【显示/隐藏】动作参数设置（5）单击【确定】按钮后，再次双击【文本改变时】事件添加第二个用例，在打开的对话框中添加第二个条件，如图12-28 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-28 添加的第二个条件（6）与第一个条件相似，设置完成第二个条件后，再添加【显示

16、】和【隐藏】两个动作，配置动作对象设置如图12-29 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-29 【显示/隐藏】动作参数设置单击【确定】按钮完成用例设置，在【属性】子面板中可以看到文本框元件中添加了两个用例，条件格式是IF.ELSE IF，如图12-30 所示。按【F5】键预览，当输入“5”时，显示“获得两个苹果”，如图12-31 所示。Axure RP 8 交互原型设计案例教程（微课版）第12章插入条件12.2 条件的高级应用12.2.3 切换IF/ELSE IF图 12-30 用例列表图12-31 5 岁的孩子获得两个苹果再试试IF.IF 方式，在“用例2”上右击，从弹出的快捷菜单中选择【切换为IF/ELSE IF】命令，现在两个用例条件都变成了IF，如图12-32 所示。再次按【F5】