批次操作

批次操作從「勾選」開始:平常 checkbox 不顯示,hover row 才浮現,點下去上方滑出 bulk action bar。這章講那條 bar 該放什麼、跨頁全選為什麼要明確提示、以及批次刪除一定要確認並顯示影響筆數。要做「全選」「批次刪除」這類功能前翻這頁,最常見的災難都是默默全選跨頁資料。

觸發流程

這是什麼

滑鼠移入列才顯示勾選框;勾選任一列後,表格上方滑出批次操作列。

什麼時候用

列表需要低調的批次選取,平時不搶視覺、有選取時才露出操作。

預覽依本指南規則實作
  • 行銷 Q2
  • 官網改版
  • CRM 匯入
  • 內部工具

批次操作列結構

這是什麼

左側顯示已選筆數與清除;右側放常用批次動作,危險操作(如刪除)放最右,其餘收進「更多」。

什麼時候用

使用者已勾選多筆資料,需要歸檔、加標籤、刪除等批次處理時。

預覽依本指南規則實作
✓ 3 selected

勾選框狀態

這是什麼

表頭勾選框有三態:未選、本頁全選、部分選取(中間狀態);再點一次可全選或清空本頁。

什麼時候用

表格支援逐列或整頁選取時,讓使用者一眼看出目前選取範圍。

預覽依本指南規則實作
未選取
  • 行銷 Q2
  • 官網改版
  • CRM 匯入
  • 內部工具

跨頁全選

這是什麼

全選本頁後,明確提示是否也要選取其他分頁的全部資料,避免使用者不知情就跨頁批次操作。

什麼時候用

資料分頁顯示且批次動作會影響多頁時,務必讓使用者確認範圍。

預覽依本指南規則實作

上方「Checkbox 狀態」全選本頁後,此提示條會出現。

批次操作類型

這是什麼

一般動作用短暫提示即可;刪除等危險操作需二次確認;超過千筆改背景處理並顯示進度。

什麼時候用

依操作風險與資料量選擇回饋方式,避免誤刪或長時間卡住畫面。

預覽依本指南規則實作

鍵盤行為

這是什麼

空白鍵切換目前列勾選、Shift+點擊範圍選取、Command+A 全選本頁、Esc 清空選取。

什麼時候用

表格批次操作需支援鍵盤效率時,與滑鼠操作並行提供。

預覽依本指南規則實作
Space切換 focused row checkbox
Shift+Click範圍選取
⌘A全選(區分本頁 vs 全部)
Esc清空選取

操作列視覺細節

這是什麼

操作列以約 200 毫秒滑入;深色底配亮色文字;手機版改為底部浮動列,動作過多時收進「更多」。

什麼時候用

設計批次操作列的動效與各裝置版面,確保選取後操作始終可見。

預覽依本指南規則實作
Desktop · sticky 於 table 上方
Mobile · 底部 floating bar

注意事項

這是什麼

批次列不放「新增」類單筆動作;已選筆數即時更新;失敗項目列出原因並提供重試。

什麼時候用

定稿批次操作規範時,避免與單筆流程混淆,並妥善處理部分失敗。

預覽依本指南規則實作

✓ 做

  • 即時顯示 N selected
  • Destructive 二次確認

✗ 避免

  • Bar 上放「+ 新增」
  • 默默跨頁全選後刪除

規格速查

項目定稿值
觸發hover row 浮現 checkbox,點任一 checkbox → 上方滑出 bulk bar
Bulk bar 結構左:「N selected」+ Clear;右:動作按鈕(次要塞 overflow)
跨頁全選先選本頁(如 25 筆),跳提示「Select all 1,240 items」
全選後再提示「Selected all 1,240 items」+ Clear selection
Indeterminateheader checkbox 部分選取顯示橫線,再點全選本頁/取消
安全動作Archive/Move/Tag/Assign → 直接執行 + toast
Destructive必跳 confirmation,標題與內文寫明「影響 N 筆」、不可復原
Long-running影響 > 1000 筆 → 背景執行 + progress + 完成通知

常見做錯

做錯正確
checkbox 常駐讓表格擁擠平常隱藏,hover row 才浮現,與 row actions 一起出現
全選不分本頁 vs 跨頁先選本頁並提示「選取全部 N 筆」,使用者確認才跨頁全選
批次刪除直接執行不確認destructive 一律 confirmation,並顯示影響筆數
確認框不寫影響幾筆標題與內文明確寫「Delete 12 items」「永久刪除 12 筆」
在 bulk bar 放「新增」這類動作bulk bar 只放與選取相關的動作

相關章節