【文档说明】Axure-RP-8交互原型设计案例教程第12章-插入条件.pptx，共(35)页，809.272 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2811.html

以下为本文档部分文字说明：

第12章插入条件AxureRP8交互原型设计案例教程条件常用的格式是：如果条件成立，就执行相应的动作。例如，如果全局变量a>3，就显示一个圆形。在这里，a>3就是一个条件，显示一个圆形就是条件成立后执行的一个动作。条件可以是一个，也可

以是多个。如果是多个，可以设置只要满足其中的一个就可以执行相应的动作，这个叫“或者”（or）；也可以要求满足所有的条件才可以执行相应的动作，这个叫“并且”（and）。AxureRP8交互原型设计案例教程第12章插入条件12.1认识条件12.1.1理解条件在【用例编辑】对话框中单击

【添加条件】按钮，如图12-1所示。AxureRP8交互原型设计案例教程第12章插入条件12.1认识条件12.1.2插入条件的方法图12-1【添加条件】按钮单击【添加条件】按钮后，打开图12-2所示的【条件设置】对话框。AxureRP8交互原型设计案例教程第12章插

入条件12.1认识条件12.1.2插入条件的方法图12-2【条件设置】对话框在一个用例中可以插入一个条件，也可以插入多个条件，只要单击右侧的按钮，即可添加新的条件，如图12-3所示。AxureRP8交

互原型设计案例教程第12章插入条件12.1认识条件12.1.2插入条件的方法图12-3插入多个条件在【条件设置】对话框中的“符合”下拉列表中可以看到“全部”和“任何”两个选项，如图12-4所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高

级应用12.2.1条件的两种方式图12-4条件符合选项在【条件设置】对话框中可以选择设定条件的对象、选择逻辑运算符以及设置条件的内容等，如图12-5所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项

图12-5条件设置选项下面介绍【条件设置】对话框中的参数。设定条件的对象值：将局部变量或者函数作为设定条件的对象。例如，当局部变量是数值时，可以产生某个结果，该条件设置如图12-6所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图

12-6值条件设置图12-6说明：当变量LVAR1是数字时满足条件，如果是文本就不符合条件了。变量值：将全局变量作为设定条件的对象。例如，当全局变量包含“老林”字符时，可以产生某个结果，该条件设置如图12-7所示。AxureRP

8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-7变量值条件设置图12-7说明：当全局变量OnLoadVariable包含“老林”字符时满足条件。例如，全局变量是“老林是个好同志”或者“老林就是林老师”时，都符合设置的条件。变量

值长度：将全局变量值的字符长度作为设定条件的对象。例如，当全局变量满足8个字符长度时，可以产生某个结果，该条件设置如图12-8所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-

8变量值的长度条件设置元件文字：将元件上的文件作为设定条件的对象。例如，当某个元件上的文字为指定的文本时，可以产生某个结果。该条件设置如图12-9所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图1

2-9元件文字条件设置图12-9说明：当文本框中输入的文本是“老林”两个字时，满足设置的条件；如果文本框中输入的是“林老”就不符合设置的条件了。焦点元件文字：将获取了焦点的元件上的文字作为设定条件的对象。例如，获取焦点元件上的文字不包含

某些字符时，会产生某个结果。该条件设置如图12-10所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-10焦点元件文字条件设置元件文字长度：将元件上的文字的字符数作为设定条

件的对象。例如，在文本框中输入的字符不超过6个时，会产生某个结果。该条件设置如图12-11所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-11元件文字长度条件设置被选项：将列表框或者下拉列表框中的选

项作为设定条件的对象。例如，当下拉列表中的被选项是某个指定的选项时，会产生某个结果。该条件设置如图12-12所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-12被选项条件设置图12-12说明：当下拉列表框中的

选项是“北京市”时，满足设定的条件。选中状态：将元件的选中状态作为设定条件的对象。例如，当选择指定的单选按钮后，会产生某个结果。该条件设置如图12-13所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-

13选中状态条件设置图12-13说明：当指定的某个单选按钮被选中时，满足设定的条件。当然，也可以设置当指定的某个单选按钮不被选中时方可满足设定的条件，如图12-14所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项

图12-14非选中状态条件设置面板状态：选择或不选择动态面板的某个状态作为设定条件的对象。例如，当选择动态面板中的第四个状态时会产生某个结果。该条件设置如图12-15所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-15动态面板的条件设

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

用12.2.2条件设置选项图12-16元件可见的条件设置键盘按下键：将按下或者不按下键盘上的某个键或者组合键作为设定条件的对象。例如，当按下键盘的【Ctr+A】组合键后可以产生某个结果。该条件设置如图12-17所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高

级应用12.2.2条件设置选项图12-17键盘按下键的条件设置图12-17说明：当按下键盘组合键【Ctrl+A】时满足设定的条件。鼠标指针：将鼠标指针的某种行为作为设定条件的对象。例如，当鼠标指针进入指定的元件上时，会产生某个结果。该条件设置如图12-18所示。Axur

eRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-18鼠标指针的条件设置图12-18说明：当鼠标指针进入指定的椭圆元件范围后满足设定的条件。元件范围：为某个元件接触或者未接触到另一个元件时会产生某个结果。该条件设

置如图12-19所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-19元件范围的条件设置图12-19说明：当动态面板接触到指定的椭圆时满足设定的条件。自适应视图：当视图是或不是指定的某个自适应视图时会产生某个结果。该条件设置如图12-2

0所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-20自适应视图的条件设置图12-20说明：当自适应视图是中等分辨率时满足设定的条件。如果设置自适应视图不是中等分辨率时满足

设定的条件，如图12-21所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.2条件设置选项图12-21自适应视图不是指定的视图的条件设置一个事件中可以添加多个用例，而每个用例都可以添加条件。默认状态下，在用例中添加的第一个条件

用IF表示，从第二个用例开始，添加的条件则用ELSEIF表示，如图12-22所示。如果要将ELSEIF切换成IF或者要将IF切换成ELSEIF，则只需要在相应的条件上右击，从弹出的快捷菜单中执行【切换为IF/ELSEIF】命令即可，如图12-23所示。A

xureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIFAxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/

ELSEIF图12-22在多个用例中插入的条件图12-23【切换为IF/ELSEIF】命令下面使用AxureRP的条件实现上述效果。（1）首先在页面中创建一个文本框元件和两个文本标签元件，如图12-24所示

。（2）将两个文本标签元件隐藏起来，如图12-25所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图12-24创建的元件图12-25隐藏两个文本元件（3）选择文本

框元件并双击【属性】子面板中的【文本改变时】事件，在打开的【用例编辑】对话框中单击【添加条件】按钮，设置的第一个条件如图12-26所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图12-26添加的第一个

条件（4）设置第一个条件后，再添加【显示】和【隐藏】动作，具体参数设置如图12-27所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图12-27【显示/隐藏】动作参数设置（5）单击【确

定】按钮后，再次双击【文本改变时】事件添加第二个用例，在打开的对话框中添加第二个条件，如图12-28所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图12-28添加的第二个条件（6

）与第一个条件相似，设置完成第二个条件后，再添加【显示】和【隐藏】两个动作，配置动作对象设置如图12-29所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/EL

SEIF图12-29【显示/隐藏】动作参数设置单击【确定】按钮完成用例设置，在【属性】子面板中可以看到文本框元件中添加了两个用例，条件格式是IF...ELSEIF，如图12-30所示。按【F5】键预览，当输入“5”时，显示“获得两个苹果”，如图12-31

所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图12-30用例列表图12-315岁的孩子获得两个苹果再试试IF...IF方式，在“用例2”上右击，从弹出的快捷菜单中选择【切换为IF

/ELSEIF】命令，现在两个用例条件都变成了IF，如图12-32所示。再次按【F5】键预览，当输入“5”时，显示“获得四个苹果”，如图12-33所示。AxureRP8交互原型设计案例教程第12章插入条件12.2条件的高级应用12.2.3切换IF/ELSEIF图1

2-32都设置为IF图12-335岁的孩子获得四个苹果本章总结本章总结通过本章的学习，读者应熟练掌握如何在交互原型中插入条件，掌握条件中各个条件选项的含义及使用方法，要深刻理解IF和ELSEIF区别，熟练将条

件灵活运用到交互设计中。AxureRP8交互原型设计案例教程