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

• 大家做原型的時(shí)候，肯定用過(guò)Axure軟件。這個(gè)軟件功能強(qiáng)大，上手快。大多數(shù)公司都是使用這個(gè)軟件來(lái)寫(xiě)需求、做交互。
• 高保真原型，大家工作中應(yīng)該也會(huì)接觸過(guò)，如果時(shí)間寬?；蛘唔?xiàng)目要求，大家也會(huì)出一些高保真的原型。

你有沒(méi)有想過(guò)這個(gè)問(wèn)題：用Axure做的極致高保真，會(huì)是什么樣子？

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

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

之所以說(shuō)它代表了高保真原型的極致，是因?yàn)樗慕换バЧ玫搅朔浅６嗟闹R(shí)點(diǎn)。如果這個(gè)穿梭框能做出來(lái)，那么互聯(lián)網(wǎng)上所有產(chǎn)品的交互效果，都能做出來(lái)。

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

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

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

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

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

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

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

如下圖：

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

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

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

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

2. 帶搜索的穿梭框

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

3. 單向穿梭框

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

4. 簡(jiǎn)單模式的穿梭框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、小結(jié)

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

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

相關(guān)閱讀：

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

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