來源：Clippp
Halo，這裡是設計夾，今天分享的是「批量操作」。
文章來源于設計師「Real菜」的工作總結。主要總結了在日常設計中的碰到的批量操作問題，主要圍繞複選框+操作按鈕的方式展開：批量操作按鈕應該常顯嗎？複選框應該常顯嗎？….
在文中列舉了不同的方式，分析了它們的優缺點。在多選操作中，還探讨了可能出現的問題和陷阱。
最後結合一個電子商務平台訂單管理系統的應用案例，讨論不同的批量操作方案。強調一下，需根據具體場景和使用者需求進行合理選擇。
常見的組合
① 複選框+操作按鈕
優點：批量操作直覺（後面其他小節，都是圍繞這種方式）
缺點：占用空間、不夠簡潔
A是谷歌郵箱，經常有垃圾郵件等，會常用到批量操作。
A
② 滑鼠框選/Shift+滑鼠右鍵/快捷鍵
缺點：批量操作比較隐晦
優點：效率反而更高
B是谷歌網盤，雲端檔案往往是主動備份的内容，比較穩定。
B
綜上所述，選擇方式需要考慮到功能的頻次、使用者專業度、頁面空間、互動形式等。比如Gamil單擊清單，是打開詳情頁，那麼它多選則需要通過複選框來實作。
隻能說相對高頻的操作/本次任務就是批量操作(後面“觸發方式”會講到)，可以優先考慮是否可以采用“複選框+按鈕”。當然最後還得具體問題具體分析。
上述的方式還可以結合使用，比如滑鼠框選也能和方式1結合。
思考題：微信通訊錄管理，低頻吧，那為啥要這麼顯眼的複選框？
因為他已經進入管理頁面了。本來就是帶着目的來的，還不顯眼，要急死人家嘛。
操作按鈕位置
① 上右 (不推薦)
距離偏遠，操作麻煩；不符合親密性原理，較難視為是一個整體。
② 上左
尤其使用全選操作時，操作會很友善；符合親密性原理。
③下方
一般是勾選複選框後出現按鈕，由于人的視線一般偏螢幕上方，出現按鈕時，可能不容易察覺。
操作方式
通過模式批量操作。
咱們先聊聊什麼是模式，可以簡單了解：通過特定的操作進入到不同的模式，以通路不同的功能。
尼爾森提到“模式”這個東西的本意是“聚焦使用者注意力、減少使用者可以做的操作，以便使用者更快找到在當下具體場景中所需的操作與資訊”。
在Figma中，對比sketch，它大量使用了模式，極大地簡化了界面，更加高效。例如選中兩個矩形，才會進入布爾運算模式。
但是它帶來的缺點也不能忽視，在使用的過程中需要考慮到方方面面。界面專家 Jef Raskin強烈反對模式，他寫道：“模式是界面中錯誤、混亂、不必要的限制和複雜性的重要來源。”
對于進入模式後，要不要禁止除模式外的其他操作，在這篇文章中暫時不寫。後面有時間可以單獨寫一篇模式的。
① 按鈕觸發
屬于傳統的模式，通過批量操作按鈕進入，批量操作模式。
如下圖，點選“批量删除”進入了批量操作模式，再進行多選操作，最後點選删除。一共需要3個步驟。
顯而易見，這種操作方式比較複雜。
② 多選觸發
現在比較常見的設計。通過多選操作，預判了使用者需要進入批量操作模式，比上面的方式少了一步。
當然這個設計有個缺點是：功能可見性弱。點選複選框之前，使用者不知道有哪些批量操作。
因為現在這種設計比較常見，如果批量操作是删除、導出之類的，就可以放心大膽地用。如果涉及到一些比較新的功能、想突出的功能，可以考慮不使用模式。
這種方式還帶來一個問題：複選框一直出現，增加視覺上的複雜性。對此，有一種解決方案是hover時才出現複選框。(這種方式，我還沒思考它的優缺點及适用場景。有小夥伴知道的請指導下)
非模式批量操作
在一開始，批量操作就全部暴露在使用者視野中。好處自然是一目了然，知道有哪些功能。缺點是犧牲了簡潔性。
這種方式，按鈕往往有如下兩種狀态：
① 禁用
未勾選複選框時，操作按鈕置灰，建議hover時提示為什麼置灰。
② 激活
無論複選框勾選與否，按鈕都可以點選。若沒有勾選記錄，則Message提示。
多選操作
多選操作會出現不少問題，常常會陷入多選陷阱：
1.是否可以跨頁多選；
2.跨頁多選之後，容易忘記哪些已經被選中了；
3.全選操作，是僅限本頁，還是包含所有的分頁？
這個問題我就簡單提下，具體可以看看這個老師寫的文章《界面設計的單選小坑 和多選大坑》。
應用案例
在一個電子商務平台的訂單管理系統中，以訂單管理--已賣出的商品為例(我不是做電商的，電商産品狀态比較多，适合講這個案例，這邊更多是結合功能說，但具體的場景肯定存在說的有問題的地方，請忽視)
① 基礎
需求：原有表格沒有批量操作功能，現有計劃新增批量标記功能，且對每條記錄都能操作。
方案：
訂單管理頁，顯而易見是管理，經常涉及批量操作。雖然現在隻有批量标記功能，但以後還會有很多批量功能出來。
那麼批量按鈕适合常顯(如下圖的非模式批量操作)，而不适合多選觸發。
② 進階
需求：現需要加入批量發貨功能。未付款的的訂單不能發貨，已付款的訂單能批量發貨。
方案1：允許多選操作，但是批量操作後報錯。
操作前不可預知，操作後也不知道哪些記錄不能被操作，此方案不好。
方案2：多選，點選批量發貨，提示"xxx"無法發貨，其他的完成發貨。
操作後有清晰回報，但是彈窗提示挺笨重的。當彈窗内的商品很多，彈窗又該如何展示，使用者甚至都不清楚哪些被發貨了。
綜上，這個方案會有适合的應用場景，但是存在局限性。
方案3：當選中不可操作的記錄時，按鈕置灰。
依舊是操作前不可預知，不能防錯。如果有多個批量操作功能，點選複選框對應的按鈕真是一閃一閃亮晶晶了。
但是對比方案1，操作後能知道哪些不能發貨、且少了點選操作按鈕的一步，此方案差強人意。
方案4：采用按鈕觸發的模式操作。
這種方式，使用者全程操作都會有較強的掌控感。需要注意是，讓使用者清晰地知道自己目前所處的模式。
方案5：做成不同的表，每個表有不同的批量操作。
這個案例将就看吧，僅讨論功能，以後有合适的案例我就更換下。不同的方案其實還是有不同使用場景，不過方案1無論在哪個場景，都是個糟糕的設計。
比如我選了方案5，但如果不同的批量操作功能很多且分散在不同的表格，使用者可能需要先找到正确的表格才能進行對應操作，需要額外的認知成本。
像方案4，按鈕觸發的傳統模态方式，雖然在前面介紹的時候存在諸多缺點。在業務較複雜的時候，也是解決問題的一把好手。
最後，如果不是在這個案例，使用者的需求可能比較關注不同記錄的不同狀态，那麼不拆成兩張表格就比較合适，方案4則優于方案5。