數(shù)據(jù)穿梭框是一種數(shù)據(jù)輸入類的組件，都是對數(shù)據(jù)進(jìn)行選擇、處理。本文將詳細(xì)介紹數(shù)據(jù)穿梭框，以便更好地應(yīng)用與產(chǎn)品設(shè)計當(dāng)中，希望對你有所幫助。

• 大家做原型的時候，肯定用過Axure軟件。這個軟件功能強(qiáng)大，上手快。大多數(shù)公司都是使用這個軟件來寫需求、做交互。
• 高保真原型，大家工作中應(yīng)該也會接觸過，如果時間寬裕或者項目要求，大家也會出一些高保真的原型。

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

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

這是筆者用Axure做的數(shù)據(jù)穿梭框的高保真原型。根據(jù)筆者多年做高保真原型的經(jīng)驗(yàn)。這個小小的數(shù)據(jù)穿梭框組件，基本上代表了Axure做高保真原型的極致。

之所以說它代表了高保真原型的極致，是因?yàn)樗慕换バЧ?，用到了非常多的知識點(diǎn)。如果這個穿梭框能做出來，那么互聯(lián)網(wǎng)上所有產(chǎn)品的交互效果，都能做出來。

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

下面連一些實(shí)用成分的內(nèi)容：系統(tǒng)全面地了解一下數(shù)據(jù)穿梭框。

一、數(shù)據(jù)穿梭框的作用

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

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

二、數(shù)據(jù)穿梭框的組成

一個標(biāo)準(zhǔn)的數(shù)據(jù)穿梭框由：待選框、已選框、數(shù)據(jù)列表、選擇按鈕、穿梭按鈕、數(shù)據(jù)量描述六部分組成。

如下圖：

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

三、幾種不同類型的數(shù)據(jù)穿梭框

1. 標(biāo)準(zhǔn)穿梭框

最常見的數(shù)據(jù)穿梭框，數(shù)據(jù)可以雙向穿梭。

2. 帶搜索的穿梭框

基礎(chǔ)穿梭框上支持搜索功能，當(dāng)穿梭框中數(shù)據(jù)量較大時，提供給用戶更快捷的數(shù)據(jù)項定位能力。

3. 單向穿梭框

數(shù)據(jù)只能從待選框到已選框，不能從已選框到待選框。

4. 簡單模式的穿梭框

點(diǎn)擊數(shù)據(jù)列表，即可完成數(shù)據(jù)穿梭，交互比較簡單。

5. 與樹選擇組件結(jié)合使用

當(dāng)選項數(shù)據(jù)量結(jié)構(gòu)比較復(fù)雜時使用。

四、如何使用數(shù)據(jù)穿梭框

前文提到，數(shù)據(jù)穿梭框獨(dú)特的交互方式，可以提升用戶選擇數(shù)據(jù)時的使用體驗(yàn)。但是使用起來有一定的門檻，

1. 數(shù)據(jù)穿梭框的三不用

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

2. 數(shù)據(jù)穿梭框二必用

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

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

3. 使用數(shù)據(jù)穿梭框需要注意的問題

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

五、從實(shí)戰(zhàn)中整理出來的常用B端組件

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

六、小結(jié)

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

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

相關(guān)閱讀：

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

好玩的B端組件 丨 導(dǎo)航