從用戶需求出發(fā)：優(yōu)化B端設(shè)計(jì)中的「批量操作」功能
關(guān)注▲Clip設(shè)計(jì)夾后臺(tái)回復(fù)“進(jìn)群”加入設(shè)計(jì)成長(zhǎng)群
設(shè)計(jì)夾的第152篇文章分享
在文中列舉了不同的方式，分析了它們的優(yōu)缺點(diǎn)。在多選操作中，還探討了可能出現(xiàn)的問(wèn)題和陷阱。
常見的組合
① 復(fù)選框+操作按鈕
優(yōu)點(diǎn)：批量操作直觀（后面其他小節(jié)，都是圍繞這種方式）
缺點(diǎn)：占用空間、不夠簡(jiǎn)潔
A是谷歌郵箱，經(jīng)常有垃圾郵件等，會(huì)常用到批量操作。
② 鼠標(biāo)框選/Shift+鼠標(biāo)右鍵/快捷鍵
缺點(diǎn)：批量操作比較隱晦
優(yōu)點(diǎn)：效率反而更高
B是谷歌網(wǎng)盤，云端文件往往是主動(dòng)備份的內(nèi)容，比較穩(wěn)定。
綜上所述，選擇方式需要考慮到功能的頻次、用戶專業(yè)度、頁(yè)面空間、交互形式等。比如Gamil單擊列表，是打開詳情頁(yè)，那么它多選則需要通過(guò)復(fù)選框來(lái)實(shí)現(xiàn)。
只能說(shuō)相對(duì)高頻的操作/本次任務(wù)就是批量操作(后面“觸發(fā)方式”會(huì)講到)，可以優(yōu)先考慮是否可以采用“復(fù)選框+按鈕”。當(dāng)然最后還得具體問(wèn)題具體分析。
上述的方式還可以結(jié)合使用，比如鼠標(biāo)框選也能和方式1結(jié)合。
思考題
微信通訊錄管理，低頻吧，那為啥要這么顯眼的復(fù)選框？
操作按鈕位置
① 上右 (不推薦)
距離偏遠(yuǎn)，操作麻煩；不符合親密性原理，較難視為是一個(gè)整體。
② 上左
尤其使用全選操作時(shí)，操作會(huì)很方便；符合親密性原理。
③下方
一般是勾選復(fù)選框后出現(xiàn)按鈕，由于人的視線一般偏屏幕上方，出現(xiàn)按鈕時(shí)，可能不容易察覺(jué)。
操作方式
通過(guò)模式批量操作
咱們先聊聊什么是模式，可以簡(jiǎn)單理解：通過(guò)特定的操作進(jìn)入到不同的模式，以訪問(wèn)不同的功能。
尼爾森提到“模式”這個(gè)東西的本意是“聚焦用戶注意力、減少用戶可以做的操作，以便用戶更快找到在當(dāng)下具體場(chǎng)景中所需的操作與信息”。
在Figma中，對(duì)比sketch，它大量使用了模式，極大地簡(jiǎn)化了界面，更加高效。例如選中兩個(gè)矩形，才會(huì)進(jìn)入布爾運(yùn)算模式。
但是它帶來(lái)的缺點(diǎn)也不能忽視，在使用的過(guò)程中需要考慮到方方面面。界面專家 Jef Raskin強(qiáng)烈反對(duì)模式，他寫道：“模式是界面中錯(cuò)誤、混亂、不必要的限制和復(fù)雜性的重要來(lái)源?！?/span>
對(duì)于進(jìn)入模式后，要不要禁止除模式外的其他操作，在這篇文章中暫時(shí)不寫。后面有時(shí)間可以單獨(dú)寫一篇模式的。
① 按鈕觸發(fā)
屬于傳統(tǒng)的模式，通過(guò)批量操作按鈕進(jìn)入，批量操作模式。
如下圖，點(diǎn)擊“批量刪除”進(jìn)入了批量操作模式，再進(jìn)行多選操作，最后點(diǎn)擊刪除。一共需要3個(gè)步驟。
顯而易見，這種操作方式比較復(fù)雜。
② 多選觸發(fā)
現(xiàn)在比較常見的設(shè)計(jì)。通過(guò)多選操作，預(yù)判了用戶需要進(jìn)入批量操作模式，比上面的方式少了一步。
當(dāng)然這個(gè)設(shè)計(jì)有個(gè)缺點(diǎn)是：功能可見性弱。點(diǎn)擊復(fù)選框之前，用戶不知道有哪些批量操作。
因?yàn)楝F(xiàn)在這種設(shè)計(jì)比較常見，如果批量操作是刪除、導(dǎo)出之類的，就可以放心大膽地用。如果涉及到一些比較新的功能、想突出的功能，可以考慮不使用模式。
非模式批量操作
在一開始，批量操作就全部暴露在用戶視野中。好處自然是一目了然，知道有哪些功能。缺點(diǎn)是犧牲了簡(jiǎn)潔性。
這種方式，按鈕往往有如下兩種狀態(tài)：
① 禁用
未勾選復(fù)選框時(shí)，操作按鈕置灰，建議hover時(shí)提示為什么置灰。
② 激活
無(wú)論復(fù)選框勾選與否，按鈕都可以點(diǎn)擊。若沒(méi)有勾選記錄，則Message提示。
多選操作
多選操作會(huì)出現(xiàn)不少問(wèn)題，常常會(huì)陷入多選陷阱：
是否可以跨頁(yè)多選；
跨頁(yè)多選之后，容易忘記哪些已經(jīng)被選中了；
全選操作，是僅限本頁(yè)，還是包含所有的分頁(yè)？
應(yīng)用案例
在一個(gè)電子商務(wù)平臺(tái)的訂單管理系統(tǒng)中，以訂單管理--已賣出的商品為例(我不是做電商的，電商產(chǎn)品狀態(tài)比較多，適合講這個(gè)案例，這邊更多是結(jié)合功能說(shuō)，但具體的場(chǎng)景肯定存在說(shuō)的有問(wèn)題的地方，請(qǐng)忽視)
① 基礎(chǔ)
需求：原有表格沒(méi)有批量操作功能，現(xiàn)有計(jì)劃新增批量標(biāo)記功能，且對(duì)每條記錄都能操作。
方案
訂單管理頁(yè)，顯而易見是管理，經(jīng)常涉及批量操作。雖然現(xiàn)在只有批量標(biāo)記功能，但以后還會(huì)有很多批量功能出來(lái)。
5.2 進(jìn)階
需求：現(xiàn)需要加入批量發(fā)貨功能。未付款的的訂單不能發(fā)貨，已付款的訂單能批量發(fā)貨。
方案1：允許多選操作，但是批量操作后報(bào)錯(cuò)。
操作前不可預(yù)知，操作后也不知道哪些記錄不能被操作。此方案不好。
方案2：多選，點(diǎn)擊批量發(fā)貨，提示"xxx"無(wú)法發(fā)貨，其他的完成發(fā)貨。
操作后有清晰反饋，但是彈窗提示挺笨重的。當(dāng)彈窗內(nèi)的商品很多，彈窗又該如何展示，用戶甚至都不清楚哪些被發(fā)貨了。
綜上，這個(gè)方案會(huì)有適合的應(yīng)用場(chǎng)景，但是存在局限性。
方案3：當(dāng)選中不可操作的記錄時(shí)，按鈕置灰。
依舊是操作前不可預(yù)知，不能防錯(cuò)。如果有多個(gè)批量操作功能，點(diǎn)擊復(fù)選框?qū)?yīng)的按鈕真是一閃一閃亮晶晶了。
但是對(duì)比方案1，操作后能知道哪些不能發(fā)貨、且少了點(diǎn)擊操作按鈕的一步。此方案差強(qiáng)人意。
方案4：采用按鈕觸發(fā)的模式操作。
這種方式，用戶全程操作都會(huì)有較強(qiáng)的掌控感。需要注意是，讓用戶清晰地知道自己當(dāng)前所處的模式。
方案5
寫到最后，發(fā)現(xiàn)選的案例不好。上述方案都不怎么適合。做成不同的表，每個(gè)表有不同的批量操作即可。
這個(gè)案例將就看吧，僅討論功能，以后有合適的案例我就更換下。不同的方案其實(shí)還是有不同使用場(chǎng)景，不過(guò)方案1無(wú)論在哪個(gè)場(chǎng)景，都是個(gè)糟糕的設(shè)計(jì)。
比如我選了方案5，但如果不同的批量操作功能很多且分散在不同的表格，用戶可能需要先找到正確的表格才能進(jìn)行對(duì)應(yīng)操作，需要額外的認(rèn)知成本。
像方案4，按鈕觸發(fā)的傳統(tǒng)模態(tài)方式，雖然在前面介紹的時(shí)候存在諸多缺點(diǎn)。在業(yè)務(wù)較復(fù)雜的時(shí)候，也是解決問(wèn)題的一把好手。
最后
如果不是在這個(gè)案例，用戶的需求可能比較關(guān)注不同記錄的不同狀態(tài)，那么不拆成兩張表格就比較合適，方案4則優(yōu)于方案5！
后續(xù)將繼續(xù)分享更多「B端設(shè)計(jì)」文章，記得??星標(biāo)關(guān)注推送哦～
另外推薦大家去Real菜主頁(yè)查看更多內(nèi)容:
zcool.com.cn/article/ZMTU2NzE3Mg==.html