數據穿梭框是一種數據輸入類的組件，都是對數據進行選擇、處理。本文將詳細介紹數據穿梭框，以便更好地應用與產品設計當中，希望對你有所幫助。

• 大家做原型的時候，肯定用過Axure軟件。這個軟件功能強大，上手快。大多數公司都是使用這個軟件來寫需求、做交互。
• 高保真原型，大家工作中應該也會接觸過，如果時間寬?；蛘唔椖恳?，大家也會出一些高保真的原型。

你有沒有想過這個問題：用Axure做的極致高保真，會是什么樣子？

今天的這個B端組件–數據穿梭框會給你一個答案。

這是筆者用Axure做的數據穿梭框的高保真原型。根據筆者多年做高保真原型的經驗。這個小小的數據穿梭框組件，基本上代表了Axure做高保真原型的極致。

之所以說它代表了高保真原型的極致，是因為它的交互效果，用到了非常多的知識點。如果這個穿梭框能做出來，那么互聯網上所有產品的交互效果，都能做出來。

當然了，并不是所有項目都需要高保真，大多數項目是需要低保真即可。給大家看這個高保真組件，趣味成分大于實用成分。博大家一樂。

下面連一些實用成分的內容：系統全面地了解一下數據穿梭框。

一、數據穿梭框的作用

數據穿梭框是一種數據輸入類的組件，和選擇器、樹選擇組件的本質功能相同，都是對數據進行選擇、處理。

但是相對于后兩者，數據穿梭框可以展示更多的選項信息，而且數據穿梭框特有的交互方式，可以很直觀的讓用戶感知到對數據的選擇與處理，增加用戶的確定感。多用在一些比較莊重正式的場景，比如簽約流程、審批流程中。

二、數據穿梭框的組成

一個標準的數據穿梭框由：待選框、已選框、數據列表、選擇按鈕、穿梭按鈕、數據量描述六部分組成。

如下圖：

• 待選框：顯示待選擇的數據列表，一般位于組件的左側。
• 已選框：顯示已經選擇的數據列表，一般位于組件右側。
• 數據列表：在待選框和已選框中，顯示數據內容，如果沒有數據就顯示“數據為空”。
• 選擇按鈕：一般是復選按鈕，可以選中對應的數據。選中或取消選擇后，數據量描述文本會聯動變化。
• 穿梭按鈕：點擊對應方向的穿梭按鈕，所選中的數據會進行穿梭。如果未選中任何數據，對應方向的穿梭按鈕會處于置灰狀態。
• 數據量描述：選擇按鈕選擇后，文本會聯動變化。對應方向的數組總量發生變化事，文本也會聯動。

三、幾種不同類型的數據穿梭框

1. 標準穿梭框

最常見的數據穿梭框，數據可以雙向穿梭。

2. 帶搜索的穿梭框

基礎穿梭框上支持搜索功能，當穿梭框中數據量較大時，提供給用戶更快捷的數據項定位能力。

3. 單向穿梭框

數據只能從待選框到已選框，不能從已選框到待選框。

4. 簡單模式的穿梭框

點擊數據列表，即可完成數據穿梭，交互比較簡單。

5. 與樹選擇組件結合使用

當選項數據量結構比較復雜時使用。

四、如何使用數據穿梭框

前文提到，數據穿梭框獨特的交互方式，可以提升用戶選擇數據時的使用體驗。但是使用起來有一定的門檻，

1. 數據穿梭框的三不用

1. 頁面空間不足時，不可用。穿梭框需要一定的頁面空間，空間不足時可以使用選擇器或者樹選擇來替代。
2. 數據量較少時，無需用。數據量不多，可以直接使用選擇器組件來進行數據選擇。
3. 高頻次的功能，慎用。穿梭框雖然體驗好，但是交互相對來說有些復雜，高頻次的功能建議使用交互較為簡單的選擇器組件來提升效率。有時候效率和體驗，可能會做一些割舍，無法兼得。

2. 數據穿梭框二必用

1. 需要清晰的展示選擇數據時，必用。
2. 一些比較正式的場合，比如簽約、審批流程中，必用。

用和不用，請各位根據自己的項目要求和以上的“三不用”“二必用”原則，仔細斟酌。

3. 使用數據穿梭框需要注意的問題

• 數據量較多時，為了方便用戶快速定位數據，可以選擇使用帶搜索功能的穿梭框。
• 在非必要情況下，盡量選擇交互相對簡單的單向穿梭框。
• 使用頻次較高又不得不用雙向穿梭框的情況下，盡量選擇簡單模式來提升操作效率。
• 在數據結構較為復雜的情況下，可以和樹選擇組件結合使用。

五、從實戰中整理出來的常用B端組件

這是本人在工作中整理出來的常用B端組件。有高保真、低保證和靜態的各種組件，可以滿足不同交互要求的項目。

六、小結

作為比較特殊的一種輸入組件，數據穿梭框用對了地方，可以大幅提升產品的用戶體驗。用錯了地方或者用錯了類型，反而會影響用戶體驗。這把雙刃劍，希望各位握好。

這是《好玩的B端組件》的第三篇文章，希望對你有用。

相關閱讀：

好玩的B端組件 丨 上傳組件

好玩的B端組件 丨 導航