MICRO-INTERACTION
长按Long Press
按住不放时按钮外圈画出一圈进度，走满才触发动作。用「需要一点耐心」的形式给不可逆操作加一道心理闸门。
效果预览
🗑
长按 1 秒删除
适合用在哪
删除、退出、清空数据等破坏性操作；也可用于语音输入的开始/结束。
容易踩的坑
- 长按是唯一触发方式，键盘与读屏用户无法完成该操作。
- 没有任何文字提示「按住以删除」，用户点一下没反应就放弃了。
- 未阻止长按触发系统菜单或文字选择，移动端会弹出复制菜单。
设计提示词 · Prompt
长按（Long Press）：按钮外圈放一个 SVG 圆环做进度，用 stroke-dasharray 等于周长、stroke-dashoffset 从满到 0 的动画表示进度，起点用 transform:rotate(-90deg) 挪到正上方。典型时长 600-1000ms（破坏性操作用偏长的 1s）。实现上用 pointerdown 启动定时器、pointerup/pointerleave/pointercancel 取消，只有定时器跑满才执行动作。移动端注意 300ms 内不触发（否则会与点击冲突），并给触感反馈（navigator.vibrate）提示已激活。
Long Press: place an SVG ring around the button as progress, using stroke-dasharray equal to the circumference and stroke-dashoffset animating from full to 0 to show progress, with transform:rotate(-90deg) to move the start point to the top. Typical duration is 600-1000ms (use the longer 1s for destructive actions). Implement it by starting a timer on pointerdown and canceling on pointerup/pointerleave/pointercancel; only run the action once the timer completes. On mobile, do not trigger within 300ms (otherwise it conflicts with clicks), and give haptic feedback (navigator.vibrate) to signal activation.
常见搭配
同一页面里经常和「长按」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-long">
<div class="mi-long__b">
<svg viewBox="0 0 60 60"><circle cx="30" cy="30" r="28"/></svg>
🗑
</div>
<span>长按 1 秒删除</span>
</div>
</div>