触摸反馈（Touch Feedback / Active States）是什么：效果预览与 AI 设计提示词

效果预览

普通按钮按住试试 ↘ 主按钮

按下的瞬间 scale .96 + 变灰，100ms 即时响应

适合用在哪

所有移动端可点元素。缺了按压态的移动端像断了触觉。

容易踩的坑

清掉 tap highlight 却没写 :active 样式，按下毫无反馈，用户反复点击。
按压缩放作用在整个大列表容器上，触发大面积重绘且画面抖动。
iOS Safari 未给 touchstart 绑定空监听，:active 样式根本不生效。

设计提示词 · Prompt

触摸反馈（Touch Feedback）：所有可点元素定义 :active 态——scale(0.96-0.98) + 背景加深 5-8%，过渡 100-120ms（按下要即时，松开恢复 200ms）。按钮、列表行、卡片全都要有。与 hover 态的区别：hover 用于指针设备预告可点，active 是"确认按下"的触觉。配合震动反馈（navigator.vibrate(10)）更进一步（Android 生效）。tap highlight 移动端默认的蓝色闪块要清掉（-webkit-tap-highlight-color:transparent）用自定义 active 替代。慢速按下测试：按下 300ms 不松手不应有闪烁。

Touch Feedback: Define an :active state for every tappable element — scale(0.96-0.98) + background darkened 5-8%, transition 100-120ms (press must be instant; release restores over 200ms). Buttons, list rows and cards all need it. Difference from hover: hover previews clickability on pointer devices, active is the tactile "press confirmed." Add vibration feedback (navigator.vibrate(10)) to go further (works on Android). Clear the default blue tap highlight flash on mobile (-webkit-tap-highlight-color:transparent) and replace it with a custom active state. Slow-press test: holding a press for 300ms without releasing should not flicker.

常见搭配

同一页面里经常和「触摸反馈」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

触感反馈Haptic Feedback 涟漪按钮Ripple Button 触摸目标尺寸Touch Target Size 底部标签栏Bottom Tab Bar

演示 HTML 结构

<div class="s d-touchfb">
  <div class="d-touchfb__row">
    <span class="d-tfb">普通按钮</span>
    <span class="d-tfb d-tfb--press">按住试试 ↘</span>
    <span class="d-tfb d-tfb--gd">主按钮</span>
  </div>
  <span class="d-tfb__hint">按下的瞬间 scale .96 + 变灰，100ms 即时响应</span>
</div>