AxureRP教程–联动效果交互设计

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

页面跳转效果

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

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

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

下拉菜单联动效果

功能描述:有两个下拉菜单组件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事件,使选择产品时,动态面板显示与产品相关的页面。设置如下:

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

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

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–联动效果交互设计”有1条评论

初学者 | 2011-07-9 04:36 |
commenter

学习了,很有用,谢谢分享