好玩的B端組件丨數據穿梭框

1 評論 7493 瀏覽 33 收藏 8 分鐘

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

  • 大家做原型的時候,肯定用過Axure軟件。這個軟件功能強大,上手快。大多數公司都是使用這個軟件來寫需求、做交互。
  • 高保真原型,大家工作中應該也會接觸過,如果時間寬?;蛘唔椖恳螅蠹乙矔鲆恍└弑U娴脑?。

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

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

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

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

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

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

一、數據穿梭框的作用

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

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

二、數據穿梭框的組成

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

如下圖:

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

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

1. 標準穿梭框

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

2. 帶搜索的穿梭框

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

3. 單向穿梭框

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

4. 簡單模式的穿梭框

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

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

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

四、如何使用數據穿梭框

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

1. 數據穿梭框的三不用

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

2. 數據穿梭框二必用

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

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

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

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

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

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

六、小結

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

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

相關閱讀:

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

好玩的B端組件 丨 導航

專欄作家

原木森林,人人都是產品經理專欄作家。專注于用戶增長相關的邏輯、方法和案例分享。

本文原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大佬,求RP源文件,xugm.wh@qq.com,感謝~~

    來自山東 回復