博客,是一种内容中心的网站。确切地说,是文字内容中心的网站。一个博客主题被创造出来,目的就是提升读者的阅读体验。靠什么提升呢?文字排版和 UI / UX 设计。基于此,可以提出以下原则:
- 博客应当照顾不同终端的体验。
- 在不与第 1 条冲突的情况下,博客的字体和排版应当清晰、易于阅读、重点突出,用户交互直截了当,以让用户尽可能快地获取自己想要的内容。
- 在不与第 1、2 条冲突的情况下,博客的加载速度应该尽可能快。
不同终端——包括读屏器
一些博客主题大量使用了 <div>
元素,这是不对的。HTML 是一个标记语言,它应当具有足够的语义性,以便让机器和人都能理解。而 <div>
元素,是一个没有任何语义的元素。它的作用就是为了方便 CSS 设计样式。但是,如果博客主题大量使用了 <div>
元素,这个博客对读屏器来说就会是一团乱麻。
读屏器是一种辅助工具,它可以读出网页上的文字,从而帮助盲人或者视力不佳的人。一个博客主题如果在所有地方都使用 <div>
,而不是 <header>
、<article>
、<main>
、<h(1-6)>
这些语义化 tag 的话,那么读屏器就无法正确地读出博客内容。这是不对的——博客系统应当照顾到所有的读者,而不仅仅是视力正常的读者。
如果你使用 markdown 编写博客,语义化的问题会有一个缓解:markdown 的各个元素最后会被编译成 html 的各个语义化的标签。比如,#
会变成 <h1>
,##
会变成 <h2>
,*
会变成 <em>
,**
会变成 <strong>
等等。不过,至少还要用 <article>
标签把它们包起来。
如果说对读屏器的适配是单纯的利人行为,那么从利己的角度出发,语义化还有另一个好处,就是方便 web 爬虫爬取信息。博客的流量入口往往是搜索引擎,而搜索引擎的爬虫是通过 html 标签来分析网页的。如果博客主题没有语义化,那么搜索引擎就无法正确地分析博客内容,从而这个博客在搜索引擎上的权重就会下降。
字体——衬线还是无衬线?微软雅黑一无是处吗?
有些博客主喜欢衬线字体(如宋体)而非无衬线字体(如黑体,包括微软雅黑)。有些博客主尽管使用了黑体,却视微软雅黑如寇仇,想方设法避免它显示在即使是 Windows 设备的屏幕上。这都是不正确的。
屏幕刚出现时,上面的字体是像素点阵字,而当计算机性能提高到可以显示各种字体时,出于历史惯性,人们几乎是立即把来自印刷时代的衬线体搬了上去。然而在这之后,无衬线体出现,并迅速抢占了衬线体的位置。历史证明,衬线字体是印刷时代的字体,而黑体是屏显时代的字体。
在黑体里,微软雅黑的字形确实是不那么好看的一个。它不是动态字体,提供的字重也不多,但有一个优势是别的字体无法取代的:与 Windows 的字体系统相搭配的微调。
字体并不是一切。决定文字显示效果的因素,除了字体以外还有渲染系统,而微软雅黑就是与 Windows 的渲染系统相搭配的。曾经我热衷于把 Windows XP 装饰成 Windows 7,但当我把 Windows 7 的微软雅黑字体放到 Windows XP 上时,我发现它的效果并不好:笔画不清晰,文字发虚,阅读起来很累。究其原因,就是渲染系统的问题。Windows Vista 及以上系统在显示微软雅黑字体时会进行微调,调整字体不同部分的笔画粗细乃至笔画的位置,以让字体显示得尽可能清晰,这个效应在像素密度越低的屏幕上越明显。
不同屏幕的像素密度是不一样的。像素密度的衡量单位是 DPI(dots per inch),或 PPI(pixels per inch),每英寸长度的像素数。DPI 越高,像素越密集。不同屏幕的 DPI 各不相同,但我们可以拿 Windows 的逻辑 DPI 作为参考:Windows 的默认 DPI 是 96,在高分屏普及后,Windows 提供缩放功能,在 125% 缩放时,Windows 的 DPI 能达到 120,150% 缩放时则是 144。DPI 越低,一个字所占用的像素就越少,从而就越考验字体和显示系统的微调能力。
而当我们把网页的字体指定为其它字体时,微软雅黑-Windows 字体渲染器的这一组合就被打破了。造成的结果是,在低分屏上,当文字比较小时,字体的笔画不再能被清晰地显示出来,就像下面这张图一样:
字体为思源宋体可变字重版,操作系统为 Windows 11,DPI 为 120,字体大小为 14px。可以看到,即使是在 120DPI 的屏幕上,这些字的很多横画都仍然很不清晰。
也许在 DPI 高达三四百的手机上,这些都不是问题。但是,既然“照顾不同终端的体验”是我设计博客的第一原则,低分屏上的体验就不能被忽视。
特效——好看。但别忘了博客是什么
一些博客主题提供了非常炫酷的特效和动画,如果使用得当,它们将能提升用户体验——比如一个伪进度条就能改善用户的等待体验。但当特效喧宾夺主时就是另一回事了。比如,这是我在我博客引入一个鼠标特效后的结果:
可以说,这个特效摧毁了我的博客。
(持续更新)