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

一、交互樣式

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

1. 初始載入時(shí)

• 僅在待選區(qū)顯示待選項(xiàng)，已選區(qū)現(xiàn)選項(xiàng)不顯示；
• 禁用已選區(qū)全選勾選框、添加按鈕與移除按鈕；
• 待選區(qū)已選選項(xiàng)數(shù)量與已選區(qū)已選選項(xiàng)數(shù)量、可見選項(xiàng)數(shù)量均為“0”；

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

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

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

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

3. 取消選中時(shí)

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

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

• 全選按鈕狀態(tài)變更，當(dāng)已選選項(xiàng)數(shù)量等于當(dāng)前區(qū)域可見選項(xiàng)數(shù)量時(shí)，全選按鈕變更為選中狀態(tài)，否則變更為半選中狀態(tài)；
• 根據(jù)已選選項(xiàng)數(shù)量判斷添加/移除按鈕狀態(tài)（禁用/啟用）；

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

• 隱藏當(dāng)前區(qū)域已選中選項(xiàng)，并在目標(biāo)區(qū)域顯示對(duì)應(yīng)選項(xiàng)；
• 待選區(qū)/已選區(qū)已選選項(xiàng)數(shù)量均為“0”，待選區(qū)/已選區(qū)可見選項(xiàng)數(shù)量為實(shí)際值；
• 待選區(qū)/已選區(qū)全選勾選框?yàn)槲催x中狀態(tài)；
• 禁用添加、移除按鈕；
• 清空搜索框已輸入的關(guān)鍵詞；

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

• 當(dāng)全選勾選框?yàn)槲催x中狀態(tài)時(shí)，選中當(dāng)前區(qū)域全部選項(xiàng)；
• 當(dāng)全選勾選框?yàn)橐堰x中狀態(tài)時(shí)，取消選中當(dāng)前區(qū)域全部選項(xiàng)；
• 當(dāng)全選勾選框?yàn)榘脒x中狀態(tài)時(shí)，選中當(dāng)前區(qū)域全部選項(xiàng)；
• 同步更新已選選項(xiàng)數(shù)量、添加/移除按鈕狀態(tài)；

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

• 輸入關(guān)鍵詞，顯示刪除圖標(biāo)，并根據(jù)輸入的關(guān)鍵詞展示對(duì)應(yīng)的可見選項(xiàng)；
• 清空關(guān)鍵詞，隱藏刪除圖標(biāo)，取消當(dāng)前所有已選中選中，展示當(dāng)前區(qū)域全部可見選項(xiàng)；
• 點(diǎn)擊刪除圖標(biāo)，清空已輸入的關(guān)鍵詞；
• 檢索出的可見選項(xiàng)可以選中/取消選中；

二、基本思路

1. 根據(jù)當(dāng)前中繼器可見選項(xiàng)數(shù)量（VC，VisibleCount）與已選選項(xiàng)數(shù)量（SC，SelectedCount）控制載入時(shí)全選勾選框（SelectAll）是否啟用及狀態(tài)；
2. 通過(guò)中繼器[[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)步驟

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

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

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

• 參照上圖，分別設(shè)置單個(gè)元件的交互樣式；
• 針對(duì)組合元件Option設(shè)置選項(xiàng)組：Row；
• 針對(duì)組合元件Option設(shè)置交互效果，單擊時(shí)，若當(dāng)前未選中，設(shè)置選中“當(dāng)前”為真。若當(dāng)前已選中，取消選中。

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

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

• 中繼器數(shù)據(jù)列說(shuō)明。

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

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

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

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

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

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

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

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

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

參考源文件，不詳述

5. 靜態(tài)效果

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

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

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

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

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

• 設(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)。

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

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

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

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

• 設(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í)。
• 設(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í)。

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

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

• 設(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í)。

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

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

• 設(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í)。

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

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

• 設(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í)。

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

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

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

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

2、源文件下載地址：

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

提取碼：6ztz

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

4、本文首發(fā)于個(gè)人公眾號(hào)：倉(cāng)配那些事兒。

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

作者：Pershing，個(gè)人公眾號(hào)：倉(cāng)配那些事兒

本文由 @Pershing 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議