我的新版主页设计

Aug 09, 2025#UIDesign

最近给主页做了一次大的升级,代码层面的已经写了一篇文章:升级了个人主页架构,有兴趣的欢迎去看一看。相较于此,我更想聊一聊这一次在风格上的改进。

在此之前,我的主页使用了很长时间的这一版本的样式:

tsEIf5YOg4SRQcC.png

个人觉得不能说难看,只能说是普普通通吧。之前数次想要改版,但都未果,这次的重构正好是一个更新迭代的好时机。

我一向喜欢极简的设计,甚至更喜欢那种极简到略微简陋的设计。我本人没有任何平面设计和 UI 设计相关的背景知识,对于一些耳熟能详的设计理念也就是知道名字的程度,但我认为不管是做产品、做设计甚至是开公司,最重要的一点就是抓住最核心的需求,然后尽可能做减法。这个时代太需要做减法了。这次面对我的主页,我将我想要的风格浓缩成了三个关键字:极简,秩序,阅读体验

这是截至本文发出之时的主页样式,下属的 Blog 页面亦有大幅调整。

olPF8ZhBvS5M93i.png

极简

此前我的主页使用了 Indigo 作为点缀色,下方的链接部分也引入了一些图标。这样的风格来自于多年网页开发的惯性思维,需要让用户知道哪里可以点?加个强调。要让页面不那么呆板?加个图标。

而这次我想,假如去掉一切视觉噪音,只保留最最核心的标题和链接会是什么样子呢。于是我去掉了点缀色,去掉了图标,去掉了冗长的简介,这时候我能操纵的几乎只剩下了灰度、粗细、大小、间距这四要素。我一下子想到了电纸书。我非常喜欢电纸书,既有电子设备的冰冷,又有文字跃然纸上的触感,我认为它真正做到了走在科技和人文的十字路口。

所以,我开始尝试排版一堆黑白的纸。

版面上的元素足够少,因此我有足够的精力去打磨他们的大小、粗细和间距,尝试找到最佳的视觉甜点。而对于博客页面,我也同样移除了视觉上所有不必要的元素,例如 Footer 上方的分割线,标题区域的背景色,标签的背景色…… 而在此同时,我保留了 Emoji 来提供一丝灵动感✌️。除开首页的 3 个 Emoji,浏览器标签页的 Favicon 也会随着页面切换。

同理,我仔细衡量了博客页面页头和页脚的元素,根据重要程度和优先级重新排序,将标签页入口移动到了页头,删掉了页脚上网站使用的技术栈简介。我也去掉了编程文章底部的 Sponsor 卡片,毕竟以我的文章质量确实是不值得打赏🌚。

秩序

没有规矩不成方圆。这次改版我统一了诸多元素,例如此前混乱的文字颜色,在新设计中我只保留了两种文字颜色:ink,链接、正文使用的黑色;secondary,时间、标签使用的灰色。在此基础上结合文字大小和字重来区分页面上的可交互元素和非可交互元素。

伴随着前面提到的各种视觉分割元素的简化,间距的使用需要更加考究。我统一了页头和页脚的间距,保证在大部分页面,与内容区域的间距都是一致的。没有分割线和背景色,一样可以带来一种基于秩序美的统一感。

阅读体验

阅读体验是个过于宽泛的话题,而其中影响最大的大概就是字体。这次改版我决定将网站的非衬线字体改为衬线字体。

可惜在 Web 这个场景下,能使用的衬线中文字体屈指可数。最开始我想到的就是 霞鹜文楷,这是一款我非常喜欢也广受好评的开源中文字体,不过这款字体体感上过于温暖柔和,似乎并不符合我的网站风格。最终我还是使用了 Noto Serif 字体家族。

使用衬线字体会带来很多新的问题,例如,间距。我个人偏好纤细的字重和紧凑的间距,但使用衬线字体后,在原本的字体设置下可读性几乎为零。为此文章页的字号、字重、leading 和 tracking 都要相应加大。与此同时,页头页脚的间距也要相应加大才会显得协调,也就是说,为了提升阅读体验,整个页面都更加「松弛」了。

希望你喜欢我的主页风格。