在电商之类的平台产品里，我们常会用到一种穿梭框的设计。不熟悉的同学常把其设计成静态页面，其实，用 Axure 实现交互效果，也很简单。

这期内容，我们将深入探讨 Axure 中穿梭筛选宽元件设计与交互技巧。

穿梭筛选框元件

创建穿梭筛选框所需的元件

左穿梭筛选框

1. 打开一个新的 RP 文件并在画布上打开 Page 1。

2. 现在画布上创建一个背景，在元件库中拖出一个矩形元件，宽值 200，高值 300，线宽值 1，线框颜色（#D9D9D9）圆角半径为 6。

3, 创建穿梭筛选框头部元件，在元件库中突入一个矩形元件，宽值 198，高值 48，线宽值 0，填充颜色（#F2F2F2）圆角半径为 6，选中前面做好的矩形元件，顶部对齐。

4. 在头部元件中创建全选按钮，从元件库中拖入复选框元件，文本改成待选列表，左上角对齐。

5. 创建穿梭框选项列表，在元件库中拖入一个内联框架，右键转为动态面板，并命名为左穿梭框

6. 双击左穿梭框动态面板，在元件库中拖入一个中继器元件，双击中继器元件，删除原始单元格，在元件库中拖入若干个复选框，并输入一些待选项。

创建右穿梭筛选框

1. 复制粘贴做好的左穿梭筛选框，将头部待选列表改为已选列表，选中穿梭选项列表左穿梭框改为右穿梭框，并保留一个选项。

创建向左向右穿梭按钮

1. 在元件库中拖入一个矩形，宽高值为 30，填充色为浅蓝色（#F5F7FA）线宽 1，线色为灰色（#CCCCCC），复制一个向右的 icon，居中组合。

2. 复制向右按钮元件，将向右箭头改为向左。

创建交互

创建 " 待选列表 " 按钮的交互状态

1. 选中待选列表按钮元件 , 在交互窗格中新建交互，选中，设置选中 选项为 " 真 "，新建交互，取消选中时，设置选中，选项为 " 假 "。

创建 " 已选列表 " 按钮的交互状态

1. 同理设置已选列表按钮，也可复制待选按钮的交互粘贴到已选列表按钮中。

创建 " 左穿梭框 " 的交互状态

1. 双击左穿梭框动态面板，选中中继器选项元件，在交互窗格中新建交互，每项加载，设置文本选项 为 " [ [ Item.Column0 ] ] "

2. 双击中继器选项元件，对单个选项新建交互，选中，标记行 （中继器）当前，取消选中时，取消标记，（中继器）当前。

3. 新建交互，移动时，启用情形判断。

情形 1：如果 选中状态于 当前 == 真，添加行，（中继器）添加 1 行。

* 需要注意的是，添加的行这里引用的 右穿梭框中的中继器

等待 500 毫秒，删除行，（中继器）中已标记的行。

4. 添加复选框属性，交互样式，元件选中时，字体、线段颜色为蓝色（#0052D9）

1. 同理配置右穿梭框交互。

创建 " 向左向右 " 穿梭按钮的交互转态

1. 选中向右穿梭按钮，在交互窗格中新建交互，单击时，触发事件，选项 fire 移动时。

2. 同理设置向左按钮的交互状态。

预览交互

点击预览，在预览页面 可将选项在左右穿梭框中任意穿梭。

预览地址：https://rnerwc.axshare.com

OK，这期内容到这里就结束了。

本文由 @PM 大明同学 原创发布于人人都是产品经理。未经作者许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务