MICRO-INTERACTION
触感反馈Haptic Feedback
移动端操作时设备给出一次短促震动，同时界面做微小的位移抖动。Web 端用 navigator.vibrate 实现。
效果预览
📳
适合用在哪
移动端的关键操作（删除确认、错误提示、成功提交、长按激活）。必须做成可关闭，且只在用户主动操作时触发。
容易踩的坑
- 每次轻点都震动，用户很快会烦躁并关闭整个应用的通知权限。
- 在非用户手势回调中调用 vibrate，浏览器直接忽略且无报错。
- 把震动当唯一反馈，iOS Safari 不支持时用户毫无感知。
设计提示词 · Prompt
触感反馈（Haptic Feedback）：视觉侧让目标元素做一次极小幅度的抖动（translateX 在 -1.6px 到 1.8px 之间衰减，总时长约 180ms），同时用一圈半透明边框从 scale(1) 扩散到 scale(1.6) 并淡出，暗示「震动」向外传开。代码侧调用 navigator.vibrate(pattern)：轻触用 10ms，成功用 [12, 40, 12]，错误用 [20, 60, 20, 60, 20]。必须在用户手势回调里调用（否则 iOS/Android 都会忽略），并提供 localStorage 开关让用户关掉。iOS Safari 不支持 vibrate，需要准备降级（视觉 + 可选音效）。
Haptic Feedback: visually, make the target element shake once with a tiny amplitude (translateX decaying between -1.6px and 1.8px, about 180ms total), while a semi-transparent border ring spreads from scale(1) to scale(1.6) and fades out, hinting that the "vibration" radiates outward. In code, call navigator.vibrate(pattern): 10ms for a light tap, [12, 40, 12] for success, [20, 60, 20, 60, 20] for errors. It must be called inside a user gesture callback (otherwise both iOS and Android ignore it), and provide a localStorage toggle so users can turn it off. iOS Safari does not support vibrate, so prepare a fallback (visual + optional sound).
常见搭配
同一页面里经常和「触感反馈」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-haptic">
<div class="mi-haptic__w"></div>
<div class="mi-haptic__ph"><div class="mi-haptic__sc">📳</div></div>
</div>
</div>