2021-8-25 資深UI設計者
在了解“列表構建器”之前，我們先來了解下什么是“列表”和“構建器”。
列表是一種數據項構成的有限序列，即按照一定的線性順序，排列而成的數據項的集合。常見的列表有新聞流、表格、事件列表、好友列表等。
在 java 中，構建器主要用于把復雜對象的構建過程抽象出來，使得復雜對象的構建可以分部件分別創建，從而根據需要構建出來非常復雜的對象。由此我們可以推演出日常中大家口口相傳的圖表構建器、地圖構建器等實際是在闡述圖表、地圖等依據某種規范或規則生成此類對象的過程。
因此，我們今天要聊的“列表構建器”就是通過某種途徑，達到用戶所需的列表對象的過程。
在 B 端界面中，穿梭框就是列表構建器的一種展現形式，用戶從較大的數據集合中挑選出符合自己所需的較小的數據集合。通常大數據集合在左邊（待選區），稱之為源數據區；小數據集合在右邊（已選區），稱之為目標數據區。
B 端界面上為何會需要列表構建器這種組件呢？從實踐經驗來看，無外乎以下 2 點：
1. 所見即所得
源列表和目標列表在同一個頁面，用戶無需通過跳轉頁面來回查看源和目標數據，不僅提升了用戶操作效率，也提升了用戶操作的愉悅性。
2. 數據展示量大
列表構建器可展示的源數據空間和目標數據空間都比 select 組件大的多，這非常方便用戶在界面上自由與直觀地操作。對于 B 端產品來說，數據量大是不爭的事實，在展示、操作、呈現上也是急需解決的問題。列表構建器的出現在一定程度上解決了某些場景下的問題。
使用列表構建器設計模式的情景為：
根據不同場景下的不同需求，衍生出了列表構建器的多種形態，下面分享一下 B 端常見的列表構建器場景設計模式。
What 是什么
基礎列表構建器是列表構建器的基礎用法，展示了數據量不大的源數據，用戶通過選擇后確定目標數據。
When 使用場景
當源數據量小于大約 50 條時，且選擇的目標數據要直接可見時，可以考慮使用。
How 如何使用
用戶直接通過滾輪查看源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
展示了數據量較大的源數據，且有搜索功能，用戶通過選擇后確定目標數據。
When 使用場景
當源數據量較大，用戶已經無法通過在有限容器中滾動鼠標快速查閱和定位數據時，可以考慮使用。
How 如何使用
用戶通過搜索確定目標數據，勾選后再通過穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
該列表構建器可對數據進行排序，讓用戶將自身關心的數據前置。
When 使用場景
當目標數據量較大，用戶需要將自身所關心靠前展示，進行查看、對比、分析等操作時，可以考慮使用。
How 如何使用
用戶通過搜索確定源數據中的目標數據，勾選后再通過穿梭按鈕將已選擇的數據轉入已選區；再在已選區中將某些數據進行置頂展示或前置展示。
What 是什么
該列表構建器可直接將源數據穿梭到目標數據區。
When 使用場景
當勾選的源數據無需反復確認時，可以考慮使用，這大大加快了用戶的操作速度。
How 如何使用
用戶點擊待選區數據的添加按鈕，直接可將數據添加到已選區；點擊已選區數據的刪除按鈕，也可將數據回歸到待選區。
What 是什么
顧名思義，表格式列表構建器以表格的形式展現，方便用戶多維度確認數據范圍。
When 使用場景
當用戶選取的結果數據需要數據本身的多維度屬性來確定時，可以考慮使用。
How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
What 是什么
標題式列表構建器除了展現普通的數據，還有圖片等信息。
When 使用場景
當源數據的展現需要更加豐富時，可以考慮使用。
How 如何使用
用戶通過滾輪查看或搜索源數據中的目標數據，然后選中它們。當確認后，點擊穿梭按鈕將已選擇的數據轉入已選區。
除了以上常用場景的列表構建器設計模式，根據業務的需求大家可以在此基礎上繼續拓展和衍生，豐富 B 端界面的表現力，及滿足業務日益豐富的場景需求。
基于基礎的常用列表構建器，不同產品根據自身的實際需求衍生出了多類構建器，我們一起來感受下吧。
1. sketch 常用功能構建器
在 sketch 界面中，工具欄被設計成只顯示用戶認為常用的功能。用戶只需通過拖拽添加的方式從工具集合中將常用的功能添加到工具欄上。
2. sketch 常用色彩構建器
sketch 提供了常用色彩構建功能，對于設計師常用的顏色可以自行添加出來，形成一份常用色彩庫。
3. 應用參數關聯構建器
應用需要在關聯參數后才可運行。右邊為參數集合，左邊為應用與待關聯參數列表，用戶只需要從參數集合里面選擇目標參數拖拽到對應的應用容器中，即可完成應用與參數的綁定。
4. 表格列顯示字段構建器
當表格列非常多時，用戶可以選擇列顯示字段構建器來將常用列字段選取出來。如此表格會變得輕盈，且數據加載變快。
5. word 底部欄元素構建器
鼠標右鍵點擊 word 底部欄，會出現底部欄上可展現的所有元素。用戶點擊勾選后，元素被展現到了底部欄上。
6. 自定義模塊構建器
富途牛牛允許用戶自定義界面模塊，方便用戶按自身的習慣查看行情和操作等。用戶只需從富途牛牛提供的組件庫中挑選出自己需要的，配置成自己想要的模塊界面即可。
7. 選成員構建器
很多 B 端產品的成員管理模塊都需要涉及到添加成員，這時候會用到選成員構建器，將成員從一個池子添加到另一個池子。
列表構建器在 B 端必不可少，產品經理和設計師根據產品本身的業務訴求，基于基礎的列表構建器衍生出了很多種玩法，以不斷提升 B 端的用戶體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務