Axure RP 原型设计实践(Web+APP)
上QQ阅读APP看书,第一时间看更新

5.3 用例和动作

事件是通过不同的用例和动作来对外界输入做出的一种反映。所以,事件包含一个或多个用例。

用例通过判断各自的条件来执行具体动作,不同的用例不会同时发生。就相当于写 if()语句时,if(条件1){执行用例1中所有动作;}else if(条件2){执行用例2中所有动作;}。

例如,在页面加载时事件中,需要设置当全局变量testValue等于1时,testPanel动态面板元件为 State1 状态;当全局变量 testValue 等于 2 时,testPanel 动态面板元件的状态为State2 状态。此时,需要对应添加两个用例,其中,Case 1 用例的触发条件为:testValue==1,对应的动作为:切换testPanel面板状态为Sate1状态;Case 2用例的触发条件为:testValue==2,对应的动作为:切换testPanel面板状态为State2状态。

一个用例可以包含多个动作,动作可理解为具体的操作,Axure RP 8包括数以百计的动作来完成页面交互效果。切换面板状态、打开链接、设置选中状态等都属于不同的动作,例如在页面加载时事件的 Case 1 用例,触发条件为:testValue 全局变量等于 1,执行两个动作:更改testPanel面板状态为State1,将某个元件的选中状态设置为true。

5.3.1 用例

双击某个页面事件或元件事件,默认创建一个名称为“Case 1”的用例,如图5-2所示。

用例编辑器对话框包括四大部分,分别如下。

:设置用例名称,并可单击“添加条件”按钮进入“条件设立”对话框,添加1到多个该用例的触发条件,例如某个变量等于1时该用例才执行。

:添加动作区域,单击某个动作类型,会在组织动作区域中有所体现。

:组织动作,在此处可显示用例的触发条件,以及在“添加动作”区域为该用户添加的所有动作列表。

:配置动作,配置在“组织动作”区域选择的某个动作的详细信息。

图5-2 用例编辑器对话框

在非初始状态,单击某个页面事件,例如已有Case 1用例时,双击该事件名称,将创建一个新的用例,如Case 2、Case 3等。也可在“检视”面板选择某个事件后,单击“添加用例”添加一个新的用例。

如果两个用例类似,可在“检视”面板的“属性”选项卡选择该用例后,使用〈Ctrl+C〉快捷键复制该用例,然后单击选择某个事件(可以是本页面事件、其他页面事件或元件事件)后,使用〈Ctrl+V〉快捷键复制用例,非常方便。复制成功后,双击即可对该用例进行修改。

双击某个用例,即可对该用例进行修改操作。若想删除某个用例,可选择某个用例后,右击选择“删除”菜单项进行删除,也可使用〈Delete〉键删除。

5.3.2 动作

Axure RP 8支持的动作如下。

1.链接

Axure RP 8支持5种方式的链接。

1)打开链接:直接打开链接,包括 4 种情况。支持直接在当前窗口打开页面或外部链接(“链接”→“当前窗口”),以新窗口或新标签打开页面或外部链接(“链接”→“新窗口/新标签”),在弹出窗口中打开页面或外部链接(“链接”→“弹出窗口”),以及在父级窗口打开页面或外部链接(“链接”→“父级窗口”)。

2)关闭窗口:关闭当前窗口。

3)在框架中打开链接:支持在内联框架中加载页面或外部链接,或者在父级框架中打开页面或外部链接。

4)滚动到元件<锚链接>:滚动到页面的某个元件(锚点链接)。

5)设置自定义视图:Axure RP 8新增方式,设置为自定义视图。

2.元件

“组织动作”区域“元件”下包括的动作如下。

1)显示/隐藏:可对元件进行显示或隐藏操作,单击“配置动作”区域,效果如图 5-3所示。

在图 5-3 中,“可见性”可选择“显示”“隐藏”或“切换”(当前为显示状态的修改成隐藏状态,反之亦然)。

● 动画:表示进入这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。可设置为:无、逐渐、向右滑动、向左滑动、向上滑动、向下滑动、向右翻转、向左翻转、向上翻转和向下翻转。

● 更多选项:用于设置更多的选项,“灯箱效果”表示除元件区域外其余都为被遮盖状态,单击遮盖区域当前元件被隐藏,“弹出效果”表示将该元件作为弹出式视窗,“推动元件”表示将该元件推出。

2)设置面板状态:设置某个动态面板元件的状态,并能设置状态切换的动态效果。当单击“设置面板状态”动作时,“配置动作”区域会显示该页面所有的动态面板元件,勾选某个动态面板元件,如imgPanel,效果如图5-4所示。

图5-3 显示和隐藏元件

图5-4 设置动态面板状态

图5-4中内容如下。

● 选择状态:下拉列表提供该动态面板元件的所有状态,以及 Next(下一个状态)、Previous(上一个状态)、“停止循环”和 Value(指定设置为第几个状态或指定状态名称,可以是常量,也可以是函数值)让我们选择,可以选择动画效果。

● 进入动画:表示进入这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。可设置:无(没有进入的效果)、逐渐、向右滑动、向左滑动、向上滑动、向下滑动、向右翻转、向左翻转、向上翻转和向下翻转。

● 退出动画:表示离开这个状态的动态效果,若有动态效果,还需要设置切换到最终效果的毫秒数。下拉选项与“进入动画”一样。

● 如果隐藏则显示面板:勾选时表示如果动态面板元件没有显示时进行显示。

● 推动/拉动元件:勾选时表示推/拉下方或右侧元件。

3)设置文本:可指定当前获得焦点的某个元件,或页面的某个元件的文本值,可设置为:值、变量值、变量值长度、元件文字、焦点元件文字、元件文字长度、被选项和面板状态等。

4)设置图片:可设置某个图片元件各种情况下的动态效果,如图 5-5 所示。Default 用于设置默认的图片和值,“鼠标悬停”用于设置鼠标悬停时的图片和值,“鼠标按下”用于设置鼠标按下时的图片和值,“选中”用于设置图片元件被选中时的图片和值,“禁用”用于设置图片元件为不可用状态时的图片和值。

5)设置选中:设置矩形元件、单选按钮元件、复选框元件、图片元件、动态面板元件等为选中、取消选中或切换选中状态。

6)设置列表选中项:设置下拉列表元件和列表元件的选项值。

7)启用/禁用:将各种元件置为启用、禁用状态。

8)移动:在X轴或Y轴上将某个元件相对当前位置移动若干像素,或者将某个元件移动到绝对的X坐标或Y坐标。如图5-6所示。

图5-5 设置图片元件

图5-6 移动元件到绝对坐标

● 移动方式:有“绝对位置”和“相对位置”两个选项,前者表示移动某个元件到绝对的X坐标和Y坐标。后者表示在当前位置在X坐标和Y坐标相对移动多少像素。

● 动画:表示移动时的动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓慢缓出、弹跳和弹性几个选项。

9)旋转:Axure RP 8 版本新增的一个动作,用于对元件进行旋转操作,后面的案例篇有专门的案例详细讲解该动作的使用。

10)设置尺寸:设置元件的宽度和高度,并能设置动画效果,如图5-7 所示。可以指定所选择的动态面板元件的宽度和高度(单位:像素),可为常量也可指定函数或变量。“动画”用于指定调整尺寸大小时的动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓进缓出、弹跳和弹性。

11)置为顶层/底层:设置元件的放置顺序,“置于顶层”表示将某个元件置为最上方,“置于底层”表示将该元件放到最下方。

12)设置不透明:设置元件透明度,并可带有动画效果,包括:无、摇摆、线性、缓慢进入、缓慢退出、缓进缓出、弹跳和弹性。

13)获得焦点:将焦点放到某个指定元件。

14)展开/折叠树节点:将某个树状菜单元件设置为展开或收缩状态。

3.全局变量

“添加动作”区域的“全局变量”只是包括一个“设置变量值”的动作,可以选择默认全局变量、已创建的全局变量,也可在“配置动作”区域使用“添加全局变量”创建新的全局变量。

单击“配置动作”区域的“添加全部变量”按钮进入“全局变量”对话框,也可在菜单栏选择“项目”→“全部变量”菜单项进入全局变量管理界面,如图5-8所示。

图5-7 设置元件尺寸

图5-8 全局变量管理对话框

在“全局变量”对话框中可进行添加、上移、下移、删除、重命名和设置默认值操作。单击“确定”按钮,回到“用例编辑器”对话框的“配置动作”区域,勾选全局变量后,设置它的值为某个常量,或单击“fx”按钮通过函数为其设置值。

4.中继器

“配置动作”区域的“中继器”提供如下动作供选择。

1)添加排序:添加排序条件,可添加多个。单击“添加排序”动作后,“配置动作”区域如图5-9所示。

● 名称:给此次排序命名。

● 属性:用于指定数据集的列。

● 排序类型:用于指定将列当作什么形式排序,包括 Number(数字)、Text(文本,默认不区分大小写)、Text (文本,区分大小写)、Date-YYYY-MM-DD(作为年-月-日格式的日期排序)和 Date-MM/DD/YYY (作为月/日/年格式的日期进行排序)。

● 顺序:指定排序方式,包括“升序”“降序”和“切换”(切换升/降序)三个选项。

图5-9 中继器-添加排序动作配置对话框

2)移除排序:可用于删除某个中继器一个排序或全部排序。

3)添加筛选:添加过滤条件,可添加多个筛选条件。

4)移除筛选:删除过滤条件,可选择删除其中一个或删除全部。

5)设置当前显示页面:选择当前的页是中继器的第几页。

6)设置每页项目数量:设置每页多少个项目。

7)数据集:对中继器的数据集进行设置,可进行“添加行”“标记行”“取消标记”“更新行”和“删除行”操作。

5.其他

“配置动作”区域的“其他”包括如下动作提供给我们选择。

1)等待:页面等待多少毫秒,常用于模拟操作过程,或者使用在时钟中。

2)其他:定义弹出窗口显示的文字。

3)触发事件:定义自定义事件。