一个只有几篇文章的小站,前后换了三种视觉方向。这篇文章记录每次改完之后“哪里还是不对”,以及最后是怎么收敛的。
第一版:默认主题
最开始用的是 GeneratePress 默认样式:灰底、蓝色链接、系统字体、朴素的白卡片。
它不算难看,但也没有任何“是我的”的感觉。就像租来的房子,家具都在,但没有一件是你挑的。
第二版:墨与纸
第一次改版,我给了一个很明确的方向:墨、纸、一条朱线。
思路来自中文书法的黑白灰。具体做法:
- 底色从纯白换成微暖的米白
#FCFBF8 - 正文用宋体,行高 1.85
- 全站只保留一种彩色——朱红
#B93A26,而且只用在交互上 - 卡片全部拆掉,文章之间只用一条发丝线分隔
- 无圆角、无阴影、无悬停动效
改完之后,页面确实静下来了,有点像一本书的目录。
但看了两天,我发现了问题:它太“端着”了。
那种克制感适合严肃的出版机构,而“墨痕集”只是一个随手写点东西的地方。它需要的是轻快,不是庄重。
第三版:把它调亮
第二次改版是彻底的转向。保留“纸”的质感,但换掉严肃的外壳:
配色:晨雾白底 + 天空蓝 + 樱粉 + 薄荷绿。页面顶部和底部各一条四色彩条,作为首尾呼应。
字体:保留宋体做正文(长文阅读还是宋体舒服),但界面元素全部换成黑体——导航、日期、标签、按钮。
形状:圆角回来了,18px 的卡片重新出现,但加了底部投影,让它们有“实体感”而不是漂浮感。
动效:卡片悬停上浮 3px,按钮按下时往下沉 2px。
这次改完,页面终于有了“轻小说”的味道。
每次改版之后,我发现真正的问题是什么
回头看,三次改版其实解决的是三个不同层次的问题:
| 改版 | 表面动作 | 真正解决的问题 ||—|—|—|| 第一次 | 换配色 | 没有辨识度 || 第二次 | 换整体风格 | 情绪不对——严肃 vs 轻快 || 第三次 | 改回来 | 阅读体验——长文需要留白和节奏 |
第三次之所以能收敛,是因为我不再纠结“什么风格好看”,而是开始问:这个页面要承担什么?
它是给人读长文的地方。那么:
- 行宽要控制在 30 个汉字左右
- 行高要够(1.9)
- 每段之间要有呼吸
- 标题层级要一眼清楚
这些是阅读体验的问题,不是视觉风格的问题。风格再漂亮,行宽 1200px 的正文也没人看得下去。
一个具体的例子:卡片到底要不要

第一次和第三次的区别,很能说明问题。
第一次做卡片:圆角 + 阴影 + 悬停浮起,是那种“卡式”的 SaaS 后台风格。
第二次拆掉:因为觉得它“不像一个安静说话的地方”。
第三次又加回来:但这次的卡片服务于内容——顶部一条栏目标签色带(工作蓝、生活粉),让读者一眼知道这篇属于哪个栏目;卡片之间的间距用来分隔文章,而不是靠一条线硬切。
同样是卡片,第一次是装饰,第三次是信息结构。
顺手修掉的老问题
改版过程中,我发现了一些跟视觉无关、但一直存在的问题:
页脚一直是黑底。 原因是 GeneratePress 主题自定义里存了 .site-info { background: #222 },覆盖了子主题样式。这个黑色从建站起就存在,只是之前没注意。
归档页顶部有乱码。 自定义模板里调用了一个打印函数,它把 class="widget-area ..." 当成文本输出到了页面上。
搜索框有去不掉的内边框。 更早的 input 全局样式压过了组件样式。
这些问题都不是“好看不好看”,而是有没有认真检查过。
最后的体会
做了三次改版,最大的收获不是审美提升了多少,而是学会了一个判断标准:
设计好不好,不看它像不像某个风格,而看它有没有让读者更顺利地做他想做的事。
读者来这个博客,是想看文章。那么:
- 正文够不够好读?
- 能不能快速找到感兴趣的文章?
- 手机上会不会挤?
比起“配色是不是够高级”,这三个问题的答案才决定这个页面成不成立。
现在这套视觉应该会稳定一段时间。等积累的文章多了、内容结构变了,可能还会有第四次——但那时候我第一个看的,应该还是行宽和行高。