微交互决定产品「好不好用」的体感。获奖站的共同点是:反馈及时、节奏统一、从不抢内容。下面给出可执行参数,避免「为动而动」。

先画状态机,再写动画

按钮与表单至少覆盖默认、悬停、激活、焦点、禁用、加载、成功/失败。缺状态比缺动效更伤信任。

完整状态比单次炫酷动画更重要
完整状态比单次炫酷动画更重要

时长与缓动的推荐区间

反馈类 200–320ms,面板展开 320–450ms;全站共用一到两条缓动曲线。超过 500ms 的装饰动画,优先删。提供 prefers-reduced-motion 降级为即时切换或淡入。

按钮、菜单、Toast 共用一条缓动
按钮、菜单、Toast 共用一条缓动

克制清单

不要同时位移、缩放、变色、阴影四连;不要在正文阅读区循环动画;不要用动效掩盖慢接口——先优化性能。微交互的目标是降低认知成本,不是展示技术。