提升博客的阅读体验

这一两年我访问过许多个人搭建的独立博客，大部分是用静态博客生成工具，主题也各式各样。为了吐槽主题里那些奇怪的设计和样式写下了这篇文章，仅仅通过一两项小的改进，都会让阅读体验提升很多。

本人非设计专业出身，但对这方面感兴趣，好的网页设计需要累积学习，我知道怎样是好看的，也在学着做一些顺眼好看的东西，所以这篇文章大部分都是由我个人感受为出发点提出来的建议，如果某些部分你认为更好，那就直接按照你自己的想法来做就好了，毕竟人人审美不一样。

博客不是桌面，设置成动漫或风景图片顺带加个透明度，观感会没有那么舒适。博客重点是文字，与背景颜色之间形成对比，而不是图片。即使是摄影为主题的博客，也不应该使用一张大图片铺满全屏当固定背景，恰恰相反纯色更合适。

不建议使用动态背景图，特别是用 Particleground 这类粒子效果，并且文字内容区域没有加任何纯色背景覆盖在背景上面，十分不宜阅读。博客背景适合设置为纯色，比较常见是白和浅灰，还可以搭配上与背景色不突出的图案在留白部分当点缀。

适量的透明度可以加在任何遮挡到主题文字的组件。举个例子，当在手机屏幕下浏览时，右下角的滑动到顶部按钮。

阅读很重要一部分是排版设计，如果直接套用博客主题，那么大部分的排版还是合格的。以下列举的是我会很注意的地方，对应着一一改进会对阅读会有极大的提升。

• 中文里写的英文单词前后用空格隔开
• 文字适当的分段，就像写作文
• 段落之间留白不能过窄，留白是给读者呼吸的空间
• 限制摘要文字量或者干脆不要
• 除了引用的内容，少用斜体

字体与颜色

字体应该强调一致性，所以不建议页面上使用太多不同的字体显示。本博客的字体方案为：

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

颜色方面，首先要确定一个博客的主色调，并以该主色为标准，采用其衍生色，可以借助 Paletton 这样的色板工具生成。而文章主要内容无疑是使用中性色。

添加少量的过渡动画，例如链接 Hover 效果，滑动，跳转淡入淡出等等都是可以给体验加分，但阅读为主的博客不适用于大量的交互动画，例如整个页面飘散的雪花，变形翻转，占比过大的看板娘，鼠标点击效果等等。

当然这是博主的个人喜好，不过在以阅读为主的博客上，动画少即是多。

这个部分也是由博主个人喜好决定，目前大部分博客主题布局都是比较清晰合理的。但我个人不推荐使用论坛式或者文档式的主题来选做个人博客。

论坛式主题会给访客造成一种非博主个人所属的观感。

文档式主题的使用场景顾名思义就是用在某项技术内容的介绍文档或一些笔记，不适用于个人向博客。在 VuePress 刚公布时，有些博主会直接将 VuePress 官方文档的布局主题用到自己博客上，其实完全可以自己写一个或者用文档上提供的博客主题。

这里列举一些不是必要，但加上整体体验会提升的部分。

• 简短好记的博客域名
• 添加图片放大功能
• JS 库和字体库使用 CDN 链接
• 使用风格统一的图标库
• 主页不放置过多的推广和广告模块
• 主页将跑马灯公告改为固定模块
• 页面刷新后自动回到刷新前阅读到的进度
• 添加夜间模式，可以借助 Darkmode.Js 实现
• 使用高质量或者比例正确的图片，善用 Google 搜图
• 为博客添加 Progressive Web Apps

如果想改进自己当前的博客，可以多找找更优秀的主题模板，或浏览别人博客一些做得好的地方，还可以直接参考一些阅读平台例如 Medium 。