前端主题设计小记：让页面更有呼吸感

前端主题设计小记 Theme Design Notes 一个舒服的博客主题，不一定要复杂，但需要有 层次 、 留白 和 统一的视觉节奏 。 设计感很多时候不是来自堆效果，而是来自页面元素之间的秩序。 写在前面 博客主题设计这件事，很容易走两个极端。 一种是太素，页面能看，但没有记忆点；另一种是效果太多，渐变、阴影、动画、背景图全都往上加，最后文章本身反而被抢了注意力。 我更喜欢的方向是：页面第一眼看着舒服，继续读下去不累，换到移动端也不会觉得拥挤。 博客的主题不是为了炫技，而是为了让内容更容易被阅读。 如果样式让读者忽略了正文，那这个主题就有点用力过猛了。 主题设计先看整体气质 做主题之前，最好先想清楚网站想给人的感觉。是偏技术文档，还是偏个人空间；是冷色简洁，还是温暖柔和；是强调内容密度，还是强调轻松浏览。 清爽 克制 有留白 有层次 不过度装饰 对个人博客来说，我觉得比较合适的状态是：有一点个人风格，但不要影响阅读；有一点动效，但不要打扰操作；有一点色彩，但不要让页面变花。 背景和卡片的对比度 博客页面里最常见的结构就是背景加卡片。首页文章列表、个人中心、画廊、评论区、AI 助手弹窗，本质上都离不开这一套。 背景和卡片的对比度如果太弱，页面会糊成一片；对比度太强，又会显得割裂。 位置 设计建议 页面背景 尽量使用低饱和颜色，不要抢正文注意力 内容卡片 比背景稍亮或稍暗一点，形成清晰分层 边框 可以用半透明边框，不一定每个卡片都加重阴影 阴影 轻一点就够了，阴影太重会显得页面很脏 圆角 保持统一，不要一个地方 4px，一个地方 24px 我的习惯： 如果一个页面看起来乱，我会先把阴影减弱、边框统一、背景颜色降低饱和度。很多时候不用改布局，页面就会干净不少。 标题与正文的字号层级 一篇文章好不好读，字号层级影响很大。 标题、摘要、正文、辅助信息、按钮文字，如果大小差异不明显，页面就没有重点；如果差异太夸张，又会让阅读节奏断掉。 文本类型 作用 建议 页面标题 告诉读者当前页面主题 可以明显一点，但不要过大 模块标题 区分不同内容区域 比正文大一档即可 正文内容 主要阅读区域 保证行高，不要太密 摘要说明 快速说明文章重点 颜色可以稍浅，但不能看不清 时间、浏览量 辅助信息 字号小一点，降低存在感 正文最怕的是行高太小。技术文章里经常有代码、表格、列表，如果行距太紧，