按下状态反馈

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

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

{
  "id": "pressed-state",
  "type": "micro",
  "name": {
    "zh": "按下状态反馈",
    "en": "Pressed-State Feedback"
  },
  "aliases": [
    "Active State",
    "按下态",
    "Press Feedback"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "prevent-error"
  ],
  "tags": [
    "按下",
    "即时反馈",
    "控件状态",
    "触控",
    "active"
  ],
  "definition": "当用户正在按下或点击一个可操作控件（指针按下到松开之间，CSS 中对应 :active）时，控件立刻呈现可见的视觉变化（可辅以触觉或声音），确认这次按压已被系统接收；动作本身在松开时才完成。",
  "boundary": "按下状态只回答“系统收到我的按压了吗”，发生在按下与松开之间的短暂窗口。它不同于悬停（指针停留但未按下）、焦点指示（键盘焦点在哪）和选中/切换态（松开后仍保留的持久状态），也不承担展示操作结果的职责——结果由状态消息或内容变化来表达。",
  "signature": [
    "指针或手指按下的瞬间，控件的填充、阴影、缩放或色彩即刻改变",
    "松开或移出控件后变化立即恢复，不留下持久痕迹",
    "按下态与该控件的悬停态、焦点态、选中态在视觉上可区分"
  ],
  "when": [
    "触控界面上没有悬停态，按下反馈是用户唯一能确认命中目标的信号",
    "自定义了按钮、链接或卡片的外观并覆盖了平台默认的按下样式",
    "操作结果需要网络往返或较长处理，用户可能在结果出现前重复点击"
  ],
  "when_not": [
    "不要让按下（down-event）直接触发不可逆操作，用户将无法通过移开指针取消",
    "不要用与选中态相同的样式表示按下态，用户会误以为已完成切换",
    "不要仅用位移或缩放动画表达按下，在减弱动态偏好下会完全丢失反馈"
  ],
  "tradeoff": "明显的按下反馈让每次点击都有“着地”感，但在追求极度扁平或安静的视觉体系里会显得突兀；折中做法是保留细微但对比可辨的填充或阴影变化，而不是省略这个状态。",
  "comparison": {
    "focus": "确认用户的按压已被系统接收，并留出在松开前取消的机会",
    "mechanism": "按下期间的即时样式变化（:active 或平台按下态），动作在松开时才执行",
    "cost": "需为每类可按压控件维护一套与悬停、焦点、选中态都可区分的按下样式"
  },
  "sources": [
    {
      "id": "mdn-active",
      "title": "MDN · :active",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/:active",
      "claim": ":active 伪类匹配正被用户激活的元素；使用鼠标时激活通常从按下主键开始，到松开为止，常用于 <a> 和 <button>，且应按 LVHA 顺序放在其他链接伪类之后。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/:active",
        "status": "available",
        "checkedAt": "2026-09-16T03:50:08.267Z",
        "jobId": "spn2-b504ce815111741ffd708408cfe2e4792b52f495",
        "url": "https://web.archive.org/web/20260916035032/https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:active",
        "timestamp": "20260916035032"
      }
    },
    {
      "id": "wcag22-pointer-cancellation",
      "title": "W3C WAI · Understanding SC 2.5.2 Pointer Cancellation (Level A)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html",
      "claim": "WCAG 2.2 的 2.5.2（A 级）要求单指针操作满足以下之一：不使用按下事件执行功能、在松开时完成且可中止或撤销、松开可逆转按下的结果、或在按下时完成属于必要；其意图是让用户在松开前移开指针即可取消误触。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/pointer-cancellation.html",
        "status": "pending",
        "checkedAt": "2026-09-16T04:20:14.606Z",
        "error": "status-request-failed",
        "jobId": "spn2-0ab2c1d4f375c084ccb894f74855d7b6dec69ae0"
      }
    },
    {
      "id": "nng-response-times",
      "title": "Nielsen Norman Group · Response Times: The 3 Important Limits",
      "url": "https://www.nngroup.com/articles/response-times-3-important-limits/",
      "claim": "Nielsen 指出约 0.1 秒是用户感觉系统即时响应的上限，此时除显示结果外不需要额外反馈；约 1 秒是思路不被打断的上限；约 10 秒是注意力保持在对话上的上限。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "status": "available",
        "checkedAt": "2026-09-16T03:50:36.309Z",
        "jobId": "spn2-a445b35eeb0d266caa0107c5f3694ef90bec60e8",
        "url": "https://web.archive.org/web/20260916035201/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "timestamp": "20260916035201"
      }
    },
    {
      "id": "nng-visibility-system-status",
      "title": "Nielsen Norman Group · Visibility of System Status",
      "url": "https://www.nngroup.com/articles/visibility-system-status/",
      "claim": "该文将“用户点击按钮后颜色变化”列为即时反馈的最简形式，认为对交互事件的即时反馈有助于用户尽快发现并纠正错误；文中未给出具体时间阈值。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/visibility-system-status/",
        "status": "available",
        "checkedAt": "2026-09-16T03:50:48.236Z",
        "jobId": "spn2-2b8f64f0221fac8cb374582c6ce79b84f5e28f16",
        "url": "https://web.archive.org/web/20260916035119/https://www.nngroup.com/articles/visibility-system-status/",
        "timestamp": "20260916035119"
      }
    }
  ],
  "relations": [
    {
      "target": "focus-indicator",
      "kind": "related",
      "condition": "同一控件同时支持键盘和指针操作",
      "reason": "两者都是控件的状态样式，但回答不同问题：焦点指示说“操作会落在哪”，按下态说“按压已被收到”，须可区分。",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "操作结果需要处理时间或发生在视野之外",
      "reason": "按下态只确认输入被接收，结果仍需状态消息等后续反馈来交代。",
      "basis": "editorial"
    },
    {
      "target": "direct-manipulation",
      "kind": "composes_with",
      "condition": "用户拖动、按住或连续操作屏幕对象",
      "reason": "直接操纵依赖对每一步输入的即时可见响应，按下态是这条反馈链的起点。",
      "basis": "editorial"
    },
    {
      "target": "flat-design",
      "kind": "conflicts_when",
      "condition": "扁平样式为了纯净而省略了按下与悬停的差异",
      "reason": "去掉深度线索后若不补上其他按下反馈，用户无法确认点击是否命中。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "任何可按压的控件被指针或手指按下",
      "instruction": "显示与悬停态、焦点态、选中态都可区分的可见按下反馈，并在松开或移出后立即恢复。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "控件触发的操作有实际后果",
      "instruction": "在松开（up-event）时才执行操作，使用户可以在松开前移开指针取消；若必须在按下时执行，需提供撤销。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "设计按下态的样式与动效",
      "instruction": "让反馈在约 100 毫秒内出现，并保证不依赖运动本身——在减弱动态偏好下仍有颜色或阴影变化可见。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "rest",
      "hover",
      "pressed",
      "released"
    ],
    "a11y": [
      "按下反馈不依赖颜色单一通道，宜叠加阴影、填充或边框变化",
      "操作在松开时完成，移出控件再松开可取消",
      "按下态与焦点指示、选中态可同时呈现且互不遮蔽"
    ],
    "motion": "按下即刻变色或内陷，不设进入延迟；缩放或位移动画在减弱动态偏好下省略，仅保留颜色与阴影变化"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须在真实触控设备和鼠标上分别按住每类控件，验证按下反馈即时出现、与悬停/焦点/选中态可区分、移出后松开不触发操作，并在系统减弱动态设置下复查。",
  "image": {
    "src": "/images/pressed-state.webp",
    "alt": "虚构的 FIELDNOTES 工具栏上有三个相同的按钮，中间一个在光标按压下呈现更深的填充并内陷，两侧按钮保持浅色静止状态。"
  },
  "searchTerms": [
    "pressed",
    "immediate feedback",
    "control state",
    "touch",
    "active"
  ]
}