为啥这个网站长这样

最近有朋友问我这个主页是咋设计的。说实话我每次被问都卡一下，因为我也讲不出啥"设计理论"，就是凭感觉一个个决定加上去的。趁现在有空，我把脑子里这些乱七八糟的想法捋一下。

颜色为啥就一种

全站就一个粉色系，从 logo 到按钮到滚动条都是。倒不是因为我多喜欢粉色，是因为一个站上颜色多了就乱。我之前看过一些"高级感"的站，最后总结下来就一条：颜色别超过两个。一个是主色，一个是黑/白/灰这种中性色。

我主色选粉色是因为它不太"程序员"——我同学的主页大部分是黑蓝白，看着都挺像 GitHub README。粉色起码一眼能跟别人不一样。暗色模式也是同样的粉色，只是把背景换成了黑色，文字换成浅色，整体感觉还是那个站。

背景那几个模糊球是干啥的

主页 hero 区背景飘的 3 个粉色模糊球，业内叫 mesh gradient 或者 aurora 效果。我自己用的时候其实没想那么多，纯粹是觉得"光一个纯色背景太素了"。

实现上挺简单的——3 个 absolute 定位的 div，分别贴左下、右上、中间，再用 CSS 的 filter: blur(80px) 把它们糊成一大坨。最后用 GSAP 给它们做随机飘动，整体看着就跟呼吸一样"活"的。

有人问这玩意会不会影响性能，会。但只要数量控制在 3-5 个、blur 值别超过 100px，就还好。低端机会掉帧但不至于卡成 PPT。

玻璃效果

卡片、链接按钮、navbar 都用了玻璃效果——半透明背景 + 模糊背后。CSS 就几行：backdrop-filter: blur(20px)，关键。

玻璃好看是因为它有"层次"——你能透过卡片看到后面那个飘的模糊球。纯实色卡片就没这种感觉。代价就是 backdrop-filter 在低端机会掉帧，但我赌了大部分访客是 Mac/iPhone 看的，应该还行。

另一个细节是玻璃我只用在"装饰容器"上——链接按钮、tag 标签。核心内容（标题、段落）永远纯色背景 + 纯色文字。好看和能看总得先选能看。

动效这块

我没搞那种"鼠标移动整个网站跟着倾斜"或者"页面切换有花式过渡"那种重特效。一是不太实用（看了 3 次就腻了），二是低端机会卡。

我加的几个动效都挺克制的：

1. Reveal 入场——滚动到某个 section，那段内容淡入 + 上移。所有人都在做，不稀奇，但是有跟没有就是不一样。

2. 卡片 3D 倾斜——鼠标 hover 卡片，卡片根据鼠标位置轻微倾斜一下。这个是我最近才加的（之前嫌太花哨）。后来想想加上去挺解压的，就保留了。

3. 背景模糊球飘动——3 个 blob 各自 GSAP 飘。永不停止但很慢（8-12 秒一个循环），看着不累。

没了。整站就这 3 个动效。

字号梯度

主页 hero 标题 80px，正文段落 18px，差了 4 倍多。这个我是看 Apple 官网学的——大标题巨大小字正常，中间不要中间值。

之前我做过一版所有字都差不多大（22-28px 之间），结果整页看着像一份 Word 文档，谁是主角分不清。现在 80px vs 18px 一对比，眼睛立刻知道看哪里。

留白

每个 section 之间至少 8rem（128px）的空白。看着浪费空间，但实际让眼睛有喘息。挤得满满当当的页面读起来累。

卡片内部的 padding 也给得大方——p-8 (32px) 是默认，hero 区域甚至 p-16 (64px)。我同学有的主页把卡片 padding 设成 p-4，看着就"抠"。

按钮的 3 种风格

一个页面里我用了 3 种不同风格的按钮：

实色（"浏览作品"）—— 黑底白字，最强对比，最重要的 CTA。

玻璃（"联系我"）—— 半透明背景，能看到后面的渐变。次要的 CTA。

品牌色（"发送邮件"）—— 粉色背景白字。强引导的 CTA。

同一页里 3 种按钮形成视觉节奏，访客一眼就知道哪个最重要（实色）、哪个是辅助（玻璃）、哪个是 action（品牌色）。

最后

设计这事挺私人的，没有标准答案。我这套搭配是按"我自己看着舒服"来的，不一定适合别人。如果让我给一个通用建议就俩字：克制。

颜色克制、动效克制、按钮种类克制。少即是多——我之前 1.0 主页就是没克制住，全站塞满了动效，结果除了"酷"啥也没传达。3.0 这版我克制了很多，反而看着更顺眼。

诶对了，4.0 啥时候来我现在也不知道。也许哪天我又"克制不住"了，那再说吧。