我现在看到一个网页上的卡片鼠标悬浮往上飘 5px 就条件反射般地想关掉页面。
不是因为这个效果本身有多丑——第一次见到的时候确实觉得还行。问题是，所有人都在用这一个效果。
AI 生成的"高级感"
自从 AI 写代码变得普及之后，一个非常明显的趋势出现了：大量网页开始长得一模一样。
卡片悬浮上移 + 阴影加深。按钮悬浮放大 1.05 倍。标题淡入从下往上滑。背景一个大渐变。左右两栏布局，左边大标题右边小字介绍。
你让 AI 生成一个"现代化的着陆页"，十有八九出来的就是这个模板。因为 AI 是从海量现有网页中学习的，这些效果出现频率最高，所以它会反复生成这些"最安全"的方案。问题是，当所有人都用"最安全"的方案，结果就是所有网站都长一个样。
鼠标悬浮上移 5px 这个效果简直成了 AI 时代的"视觉方言"。
动效应该有理由
我不反对动效。我自己的博客里动效不少——首页纸牌有翻转、页面切换有黑幕过渡、友链页面有粒子漂浮、文章页有阅读进度条。但每一个动效我都能说出它为什么存在。
纸牌翻转——因为首页是一个"纸牌屋"的概念，翻转是符合隐喻的操作反馈。你翻一张牌，看到背面的信息，这是自然的。
黑幕过渡——页面切换时的黑幕不是为了好看，是为了掩盖路由切换时内容重新渲染的闪烁。它解决了一个实际问题。
粒子漂浮——友链页面的粒子代表不同博主，它们在空间中随机分布、互相连线，视觉上传达"宇宙中的连接"这个概念。去掉粒子的话，友链页就变成一个无聊的列表。
进度条——告诉你还有多少内容没看完，纯功能性。
而"鼠标悬浮上移 5px"解决了什么问题？告诉用户"这个东西可以点击"？那把 cursor 设成 pointer 就够了。提供操作反馈？一个颜色变化就能搞定，不需要位移。
每一个毫无理由的动效都是认知负担。用户的注意力是有限的，你让一个卡片凭空飘起来，用户的大脑会花零点几秒去处理"这个东西为什么在动"。一个还好，十个二十个组件全在那飘来飘去，整个页面就像一锅在沸腾的粥——每个元素都在抢你的注意力，结果你什么都没看进去。
更可怕的是连锁反应
悬浮上移从来不会单独出现。一旦你用了这个效果，你就会觉得：光上移好像不够，得加个阴影变化吧。阴影加了，那是不是还得加个背景色渐变？背景色变了，文字颜色也得变一下吧？于是一个简单的 hover 状态变成了四五个属性同时在过渡。
然后你觉得其他元素没有动效显得太朴素了，就给所有东西都加上。按钮要飘，导航要飘，图片要飘，甚至文字都要飘。最后整个页面变成了一个"动效展示厅"，而不是一个让人获取信息的网站。
克制是一种能力
好的动效应该满足三个条件：
- 有功能——它要解决一个具体问题（反馈、引导、掩盖加载等）
- 不突兀——用户注意不到动效存在的时候，它才是最好的
- 不可替代——如果去掉这个动效，用户体验有明显下降，那它就该留
如果一个动效不满足这三条中的任何一条，删掉它。
页面会因此变得"无聊"吗？不会。真正无聊的是那些千篇一律的悬浮上移。而一个干净的、只在关键时刻出现精准动效的页面，反而会让人觉得"这个开发者知道自己在做什么"。
下次写 CSS 的时候，在加 transform: translateY(-5px) 之前，先问自己一个问题：去掉它会怎样？
如果答案是"没什么影响"，那就别加了。
留言板
加载中...