Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

上下文操作

Contextual Actions

加入比较 +

在特定对象上或其旁边提供只作用于该对象的操作,在用户选中、悬停、聚焦或长按该对象时出现,常见呈现为上下文菜单、行级操作按钮或浮动工具条。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 列表:其中一行被高亮,右侧边缘露出一组行级操作按钮,上方悬浮着一条对齐所选区块的浮动工具条。
虚构的 FIELDNOTES 列表:其中一行被高亮,右侧边缘露出一组行级操作按钮,上方悬浮着一条对齐所选区块的浮动工具条。

识别特征

  • 操作入口出现在目标对象之上或紧邻其旁,而不是全局工具栏
  • 触发方式包括选中、悬停、聚焦或长按,至少有一种不依赖鼠标悬停
  • 同样的操作可以通过键盘或触摸达到,不只靠鼠标悬停显现

概念边界

上下文菜单、行级操作按钮与浮动工具条是同一概念的呈现变体,不是互相独立的词条:判断标准是操作是否只针对被选中或被指向的单个对象、是否随选中/悬停/聚焦/长按出现。它不同于行内编辑——行内编辑在原位切换为编辑控件、改变内容本身,而上下文操作只是给出可执行的动作入口,动作本身可能跳转、弹出确认或触发行内编辑;它也不同于批量操作——批量操作作用于多选的一组对象,尚未单独成词条,此处仅作说明性区分。

什么时候考虑它

  • 对象数量多,逐个提供常驻操作按钮会让界面拥挤
  • 操作只与当前选中或指向的单个对象相关,不需要全局呈现
  • 已有其他可发现的触发方式(如可见的操作按钮)能覆盖悬停之外的用户

什么时候慎用

  • 操作是高频或必要功能,只藏在悬停或长按之后会让触摸和键盘用户找不到入口
  • 对象需要同时对一组多选项执行相同操作,那属于批量操作而不是单对象的上下文操作
  • 内容需要就地修改,此时应交给行内编辑而不是先弹出菜单再另开编辑面板

取舍

让常驻界面更简洁、操作与对象贴近,但可发现性下降:仅靠悬停呈现的操作对触摸和键盘用户不可见,必须另外提供可达的触发方式。

条件规则 · 编辑建议

当操作只在悬停时出现必须同时提供键盘可达(如聚焦后可见或菜单按钮)与触摸可达(如长按或常驻的更多操作按钮)的等效入口。
当悬停或聚焦触发的内容出现后必须让它可以被关闭、可以把指针移入其上而不消失,并在触发条件保持时持续可见,满足 WCAG 2.2 SC 1.4.13。
当决定某个操作是否只放进上下文操作里建议不要把删除、发布等高频或必要操作的唯一入口藏在悬停菜单或长按之后;为其保留一个常驻或更易发现的路径。

相关词条

行内编辑 ↗可以配合 · 上下文操作中的某一项是编辑该字段

上下文操作负责给出动作入口,行内编辑负责就地改变内容;两者可以先后组合,但入口不等于编辑本身。

直接操纵 ↗可以配合 · 对象既支持拖放等直接操纵,也需要不便用手势表达的操作

直接操纵覆盖连续、空间性的动作,上下文操作补上离散、命名清楚的动作,例如删除或归档。

模态对话框 ↗条件替代 · 操作需要更多说明、确认或多个字段才能完成

上下文操作适合一步到位的轻量动作;一旦动作复杂到需要额外界面,更适合弹出模态对话框而不是塞进菜单项里。

来源与支持范围

NN/g · Designing Effective Contextual Menus: 10 Guidelines ↗

上下文菜单应只用于真正次要的操作,不能把高频、必要的操作只藏在额外的点击之后;菜单必须能用键盘打开和浏览,并能被屏幕阅读器完整读出和操作,不能只靠点击或轻触访问。

检索日期:2026-09-15 · 存档于 2026-09-16
WAI-ARIA APG · Menu Button Pattern ↗

菜单按钮是一个激活后展开菜单的按钮,需要 aria-haspopup 与 aria-expanded 等属性,并支持 Enter、Space 及方向键在聚焦按钮时打开菜单,是键盘可达的上下文操作触发方式之一。

检索日期:2026-09-15 · 存档于 2026-09-16
W3C · Understanding SC 1.4.13: Content on Hover or Focus (WCAG 2.2, Level AA) ↗

因悬停或聚焦而出现的额外内容(如子菜单、非模态弹出层)必须可关闭、可将指针移入其上而不消失、并在触发条件保持或内容仍然有效前持续可见,浏览器原生的 title 提示不受此要求约束。

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

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

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须验证悬停操作是否有对应的键盘与触摸入口、悬停内容是否满足可关闭/可悬停/持续可见三项要求,以及高频或必要操作是否有独立于上下文菜单的入口。

{
  "states": [
    "idle",
    "hovered",
    "focused",
    "long-pressed",
    "open",
    "closed"
  ],
  "a11y": [
    "触发控件有可访问的名称并暴露 aria-haspopup 与 aria-expanded",
    "菜单或工具条可用 Tab、方向键与 Enter 完整操作,不依赖鼠标悬停",
    "悬停或聚焦出现的内容可关闭、可悬停其上且保持可见"
  ],
  "motion": "出现与消失可省略动画;减弱动态偏好下直接显示或隐藏"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。