Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

批量操作

Batch Actions

加入比较 +

让用户先勾选多个对象,再通过一个共享的操作入口对整批已选对象执行同一操作,通常表现为随选中出现的操作工具条或菜单,而不是逐项重复触发相同操作。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 列表:其中若干行的复选框已被勾选,顶部有一条常驻操作栏显示已选数量与三个操作图标,另有一行处于悬停状态并露出它的复选框。
虚构的 FIELDNOTES 列表:其中若干行的复选框已被勾选,顶部有一条常驻操作栏显示已选数量与三个操作图标,另有一行处于悬停状态并露出它的复选框。

识别特征

  • 用户先勾选多项,再触发一个共享操作,而不是逐项重复同一操作
  • 已选数量与“全选”所覆盖的范围随时可见
  • 承载批量操作的工具条或菜单只在存在选中项时出现,随选中数量增减更新

概念边界

批量操作与上下文操作的区别在于粒度:上下文操作只作用于用户当前选中或指向的单个对象;批量操作作用于用户先勾选出的一组对象,动作入口出现的条件是“存在至少一项选中”而不是“指向某一个对象”。它也不同于行内编辑——行内编辑就地改变单个字段的内容,批量操作则是对多个对象重复执行同一个离散动作(如归档、打标签、删除),不改变字段本身的编辑方式。

什么时候考虑它

  • 用户需要对一批对象重复执行同一个离散操作,例如批量归档、批量打标签或批量移动
  • 列表存在分页或经过筛选,且界面能清楚区分“选中本页”与“选中筛选后的全部结果”

什么时候慎用

  • 每次只处理一个对象,上下文操作已经够用,不需要先建立多选状态
  • 批量操作是破坏性的(如批量删除)却只用一次性确认对话框替代撤销或复核,无法在执行前后核实具体变更范围

取舍

批量操作大幅提高重复性任务的效率,但需要额外维护可见的选中计数、明确的“全选”范围,并为破坏性操作提供比单项操作更强的撤销或复核机制,否则一次误操作会波及大量对象。

条件规则 · 编辑建议

当存在一个或多个对象被选中必须始终显示已选中的数量,并明确“全选”指的是当前页面内的项目,还是筛选后的整个结果集。
当用户通过键盘、鼠标或触摸改变选中状态必须让每一项的选中状态可以用键盘操作(如 Space 切换、Shift+方向键扩展、Ctrl+A 全选),并通过 aria-selected 等属性和实时区域把选中状态与数量变化播报给辅助技术,不能只靠视觉高亮。
当批量操作会造成删除等难以恢复的变更必须提供撤销入口,或在执行前给出列出具体变更内容的复核步骤,不能只用一次性的确认对话框替代。

相关词条

上下文操作 ↗相关但不同 · 区分动作入口作用于单个对象还是一组已选对象

上下文操作面向用户当前选中或指向的单个对象;批量操作面向用户先勾选出的一组对象,两者的粒度不同,不是互相替代的关系。

撤销与重做 ↗可以配合 · 批量操作是破坏性的或影响范围大,例如批量删除或批量移动

作用于多个对象的单次误操作影响面更大,需要比单项操作更明确的撤销入口或变更复核,才能让用户放心执行。

搜索与筛选 ↗可以配合 · 列表经过筛选或分页后再进行批量选择

“全选”覆盖的是当前页面还是筛选后的整个结果集,取决于搜索与筛选当时生效的条件,两者的范围必须保持一致并向用户说明。

来源与支持范围

NN/g · Data Tables: Four Major User Tasks ↗

数据表格中的批量操作通常依靠为每条记录设置复选框来建立选中状态,再通过表格上方或下方的一组操作按钮或菜单对选中记录执行操作;如果对整个数据集执行同一操作是常见需求,提供一键“全选”是有用的快捷方式。

检索日期:2026-09-15 · 存档于 2026-09-16
WAI-ARIA APG · Listbox Pattern (Multi-selectable) ↗

支持多选的列表框需要将 aria-multiselectable 设为 true,并为每个选项维护 aria-selected 状态;推荐的键盘模型用 Space 切换单项选中、Shift+方向键扩展连续选中范围、Ctrl+A 全选,使选中状态可以完全通过键盘操作并被辅助技术感知,而不只靠视觉高亮。

检索日期:2026-09-15 · 存档于 2026-09-16
PatternFly · Bulk selection ↗

批量选择应通过一段文字反映当前选中总数,在存在分页时用“选择本页”与“选择全部”两个选项区分范围,且这一计数在分页场景下应反映跨页的选中总数;选中状态应在操作完成后继续保持,直到用户主动改变它。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须验证已选数量与“全选”范围在分页、筛选等场景下是否始终清晰、选中状态能否被键盘与辅助技术完整感知,以及破坏性批量操作是否提供了撤销或列出具体变更的复核步骤。

{
  "states": [
    "idle",
    "selecting",
    "selected",
    "reviewing",
    "applied",
    "undone"
  ],
  "a11y": [
    "每一项的选中状态通过 aria-selected 等价方式暴露,并支持 Tab、方向键、Space、Ctrl+A 等键盘操作",
    "已选数量与“全选”范围的变化通过实时区域通知辅助技术",
    "承载批量操作的工具条或菜单出现和消失的时机对屏幕阅读器可感知"
  ],
  "motion": "操作工具条的出现与消失可省略动画;减弱动态偏好下直接显示或隐藏"
}
完整 Agent 条目 JSON
{
  "id": "batch-actions",
  "type": "interaction",
  "name": {
    "zh": "批量操作",
    "en": "Batch Actions"
  },
  "aliases": [
    "批量处理",
    "多选操作",
    "Bulk Actions"
  ],
  "granularity": "flow",
  "intents": [
    "select-many",
    "apply-bulk-action"
  ],
  "tags": [
    "批量",
    "多选",
    "全选",
    "操作栏",
    "撤销"
  ],
  "definition": "让用户先勾选多个对象,再通过一个共享的操作入口对整批已选对象执行同一操作,通常表现为随选中出现的操作工具条或菜单,而不是逐项重复触发相同操作。",
  "boundary": "批量操作与上下文操作的区别在于粒度:上下文操作只作用于用户当前选中或指向的单个对象;批量操作作用于用户先勾选出的一组对象,动作入口出现的条件是“存在至少一项选中”而不是“指向某一个对象”。它也不同于行内编辑——行内编辑就地改变单个字段的内容,批量操作则是对多个对象重复执行同一个离散动作(如归档、打标签、删除),不改变字段本身的编辑方式。",
  "signature": [
    "用户先勾选多项,再触发一个共享操作,而不是逐项重复同一操作",
    "已选数量与“全选”所覆盖的范围随时可见",
    "承载批量操作的工具条或菜单只在存在选中项时出现,随选中数量增减更新"
  ],
  "when": [
    "用户需要对一批对象重复执行同一个离散操作,例如批量归档、批量打标签或批量移动",
    "列表存在分页或经过筛选,且界面能清楚区分“选中本页”与“选中筛选后的全部结果”"
  ],
  "when_not": [
    "每次只处理一个对象,上下文操作已经够用,不需要先建立多选状态",
    "批量操作是破坏性的(如批量删除)却只用一次性确认对话框替代撤销或复核,无法在执行前后核实具体变更范围"
  ],
  "tradeoff": "批量操作大幅提高重复性任务的效率,但需要额外维护可见的选中计数、明确的“全选”范围,并为破坏性操作提供比单项操作更强的撤销或复核机制,否则一次误操作会波及大量对象。",
  "comparison": {
    "focus": "一次操作作用于用户先勾选出的一组对象,而不是单个对象",
    "mechanism": "先勾选多项建立选中状态,再通过共享的操作工具条或菜单对全部选中项执行同一动作",
    "cost": "需要持续显示选中计数与“全选”范围,并为破坏性批量操作设计撤销或复核步骤"
  },
  "sources": [
    {
      "id": "nng-data-tables",
      "title": "NN/g · Data Tables: Four Major User Tasks",
      "url": "https://www.nngroup.com/articles/data-tables/",
      "claim": "数据表格中的批量操作通常依靠为每条记录设置复选框来建立选中状态,再通过表格上方或下方的一组操作按钮或菜单对选中记录执行操作;如果对整个数据集执行同一操作是常见需求,提供一键“全选”是有用的快捷方式。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/data-tables/",
        "status": "available",
        "checkedAt": "2026-09-16T05:44:47.270Z",
        "jobId": "spn2-0cc4fc46527b310e11d25305239adc9893614208",
        "url": "https://web.archive.org/web/20260916054518/https://www.nngroup.com/articles/data-tables/",
        "timestamp": "20260916054518"
      }
    },
    {
      "id": "apg-listbox-multiselect",
      "title": "WAI-ARIA APG · Listbox Pattern (Multi-selectable)",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/listbox/",
      "claim": "支持多选的列表框需要将 aria-multiselectable 设为 true,并为每个选项维护 aria-selected 状态;推荐的键盘模型用 Space 切换单项选中、Shift+方向键扩展连续选中范围、Ctrl+A 全选,使选中状态可以完全通过键盘操作并被辅助技术感知,而不只靠视觉高亮。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/patterns/listbox/",
        "status": "available",
        "checkedAt": "2026-09-16T05:45:04.400Z",
        "jobId": "spn2-79c8791ae493e51a6e71eecb8664c1c7a478ec1f",
        "url": "https://web.archive.org/web/20260916054555/https://www.w3.org/WAI/ARIA/apg/patterns/listbox/",
        "timestamp": "20260916054555"
      }
    },
    {
      "id": "patternfly-bulk-selection",
      "title": "PatternFly · Bulk selection",
      "url": "https://www.patternfly.org/patterns/bulk-selection/",
      "claim": "批量选择应通过一段文字反映当前选中总数,在存在分页时用“选择本页”与“选择全部”两个选项区分范围,且这一计数在分页场景下应反映跨页的选中总数;选中状态应在操作完成后继续保持,直到用户主动改变它。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.patternfly.org/patterns/bulk-selection/",
        "status": "available",
        "checkedAt": "2026-09-16T05:45:31.770Z",
        "jobId": "spn2-274d11f62ed8db3bd6c742c177d065f1e8370225",
        "url": "https://web.archive.org/web/20260916054555/https://www.patternfly.org/patterns/bulk-selection/",
        "timestamp": "20260916054555"
      }
    }
  ],
  "relations": [
    {
      "target": "contextual-actions",
      "kind": "related",
      "condition": "区分动作入口作用于单个对象还是一组已选对象",
      "reason": "上下文操作面向用户当前选中或指向的单个对象;批量操作面向用户先勾选出的一组对象,两者的粒度不同,不是互相替代的关系。",
      "basis": "editorial"
    },
    {
      "target": "undo-redo",
      "kind": "composes_with",
      "condition": "批量操作是破坏性的或影响范围大,例如批量删除或批量移动",
      "reason": "作用于多个对象的单次误操作影响面更大,需要比单项操作更明确的撤销入口或变更复核,才能让用户放心执行。",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "列表经过筛选或分页后再进行批量选择",
      "reason": "“全选”覆盖的是当前页面还是筛选后的整个结果集,取决于搜索与筛选当时生效的条件,两者的范围必须保持一致并向用户说明。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "存在一个或多个对象被选中",
      "instruction": "始终显示已选中的数量,并明确“全选”指的是当前页面内的项目,还是筛选后的整个结果集。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "用户通过键盘、鼠标或触摸改变选中状态",
      "instruction": "让每一项的选中状态可以用键盘操作(如 Space 切换、Shift+方向键扩展、Ctrl+A 全选),并通过 aria-selected 等属性和实时区域把选中状态与数量变化播报给辅助技术,不能只靠视觉高亮。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "批量操作会造成删除等难以恢复的变更",
      "instruction": "提供撤销入口,或在执行前给出列出具体变更内容的复核步骤,不能只用一次性的确认对话框替代。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "selecting",
      "selected",
      "reviewing",
      "applied",
      "undone"
    ],
    "a11y": [
      "每一项的选中状态通过 aria-selected 等价方式暴露,并支持 Tab、方向键、Space、Ctrl+A 等键盘操作",
      "已选数量与“全选”范围的变化通过实时区域通知辅助技术",
      "承载批量操作的工具条或菜单出现和消失的时机对屏幕阅读器可感知"
    ],
    "motion": "操作工具条的出现与消失可省略动画;减弱动态偏好下直接显示或隐藏"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须验证已选数量与“全选”范围在分页、筛选等场景下是否始终清晰、选中状态能否被键盘与辅助技术完整感知,以及破坏性批量操作是否提供了撤销或列出具体变更的复核步骤。",
  "image": {
    "src": "/images/batch-actions.webp",
    "alt": "虚构的 FIELDNOTES 列表:其中若干行的复选框已被勾选,顶部有一条常驻操作栏显示已选数量与三个操作图标,另有一行处于悬停状态并露出它的复选框。"
  },
  "searchTerms": [
    "batch",
    "multi-select",
    "select all",
    "action bar",
    "undo"
  ]
}