B端體驗(yàn)細(xì)節(jié)（四）：列表構(gòu)建器的設(shè)計(jì)模式

什么是列表構(gòu)建器

在了解“列表構(gòu)建器”之前，我們先來了解下什么是“列表”和“構(gòu)建器”。

列表是一種數(shù)據(jù)項(xiàng)構(gòu)成的有限序列，即按照一定的線性順序，排列而成的數(shù)據(jù)項(xiàng)的集合。常見的列表有新聞流、表格、事件列表、好友列表等。

在 java 中，構(gòu)建器主要用于把復(fù)雜對(duì)象的構(gòu)建過程抽象出來，使得復(fù)雜對(duì)象的構(gòu)建可以分部件分別創(chuàng)建，從而根據(jù)需要構(gòu)建出來非常復(fù)雜的對(duì)象。由此我們可以推演出日常中大家口口相傳的圖表構(gòu)建器、地圖構(gòu)建器等實(shí)際是在闡述圖表、地圖等依據(jù)某種規(guī)范或規(guī)則生成此類對(duì)象的過程。

因此，我們今天要聊的“列表構(gòu)建器”就是通過某種途徑，達(dá)到用戶所需的列表對(duì)象的過程。

在 B 端界面中，穿梭框就是列表構(gòu)建器的一種展現(xiàn)形式，用戶從較大的數(shù)據(jù)集合中挑選出符合自己所需的較小的數(shù)據(jù)集合。通常大數(shù)據(jù)集合在左邊（待選區(qū)），稱之為源數(shù)據(jù)區(qū)；小數(shù)據(jù)集合在右邊（已選區(qū)），稱之為目標(biāo)數(shù)據(jù)區(qū)。

為什么需要列表構(gòu)建器

B 端界面上為何會(huì)需要列表構(gòu)建器這種組件呢？從實(shí)踐經(jīng)驗(yàn)來看，無外乎以下 2 點(diǎn)：

1. 所見即所得

源列表和目標(biāo)列表在同一個(gè)頁面，用戶無需通過跳轉(zhuǎn)頁面來回查看源和目標(biāo)數(shù)據(jù)，不僅提升了用戶操作效率，也提升了用戶操作的愉悅性。

2. 數(shù)據(jù)展示量大

列表構(gòu)建器可展示的源數(shù)據(jù)空間和目標(biāo)數(shù)據(jù)空間都比 select 組件大的多，這非常方便用戶在界面上自由與直觀地操作。對(duì)于 B 端產(chǎn)品來說，數(shù)據(jù)量大是不爭(zhēng)的事實(shí)，在展示、操作、呈現(xiàn)上也是急需解決的問題。列表構(gòu)建器的出現(xiàn)在一定程度上解決了某些場(chǎng)景下的問題。

什么時(shí)候使用列表構(gòu)建器

使用列表構(gòu)建器設(shè)計(jì)模式的情景為：

1. 源數(shù)據(jù)量大，且目標(biāo)數(shù)據(jù)量也大的情況下，適合使用；
2. 不想通過滾動(dòng)、跳轉(zhuǎn)等方式查看源和目標(biāo)數(shù)據(jù)時(shí)，適合使用。

6 種常見的列表構(gòu)建器

根據(jù)不同場(chǎng)景下的不同需求，衍生出了列表構(gòu)建器的多種形態(tài)，下面分享一下 B 端常見的列表構(gòu)建器場(chǎng)景設(shè)計(jì)模式。

1. 基礎(chǔ)列表構(gòu)建器

What 是什么

基礎(chǔ)列表構(gòu)建器是列表構(gòu)建器的基礎(chǔ)用法，展示了數(shù)據(jù)量不大的源數(shù)據(jù)，用戶通過選擇后確定目標(biāo)數(shù)據(jù)。

When 使用場(chǎng)景

當(dāng)源數(shù)據(jù)量小于大約 50 條時(shí)，且選擇的目標(biāo)數(shù)據(jù)要直接可見時(shí)，可以考慮使用。

How 如何使用

用戶直接通過滾輪查看源數(shù)據(jù)中的目標(biāo)數(shù)據(jù)，然后選中它們。當(dāng)確認(rèn)后，點(diǎn)擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

2. 可搜索列表構(gòu)建器

What 是什么

展示了數(shù)據(jù)量較大的源數(shù)據(jù)，且有搜索功能，用戶通過選擇后確定目標(biāo)數(shù)據(jù)。

When 使用場(chǎng)景

當(dāng)源數(shù)據(jù)量較大，用戶已經(jīng)無法通過在有限容器中滾動(dòng)鼠標(biāo)快速查閱和定位數(shù)據(jù)時(shí)，可以考慮使用。

How 如何使用

用戶通過搜索確定目標(biāo)數(shù)據(jù)，勾選后再通過穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

3. 可排序列表構(gòu)建器

What 是什么

該列表構(gòu)建器可對(duì)數(shù)據(jù)進(jìn)行排序，讓用戶將自身關(guān)心的數(shù)據(jù)前置。

When 使用場(chǎng)景

當(dāng)目標(biāo)數(shù)據(jù)量較大，用戶需要將自身所關(guān)心靠前展示，進(jìn)行查看、對(duì)比、分析等操作時(shí)，可以考慮使用。

How 如何使用

用戶通過搜索確定源數(shù)據(jù)中的目標(biāo)數(shù)據(jù)，勾選后再通過穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)；再在已選區(qū)中將某些數(shù)據(jù)進(jìn)行置頂展示或前置展示。

4. 可自動(dòng)穿梭列表構(gòu)建器

What 是什么

該列表構(gòu)建器可直接將源數(shù)據(jù)穿梭到目標(biāo)數(shù)據(jù)區(qū)。

When 使用場(chǎng)景

當(dāng)勾選的源數(shù)據(jù)無需反復(fù)確認(rèn)時(shí)，可以考慮使用，這大大加快了用戶的操作速度。

How 如何使用

用戶點(diǎn)擊待選區(qū)數(shù)據(jù)的添加按鈕，直接可將數(shù)據(jù)添加到已選區(qū)；點(diǎn)擊已選區(qū)數(shù)據(jù)的刪除按鈕，也可將數(shù)據(jù)回歸到待選區(qū)。

5. 表格式列表構(gòu)建器

What 是什么

顧名思義，表格式列表構(gòu)建器以表格的形式展現(xiàn)，方便用戶多維度確認(rèn)數(shù)據(jù)范圍。

When 使用場(chǎng)景

當(dāng)用戶選取的結(jié)果數(shù)據(jù)需要數(shù)據(jù)本身的多維度屬性來確定時(shí)，可以考慮使用。

How 如何使用

用戶通過滾輪查看或搜索源數(shù)據(jù)中的目標(biāo)數(shù)據(jù)，然后選中它們。當(dāng)確認(rèn)后，點(diǎn)擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

6. 標(biāo)題式列表構(gòu)建器

What 是什么

標(biāo)題式列表構(gòu)建器除了展現(xiàn)普通的數(shù)據(jù)，還有圖片等信息。

When 使用場(chǎng)景

當(dāng)源數(shù)據(jù)的展現(xiàn)需要更加豐富時(shí)，可以考慮使用。

How 如何使用

用戶通過滾輪查看或搜索源數(shù)據(jù)中的目標(biāo)數(shù)據(jù)，然后選中它們。當(dāng)確認(rèn)后，點(diǎn)擊穿梭按鈕將已選擇的數(shù)據(jù)轉(zhuǎn)入已選區(qū)。

除了以上常用場(chǎng)景的列表構(gòu)建器設(shè)計(jì)模式，根據(jù)業(yè)務(wù)的需求大家可以在此基礎(chǔ)上繼續(xù)拓展和衍生，豐富 B 端界面的表現(xiàn)力，及滿足業(yè)務(wù)日益豐富的場(chǎng)景需求。

列表構(gòu)建器以及衍生案例

基于基礎(chǔ)的常用列表構(gòu)建器，不同產(chǎn)品根據(jù)自身的實(shí)際需求衍生出了多類構(gòu)建器，我們一起來感受下吧。

1. sketch 常用功能構(gòu)建器

在 sketch 界面中，工具欄被設(shè)計(jì)成只顯示用戶認(rèn)為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。

2. sketch 常用色彩構(gòu)建器

sketch 提供了常用色彩構(gòu)建功能，對(duì)于設(shè)計(jì)師常用的顏色可以自行添加出來，形成一份常用色彩庫。

3. 應(yīng)用參數(shù)關(guān)聯(lián)構(gòu)建器

應(yīng)用需要在關(guān)聯(lián)參數(shù)后才可運(yùn)行。右邊為參數(shù)集合，左邊為應(yīng)用與待關(guān)聯(lián)參數(shù)列表，用戶只需要從參數(shù)集合里面選擇目標(biāo)參數(shù)拖拽到對(duì)應(yīng)的應(yīng)用容器中，即可完成應(yīng)用與參數(shù)的綁定。

4. 表格列顯示字段構(gòu)建器

當(dāng)表格列非常多時(shí)，用戶可以選擇列顯示字段構(gòu)建器來將常用列字段選取出來。如此表格會(huì)變得輕盈，且數(shù)據(jù)加載變快。

5. word 底部欄元素構(gòu)建器

鼠標(biāo)右鍵點(diǎn)擊 word 底部欄，會(huì)出現(xiàn)底部欄上可展現(xiàn)的所有元素。用戶點(diǎn)擊勾選后，元素被展現(xiàn)到了底部欄上。

6. 自定義模塊構(gòu)建器

富途牛牛允許用戶自定義界面模塊，方便用戶按自身的習(xí)慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的，配置成自己想要的模塊界面即可。

7. 選成員構(gòu)建器

很多 B 端產(chǎn)品的成員管理模塊都需要涉及到添加成員，這時(shí)候會(huì)用到選成員構(gòu)建器，將成員從一個(gè)池子添加到另一個(gè)池子。

總結(jié)

列表構(gòu)建器在 B 端必不可少，產(chǎn)品經(jīng)理和設(shè)計(jì)師根據(jù)產(chǎn)品本身的業(yè)務(wù)訴求，基于基礎(chǔ)的列表構(gòu)建器衍生出了很多種玩法，以不斷提升 B 端的用戶體驗(yàn)。

如果你發(fā)現(xiàn)了我在文中沒有提到的列表構(gòu)建器及其衍生案例，歡迎在文章下方留言~

歡迎關(guān)注作者微信公眾號(hào)：「知果日記」