添加情形
在Axure中,当你为一个交互事件(如"失去焦点时")添加动作时,你可以添加多个情形。每个情形可以有自己的条件和对应的动作。
-
点击"新建交互"后,选择触发事件(如"失去焦点时")
-
点击"启用情形"按钮来添加第一个情形
-
之后,你可以继续点击"添加情形"按钮来添加更多情形
设置情形条件
每个情形可以有一个或多个条件。你可以在情形设置窗口中添加这些条件。
-
点击"添加条件"来设置条件
-
可以添加多个条件,并选择它们之间的关系("匹配所有条件"或"匹配任何条件")
设置情形之间的逻辑关系
Axure默认会按照情形的顺序从上到下执行,并在满足条件的第一个情形处停止。但你可以通过以下方式改变这个行为:
-
右键点击情形,选择"切换"选项
-
这将改变情形的逻辑关系,允许多个"如果(if)"情形同时存在
示例:多组条件判断
以年龄验证为例,接下来演示一下如何通过实例来创建多条件判断的几种情形;
首先我们在画布中放入文本框和文本标签元件,进行相应的设置,文本标签需要双击进入编辑状态,删除原有的文字,并且为文本框和文本标签元件分别命名。
添加完我们选中画布中的文本框元件,[新建交互],选择[失去焦点时],完成这个交互事件的设置之后,我们在交互事件的名称后方点击[启用情形]按钮,进行情形的设置;
在情形设置的窗口中,我们先输入情形的名称“输入正确时”。再进行[添加条件]的设置。
第一个条件依次选择元件文本:当前>文本,文本之后的输入框中输入“0”,点击[添加行]按钮,
添加第二个条件,依次选择元件文本:当前 <=文本,文本之后的输入框中输入“150”。
再次点击[添加情形]按钮,添加另一种情形,情形的名称是“输入错误时”,因为与第一种情形条件互斥,我们不用添加任何条件,直接点击确定按钮;
最后添加情形的反馈,点击[添加动作]按钮,[设置文本]到[提示]元件,文本内容为“输入错误”;
最后分析一下,如果在交互场景中需要不同条件的判断,如何设置多组条件判断:
情形1:输入为空
-
条件:元件文本 等于 ""(空字符串)
-
动作:设置提示文本为"请输入年龄"
情形2:输入不是数字
-
条件:元件文本 不匹配正则表达式 "^[0-9]+$"
-
动作:设置提示文本为"请输入有效的数字"
情形3:年龄太小
-
条件:元件文本转换为数字 < 18
-
动作:设置提示文本为"年龄必须大于或等于18岁"
情形4:年龄太大
-
条件:元件文本转换为数字 > 150
-
动作:设置提示文本为"请输入有效年龄(不超过150岁)"
情形5:输入正确
-
条件:无(作为"否则"情况)
-
动作:设置提示文本为"输入正确"
通过这种方式,你可以实现更复杂和精确的输入验证,处理各种可能的输入情况。Axure会按顺序检查每个情形,执行第一个满足条件的情形对应的动作。
这种多组条件判断的方法使得交互设计更加灵活和强大,能够处理更复杂的用户输入场景。
总结
通过熟练运用这些技巧,您可以在Axure中创建更加复杂和智能的交互原型,提高用户体验设计的质量和精确度。这种多条件判断的方法特别适合于表单验证、数据输入检查等场景,能够大大提升原型的真实感和交互性。