最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

情形(条件)的设置

教程 小楼一夜听春语 11188浏览

在原型设计中,有条件的执行交互动作是比较常见的。

例如对一个年龄输入框中的文字进行判断,从而给出对应的提示。

首先,一个输入框内容的验证,有基本的两种情形:输入正确与输入错误。

那么,我们就需要分析输入正确需要符合什么条件,或者输入错误符合什么条件。

一、从输入正确的角度分析

1、输入的内容必须是大于0;

2、输入的内容必须小于等于150(目前公认的年龄极限)。

当同时符合上面的两个条件时,我们认为输入是正确的,否则就是错误的。

我们在用户完成输入时,正确的输入,给出正确的提示;错误的输入,给出错误的提示。

接下来,我们在画布中放入文本框和文本标签元件,进行相应的设置。

文本标签需要双击进入编辑状态,删除原有的文字。

并且,为文本框和文本标签元件分别命名。

温馨提示:元件的名称可以在交互、样式以及说明面板的顶部输入,也可以在概要面板中单点两次名称进行编辑。

提示是在用户输入完毕后出现,这个交互事件的触发是[失去焦点时]。

我们选中画布中的文本框元件,[新建交互],选择[失去焦点时]。

警告:用户是对文本框进行了操作,交互要添加给文本框,不要傻呵呵的给文本标签添加交互

此时,需要先添加某一种情形的反馈,也就是动作。

Axure的交互事件是由上至下执行的。

我们既然是以输入正确的角度进行的分析,这里就先添加输入正确的反馈。

选择动作[设置文本],设置的目标是[提示]元件,将它的文本设置为“输入正确”。

完成这个交互事件的设置之后,我们在交互事件的名称后方点击[启用情形]按钮,进行情形的设置。

在情形设置的窗口中,我们先输入情形的名称“输入正确时”。

再进行[添加条件]的设置。

第一个条件依次选择[元件文本][当前][>][文本],文本之后的输入框中输入“0”。

点击[添加行]按钮,添加第二个条件,依次选择[元件文本][当前][<=][文本],文本之后的输入框中输入“150”。

这样,我们就完成了第一种情形的添加。

点击[添加情形]按钮(就是刚才的启用情形按钮),添加另一种情形。

情形的名称是“输入错误时”。

因为与第一种情形条件互斥,我们不用添加任何条件,直接点击确定按钮。

系统会自动将这种情形设置为否则的逻辑关系。

然后,我们添加这种情形的反馈。

点击[添加动作]按钮,[设置文本]到[提示]元件,文本内容为“输入错误”。

到这里,我们就实现了想要的交互效果。

二、从输入错误的角度分析

1、输入的内容小于等于0;

2、输入的内容大于150。

温馨提示:文本框未输入任何内容时,它的值是空值,空值等同于0,符合小于等于0的条件。

当符合以上任何一个条件时,都是输入错误的情形,否则是输入正确的情形。

所以,从输入错误的角度进行分析时,情形的添加顺序正好相反。

并且,条件设置上略有变化。

需要注意的是,这种满足任一条件的情形,需要在情形设置窗口的右上方,将匹配类型更改为[匹配以下任何条件]。

最后,还有一个关于情形之间逻辑关系的操作。

就是通过右键菜单中的[切换]选项,可以对多个情形的逻辑关系进行改变。

也就是说,在同一个交互事件中,可以出现多个[如果(if)]的情形,即多组条件判断。

例如下面的示例,同样能够实现我们的交互需求。

假设用户输入了某个正确或错误的数值,模拟交互事件的执行过程,从上至下阅读,你能看懂它的逻辑吗?

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 情形(条件)的设置