AxureRP

http://www.zhixing123.cn/qita/34617.html

联动效果在网页的表单设计当中会经常遇到，很多表单上的一些自动填充功能就是，例如下拉菜单的一级菜单选择某个值之后要后面的二级，三级菜单的值跟着变化就是一种联动效果，这种最常应用在地域选择上，比如一级菜单选择了上海，二级菜单将上海的各个区县带出来。还有诸如列表框的选值变化，单选框、复选框的聚焦状态，根据分类进行表单轮换等效果，页面应用设计当中都会经常遇到，本文介绍几种常见的联动效果在AxureRP当中的实现方式。

页面跳转效果

功能描述：通过添加一个下拉菜单组件，其中有page1，page2，page3三个选项，分别设定每个选项的链接，并且规定在输出的页面中点选这三项中的任意一项，都链接到对应的页面中，并在跳转后的页面上能返回到主页面。

要实现上述功能，首先在主页面先添加一个下拉菜单组件（当然如果没有规定用下拉菜单组件，用列表框组件，水平菜单组件，垂直菜单组件，树菜单组件都是可以的，效果类似），设置下拉选项为page1，page2，page3，再添加三个子页面，每个页面设定不同的显示内容，并在每个页面上添加一个流程图里的矩形组件，更改默认颜色并设置其链接页面至主页面（Home），这样会比较简单，也可以用超链接或者图片映射组件来实现。

初始化完毕之后，设置下拉菜单的OnChange事件，使其选择page1时能跳转到页面page1，其他选项类似。设置的时候在交互事件属性窗口上，第一步要设置条件，点“添加条件”设置当下拉菜单值等于page1时，触动第二步的时间，即在当前窗口打开page1。也即设置了一个条件判断的过程，设置结果如下所示：

设置下拉菜单的OnChange事件
 

下拉菜单联动效果

功能描述：有两个下拉菜单组件A和B，分别有a1，a2和b1，b2各两个选项，要求在A下拉菜单的选择a1时，B下拉菜单自动显示b1；在A下拉菜单的选择a2时，B下拉菜单自动显示b2。

这是两级下拉菜单联动，在主页面上添加两个下拉菜单组件，分别命名为A和B，然后各自添加a1，a2和b1，b2两个选项，然后在A下来菜单上设置OnChange事件，使A下拉菜单的选择a1时，给B 下拉菜单赋值，使之显示b1，设置如下所示：

两级下拉菜单联动
 

三级或更多级下拉菜单的设置与此类似，这里就不多介绍了。

页面轮换效果

功能描述：有一个下拉菜单，有产品和活动两个下拉选项，当选择产品时下方显示与产品相关的页面，当选择活动时下方显示与活动相关的页面，即跟据下拉菜单选择的变化，在下方显示不同的页面。

这需要前面讲到的动态面板交互效果的配合，与上面两种不一样，这是两个不同组件间的配合交互。在主页面添加一个下拉菜单组件，初始化选项为产品和活动，再制作一个前面例子当中的动态面板交互效果，设置下拉菜单的OnChange事件，使选择产品时，动态面板显示与产品相关的页面。设置如下：

设置下拉菜单的OnChange事件
 

自此，几种主要的联动效果都介绍完毕，第三种与第一种的区别就是没有页面跳转，效果是在同一个页面上展示的，这种在网页表单设计上经常用到。本文都是以下拉菜单组件来举例的，与此相同的还可以用列表框组件来实现，其他的如单选框和复选框的OnFocus事件，水平菜单、垂直菜单和树菜单的OnClick事件也都可以实现，不过OnClick事件就不需要设置第一步的条件判断了，直接响应事件即可。

下拉菜单组件
 

例子在AxureRP5.5版本下调试通过