给博客做设计，比写代码难多了#

第一坑：配色看着高级，眼睛先受不了#

我一开始挑配色，标准就一条——“感觉高级”。于是挑了个偏冷的蓝色当正文，配上灰白背景，自认为很有质感。结果自己写了半天博客，眼睛酸得不行。后来一测，正文和背景的对比度连 3:1 都不到，难怪。

现在学乖了，正文至少做到 7:1，大标题 4.5:1，用 WebAIM 那个对比度计算器，配色前先过一遍。别嫌麻烦，这是最便宜的护眼方式。

第二坑：字体，越折腾越慢#

刚开始我特别想上一个好看的英文字体，找来找去装了个 Google Fonts，页面加载直接多出几百毫秒。更要命的是，中文字体它管不了，中文还是系统字体在渲染，结果标题英文一个样、中文一个样，比不装还难看。

现在直接放弃治疗，用系统字体栈：-apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif。本地字体，零请求，加载飞快，还不会出现字体闪变。个人站真没必要为字体花太多心思。

第三坑：间距，从”随缘”到”4 的倍数”#

间距这事最玄学。看教程都说”留白很重要”，但我一开始纯靠感觉，一会儿 8px，一会儿 13px，一会儿 22px，页面跟被猫刨过似的，乱糟糟。

后来把间距统一成 4px 的倍数：4、8、16、24、32。段落之间 24，区块之间 32，按钮内边距 12x8。一旦有了这套规则，整个页面突然就”齐”了。这招真不是玄学，谁试谁知道。

第四坑：暗色模式，别用纯黑#

加暗色模式的时候图省事，背景直接 #000 纯黑。结果晚上看文章，白字在黑底上特别刺眼，看久了还有残影。后来换成深灰 #1a1a1a 或 #161616，字用浅灰 #e0e0e0 而不是纯白，舒服多了。

还有个小坑：图片在暗色模式下会显得格外亮。文章里配的截图直接能晃瞎眼，后来统一给图片加了个透明度处理或者包一层暗色遮罩，才正常。

第五坑：图片，几 MB 一张真的顶不住#

博客文章里的截图，一开始我原图直接传，一张三四 MB。自己本地看没感觉，一发出去别人打开，转半天圈。后来用压缩工具把图压到几十 KB，页面秒开。个人站访问量不大，但加载速度这事，体验差一丁点，人就走光了。

收个尾#

折腾下来最大的感悟就一句：个人博客的设计，舒服和快比”高级”重要得多。大厂那套设计规范、设计系统，动辄几十个 token 色板，个人站真没必要全抄。先把对比度、间距、字体、图片这四样弄利索了，页面就比市面上 80% 的个人站强了。

反正我现在看到自己的博客，终于不嫌弃了。你可能也正在折腾，祝你少走点弯路。