用「列表多選」的交互案例，幫你學習高手的分析思路！

前言

之前在工作的時候遇到一個問題，在設計列表多選的時候，產品執意要將多選操作的按鈕放在列表頂部，但是按照設計規范，該按鈕應該是隱藏的，在勾選列表某一行后才會觸發顯示該按鈕，隨之產品提出的問題是：

“如果不顯示該按鈕，用戶就不知道有這個功能”。

產品的顧慮確實有道理，光展示多選框，并不能隱喻其功能，只表示該列表勾選后有相應的操作，且在沒有明顯的引導之下，新用戶也很難理解。直接顯示操作按鈕，如果用戶未勾選，則提示其需要勾選，那這純屬“脫褲子放屁，多此一舉”，不但在操作流程上不順暢，而且操作步驟也增加了，那么，有沒有一種交互方式，既能顯示按鈕明確其功能，又能使流程順暢？

設計規范

在引出我的觀點之前，我們先看看主流的設計規范都是怎么做的：

1. Ant Design

網站鏈接：https://ant.design/docs/spec/research-list-cn

Ant Design 推薦在選中列表后，底部顯示懸浮的操作欄，底部的操作欄可以承載更多的功能按鈕，同時降低了頁面整體的復雜度，可以將有些需要多選才出現的操作進行收納，比如批量導出、批量刪除等，但是問題點在于，如果不顯示這些按鈕，用戶就不知道有這個功能，他們會進行嘗試，也會進行詢問，這無疑也增加了產品的復雜度。

當然，對于中級用戶和專家用戶來說，這些都不是問題。軟件終歸是有一定的學習成本的，在熟悉了這些流程以后，Ant Design 的做法我是比較推薦的。

2. Element：

網站鏈接：https://element.eleme.cn/#/zh-CN/component/table

Element 我沒有找到可視化 demo 示例地址，瀏覽其對組件的說明，也沒有明確的引導應該使用哪種方法，大概率其使用的是按鈕常顯，點擊該按鈕，如果未選中行，則提示請先選擇，跟 SAP 的設計規范相同。

3. Fiori Design Guidelines：

網站鏈接：https://experience.sap.com/fiori-design-web/grid-table/

SAP 是全球最大的企業管理和協同化商務解決方案供應商，Fiori Design Guidelines 指導了其龐大的 ERP 系統和業務管理系統的設計，我在其線上 demo 的操作中，可以看出 SAP Fiori 是采用按鈕常顯，點擊該按鈕，如果未選中行，則提示請先選擇，這種交互同樣也會引申出其他的問題，打斷了用戶的流程：

點擊按鈕-出錯提示-選擇多選-點擊按鈕-進行任務-完成操作

在有更好的解決方案之前，這的確是大多數系統常用的交互方式，雖然談不上體驗極佳，但夠用，也培養了用戶的使用習慣，一旦用戶習慣了在進行多選之后去操作，那該流程也將極為順暢。

再一次拋出問題：有沒有一種交互方式，既能顯示按鈕明確其功能，又能使流程順暢？

問題

結合上面的分析，問題就變成了：

究竟是多選框隱喻功能好點，還是操作按鈕隱喻功能好點？

多選本質上是一個很好的隱喻入口，它意味著該頁面會有批量操作的功能，當你選擇多選后，該功能將會展現出來（如 Ant Design）但它的缺點在于隱喻不夠明顯，還是無法直觀了當而又自然的隱喻功能。

按鈕是帶著文字信息的可點擊區域，一般意義上，按鈕的文案也代表著其功能的隱喻，因此，按鈕直接出現會大大增強用戶的理解和提高操作效率。

拋磚引玉

我之前在具體的設計過程中，曾經做過這樣一個方案：

交互方案:

• 初始頁面多選框隱藏，批量功能按鈕放在頁面；
• 點擊批量導出，多選框出現，批量導出按鈕變為主按鈕，文案變為導出，在未選擇多選之前，導出禁用；
• 選擇多選，點擊導出，導出所選信息。

該交互方式可能在實現方式上成本較高，但是保持了交互的連貫性，給用戶明確的引導，即便是新手，也能對功能操作一目了然。

思考延伸

1. 如何跨頁多選？

Fiori Design Guidelines 通過修改 limit 的方式增大頁面顯示數量，當前頁面展示信息越多，意味著可選數量也多，但無法從本質上解決問題。

通過記錄當前頁面的選擇信息，分頁選擇，然后匯總選擇信息，本人認為這是當前最佳的解決方案，實現成本較大，交互較為復雜。

2. 跳出當前思維

在進行批量選擇設計的時候，我們并不一定是要對整個列表信息進行一個明確的選擇，相反的，對一些數據敏感度不高的，我們可以通過設計大范圍的查詢篩選，再進行批量功能設計。這種思路落地有三種不同的交互方式：

通過列表篩選和查詢，將查詢后的結果直接導出。

將篩選集成在對話框內，通過對數據進行篩選再進行導出。

通過對關鍵字段設置通用模板進行導出，該交互方式適合復雜的業務中，對數據有較準確要求的場景。

綜上，就是我對關于“列表多選”操作流的小思考，拋磚引玉，如果大家有更好的方案，可以與我交流，一起進步。

更多細節分析案例：

參考：

• Ant Design
• Fiori Design Guidelines

歡迎關注作者的微信公眾號：「星野隨記」