简介

自从我把我的博客搬到 Hexo 后,我一直在考虑设计属于我自己的主题。于是我开始着手设计 Frame: 一个极简的 Hexo 主题,其灵感来源于传统的画框。我大概花了几周的时间进行界面设计以及代码实现,并于 2021 年 8 月 29 日首次将其发布在了 Github 上供其他人下载使用。

👉 示例网站

👉 Github 链接

最近我已经发布了 Frame 的第二个版本 (v1.1) —— 添加了一些新功能,修复了一些小错误并进行了一些改进。于是我决定趁此机会对这个主题整体的设计和开发过程进行一些回顾。

扁平和简约

Frame 主题遵循扁平化和极简主义的设计原则。没有任何的阴影、花纹或华丽的动画,整个网页仅由文本、图像和线条组成。我知道过于极简的设计可能会使其失去它的独特性,但是,对于博客主题而言,简约的设计可以让观众更多地关注博客的内容,这比看起来漂亮更重要。

关于字体

选择使用 Inter 字体可能是我整个主题设计所做的第一个决定。它是我最喜欢的无衬线字体之一,它适合电脑屏幕显示,中性但不太冷酷,非常适合博客的写作。对于中文和日文字体,我选择了思源黑体与 Inter 搭配。总体而言,我对他们的搭配效果还是比较满意的。

typeface

画廊模式

Frame 的主要特色之一是它的「画廊模式」(Gallery View)。最初 Hexo 只提供了一个「列表模式」,列出文章的标题的和一部分内容,没有考虑到文章的封面图。作为一名设计师,我有时会在我的博客上展示我的作品,所以展示文章的封面非常重要。因此,我设计了一种「画廊视图」来展示带有封面的文章:

gallery view

此外,我在网页四周围了一圈实线边框,就像画框一样围住整个网页。这个特别的设计也可以在 Anyway FM 的网站和另一个 Hexo 主题 Paper 上看到。

颜色

我为主题设计了 3 种颜色模式:默认、经典和深色。默认模式和深色模式是分别为「白天工作人士」或「夜晚工作人士」设计的。我自己则更像是一个「白天工作人士」,我的电脑,手机,甚至 Visual Studio Code 使用的都是浅色模式。

另外,我还设计了一种比较经典的颜色模式:浅黄色背景搭配深蓝色文字。我最喜欢经典模式,它的颜色取自经典的手写笔记本,为博客页面的中性设计增添了一丝温暖。

color mode

设计 + 开发

在一个项目里,即负责设计又负责开发是一件很累的事情,但幸而能感觉一切都在自己的掌控之中。我可以立即测试我的设计,因此代码不总是死死地跟着设计文件,实际上,有时候设计和开发的顺序是反过来的。因此,即使在界面设计的早起阶段,也必须对界面的前端结构有一定的了解和预判。

关于像素

有一个值得一提的小细节是关于设计的比例的。在我的 Sketch 的设计文档里,我用的是像素 px 作为设计单位。但是,当我写代码的时候,最好能使用 rem 作为单位,因为这样我就可以轻松地调整不同屏幕尺寸上的所有内容的比例。但使用 rem 的一个缺点是很难估计某个物体的大小,例如我可以很容易地感受到 12px 有多大,但我很难想象 0.0225rem 究竟有多大。

有一个优雅的解决方案是使用 虚拟像素 作为单位 $px = 0,0625rem。这样一来,尽管代码用的是更灵活的单位 rem,我们肉眼所见的依然是一个近似 px 的单位,因此可以轻松地估计物体的实际大小。例如:

1
2
3
4
5
6
$px = 0.0625rem

$font-size-heading-h1 = 28*$px
$font-size-heading-h2 = 24*$px
$font-size-heading-h3 = 18*$px
$font-size-heading-h4 = 16*$px

最后

虽然为设计主题和写代码很累,但随之而来的快乐和满足会让一切都值得的。如果你也喜欢 Frame 并想了解更多,可以去它的 Github 页面 或者它的 介绍文档 里了解更多信息。此外,如果您对这个主题有任何建议,欢迎在 GitHub 上提 issue 或者联系我🌈。