本文仅代表个人观点。
曾几何时，我相当沉迷折腾博客的界面，经常访问各大大佬的博客，看见什么好的设计就抄过来。从光标到右键菜单，从顶部栏到侧边的滚动条，能改的地方全部改了一遍。主题也几经更改，包括但不限于使用过Butterfly，Anheyu(就是洪佬的主题)，Next这些主题。
直到最近看完了好几本关于设计的书，才开始从美学、实用、设计的角度重新审视自己的博客。这时候才恍然醒悟：原来博客被自己改的面目全非了。
现在看之前的博客，美观吗？我不知道，只是有相当多花里胡哨的元素；实用吗？我也不知道，只是有相当多不必要的、冗余的功能和模块。基于对博客本质的思考，我开始着手设计一个自己的主题，最终结果就是现在的样子，我将她命名为Magzine。
Magzine的设计很大一部分受到日本美学的影响，参考了以下书籍：《设计中的设计》，《阴阳礼赞》，《白》，《茶之书》。同时也加入了西方的一些设计方式，参考了以下书籍：《为真实的世界设计》，《设计心理学》，《点、线、面》，《秩序感：装饰艺术的心理学研究》。
去同质化
主题最大的好处在于，可以迅速、无门槛的获得一个非常美观且实用的博客界面，但问题也很明显：无论怎样魔改，始终脱离不了其最初的框架，这就导致很多博客看上去都差不多，缺乏辨识度。自己设计主题的意义也在于此：融入自己的思考和创造。无论做得怎么样，都是与其他任何人不同的，在这个同质化严重的时代，这是一个不小的成就。
功能设计
Magzine遵循极致的简约，仅保留一个博客最基本的功能。
| 模块 | 功能组件 | 描述 / 说明 |
|---|---|---|
| 主界面 | 顶部栏 | 导航元素 |
| 回到顶部 | 快速返回页面顶部 | |
| 明暗切换 | 用于切换网站整体主题 | |
| 文章界面 | 顶部栏 | 文章页专用的顶部栏 |
| 回到顶部 | 功能同主界面 | |
| 目录 | 跳转至对应章节 | |
| 评论 | 展示和加载文章评论区的主体区域 | |
| 直达评论 | 快捷按钮或 | |
| 明暗切换 | 功能同主界面 |
主界面
顶部卡片
主界面沿用了butterfly系列主题一贯的卡片式设计，将右侧边栏的作者卡片，和顶部最大的背景图结合成一个较大的作者卡片，剩余的侧边栏全部删除。
我觉得博客的所有者应该在界面设计中占有很重要的地位，所以将作者卡片移到中间置顶，一个显眼的位置。当然了，还有座右铭、关于我、联系方式这些作者的基本信息。
文章卡片
在我见过的几乎所有博客中，文章卡片都是并列、整齐的布局，最多就是单栏和双栏的区别：
主界面的文章卡片我设计为拼贴式布局（其实我更喜欢称之为杂志样式，因为这样的排版在杂志里很常见）。这种错落有致、大小不一的排版，能打破传统单调、重复的浏览节奏，增加关注点的“随机性”；减少视觉疲劳，保持浏览时的新鲜感。
视觉关注点的随机性，这种样式下，每篇文章都可能成为“大卡片”，吸引读者的注意力。绝大多数情况下，来访者都是抱着随便看看的目的，我们可以通过这种随机的关注点，引导其浏览。
这种布局也有其劣势，动态的随机拼接布局会消耗额外的CSS计算资源，导致加载缓慢。所以目前我的实现方式是伪随机，即：布局是固定的，卡片内容根据文章来调整，这样既能实现效果，同时也能让每个卡片的随机大小始终保持在一个可读的范围。
另外，这种布局也会导致封面的裁切（为了保持封面容器填满而不拉伸变形），这点只能在文章界面补救，在文章界面顶部显示完整的封面。
关于分页，为了保持页面的一致性，我选择向下延申的方式，而不是传统的翻页。这样能很方便的、无缝衔接的浏览所有文章：
文章界面
传统的博客都是点击文章之后跳转，但我在之前的浏览体验中发现一个问题，那就是进入文章之后再退出来比较不方便。按照传统的butterfly结构，返回主界面的方式是点击左上角的区域。又或者，使用edeg自带的，鼠标右键向左滑返回上一页。无论是哪种方式，过程似乎都不是那么如人意。
为此，我想到了窗口式的设计，让文章以窗口的形式打开，这样点击周围任何空白的地方，就能很轻松的返回主界面，而不用跳转到一个新的网页。
这种方式就好像在随手翻杂志，看见哪个感兴趣的标题，从书架上抽出来看两眼，看完了就塞回去，接着在书架上浏览下面的文章。而传统的跳转就像是：从暑假上抽出那本书，走到隔壁的书房里坐下来看，看完了再走回书架，找到原来的位置塞回去。窗口式的设计省去了其中的许多步骤，让翻阅的体验更加丝滑、连贯。这也是我给这个主题起名Magzine的很大一部分原因。
这是第一个使用这种设计的博客吗？我希望是，又希望不是。
我觉得这样的窗口式设计是大程度上优化了大屏浏览的体验，受制于窗口的特性，手机端就没法使用这样的模态窗口浏览（能实现，但是文章区域就会过于狭窄），所以在手机端还是使用传统的跳转页面，毕竟手机返回上一页也很简单，只需要轻轻滑动即可。
实际上，Magzine能使用这样的窗口浏览，很大程度得益于总体的简约设计。因为模态窗口的本质是一个iframe元素，如果本身文章页面的元素过多，那么窗口看上去就会出现很多重复。尽管如此，我还是在iframe窗口中，额外引入了很多css样式，来隐藏顶部栏的内容，确保窗口的美观。这其中的CSS插入，就会导致页面的加载速度下降。
后记
我很喜欢看书，Magzine的设计原则之一就是高阅读性，我在文章界面尽可能的减少其他元素，来保证阅读的舒适度，同时调大字体、行间距，减少阅读的疲劳感。
与其说是主题制作，我感觉更多的是自己对于美学、设计思考和感悟的实践。
参考
主题设计
Magzine设计的过程中，参考、沿用了以下主题的一些框架、标签外挂，在此特别感谢🎉：
文章参考
书籍参考
《设计中的设计》，《阴阳礼赞》，《白》，《茶之书》，《为真实的世界设计》，《设计心理学》，《点、线、面》，《秩序感：装饰艺术的心理学研究》
手稿
Comments