这个站两天里换了三副面孔:第一版是暖纸白配系统字体,第二版上了自托管字体和噪点纹理,第三版干脆推翻重做,变成纯黑双光束的控制台。每次都以为"这次到位了",每次睡一觉又发现不对劲。把过程记下来,供下一次迭代对照。
第一轮:字体决定气质
中文网页字体是个坑——全套思源宋体 55MB,谁也别想加载完。最后的组合拳是:西文自托管、中文走系统。Fraunces 管标题的优雅,Inter 管正文的清楚,宋体黑体交给 PingFang 和雅黑兜底。全部字体加起来 156KB,从国内镜像拉,速度无感。
第二轮:深浅主题与纸感
暖纸白版本加了深浅色切换,技术上有个小细节值得记:主题应用脚本必须内联在 <head> 里同步执行,等 CSS 加载完再切就会白屏闪烁。另外叠了一层 5% 透明度的 SVG 噪点,"纸感"这东西玄学,但去掉之后确实显得廉价。
第三轮:诚实的黑色
最终版选择了纯黑。原因很直接:这个站的核心叙事是"一台正在运行的服务器",而服务器机房的灯是关着的。两道径向渐变的光束以 20 度角从视口顶部斜切下来,72px 的高斯模糊让它们像机柜指示灯的余晖——氛围对了,所有组件都活了。
风格迭代最贵的不是写 CSS 的时间,是承认"上一版不对"的勇气成本。
留下来的三条原则
- 动效只做入场和反馈,永远提供
prefers-reduced-motion降级; - 渐变只用在按钮和光上,文字区域保持绝对安静;
- 每一版都要能一句话说清"它是什么",说不清就说明还没想清楚。
第三条是这次最大的收获:纯黑控制台之所以一步到位,是因为它回答的不再是"什么好看",而是"我在运行"。