我是怎么设计这个博客的

十月刚开头。我一边赶着把手头的视频收尾，一边从头琢磨自己在社交媒体上该怎么呈现。这个博客，就是在这阵忙乱里冒出来的。

我想让作品集保持橱窗的样子。作品少而精，不放长篇说明。可是做项目的时候，我总是在查资料、做尝试，有时候做到一半就放弃了。这部分到现在为止一直没有地方放。放进橱窗，橱窗就乱了；不放，它就这么丢了。想来想去，我决定把两者分开。

那么，一个有人读的博客该长什么样？最先想到的东西大家都猜得到。卡片网格……大幅封面图……一边滚动一边浮现的文字……说实话，这里面哪些真的有助于阅读，我并不知道。我就从这里开始查。

人们不读，人们扫

Nielsen Norman Group 做眼动追踪研究很多年了，结论一直没怎么变：在屏幕上逐字读文本的人是少数，我们大多数人是在扫。¹（我自己也是，坦白讲。）他们把最高效的扫读方式叫作“千层蛋糕”模式。视线从一个标题跳到下一个标题，碰到感兴趣的部分才钻进去读。²

这对我来说意思很简单：一个只看标题的人，也应该能明白文章在说什么。所以每篇文章开头都有一句话的摘要。首页上除了日期、标题和一行字，别的什么都没有。我希望有人一篇都不点开，也能看出我在忙什么、是怎么想问题的。

还有一个决定，有些人可能不太认同。这里没有“草稿”“构思中”之类的标签。哪怕写的是一项还没做完的研究，我也会把它写成一篇完整的文章。一个在读者看来不够认真的东西，我想不出有什么理由把它发出来。

一行该有多长

按照 Baymard 汇总的研究，读起来舒服的一行在 50 到 75 个字符之间。³ 无障碍标准 WCAG 则把 80 个字符定为上限。⁴

我想亲眼看看这些数字。我打开了 14 个以阅读体验著称的博客，把字号、行高和正文栏宽一个个量了下来。读着舒服的那些，结果都落在同一个区间里。Craig Mod 的网站，字号 20 像素，栏宽 746。Medium 是 20 配 680。Every 是 20 配 736。

Dan Luu 的网站则是个很能说明问题的反例。在宽屏上，一行能拉到 224 个字符，视线从行尾折回下一行开头的时候会迷路。在我看来，好文章被一个糟糕的页面糟蹋掉，最直观的样子就是这样。

这里的正文在电脑上是 20 像素，在手机上是 17 像素。行高是字号的 1.55 倍，正文栏宽 680 像素。按土耳其语原文算，这样一行能放 65 到 70 个字符。大家知道，土耳其语的单词偏长，比起英文文本，换行会来得早一点。不过还是落在那个区间里。

不用卡片，用列表

博客首页上我见得最多的就是卡片网格。每篇文章一个框，每个框一张图。NN/g 认为，卡片适合把彼此不同的内容并排摆放，但像博客文章这样彼此相似的东西，用卡片扫起来比列表更费劲，也更占地方。⁵ 这事还有视觉上的一面。一旦每篇文章都非得配图不可，过不了多久你就会开始放些不相干的图。

我选了列表。按年份分组，每一行是日期、标题和一句话。

橱窗是深色的，这里是浅色的

我的作品集是深色的，这里是浅色的。理由来自 NN/g 的一项发现：在正常视力下，浅色背景的阅读效果更好，而且字越小，差距越大。⁶ 对一个要读长文的地方来说，这就够了。如果你的手机或电脑开着深色模式，网站也会以深色打开，右上角的按钮随时可以切换。

没有的东西，和我留着的一扇门

没有弹窗，没有订阅框，没有评论，没有广告。也没有 cookie，所以也没有 cookie 提示。连字体都不是从别的服务器加载的。

在我量过的那些网站上，我清楚地看到了这些东西有多累人。Every 的一个文章页面上，同时有五层固定元素：顶栏、cookie 横幅、注册弹窗，还有两个角落里的小框。Substack 上的一篇文章，前后让我订阅了四次。Linear 的一个页面加载了 217 个独立脚本。而这些没有一样能让文章更好读。

反过来，我留着一扇门：AI 爬虫。不管是做搜索的爬虫，还是为了训练模型来抓取网站的爬虫，都可以进来。如果我的文章被拿去训练模型对我有好处，那把这扇门关上就没什么意义。

为什么用单独的地址

一开始我想用一个完全独立的域名，比如 burakreis.blog。一年 20 美元，眼下我不想花这笔钱。后来我发现，Google 也可以给一个子域名单独设一个网站名称。⁷ 现在博客的地址是 blog.designedbyburak.com。作品集的菜单里没有通往这里的链接，为的是让橱窗保持简洁。但这里每一页都写着作者是谁，两个网站彼此知道对方的存在。

如果有什么地方让你看着别扭，是一行太长，还是字太小，写信告诉我：hello@designedbyburak.com

附注：写这篇文章的时候，我又在一块很窄的屏幕上打开了博客，结果顶部菜单溢出了页面。我已经改好了。不过第一个 bug 偏偏是在写这篇文章时冒出来的，还是有点好笑。