在電商之類的平臺產(chǎn)品里，我們常會用到一種穿梭框的設計。不熟悉的同學常把其設計成靜態(tài)頁面，其實，用Axure實現(xiàn)交互效果，也很簡單。

這期內(nèi)容，我們將深入探討Axure中穿梭篩選寬元件設計與交互技巧。

穿梭篩選框元件

創(chuàng)建穿梭篩選框所需的元件

左穿梭篩選框

1.打開一個新的 RP 文件并在畫布上打開 Page 1。

2.現(xiàn)在畫布上創(chuàng)建一個背景，在元件庫中拖出一個矩形元件，寬值200，高值300，線寬值1，線框顏色（#D9D9D9）圓角半徑為6。

3,創(chuàng)建穿梭篩選框頭部元件，在元件庫中突入一個矩形元件，寬值198，高值48，線寬值0，填充顏色（#F2F2F2）圓角半徑為6，選中前面做好的矩形元件，頂部對齊。

4.在頭部元件中創(chuàng)建全選按鈕，從元件庫中拖入復選框元件，文本改成待選列表，左上角對齊。

5.創(chuàng)建穿梭框選項列表，在元件庫中拖入一個內(nèi)聯(lián)框架，右鍵轉(zhuǎn)為動態(tài)面板，并命名為左穿梭框

6.雙擊左穿梭框動態(tài)面板，在元件庫中拖入一個中繼器元件，雙擊中繼器元件，刪除原始單元格，在元件庫中拖入若干個復選框，并輸入一些待選項。

創(chuàng)建右穿梭篩選框

1.復制粘貼做好的左穿梭篩選框，將頭部待選列表改為已選列表，選中穿梭選項列表左穿梭框改為右穿梭框，并保留一個選項。

創(chuàng)建向左向右穿梭按鈕

1.在元件庫中拖入一個矩形，寬高值為30，填充色為淺藍色（#F5F7FA）線寬1，線色為灰色（#CCCCCC），復制一個向右的icon，居中組合。

2.復制向右按鈕元件，將向右箭頭改為向左。

創(chuàng)建交互

創(chuàng)建“待選列表”按鈕的交互狀態(tài)

1.選中待選列表按鈕元件,在交互窗格中新建交互，選中，設置選中 選項為“真”，新建交互，取消選中時，設置選中，選項為“假”。

創(chuàng)建“已選列表”按鈕的交互狀態(tài)

1.同理設置已選列表按鈕，也可復制待選按鈕的交互粘貼到已選列表按鈕中。

創(chuàng)建“左穿梭框”的交互狀態(tài)

1.雙擊左穿梭框動態(tài)面板，選中中繼器選項元件，在交互窗格中新建交互，每項加載，設置文本選項 為“[[Item.Column0]]”

2.雙擊中繼器選項元件，對單個選項新建交互，選中，標記行 （中繼器）當前，取消選中時，取消標記，（中繼器）當前。

3.新建交互，移動時，啟用情形判斷。

情形1：如果 選中狀態(tài)于 當前 ==真，添加行，（中繼器）添加1行。

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

等待 500毫秒，刪除行，（中繼器）中已標記的行。

4.添加復選框?qū)傩?，交互樣式，元件選中時，字體、線段顏色為藍色（#0052D9）

創(chuàng)建“左穿梭框”的交互狀態(tài)

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

創(chuàng)建“向左向右”穿梭按鈕的交互轉(zhuǎn)態(tài)

1.選中向右穿梭按鈕，在交互窗格中新建交互，單擊時，觸發(fā)事件，選項 fire 移動時。

2.同理設置向左按鈕的交互狀態(tài)。

預覽交互

點擊預覽，在預覽頁面 可將選項在左右穿梭框中任意穿梭。

預覽地址：https://rnerwc.axshare.com

OK，這期內(nèi)容到這里就結(jié)束了。