微交互清单：8 个让界面显得“贵”的细节

“廉价”与“高级”之间只差 40 毫秒

没人能说清为什么你的界面像模板。但他们感觉得到：所有状态变化瞬间完成（0ms）、所有 hover 只是换色、所有开关只有开和关。高级的界面用物理感回应——微小、克制、一秒内结束。下面是清单，附精确参数。

八个细节

• 磁吸——CTA 在 110px 场内以约 0.3 倍偏移倒向光标，回弹带轻微过冲（cubic-bezier(.2,.9,.25,1.35)）。
• 弹簧开关——滑块用 cubic-bezier(.3,1.6,.4,1)；1.6 的过冲正是“真开关”的手感来源。
• 描边勾选——300ms 内用 stroke-dashoffset 画出来的对勾胜过透明度淡入；“手绘感”来自笔触。
• 状态呼吸——在线圆点每约 2 秒扩散一圈柔光；静止的圆点读作“死了”。
• 聚焦辉光——输入框点亮 3px 光环 + 柔和外发光 + 从左侧展开的渐变条。
• 扫光——hover 时一道斜切光带扫过按钮，600ms，只扫一次。不要每帧都扫。
• 点击涟漪——点击处泛起一圈径向波纹；界面在回应你的触碰。
• 诚实的悬浮抬升——卡片上移 4px、阴影加深。缩放不要超过 1.03；文字被缩放会显得廉价。

剂量即毒性

一屏塞八个就是马戏团。高级感来自克制：一屏一个磁吸 CTA，只有真正在线的地方用呼吸圆点，其余一切安静地走 150-250ms 过渡。审任何你喜欢的界面——它通常每屏只用一种“贵”的机制。

而且每一条都要有 reduced-motion 兜底：状态变化照常发生，只是没有花活。可访问性本来就是高级感的一部分——卡顿或致晕与“贵”背道而驰。