穿梭框（Transfer）是原型設(shè)計(jì)中較為常用的控件之一，本期我們嘗試使用Axure中繼器實(shí)現(xiàn)動(dòng)態(tài)穿梭框控件。

一、交互樣式

動(dòng)態(tài)交互效果如下：

交互說明：

1、初始載入時(shí)：

A、僅在待選區(qū)顯示待選項(xiàng)，已選區(qū)現(xiàn)選項(xiàng)不顯示；

B、禁用已選區(qū)全選勾選框、添加按鈕與移除按鈕；

C、待選區(qū)已選選項(xiàng)數(shù)量與已選區(qū)已選選項(xiàng)數(shù)量、可見選項(xiàng)數(shù)量均為“0”；

2、選中選項(xiàng)時(shí)：

A、被選中選項(xiàng)標(biāo)記為藍(lán)色；

B、顯示實(shí)際的已選選項(xiàng)數(shù)量（待選區(qū)or已選區(qū)）；

C、全選按鈕狀態(tài)變更，當(dāng)已選選項(xiàng)數(shù)量等于當(dāng)前區(qū)域可見選項(xiàng)數(shù)量時(shí)，全選按鈕變更為選中狀態(tài)

D、啟用添加/移除按鈕；

3、取消選中時(shí)：

A、對(duì)應(yīng)選項(xiàng)恢復(fù)初始顏色；

B、顯示實(shí)際的已選選項(xiàng)數(shù)量（待選區(qū)or已選區(qū)）；

C、全選按鈕狀態(tài)變更，當(dāng)已選選項(xiàng)數(shù)量等于當(dāng)前區(qū)域可見選項(xiàng)數(shù)量時(shí)，全選按鈕變更為選中狀態(tài)，否則變更為半選中狀態(tài)；

D、根據(jù)已選選項(xiàng)數(shù)量判斷添加/移除按鈕狀態(tài)（禁用/啟用）；

4、點(diǎn)擊添加/移除按鈕時(shí)：

A、隱藏當(dāng)前區(qū)域已選中選項(xiàng)，并在目標(biāo)區(qū)域顯示對(duì)應(yīng)選項(xiàng)；

B、待選區(qū)/已選區(qū)已選選項(xiàng)數(shù)量均為“0”，待選區(qū)/已選區(qū)可見選項(xiàng)數(shù)量為實(shí)際值；

C、待選區(qū)/已選區(qū)全選勾選框?yàn)槲催x中狀態(tài)；

D、禁用添加、移除按鈕；

E、清空搜索框已輸入的關(guān)鍵詞；

5、點(diǎn)擊全選勾選框時(shí)：

A、當(dāng)全選勾選框?yàn)槲催x中狀態(tài)時(shí)，選中當(dāng)前區(qū)域全部選項(xiàng)；

B、當(dāng)全選勾選框?yàn)橐堰x中狀態(tài)時(shí)，取消選中當(dāng)前區(qū)域全部選項(xiàng)；

C、當(dāng)全選勾選框?yàn)榘脒x中狀態(tài)時(shí)，選中當(dāng)前區(qū)域全部選項(xiàng)；

D、同步更新已選選項(xiàng)數(shù)量、添加/移除按鈕狀態(tài)；

6、輸入關(guān)鍵詞搜索時(shí)：

A、輸入關(guān)鍵詞，顯示刪除圖標(biāo)，并根據(jù)輸入的關(guān)鍵詞展示對(duì)應(yīng)的可見選項(xiàng)；

B、清空關(guān)鍵詞，隱藏刪除圖標(biāo)，取消當(dāng)前所有已選中選中，展示當(dāng)前區(qū)域全部可見選項(xiàng)；

C、點(diǎn)擊刪除圖標(biāo)，清空已輸入的關(guān)鍵詞；

       D、檢索出的可見選項(xiàng)可以選中/取消選中；

二、基本思路

1、根據(jù)當(dāng)前中繼器可見選項(xiàng)數(shù)量（VC，VisibleCount）與已選選項(xiàng)數(shù)量（SC，SelectedCount）控制載入時(shí)全選勾選框（SelectAll）是否啟用及狀態(tài)；

2、通過中繼器[[Column.Visible]]列控制待選區(qū)與已選區(qū)選項(xiàng)是否顯示；

3、勾選選項(xiàng)時(shí)，標(biāo)記當(dāng)前選中行及目標(biāo)中繼器中對(duì)應(yīng)行，并更新已選選項(xiàng)數(shù)量；

4、根據(jù)已選選項(xiàng)數(shù)量（SC）控制添加、移除按鈕是否啟用；

5、點(diǎn)擊添加、移除按鈕時(shí)，更新已標(biāo)記行[[Column.Visible]]值。

 以上是穿梭框基本思路。本期較上一期《原型設(shè)計(jì)-Axure中繼器實(shí)現(xiàn)動(dòng)態(tài)樹結(jié)構(gòu)控件》難度小了很多，細(xì)心耐心即可。

三、實(shí)現(xiàn)步驟

3.1基礎(chǔ)元件-選項(xiàng)

1、選項(xiàng)-靜態(tài)效果

A、在Axure畫布中新增組合元件“Option”，構(gòu)成元素：組合元件“Option -Select”+文本標(biāo)簽（Option -Name）+矩形（未命名，寬198，高38），并調(diào)整到合適大??；

其中組合元件“Option-Select”構(gòu)成元素為：矩形（未命名，寬12，高12）+Icon（√）；

B、參照上圖，分別設(shè)置單個(gè)元件的交互樣式；

C、針對(duì)組合元件Option設(shè)置選項(xiàng)組：Row；

D、針對(duì)組合元件Option設(shè)置交互效果，單擊時(shí)，若當(dāng)前未選中，設(shè)置選中“當(dāng)前”為真。若當(dāng)前已選中，取消選中。

E、新增中繼器“Optional”，將組合元件“Option”復(fù)制其中，并設(shè)置中繼器屬性“隔離列表項(xiàng)之間的選項(xiàng)組”為“不勾選”；

F、往中繼器“Optional”中添加初始數(shù)據(jù)（初始數(shù)據(jù)可自行根據(jù)需要添加）

中繼器數(shù)據(jù)列說明

2、選項(xiàng)-初始載入效果

A、頁(yè)面載入時(shí)，添加篩選，只顯示Visible=1的數(shù)據(jù)

B、設(shè)置（Option-Name）顯示內(nèi)容為[[Column.Name]]

3.2基礎(chǔ)元件-搜索框

不詳述，參見上期文章《原型設(shè)計(jì)-Axure中繼器實(shí)現(xiàn)動(dòng)態(tài)樹結(jié)構(gòu)控件》

3.3基礎(chǔ)元件-全選選擇框

A、在Axure畫布中新增動(dòng)態(tài)面板“SelectAll”，構(gòu)成元素如下：

B、基本思路：根據(jù)已選中選項(xiàng)的數(shù)量切換動(dòng)態(tài)面板（SelectAll）。具體交互在動(dòng)態(tài)效果中添加。

3.4基礎(chǔ)元件-按鈕-添加/移除

參考源文件，不詳述

3.5靜態(tài)效果

A、將制作好的基礎(chǔ)元件進(jìn)行組合如下：

B、復(fù)制一份已制作好的樣式，命名為“Selected”，并將其中繼器[[Column.Visile]]數(shù)值修改為“0”，即不顯示；

       C、將已選區(qū)、待選區(qū)4個(gè)文本標(biāo)簽分別命名如下，用于后續(xù)交互。

3.6動(dòng)態(tài)效果-初始載入時(shí)

       A、設(shè)置Optional-SC、Selected-SC、Selected-VC初始值為0；

B、設(shè)置頁(yè)面載入時(shí)，文本標(biāo)簽Optional-VC值為Optional中繼器的可視Item匯總數(shù)；

C、設(shè)置載入時(shí)，全選勾選框Optional-SelectAll、Selected-SelectAll初始狀態(tài)，設(shè)置如下：

即，當(dāng)可選項(xiàng)數(shù)量為0時(shí)，禁用全選勾選框；

當(dāng)可選項(xiàng)數(shù)量不為0，且已選項(xiàng)數(shù)量等于可選項(xiàng)數(shù)量時(shí)，設(shè)置全選勾選框?yàn)檫x中；

當(dāng)可選項(xiàng)數(shù)量不為0，且已選項(xiàng)數(shù)量小于可選項(xiàng)數(shù)量但大于0時(shí)，設(shè)置全選勾選框?yàn)榘脒x中；

當(dāng)可選項(xiàng)數(shù)量不為0，已選項(xiàng)數(shù)量為0時(shí)，設(shè)置全選勾選框?yàn)槲催x中狀態(tài)。

D、設(shè)置載入時(shí)，添加（Add）/移除（Remove）按鈕初始狀態(tài)如下：

即當(dāng)待選區(qū)已選項(xiàng)數(shù)量>0時(shí)，啟用添加（Add）按鈕。否則禁用；

移除（Remove）根據(jù)已選區(qū)已選項(xiàng)數(shù)量判斷，原理相同。

3.7動(dòng)態(tài)效果-選項(xiàng)選中/取消選中效果

       A、設(shè)置待選區(qū)Optional下組合元件Option單擊時(shí)，交互如下：

即當(dāng)選項(xiàng)Option未被選中時(shí)，點(diǎn)擊單擊：

設(shè)置當(dāng)前為選中；

標(biāo)記當(dāng)前行，標(biāo)記已選區(qū)Selected中繼器中名稱相同的行；

設(shè)置待選區(qū)已選項(xiàng)數(shù)量Optional-SC為當(dāng)前數(shù)量+1；

觸發(fā)事件：Add-載入時(shí)、Optional-SelectAll載入時(shí)。

當(dāng)選項(xiàng)Option已選中時(shí)，點(diǎn)擊單擊：

設(shè)置當(dāng)前為未選中；

取消標(biāo)記當(dāng)前行，取消標(biāo)記已選區(qū)Selected中繼器中名稱相同的行；

設(shè)置待選區(qū)已選項(xiàng)數(shù)量Optional-SC為當(dāng)前數(shù)量-1；

觸發(fā)事件：Add-載入時(shí)、Optional-SelectAll載入時(shí)。

B、設(shè)置待選區(qū)Optional下組合元件Option-Select交互如下：

即當(dāng)Option-Select未被選中時(shí)，單擊設(shè)置當(dāng)前為選中，同時(shí)觸發(fā)事件Option-單擊時(shí)；

當(dāng)Option-Select被選中時(shí)，單擊設(shè)置當(dāng)前為未選中，同時(shí)觸發(fā)事件Option-單擊時(shí)。

C、參照A、B步驟，針對(duì)已選區(qū)Selected中選項(xiàng)與選項(xiàng)勾選框做類似的交互設(shè)置。

3.8動(dòng)態(tài)效果-全選勾選框選中/取消選中效果

       A、設(shè)置待選區(qū)Optional下組合元件SelectAll單擊時(shí)，交互如下：

即，當(dāng)全選勾選框?yàn)槲催x中狀態(tài)時(shí)，設(shè)置當(dāng)前為選中，觸發(fā)事件：Option-單擊時(shí)；

當(dāng)全選勾選框?yàn)橐堰x中狀態(tài)時(shí)，取消當(dāng)前選中，觸發(fā)事件：Option-單擊時(shí)；

當(dāng)全選勾選框?yàn)榘脒x中狀態(tài)時(shí)，取消已選中選項(xiàng)，更新已選中選項(xiàng)數(shù)量Optional-SC為0，設(shè)置全選勾選框?yàn)槲催x中狀態(tài)，并觸發(fā)事件：Optional-SelectAll單擊時(shí)。

B、參照A步驟，針對(duì)已選區(qū)Selected下組合元件SelectAll做同樣設(shè)置。

3.9動(dòng)態(tài)效果-添加/移除效果

A、設(shè)置添加（Add）按鈕單擊時(shí)交互效果如下：

即，當(dāng)待選區(qū)已選中選項(xiàng)數(shù)量大于0時(shí)，

更新待選區(qū)已標(biāo)記行未不可見，更新已選區(qū)對(duì)應(yīng)行為可見；

更新Optional-SC、Selected-SC值為0，更新Optional-VC、Selected-VC值為對(duì)應(yīng)中繼器可見數(shù)量；

取消標(biāo)記中繼器Optional、Selected全部行；

觸發(fā)事件：Add-載入時(shí)、Optional-SelectAll-載入時(shí)、Selected-SelectAll-載入時(shí)。

B、參照A設(shè)置，設(shè)置移除（Remove）按鈕交互。

3.10動(dòng)態(tài)效果-模糊查詢

A、設(shè)置待選區(qū)Optional下組合元件搜索框（Search）文本改變時(shí)交互效果如下：

即，當(dāng)Search搜索框值不為空時(shí)，

顯示Icon（Delete）；

添加篩選：[[Item.Name.indexof(Name)>-1&&Item.Visible==1]]；

更新Optional-VC值為篩選后的可見選項(xiàng)數(shù)。

當(dāng)Search搜索框值不為空時(shí)

隱藏Icon（Delete）；

添加篩選：只顯示Visible=1的選項(xiàng)；

取消標(biāo)記中繼器Optional、Selected下全部行；

更新Optional-SC、Selected-SC值為0，更新Optional-VC、Selected-VC值為對(duì)應(yīng)中繼器可見數(shù)量；

觸發(fā)事件：Optional-SelectAll-載入時(shí)、Add-載入時(shí)、Remove-載入時(shí)。

B、參照A步驟，針對(duì)已選區(qū)Selected下組合元件搜索框（Search）做同樣設(shè)置

     至此，穿梭框（Transfer）交互效果制作完畢。

四、在線演示與源文件下載

1、在線演示地址：https://e8scr9.axshare.com

2、源文件下載地址：

鏈接：https://pan.baidu.com/s/1kjO8By5fWLFLDb_miX2qaw

提取碼：6ztz

3、源文件采用Axure9.0制作，若無法打開，請(qǐng)檢查Axure版本。

4、由于本文內(nèi)容較多，不太適合手機(jī)閱讀，故本文同步上傳至網(wǎng)站：人人都是產(chǎn)品經(jīng)理。

5、近期由于私人事務(wù)繁忙，導(dǎo)致倉(cāng)儲(chǔ)規(guī)劃系列斷更，等處理完此部分事務(wù)，我會(huì)繼續(xù)在個(gè)人公眾號(hào)中更新。