Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

按下状态反馈

Pressed-State Feedback

加入比较 +

当用户正在按下或点击一个可操作控件(指针按下到松开之间,CSS 中对应 :active)时,控件立刻呈现可见的视觉变化(可辅以触觉或声音),确认这次按压已被系统接收;动作本身在松开时才完成。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 工具栏上有三个相同的按钮,中间一个在光标按压下呈现更深的填充并内陷,两侧按钮保持浅色静止状态。
虚构的 FIELDNOTES 工具栏上有三个相同的按钮,中间一个在光标按压下呈现更深的填充并内陷,两侧按钮保持浅色静止状态。

识别特征

  • 指针或手指按下的瞬间,控件的填充、阴影、缩放或色彩即刻改变
  • 松开或移出控件后变化立即恢复,不留下持久痕迹
  • 按下态与该控件的悬停态、焦点态、选中态在视觉上可区分

概念边界

按下状态只回答“系统收到我的按压了吗”,发生在按下与松开之间的短暂窗口。它不同于悬停(指针停留但未按下)、焦点指示(键盘焦点在哪)和选中/切换态(松开后仍保留的持久状态),也不承担展示操作结果的职责——结果由状态消息或内容变化来表达。

什么时候考虑它

  • 触控界面上没有悬停态,按下反馈是用户唯一能确认命中目标的信号
  • 自定义了按钮、链接或卡片的外观并覆盖了平台默认的按下样式
  • 操作结果需要网络往返或较长处理,用户可能在结果出现前重复点击

什么时候慎用

  • 不要让按下(down-event)直接触发不可逆操作,用户将无法通过移开指针取消
  • 不要用与选中态相同的样式表示按下态,用户会误以为已完成切换
  • 不要仅用位移或缩放动画表达按下,在减弱动态偏好下会完全丢失反馈

取舍

明显的按下反馈让每次点击都有“着地”感,但在追求极度扁平或安静的视觉体系里会显得突兀;折中做法是保留细微但对比可辨的填充或阴影变化,而不是省略这个状态。

条件规则 · 编辑建议

当任何可按压的控件被指针或手指按下必须显示与悬停态、焦点态、选中态都可区分的可见按下反馈,并在松开或移出后立即恢复。
当控件触发的操作有实际后果必须在松开(up-event)时才执行操作,使用户可以在松开前移开指针取消;若必须在按下时执行,需提供撤销。
当设计按下态的样式与动效建议让反馈在约 100 毫秒内出现,并保证不依赖运动本身——在减弱动态偏好下仍有颜色或阴影变化可见。

相关词条

焦点指示 ↗相关但不同 · 同一控件同时支持键盘和指针操作

两者都是控件的状态样式,但回答不同问题:焦点指示说“操作会落在哪”,按下态说“按压已被收到”,须可区分。

状态消息 ↗可以配合 · 操作结果需要处理时间或发生在视野之外

按下态只确认输入被接收,结果仍需状态消息等后续反馈来交代。

直接操纵 ↗可以配合 · 用户拖动、按住或连续操作屏幕对象

直接操纵依赖对每一步输入的即时可见响应,按下态是这条反馈链的起点。

扁平化设计 ↗条件冲突 · 扁平样式为了纯净而省略了按下与悬停的差异

去掉深度线索后若不补上其他按下反馈,用户无法确认点击是否命中。

来源与支持范围

MDN · :active ↗

:active 伪类匹配正被用户激活的元素;使用鼠标时激活通常从按下主键开始,到松开为止,常用于 <a> 和 <button>,且应按 LVHA 顺序放在其他链接伪类之后。

检索日期:2026-09-15 · 存档于 2026-09-16
W3C WAI · Understanding SC 2.5.2 Pointer Cancellation (Level A) ↗

WCAG 2.2 的 2.5.2(A 级)要求单指针操作满足以下之一:不使用按下事件执行功能、在松开时完成且可中止或撤销、松开可逆转按下的结果、或在按下时完成属于必要;其意图是让用户在松开前移开指针即可取消误触。

检索日期:2026-09-15
Nielsen Norman Group · Response Times: The 3 Important Limits ↗

Nielsen 指出约 0.1 秒是用户感觉系统即时响应的上限,此时除显示结果外不需要额外反馈;约 1 秒是思路不被打断的上限;约 10 秒是注意力保持在对话上的上限。

检索日期:2026-09-15 · 存档于 2026-09-16
Nielsen Norman Group · Visibility of System Status ↗

该文将“用户点击按钮后颜色变化”列为即时反馈的最简形式,认为对交互事件的即时反馈有助于用户尽快发现并纠正错误;文中未给出具体时间阈值。

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

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

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须在真实触控设备和鼠标上分别按住每类控件,验证按下反馈即时出现、与悬停/焦点/选中态可区分、移出后松开不触发操作,并在系统减弱动态设置下复查。

{
  "states": [
    "rest",
    "hover",
    "pressed",
    "released"
  ],
  "a11y": [
    "按下反馈不依赖颜色单一通道,宜叠加阴影、填充或边框变化",
    "操作在松开时完成,移出控件再松开可取消",
    "按下态与焦点指示、选中态可同时呈现且互不遮蔽"
  ],
  "motion": "按下即刻变色或内陷,不设进入延迟;缩放或位移动画在减弱动态偏好下省略,仅保留颜色与阴影变化"
}

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