起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端體驗細節（四）：列表構建器的設計模式
編輯導語：在B端產品中，列表構建器是一個重要板塊，當遇到數據量相對較大等場景時，列表構建器就可以被應用。列表構建器可以如何應用？本篇文章里，作者就B端列表構建器的定義、使用場景、衍生案例等方面做了總結，一起來看一下。
本文將從以下5部分展開：
- 什么是列表構建器；
- 為什么需要列表構建器；
- 什么時候使用列表構建器；
- 6種常見的列表構建器；
- 列表構建器以及衍生案例。
一、什么是列表構建器
在了解“列表構建器”之前，我們先來了解下什么是“列表”和“構建器”。
列表是一種數據項構成的有限序列，即按照一定的線性順序，排列而成的數據項的集合。常見的列表有新聞流、表格、事件列表、好友列表等。
在java中，構建器主要用于把復雜對象的構建過程抽象出來，使得復雜對象的構建可以分部件分別創建，從而根據需要構建出來非常復雜的對象。由此我們可以推演出日常中大家口口相傳的圖表構建器、地圖構建器等實際是在闡述圖表、地圖等依據某種規范或規則生成此類對象的過程。
因此，我們今天要聊的“列表構建器”就是通過某種途徑，達到用戶所需的列表對象的過程。
在B端界面中，穿梭框就是列表構建器的一種展現形式，用戶從較大的數據集合中挑選出符合自己所需的較小的數據集合。通常大數據集合在左邊（待選區），稱之為源數據區；小數據集合在右邊（已選區），稱之為目標數據區。
二、為什么需要列表構建器
B端界面上為何會需要列表構建器這種組件呢？從實踐經驗來看，無外乎以下2點：
1）所見即所得
源列表和目標列表在同一個頁面，用戶無需通過跳轉頁面來回查看源和目標數據，不僅提升了用戶操作效率，也提升了用戶操作的愉悅性。
2）數據展示量大
列表構建器可展示的源數據空間和目標數據空間都比select組件大得多，這非常方便用戶在界面上自由與直觀地操作。
對于B端產品來說，數據量大是不爭的事實，在展示、操作、呈現上也是急需解決的問題。列表構建器的出現在一定程度上解決了某些場景下的問題。
三、什么時候使用列表構建器
使用列表構建器設計模式的情景為：
- 源數據量大，且目標數據量也大的情況下，適合使用；
- 不想通過滾動、跳轉等方式查看源和目標數據時，適合使用。
四、6種常見的列表構建器
根據不同場景下的不同需求，衍生出了列表構建器的多種形態，下面分享一下B端常見的列表構建器場景設計模式。
1. 基礎列表構建器
1）What 是什么
基礎列表構建器是列表構建器的基礎用法，展示了數據量不大的源數據，用戶通過選擇后確定目標數據。
2）When 使用場景
當源數據量小于大約50條時，且選擇的目標數據要直接可見時，可以考慮使用。
3）How 如何使用
用戶直接通過滾輪查看源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
2. 可搜索列表構建器
1）What 是什么
展示了數據量較大的源數據，且有搜索功能，用戶通過選擇后確定目標數據。
2）When 使用場景
當源數據量較大，用戶已經無法通過在有限容器中滾動鼠標快速查閱和定位數據時，可以考慮使用。
3）How 如何使用
用戶通過搜索確定目標數據，勾選后再通過穿梭按鈕將已選擇的數據轉入已選區。
3. 可排序列表構建器
1）What 是什么
該列表構建器可對數據進行排序，讓用戶將自身關心的數據前置。
2）When 使用場景
當目標數據量較大，用戶需要將自身所關心靠前展示，進行查看、對比、分析等操作時，可以考慮使用。
3）How 如何使用
用戶通過搜索確定源數據中的目標數據，勾選后再通過穿梭按鈕將已選擇的數據轉入已選區；再在已選區中將某些數據進行置頂展示或前置展示。
4. 可自動穿梭列表構建器
1）What 是什么
該列表構建器可直接將源數據穿梭到目標數據區。
2）When 使用場景
當勾選的源數據無需反復確認時，可以考慮使用，這大大加快了用戶的操作速度。
3）How 如何使用
用戶點擊待選區數據的添加按鈕，直接可將數據添加到已選區；點擊已選區數據的刪除按鈕，也可將數據回歸到待選區。
5. 表格式列表構建器
1）What 是什么
顧名思義，表格式列表構建器以表格的形式展現，方便用戶多維度確認數據范圍。
2）When 使用場景
當用戶選取的結果數據需要數據本身的多維度屬性來確定時，可以考慮使用。
3）How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
6. 標題式列表構建器
1）What 是什么
標題式列表構建器除了展現普通的數據，還有圖片等信息。
2）When 使用場景
當源數據的展現需要更加豐富時，可以考慮使用。
3）How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
除了以上常用場景的列表構建器設計模式，根據業務的需求大家可以在此基礎上繼續拓展和衍生，豐富B端界面的表現力，及滿足業務日益豐富的場景需求。
五、列表構建器以及衍生案例
基于基礎的常用列表構建器，不同產品根據自身的實際需求衍生出了多類構建器，我們一起來感受下吧。
1. sketch常用功能構建器
在sketch界面中，工具欄被設計成只顯示用戶認為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。
2. sketch常用色彩構建器
sketch提供了常用色彩構建功能，對于設計師常用的顏色可以自行添加出來，形成一份常用色彩庫。
3. 應用參數關聯構建器
應用需要在關聯參數后才可運行。右邊為參數集合，左邊為應用與待關聯參數列表，用戶只需要從參數集合里面選擇目標參數拖拽到對應的應用容器中，即可完成應用與參數的綁定。
4. 表格列顯示字段構建器
當表格列非常多時，用戶可以選擇列顯示字段構建器來將常用列字段選取出來。如此表格會變得輕盈，且數據加載變快。
5. word底部欄元素構建器
鼠標右鍵點擊word底部欄，會出現底部欄上可展現的所有元素。用戶點擊勾選后，元素被展現到了底部欄上。
6. 自定義模塊構建器
富途牛牛允許用戶自定義界面模塊，方便用戶按自身的習慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的，配置成自己想要的模塊界面即可。
7. 選成員構建器
很多B端產品的成員管理模塊都需要涉及到添加成員，這時候會用到選成員構建器，將成員從一個池子添加到另一個池子。
六、總結
列表構建器在B端必不可少，產品經理和設計師根據產品本身的業務訴求，基于基礎的列表構建器衍生出了很多種玩法，以不斷提升B端的用戶體驗。
如果你發現了我在文中沒有提到的列表構建器及其衍生案例，歡迎在文章下方留言~
接下來會分享更多和產品、體驗相關的方法論、經驗案例，讓我們來一起學產品吧。
#專欄作家#
知果，公眾號：知果日記，人人都是產品經理專欄作家。浙江工商大學品牌設計專業碩士，《B端思維-產品經理的自我修煉》作者。在產品設計流程、產品設計原則、產品設計方法、產品設計規范方面均有豐富經驗。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
