AxureRP产品原型设计课件 第7章 高级交互

本章介绍：AxureRP提供的高级交互功能包括变量、条件逻辑以及表达式和函数，使得设计师能够创建出更加智能的交互体验。本章对AxureRP的变量、条件逻辑以及表达式和函数进行系统讲解。通过对本章的学习，读者可以对AxureRP的高级交互有一个全面的认识，并快速掌握高级交互的使用技巧和AI辅助实现高级交互的方法。第7章高级交互知识目标熟悉并理解AxureRP的变量熟悉并理解AxureRP的条件逻辑熟悉并理解AxureRP的表达式和函数能力目标具备使用AxureRP变量和条件逻辑的能力具备使用AxureRP表达式和函数的能力掌握用AI辅助实现高级交互的方法素质目标培养使用AxureRP高级交互的良好习惯培养锐意进取、精益求精的工匠精神培养一定的设计创新能力和艺术审美能力7.1变量在AxureRP中，变量分为全局变量和局部变量两种。运用变量可以实现大量复杂条件的判断以及传递参数的功能逻辑，极大地提升原型的交互性和实用性。课堂案例——跳转到不同状态的家具电商平台购物车页全局变量局部变量7.1.1课堂案例——跳转到不同状态的家具电商平台购物车页使用“全局变量”命令添加变量，使用“打开交互编辑器”按钮为元件添加交互样式。效果图7.1.2全局变量全局变量能用于不同的元件或不同的页面，因此全局变量的名称不可以重复，否则系统无法进行区分。1．添加全局变量在“交互编辑器”对话框中设置完事件后，在“添加动作”选项卡中选择“设置变量值”动作，勾选“OnLoadVariable”复选框，即可在对话框的右侧设置全局变量值。7.1.2全局变量2．编辑全局变量在“全局变量”对话框中可以重新对变量进行命名，方便查找和使用。3．管理全局变量在“全局变量”对话框中单击“上移”和“下移”按钮即可调整全局变量的排列顺序。单击“删除”按钮即可删除选中的全局变量。单击“确定”按钮即可完成全局变量的编辑。7.1.3局部变量在AxureRP中，局部变量用于元件或页面中的动作，动作以外的地方无法使用。AxureRP并不限制变量的数量，因此可以为一个动作设置多个局部变量。不同的动作中，局部变量的名称可以相同，它们之间互不影响。7.1.3局部变量1．添加局部变量在“交互编辑器”对话框的“设置动作”栏中可以添加局部变量。单击“值”文本框右侧的函数按钮。在弹出的“编辑文本”对话框中单击“添加局部变量”超链接，即可添加一个局部变量。7.1.3局部变量2．编辑局部变量局部变量由3个部分组成，由左到右分别是变量名称、变量类型和添加变量的目标元件。7.1.3局部变量3．插入局部变量添加局部变量后，单击“编辑文本”对话框上方的“插入变量或函数”超链接，在弹出的下拉列表中选择添加的局部变量，即可插入局部变量。单击“移除”按钮即可删除当前局部变量。7.2条件逻辑条件逻辑可用于指定何时在浏览器中触发已构建的交互，如规定只有用户在表单中填写了所有必填字段时，单击按钮才能进入下一页。课堂案例——制作旅游出行App的不同登录状态匹配所有或匹配任何条件语句用来进行逻辑判断的值确定变量或元件名称逻辑判断的运算符用来选择被比较的值文本框如果或否则7.2.1课堂案例——制作旅游出行App的不同登录状态使用“全局变量”命令为页面添加全局变量，使用“打开交互编辑器”按钮为元件添加交互效果和条件逻辑。效果图7.2.2匹配所有或匹配任何条件语句当一个情形设置了多个条件语句时，可以决定是所有条件都匹配才执行该情形还是仅一个条件匹配时就执行该情形。在“情形编辑”对话框中，单击右侧的“匹配所有”选项，弹出下拉列表。7.2.3用来进行逻辑判断的值用来进行逻辑判断的值的下拉列表中共有15个选项。7.2.4确定变量或元件名称确定变量或元件名称会用进行逻辑判断的值来确定。如果用来进行逻辑判断的值是“变量值”，那么确定变量或元件名称可以选择“OnLoadVariable”选项，或选择“新建”选项，添加新的变量。7.2.5逻辑判断的运算符可以在对应的下拉列表中选择逻辑判断的运算符。7.2.6用来选择被比较的值此部分是和用来进行逻辑判断的值做比较的值，选择的方式和用来进行逻辑判断的值一样。7.2.7文本框如果用来选择被比较的值是“值”，那么需要在文本框中输入具体的值才能实现。AxureRP会根据输入的内容在“条件”下方生成一段描述，以便判断条件逻辑是否正确。7.2.8如果或否则当需要同时修改多个情形的条件判断关系时，在“交互”面板或“交互编辑器”对话框中右击相应的情形，在弹出的菜单中选择“切换为[如果]或[否则]”命令即可。7.3表达式和函数表达式是由数字、运算符、数字分组符号（括号）、变量等组成的公式。函数是一种特殊的变量，可以用于获得一些特定的值。课堂案例——制作家具电商平台商品信息交互运算符类型表达式的格式常见函数7.3.1课堂案例——制作家具电商平台商品信息交互使用“新建交互”按钮和“打开交互编辑器”按钮为元件添加交互效果，使用表达式和函数为页面添加计算效果。效果图7.3.2运算符类型运算符用于对一个以上的操作数进行运算。AxureRP中共包含4种运算符，分别是算术运算符、关系运算符、赋值运算符和逻辑运算符。1．算术运算符2．关系运算符3．赋值运算符4．逻辑运算符7.3.3表达式的格式a+b、a>b、a+b&&=c等都是表达式。在AxureRP中，表达式只有在编辑值时才可以使用，表达式必须写在[[]]中，否则无法正确运算。7.3.4常见函数在“交互编辑器”对话框中添加“设置变量值”动作后，勾选“OnLoadVariable”复选框，单击“值”文本框右侧的函数按钮。在弹出的“编辑文本”对话框中单击“插入变量或函数”超链接，即可看到AxureRP提供的函数。7.3.4常见函数1．中继器/数据集函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“中继器/数据集”选项，即可看到中继器/数据集函数。7.3.4常见函数2．元件函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“元件”选项，即可看到元件函数。7.3.4常见函数2．元件函数7.3.4常见函数3．页面函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“页面”选项，即可看到页面函数。7.3.4常见函数4．窗口函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“窗口”选项，即可看到窗口函数。7.3.4常见函数5．鼠标函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“鼠标”选项，即可看到鼠标函数。7.3.4常见函数6．数字函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“数字”选项，即可看到数字函数。7.3.4常见函数7．字符串函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“字符串”选项，即可看到字符串函数。7.3.4常见函数8．数学函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“数学”选项，即可看到数学函数。7.3.4常见函数9．日期函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“日期”选项，即可看到日期函数。7.3.4常见函数9．日期函数7.3.4常见函数10．布尔函数在“编辑文本”对话框中单击“插入变量或函数”超链接，在弹出的下拉列表中选择“布尔”选项，即可看到布尔函数。7.4课堂练习——制作职业教育管理系统的不同登录状态使用“全局变量”命令添加全局变量，使用“打开交互编辑器”按钮为元件添加交互效果和条件逻辑。效果图7.5课后习题——制作美食外卖App的不同滚动状态使用“