一 、条件逻辑概述
看过连载前文的都知道,在Axure中完成一个基本的交互设置其实很简答,我们只要按照提示与引导一步步的选择事件和动作,做好元件和情形(用例)的命名即可。当你熟悉了,情形的命名也可以省略了。
我们知道有些事件的发生是有前提条件的,不同的条件会导致事件发生不同的动作,这就是事务的内在逻辑。“逻辑”一词最早由古希腊学者亚里士多德提出。狭义上逻辑既指思维的规律,也指研究思维规律的学科即逻辑学。广义上逻辑泛指规律,包括思维规律和客观规律。逻辑包括形式逻辑与辩证逻辑,形式逻辑包括归纳逻辑与演绎逻辑,辩证逻辑包括矛盾逻辑与对称逻辑。对称逻辑是人的整体思维(包括抽象思维与具象思维)的逻辑。
二、如果或否则
当我们为事件添加第1个情形时,如果符合情形1的条件,则执行设定的交互动作;添加第2个情形时,则变成了否则这样的句式,则执行设定的交互动作,变成了与第1个情形对立的情况,即除第1个情形之外的条件下,执行情形2的动作。很多时候我们并不希望这样,比如我们希望在选择省份下拉列表时,选项中选择不同的省,下方显示该省的城市列表。这个时候就需要为省份下拉列表添加”选项改变时“事件,将各省的城市列表转换为动态面板不同的状态。在为省份下拉列表这一元件选择不同的选项时,设置动态面板显示不同的状态,将下拉列表的各项作为情形的逻辑条件。这个时候,其实我们希望每个情形的执行是并列关系,互不干扰。因此,在这里我们手动将其他情形切换为如果的逻辑句式。右击情形,选择“切换为[如果]或[否则]"。
如果或否则.png
三、条件关系-全部和任何
全部:当全部条件都满足时,才能执行设置的动作,每个条件之间是“与”的关系,需要同时成立。我们以登录为例,点击登录按钮时,我们需要判断账号、密码,只有当账户和密码都正确,才提示“登录成功”。账号和密码的条件表达式,他们之间的逻辑关系就是全部。
任何:当其中一个条件满足时,就可以执行设置的动作,每个条件之间是“或”的关系,即只要求其中一项成立。还是以登录为例,点击登录按钮时,判断账号和密码,如果其中一个不正确,则提示“账号与密码不匹配,登录失败”。
全部.png假设正确的账号为13333333333,密码为mima333
任何.png
四、运算符和表达式
一个完整的条件语句由表达式和运算符构成,表达式的内容可以是文本、变量值、变量值长度、元件文字、元件文字长度、选项、选中状态、面板状态、元件的可见性、元件范围、键盘按键、指针等一切可以通过外在形式表达的内容。运算符包含了算数运算符、关系运算符和逻辑运算符。
表达式.png
运算符.png
4.1 算数运算符
连接两个表达式的算数运算符为==和!=。前一个为赋值符号,即将符号右侧的内容赋值给左侧表达式;第二表示不相等,即运算符两侧的内容不相等。
4.2 关系运算符
条件表达式中间的关系运算符包含了大于(>)、小于(<)、小于等于(<=)、大于等于(>=)。代表了两侧表达式之间的大小关系,表达式的内容通常是可以量化的数值或变量。
4.3 逻辑运算符
条件表达式中,可供选择的逻辑运算符有:包含、不包含、是、不是。主要表达运算符两侧内容的包含关系和是非关系。
五、多条件用例
一个事件下可以添加多个情形。比如,你有一个下拉列表框,其中的项是不同的省份,你可以为给“选项改变时”事件添加多个不同的情形,通过不同的下拉列表项,执行不同的动作。
默认情况下,从第二个情形开始都是否则形式的语句,可以手动点击切换为如果形式的语句。在原型中,用例是从上至下按顺序执行的。我们也可以让每个满足条件的情形都被执行。要做到这一点其实很简单,右击情形,并选择“切换为[如果]或[否则]”,将否则切换为如果。
例如,在注册表单中,对每个文本输入项的内容进行单独验证。当点击注册按钮时,可以为每个文本框添加一个如果结构的条件情形,如果不符合条件,情形就动态显示不同的错误提示。
注册提示.png
六、条件逻辑案例
6.1 登录验证
-
使用矩形、文本框、按钮及文本标签等元件,完成登录界面线框图的搭建。文本框作为输入项元件(账号、密码)、按钮为登录,两个文本标签作为登录成功和登录失败的提示信息,注意做好各元件的命名工作。
-
为登录按钮添加“鼠标单击时”事件,选中登录按钮,在元件事件列表中选择“鼠标单击时”事件,元件动作列表选择”显示/隐藏“,目标元件选择“登录成功提示”,插入第二个动作“等待”,设置等待1000毫秒(1秒),插入第三个动作“显示/隐藏”,目标元件选择“登录成功提示”。
登录成功-动作配置.png -
为情形添加条件,我们期望实现的效果是:当输入的账号和密码都正确时,提示“登录成功”;当账号或密码有一个错误时,则提示“账号与密码不匹配,登录失败”。
假设正确的账号为13333333333,密码为mima333
-
为第一个情形添加条件,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择==;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择==,表达式上方的符合选择“全部”,点击确定,完成条件设置。
登录成功-条件表达式.png -
为事件添加第二个情形,点击添加情形,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择!=;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择!=,表达式上方的符合选择“任何”,点击确定,完成条件设置。点击插入动作,动作列表中选择“显示/隐藏”,目标元件选择“登录失败提示”,选择显示;插入动作“等待”,等待时间设置1000毫秒(1秒),插入动作“显示/隐藏”,目标元件选择“登录失败提示”,选择隐藏。
登录失败-条件表达式.png
登录失败-动作配置.png
6.2 城市信息
-
拖动下拉列表框至设计区域,添加列表项,项的内容为省份名称,命名为省份;拖动一个列表框至设计区域,添加列表项,项的内容为省城市名称;将列表框右键转换为动态面板,复制多个状态(注意每个状态的命名,建议以省命名),每个状态的列表框显示不同省份的城市,动态面板命名为城市。
-
我们期望实现的效果是,当下拉列表框选择不同的省份时,下方的列表框显示对应省份的城市列表。
-
选中省下拉列表,在元件事件列表中选择“选项改变时”事件,选择“设置面板状态”动作,目标元件选择动态面板,选择对应的面板状态,点击完成,完成动作设置。
广东-设置动作.png -
为刚才的情形1设置条件,点击添加条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和广东,点击确定,完成条件设置。
广东-设置条件.png
5.为事件添加第2个情形,添加逻辑条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和浙江。点击插入动作,动作列表选择”设置面板状态”,选中“城市”动态面板,面板状态切换为“浙江”,点击完成,完成动作设置。
浙江-设置条件.png
浙江-设置动作.png
- 其他省份的城市列表切换显示同上一步一致。
网友评论