简诗 AI 细腻交互动效精修

要解决的问题

前端代码跑通之后，决定产品“质感”的往往是不起眼的细节：按钮按下没有反馈、弹层从屏幕中心凭空放大、下拉菜单用 ease-in 慢半拍。单个问题看起来无所谓，但细节会复利式叠加，最终让功能相同的两个产品一个“够用”、一个“精致”。

核心能力

这个技能把设计工程（Design Engineering）的判断整理成一套可执行的流程：

• 动效决策框架：写任何动画前按顺序回答四个问题——该不该动、为什么动、用什么缓动、多快结束。每天触发上百次的交互（如命令面板）一律不加动画，偶尔出现的弹层才值得做标准过渡。
• 缓动与时长：入场用 ease-out，绝不用 ease-in；优先从 easing.dev 等工具选自定义曲线；UI 动画控制在 300ms 内，按钮反馈只有 100–160ms。
• 组件规则：:active 时 scale(0.97)；绝不从 scale(0) 入场；popover 从触发元素位置展开（modal 除外）；相邻 tooltip 跳过延迟。
• 物理感：拖拽、手势等可中断的交互用弹簧动画，bounce 保持在 0.1–0.3。
• Review 格式：审查 UI 代码时必须输出 Before/After 对照表格，逐条给出改动与理由。

适用边界

它是设计判断，不能替代具体产品需求、可访问性测试和真机动效验证。上线前需核对框架版本、依赖与实际渲染表现；当品牌体系或平台规范已有明确的交互语言时，不要机械套用这些规则。