2.5 设计区域_Axure RP8网站与App原型设计经典实例教程-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

2.5　设计区域

2.5.1　右键菜单

当选中指定的元件后，单击鼠标右键，在弹出的“菜单”里有一些非常重要的功能，这些功能在属性面板里也有，右键菜单只是快捷入口，如图2-22所示。这里针对其中涉及的交互样式、转换为母版、转换为动态面板、设为隐藏/设为显示、选中和禁用属性设置功能做重点说明。

图2-22

◇交互样式

“交互样式”功能属原型制作中一个非常重要的功能，可以设置元件在鼠标悬停（MouseOver）、鼠标按下（MouseDown）、选中状态（Selected）和不可用状态（Disabled）下的样式，如图2-23所示。

其中最典型的用法是可以在这里设置按钮的不同状态，一个典型的用法是设计按钮在不同事件状态下的效果，如图2-24所示。

◇转换为动态面板

“转换为动态面板”功能可将界面上选中的元件转成动态面板的快捷方式，如图2-25所示，其中默认的是将所有选中的元件放到状态1里。

图2-23

图2-24

图2-25

◇转换为母版

“转换为母版”功能和“转换为动态面板”功能一样，它是一个将元件快速转换为母版的菜单功能。

◇可见性、禁用和选中

在右键菜单中，可以设置元件的默认属性，如隐藏、禁用和选中等。当将元件设置为“禁用”或“选中”状态时，根据不同的状态在交互运行中会显示出不同的交互效果。注意，这里所设置的状态只会在交互运行时显示，在设计时是无法立即看到实际效果的。

图2-26所示为将按钮的属性设置为“禁用”状态时，在设计时它仍然显示的是“深红色”，此时按快捷键F5预览，看到的就是禁用后的效果了。

图2-26

2.5.2　用例编辑

当对元件进行事件处理时，就需要使用到“用例编辑”窗口功能。“用例编辑”是交互设计的重要环节，在这里可以完成事件动作的设置、动画效果的设置和条件的设置。该窗口分为4个功能区域，即添加动作功能区域、组织动作功能区域、配置动作功能区域和添加条件区域，在执行一些动作之前可以添加一些条件，添加了条件之后在满足指定条件的情况下才会执行相应动作，如图2-27所示。

图2-27

◇添加动作

添加动作功能可以简单地解释为，当我们单击一个按钮时，总是希望它能产生什么响应，而这里所说到的“响应”，就是指动作要做的事。例如，原型制作中跳转到一个新的页面、显示或隐藏弹出框以及设置元件的文本内容等。

提示

Axure系统提供了链接、元件、全局变量和中继器等动作功能图，详细的动作功能与使用，请见第6章中的“6.7事件动作介绍”。

◇组织动作

“组织动作”功能可对添加的多个动作进行顺序设置，默认是按照添加动作的先后顺序来组织动作顺序。具体操作时，如果需要手动调整动作顺序，可以在对应界面中单击鼠标右键，在弹出的“菜单”中根据需要调整动作的先后顺序，如图2-28所示。除此之外，也可以使用快捷键Ctrl+↑/↓做顺序调整和操作。

图2-28

◇配置动作

“配置动作”功能对应每一个动作的详细设置，各个动作的参数并不一样，如当打开链接指定的“URL地址”时，移动元件需要设置目标位置和动画效果才可以。

◇添加条件

“添加条件”功能属于“用例编辑”中比较高级的功能部分，在执行该动作功能时，可以添加上一些特定的条件，只有在满足这些特定条件的情况下才会执行相应的动作，添加时描述样式上可采用“如果……，则……”的样式。

图2-29所示为元件显示的为“可见”状态，这里我们需要将该元件隐藏起来。

图2-29

单击“用例编辑”窗口中“用例名称”输入框后面的“添加条件”按钮，然后在弹出的“条件设立”窗口中添加设置条件。设置条件的因素有很多，如值、变量值、元件文字、选中状态和元件可见性等，条件也有等于、大于、小于和不等于等条件。该功能就相当于“可视化的编程”，只是在操作过程中不必手工写代码，只要设置交互动作就可以完成想要的效果，设置完成后就可以看到图2-30中序号4的事件逻辑。