本博客是基于Butterfly主题进行魔改制作的，在最初从pure主题切换到butterfly中，我带着非常多的兴奋感。Butterfly的令人震撼的首屏和打字效果深深吸引着我。

Butterfly主页

博客用的久了就会产生一些想要调整的想法，于是经过了漫长时间的边改边用，现在博客已经魔改到了v3.3.2版本，相信每个魔改人都会有着自己的想法和思路改造一个完全属于自己的博客，那么我来表达一下我的看法。

理念

设计理念：清晰、轻快、易操作

清晰

首先解决清晰问题，博客的主要目的就是为了文章的阅读，所以首先我就要针对阅读体验进行改进。

原主题的字号真的太小了。小字体带来了美观，但是作为一个「实用性博客」，以快速找到需要的内容为核心，放大字体是不可避免的。那么多大合适呢？针对桌面屏幕来说，我选择了以我16寸mbp的屏幕距离1.2m左右能流畅阅读的程度作为参考依据。

  • 1.2m
  • 流畅阅读

在很多位置使用了隐喻的方式来表达这个部分是做什么的，例如右侧的卡片相比主题的失去了卡片标题。其实在我不告诉你标题的情况下，绝大多数人会知道这个卡片意味着什么。即使不清楚也完全不影响整个博客的阅读。包括文章下面的版权信息等。通过隐喻的手段，非常多的元素都被我移除掉。这让我整个博客都变得更加简洁和和谐。移除他们甚至变得更好了。

你可以看到虽然提升了清晰度，但是很多装饰性元素还在。一些装饰性元素隐藏在各个角落，他们不会干扰整个博客的运行，反而会给博客增添细节，丰富博客的展现。

轻快

一个需要很久才能打开的博客对与用户来说是灾难性的，特别是对于知识类博客。来到博客的人通常都是通过搜索引擎进来的，他们都带着疑问、问题、困惑，心理状态大多浮躁、烦闷，如果是着急的任务可能还背负着过大的压力。这可能是进入博客的人非常糟糕的情况表现。让这样的人进入博客，他们对于等待的容忍度将会变得更低，他们翻阅文章功能的速度会加快。除了在文章上尽可能能解决问题以外，博客搭建的样式也是重中之重。尽可能删减不必要元素，尽可能减少干扰，尽可能快速访问。

从百度统计的数据上来看，上班时间我的博客浏览量会显著高于双休日和休息时间，所以大多数来到博客的人都是在工作学习上出现问题的人，这个时候，一个中性的博客设计风格就比较重要了。二次元、甚至色情元素、游戏元素和背景音乐、音效等对于用户造成的伤害可能是灾难性的。这对我的博客设计上进行了严格的限制。保持严肃、保持理性才是知识类博客所必要的。

为了提升博客的轻快，我移除掉了体积庞大的背景图，采用了一个1kb大小的png图像，通过repeat来无限重复它。你可能没有注意到他们，但是因为他们的存在，你会感到整个博客并不单调，反而具备了很强的丰富性。（背景图兼容深色和浅色模式）

易操作

在文章的很多样式我进入了深入的研究和尝试。什么文字是可以点击的？什么文字是重要的？我在哪里？我怎么开始评论？

我对博客的用色进行了细致的规划，包活点击元素、悬浮样式等进行了整体的统一。所有可点击元素的「手感」和「观感」保持一致，在你鼠标悬浮的时候，你能确信这个位置能够点击、点击之后能够去到哪里。按钮的尺寸大小都经过调整。你会在博客的每一个页面感受到一致的体验，操作起来如有神助。

如果你使用的是macOS11及以上，你甚至能够感受到整个博客与你的操作系统的体验几乎一致，你可以无缝的在博客和系统应用中切换，而不改变你的操作习惯。

本该那样

让设计隐藏起来，让界面本该那样。

当用户进入到你的网站中来，理想状态下他们的操作就是每一个控件都易于操作和点击。你会看到博客的每个角落都是细节设计，没有过分突出设计感和艺术感的模块存在。所以当用户进来的时候首先感受到好的文章，再感受到好的设计感和体验时才是正确的思维路径。

Q&A

  • 博客为什么默认为深色模式
    深色模式时博客的默认模式，你可以通过右下角的设置进行切换。虽然深色模式下文章的阅读性会略微降低，但是会增加用户的注意力，增加用户阅读的认真程度，略微增加用户的阅读时间，充分发挥文章价值。并且博客的封面图片选择上在深色模式下效果更好，更加契合，所以选用深色模式作为默认模式。不支持自动切换是因为大多数用户如果使用自动切换的话都会自动选用浅色模式，这难以给通过搜索引擎进入，可能只访问一次本博客的人带来最佳体验，所以默认为深色模式。

  • 怎样魔改自己的博客？
    关于如何魔改你的博客，推荐观看一些我友链里以魔改为主的博客，他们的魔改内容免费开源，可以作为学习参考：冰老师和Akilar还有小康都有非常多的魔改开源教程。如果喜欢本博客的风格，本博客的修改大多基于css层面上的修改，可以选择喜欢位置的样式进入f12启动台查看css的改动。