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

一、交互樣式

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

交互說明：

1、初始載入時：

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

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

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

2、選中選項時：

A、被選中選項標記為藍色；

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

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

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

3、取消選中時：

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

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

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

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

4、點擊添加/移除按鈕時：

A、隱藏當前區(qū)域已選中選項，并在目標區(qū)域顯示對應(yīng)選項；

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

C、待選區(qū)/已選區(qū)全選勾選框為未選中狀態(tài)；

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

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

5、點擊全選勾選框時：

A、當全選勾選框為未選中狀態(tài)時，選中當前區(qū)域全部選項；

B、當全選勾選框為已選中狀態(tài)時，取消選中當前區(qū)域全部選項；

C、當全選勾選框為半選中狀態(tài)時，選中當前區(qū)域全部選項；

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

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

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

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

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

       D、檢索出的可見選項可以選中/取消選中；

二、基本思路

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

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

3、勾選選項時，標記當前選中行及目標中繼器中對應(yīng)行，并更新已選選項數(shù)量；

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

5、點擊添加、移除按鈕時，更新已標記行[[Column.Visible]]值。

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

三、實現(xiàn)步驟

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

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

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

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

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

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

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

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

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

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

2、選項-初始載入效果

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

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

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

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

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

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

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

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

參考源文件，不詳述

3.5靜態(tài)效果

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

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

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

3.6動態(tài)效果-初始載入時

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

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

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

即，當可選項數(shù)量為0時，禁用全選勾選框；

當可選項數(shù)量不為0，且已選項數(shù)量等于可選項數(shù)量時，設(shè)置全選勾選框為選中；

當可選項數(shù)量不為0，且已選項數(shù)量小于可選項數(shù)量但大于0時，設(shè)置全選勾選框為半選中；

當可選項數(shù)量不為0，已選項數(shù)量為0時，設(shè)置全選勾選框為未選中狀態(tài)。

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

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

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

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

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

即當選項Option未被選中時，點擊單擊：

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

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

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

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

當選項Option已選中時，點擊單擊：

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

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

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

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

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

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

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

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

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

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

即，當全選勾選框為未選中狀態(tài)時，設(shè)置當前為選中，觸發(fā)事件：Option-單擊時；

當全選勾選框為已選中狀態(tài)時，取消當前選中，觸發(fā)事件：Option-單擊時；

當全選勾選框為半選中狀態(tài)時，取消已選中選項，更新已選中選項數(shù)量Optional-SC為0，設(shè)置全選勾選框為未選中狀態(tài)，并觸發(fā)事件：Optional-SelectAll單擊時。

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

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

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

即，當待選區(qū)已選中選項數(shù)量大于0時，

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

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

取消標記中繼器Optional、Selected全部行；

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

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

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

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

即，當Search搜索框值不為空時，

顯示Icon（Delete）；

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

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

當Search搜索框值不為空時

隱藏Icon（Delete）；

添加篩選：只顯示Visible=1的選項；

取消標記中繼器Optional、Selected下全部行；

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

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

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

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

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

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

2、源文件下載地址：

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

提取碼：6ztz

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

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

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