前言

之前在工作的時(shí)候遇到一個(gè)問題，在設(shè)計(jì)列表多選的時(shí)候，產(chǎn)品執(zhí)意要將多選操作的按鈕放在列表頂部，但是按照設(shè)計(jì)規(guī)范，該按鈕應(yīng)該是隱藏的，在勾選列表某一行后才會(huì)觸發(fā)顯示該按鈕，隨之產(chǎn)品提出的問題是：

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

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

設(shè)計(jì)規(guī)范

在引出我的觀點(diǎn)之前，我們先看看主流的設(shè)計(jì)規(guī)范都是怎么做的：

1. Ant Design

網(wǎng)站鏈接：https://ant.design/docs/spec/research-list-cn

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

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

2. Element：

網(wǎng)站鏈接：https://element.eleme.cn/#/zh-CN/component/table

Element 我沒有找到可視化 demo 示例地址，瀏覽其對(duì)組件的說明，也沒有明確的引導(dǎo)應(yīng)該使用哪種方法，大概率其使用的是按鈕常顯，點(diǎn)擊該按鈕，如果未選中行，則提示請(qǐng)先選擇，跟 SAP 的設(shè)計(jì)規(guī)范相同。

3. Fiori Design Guidelines：

網(wǎng)站鏈接：https://experience.sap.com/fiori-design-web/grid-table/

SAP 是全球最大的企業(yè)管理和協(xié)同化商務(wù)解決方案供應(yīng)商，F(xiàn)iori Design Guidelines 指導(dǎo)了其龐大的 ERP 系統(tǒng)和業(yè)務(wù)管理系統(tǒng)的設(shè)計(jì)，我在其線上 demo 的操作中，可以看出 SAP Fiori 是采用按鈕常顯，點(diǎn)擊該按鈕，如果未選中行，則提示請(qǐng)先選擇，這種交互同樣也會(huì)引申出其他的問題，打斷了用戶的流程：

點(diǎn)擊按鈕-出錯(cuò)提示-選擇多選-點(diǎn)擊按鈕-進(jìn)行任務(wù)-完成操作

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

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

問題

結(jié)合上面的分析，問題就變成了：

究竟是多選框隱喻功能好點(diǎn)，還是操作按鈕隱喻功能好點(diǎn)？

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

按鈕是帶著文字信息的可點(diǎn)擊區(qū)域，一般意義上，按鈕的文案也代表著其功能的隱喻，因此，按鈕直接出現(xiàn)會(huì)大大增強(qiáng)用戶的理解和提高操作效率。

拋磚引玉

我之前在具體的設(shè)計(jì)過程中，曾經(jīng)做過這樣一個(gè)方案：

交互方案:

• 初始頁面多選框隱藏，批量功能按鈕放在頁面；
• 點(diǎn)擊批量導(dǎo)出，多選框出現(xiàn)，批量導(dǎo)出按鈕變?yōu)橹靼粹o，文案變?yōu)閷?dǎo)出，在未選擇多選之前，導(dǎo)出禁用；
• 選擇多選，點(diǎn)擊導(dǎo)出，導(dǎo)出所選信息。

該交互方式可能在實(shí)現(xiàn)方式上成本較高，但是保持了交互的連貫性，給用戶明確的引導(dǎo)，即便是新手，也能對(duì)功能操作一目了然。

思考延伸

1. 如何跨頁多選？

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

通過記錄當(dāng)前頁面的選擇信息，分頁選擇，然后匯總選擇信息，本人認(rèn)為這是當(dāng)前最佳的解決方案，實(shí)現(xiàn)成本較大，交互較為復(fù)雜。

2. 跳出當(dāng)前思維

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

通過列表篩選和查詢，將查詢后的結(jié)果直接導(dǎo)出。

將篩選集成在對(duì)話框內(nèi)，通過對(duì)數(shù)據(jù)進(jìn)行篩選再進(jìn)行導(dǎo)出。

通過對(duì)關(guān)鍵字段設(shè)置通用模板進(jìn)行導(dǎo)出，該交互方式適合復(fù)雜的業(yè)務(wù)中，對(duì)數(shù)據(jù)有較準(zhǔn)確要求的場(chǎng)景。

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

更多細(xì)節(jié)分析案例：

參考：

• Ant Design
• Fiori Design Guidelines

歡迎關(guān)注作者的微信公眾號(hào)：「星野隨記」