感謝導語：穿梭框可以從一堆選項中選出所需要得選項，是系統中常用得選擇器。了如何在Axure中制作高保真得多選穿梭框得原型模板，一起來學習一下吧。

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

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

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

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

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

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

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

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

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

。

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

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

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

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

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

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

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

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

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

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

感謝由 等Axure高保真原型 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝

題圖來自 Unsplash，基于 CC0 協議