編輯導語：穿梭框可以從一堆選項中選出所需要的選項，是系統(tǒng)中常用的選擇器。本文作者分享了如何在Axure中制作高保真的多選穿梭框的原型模板，一起來學習一下吧。

穿梭框是系統(tǒng)中常用的選擇器，它可以從一堆選項中選出所需要的選項。那今天我們講一下在Axure中如何制作高保真的多選穿梭框的原型模板。

制作完成之應具備以下交互效果：

在可選欄目選項中可以選擇多個選項，選中后點擊右箭頭可以設置到已選欄目在已選欄目選項中可以選擇多個選項，選中后點擊左箭頭可以取消選擇，并恢復到未選欄目可選欄目和已選欄目都可以通過模糊搜索快速查詢選項

原型地址：https://hipr0y.axshare.com/#g=1

我們先做左邊的選擇器，用中繼器來制作選擇器，中繼器內部默認自帶一個矩形元件，我們按需求修改矩形的樣式、和尺寸，我們需要注意的是要增加一個選中的交互樣式，這樣就可以通過選中變色看出已經選中了設么選項。

在中繼器表格里，默認自帶一列column0，在這列里我們填寫選項名稱，然后在底部加個邊框矩形，完成后如下入所示：

然后我們在中繼器增加1列，xuanzhong列，默認為空即可。這列的作用就是用于記錄哪些選項被選中，我們這里制定一個規(guī)則，如果對應該xuanzhong列的值等于1就是被選中，否則就沒有被選中。

所以我們要在中繼器每項加載時添加交互，如果選中列的值等于1，我們就用設置選中的交互，將該行選項矩形設置為真。

那如果鼠標單擊選項時，我們分兩種情況添加交互，如果該行xuanzhong列的值=1，那么相當于從選中變成未選中，我們直接更新當前行的xuanzhong的值為0即可；如果該行xuanzhong列的值不等于1，那么相當于從未選中變成選中，我們直接更新當前行xuanzhong列的值為1。

。

完成之后我們還要增加一列xianshi，這列的作用是控制對應行內容是否顯示。我們在中繼器每項加載時增加判斷條件，如果顯示列的值不等于1，那么我們就用隱藏事件，隱藏該行選項。

我們用一個輸入框和搜索按鈕，制作一個搜索框，如下圖所示：

點擊搜索按鈕時，我們用篩選事件，對中繼器進行篩選，篩選條件就是，中繼器里第一列選項文字包含輸入框里的文字，如果axure10的話可以在條件里直接選包含；如果Axure9及以下的話，就要用到indexof函數(shù)，如果得出結果大于-1就是包含的意思了。

上面我們做好左邊未選欄目的元件后，可以將中繼器和搜索框各復制一個到右面。復制到右面的的中繼器里的xianshi列默認值要改成0，因為右面默認是沒有選項的。

然后在兩個中繼器選項點擊時的兩個條件，前面是更新當前行xuanzhong列的值，如果未選中就更新為1，如果選中的話就更新為0，這里我們在更新的時候要把另外一個中繼器也以前更新，就是說如果選中一個選項，就兩個中繼器的該選項都要選中，如果取消選中該選項，就兩個中繼器的該選項都取消選中。

點擊右箭頭，就是要將左邊選中的選項傳遞到右邊，那么我們只要用更新行更新兩個中繼器，左邊的我們把xuanzhong列=1的行對應的xianshi列的值設置為0，那么左邊中繼器選中的行就會自動隱藏。

右邊的中繼器我們把xuanzhong列=1的行對應的xianshi列的值設置為1，那右邊中繼器選中的行就會自動顯示。最后我們還要把兩個中繼器里xuanzhong列的值恢復設置為0。

那左鍵頭其實也是一樣的道理，只不過是從原來將左邊選中的選項傳遞到右邊，變成從右邊選中的選項傳遞回左邊。

簡單來說就是更新右面已選中行的xianzhi列值為0，這樣就可以在右邊的中繼器里隱藏該選項；最后再更新左邊中繼器里選中行的xianzhi列值為1，這樣就可以在左邊顯示了。

那么以上就是Axure高保真原型——多選穿梭框的制作教程了，感謝您的閱讀，我們下期見，88~

本文由 @Axure高保真原型 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

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