MICRO-INTERACTION
错误抖动Error Shake
输入有误时，表单字段左右快速抖动并转为错误色，比只变红文字更不容易被忽略。属于最经典的反馈型微交互。
效果预览
••••••••
⚠ 密码不正确，请重新输入
适合用在哪
登录密码错误、必填项未填、验证码不正确等即时校验失败。抖动幅度要小（4-6px），否则显得暴躁。
容易踩的坑
- 只靠抖动和红色表达错误，色盲与读屏用户无法感知出了什么问题。
- 每次按键都触发校验抖动，用户还没输完就被连续「吼」。
- 错误提示只写「输入有误」，不说明规则，用户只能盲猜重试。
设计提示词 · Prompt
错误抖动（Error Shake）：字段边框 1.5px 改为错误红 #ef4444，加 box-shadow 0 0 0 3px rgba(239,68,68,.12) 做柔和外扩。抖动用 2.6s cubic-bezier(.36,.07,.19,.97) 的循环 keyframes：0%/72%/100% 位移 0，76% -6px，80% +5px，84% -4px，88% +3px，92% -1.5px —— 幅度递减的阻尼抖动。字段下方补一行 9.5px 红色图标 + 文案说明原因（例如「密码需至少 8 位」）。同时给字段加 aria-invalid="true" 与 aria-describedby 指向错误文案。
Error Shake: change the field's border to 1.5px error red #ef4444 and add box-shadow 0 0 0 3px rgba(239,68,68,.12) as a soft outer spread. The shake uses looping keyframes with 2.6s cubic-bezier(.36,.07,.19,.97): 0%/72%/100% offset 0, 76% -6px, 80% +5px, 84% -4px, 88% +3px, 92% -1.5px — a damped shake with decreasing amplitude. Below the field add a 9.5px red line with an icon + copy explaining the cause (e.g. "Password must be at least 8 characters"). Also give the field aria-invalid="true" and aria-describedby pointing to the error copy.
常见搭配
同一页面里经常和「错误抖动」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-shake">
<div class="mi-shake__f">••••••••</div>
<div class="mi-shake__msg">⚠ 密码不正确，请重新输入</div>
</div>
</div>