AxureRP教程–列表框左右选择效果

列表框左右选择效果应用的非常多,在一些需要选择配置项或者需要设置人员角色的地方都会有这样的功能出现,这个效果相对来说比较实用,用AxureRP来实现这个效果的交互设计,简单点是比较容易的,选择项数目一多,难度就上去了。列表框左右选择效果的要求很简单,就是提供两个列表框,一般是左边的列表框为选择项的容器,提供一些初始的选择项供选择,右边则是设置项的容器,用来包含已选择的列表项,这两者间的数据交互通过一系列按钮来实现,可以移入移出。下面就介绍如何使用AxureRP来实现这个效果。

单从要求上来看是比较简单的,不过要用AxureRP来实现的话有一点会比较复杂,就是AxureRP里面目前还不支持列表框里面的项目通过事件动作来赋值,这样的话就只能通过模拟来实现,要模拟的话自然要用到动态面板,所以用AxureRP来实现这个效果的原理就是通过用两个动态面板来分别控制两个列表框里面所有列表项的显示状态,比如有a,b两个选项就会有ab,a,b,无四种状态,a,b,c三个选项就会有abc,ab,ac,bc,a,b,c,无八种状态,列表项越多,显示的状态越多,设置也就越复杂。状态设置好之后通过判断列表框上面的项目选择来判断当前是哪个状态下的哪个选项,并使右边显示出与之对应的状态,基本原理就是这样,有点绕,这里为了简单起见,只演示两个选项的情况,有兴趣的朋友可以尝试三个或者更多。

如上图所示,左侧选项用动态面板left来控制,设置四个状态,分别表示两个选项下的各种状态,默认显示两个选项都在的情况,同理,右侧选项用动态面板right来控制,同样设置四个状态,默认显示没有选项显示的情况。用四个按钮分别控制从左侧全部移到右侧,从右侧全部移到左侧,从左侧选中移到右侧,从右侧选中移到左侧,这样一个整体的列表框左右选择效果的界面框架就出来了,其实就拿着这个界面去演示也是可以的,到时候解说一下就可以了,当然最好还是要有交互效果。

全部移动的控制比较简单,就是使两个动态面板切换都是选项和没有选项的这两个状态即可。单个选中移动的控制比较复杂一点,因为在左边选择的时候要考虑右边的初始状态,这里需要考虑三种初始状态:

1、当左边都是选项时,右边为空,这时选中选项一右移,右边就显示选项一,左边剩下选项二;选中选项二右移,右边就显示选项二,左边剩下选项一。

2、当左边是选项一时,右边为选项二,这时选中选项一右移,右边显示全部选项,左边为空。

3、当左边是选项二时,右边为选项一,这时选中选项二右移,右边显示全部选项,左边为空。

这样的三种情况考虑清楚之后,就可以开始设置了。右移的情况是这样,那么左移的情况也是这样的,只不过互换了一下。

上图就是选中移动时的单击事件设置,这里需要注意两个问题:一是每个状态下列表框组件都是不一样的,要做好命名,且判断的时候要判断正确;二是每个行为控制都是独立,因此都是IF,而不是IF ELSE。这两点注意到之后设置起来应该就没有问题了。

两个选项的相对比较简单,要判断的情况较少,三个选项的情况就复杂一些,特别是选项两两组合的情况有三种,这个时候还要记录当前另一侧到底是什么样的状态,也即需要两个条件组合判断才行,本来想尝试一下的,后来想想这样已经可以达到演示的效果了,且也要符合快速原型设计的要求,所以就没有做,呵呵,有兴趣的朋友可以尝试着做一下,大家交流交流。

在做这类效果之前,只要思路清晰,做的过程当中就不怎么难了,没有理清楚思路的话就会有无从下手的感觉,所以想法还是比较重要的。

示例在AxureRP 5.6下调试通过

 

点此查看演示

点此下载源文件

大家如有原型设计方面的问题交流,可至IT民工论坛提出,大家共同学习,共同进步。



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

“AxureRP教程–列表框左右选择效果”3 条评论

commenter

2011-12-14增加三个选项的列表框选择效果,详细见IT民工论坛–原型设计–高级技巧http://bbs.itfarmer.com.cn/read.php?tid-6-ds-1.html

commenter

交换个连接呗?

wrcjclza | 2012-01-30 15:22 |
commenter

这个不错,很实用!