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