MICRO-INTERACTION
双击点赞Double Tap
在内容上双击，一颗心从点击处放大弹出再飘走。把点赞从「找一个按钮」降级成「想点哪就点哪」。
效果预览
♥
适合用在哪
图片/视频流、卡片列表等移动端内容消费场景。桌面端保留按钮，不要强制双击。
容易踩的坑
- 单击为等待双击判定延迟 300ms，图片点开的响应明显变慢。
- 双击是唯一点赞方式，没有可见按钮，新用户根本发现不了。
- 移动端双击同时触发浏览器缩放，需设 touch-action:manipulation。
设计提示词 · Prompt
双击点赞（Double Tap）：在内容容器上监听 dblclick（移动端监听两次 touchend，间隔 < 300ms 判定为双击）。在点击坐标处插入一颗心形元素，动画 2.6s ease-out：scale 从 0 rotate(-24deg) 到 1.28 rotate(6deg)（14%），再到 1 rotate(0)（30%-74% 保持），最后 scale(.9) translateY(-14px) opacity:0 飘走。心形用白色 + 同色系 drop-shadow 保证在任意底图上可见。动画结束移除节点。注意与单击操作解耦：双击时应延迟或取消单击的跳转。
Double Tap: listen for dblclick on the content container (on mobile, listen for two touchend events and treat an interval < 300ms as a double tap). Insert a heart element at the tap coordinates, animating 2.6s ease-out: scale from 0 rotate(-24deg) to 1.28 rotate(6deg) (14%), then to 1 rotate(0) (held 30%-74%), and finally scale(.9) translateY(-14px) opacity:0 as it floats away. Make the heart white + a same-family drop-shadow so it stays visible on any image. Remove the node when the animation ends. Note: decouple it from single-tap actions; on a double tap, delay or cancel the single-tap navigation.
常见搭配
同一页面里经常和「双击点赞」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="mi-dtap"><div class="mi-dtap__h">♥</div></div> </div>