雪莉果的Axure原型工厂vol.006 中继器应用（二）——多选穿梭框

0.有可能的话，可以多让中继器休息休息

先看下面一个示例：

这又是一个软件或者网站里常见的交互，我们叫穿梭选择器；如果你用axure有一段时间了，那么你很快就能琢磨出一个大体设计流程，比如加一个中间过度的元件，来储存需要穿梭的内容；但是如果你再想一想，就会发现，这样做，似乎只能解决单选，那么多选需要怎么操作呢？
这时候，中继器就会告诉你，我还能做的更多。
当然，不是用中继器做中间过度啦。

1.交互拆解

和之前一样，为了更好的理解这个原型做了什么，我们将交互进行拆解。

1）初始状态，左表显示所有选项，右表显示为空

2）左表勾选部分选项

3）点击左至右按钮

4）左表已勾选内容消失，右表添加这部分内容

用流程图的形式进行展示，如下图：

接着，我们就按照上述步骤，来制作进度条原型。

2.交互设置步骤

1）首先创建所有需要的元件，并且为各元件命名，方便设置交互时选择。

其中，左表为中继器，包括3列，分别为是否选择checked，是否显示display，内容本身name；所有内容进行显示，默认不勾选，则display=1，checked=0。

2）然后，我们添加中继器的交互，让display=0时内容隐藏，checked=1时勾选状态变为真，并且给文本赋值name；那么，设置三个并列的如果情形，分别设置这三个条件。

这时，效果如下：

3）然后，我们赋值左表，粘贴为右表，将display全部修改为0，显示效果如下。

4）接着，我们给左表选项添加交互，当点击选项时，如果是为未勾选内容，则将本行的checked修改为1，将右表相同行的checked也修改为1；如果为已勾选内容，则将本行的checked修改为0，将右表相同行的checked也修改为0；

然后右表也进行相同的设置，只是交换一下左右表对象。

5）这时，我们开始设置穿梭按钮的交互，首先是左至右，点击时，将左表已勾选项目的display修改为0，checked也修改为0，这会隐藏左表的已勾选内容；然后将右表checked为1的项目，display修改为1，checked也修改为0，这样，已勾选内容便出现在右表。

6）另一个穿梭按钮也进行相同的操作即可

3.一些说在最后的话

看到了吧，为什么产品经理都爱中继器（也不一定）。

演示地址：link