面向长篇幅文章的设计

设计一个美观的“文章”需要考虑很多因素。 与首页不同，长篇幅文章的设计重点不在于界面设计，而是以一种舒适放松的方式设计文本，从而创造良好的阅读体验。

这是因为文章涉及长篇幅内容，而长篇幅内容往往通过用户的“页面停留时间”来衡量其价值。 我们希望用户能够完整地阅读一篇叙事。 在用户进入文章页面和阅读所有文字之间存在一个自然的间隔。 理想情况下，这个间隔应该足够沉浸式，不仅可以留住用户，还可以激发他们的思考、想法，甚至行动。 至少，我希望当我吸引您的注意，而您正在阅读这篇文章的时候，您能够有所感悟。

需要权衡。 一方面，我们听说 “没有人阅读互联网。” 另一方面，长篇幅文章需要仔细阅读。 鉴于内容营销的当前价值和用户日益增长的急躁情绪，尽可能地吸引读者应该成为一项关键关注点。 让我们一起看看一些最佳实践和精彩的文章页面示例，以更好地了解什么是长篇幅文章的视觉吸引人的阅读体验（不牺牲用户体验），以及我们如何复制这些效果。

快速获胜

让我快速列出我认为许多人可能已经意识到的内容可读性方面的有效事项。

• 增加字体大小：我们知道 16px 是默认值，在许多设计中都可以使用，但更大的字体大小更具吸引力，因为它暗示用户可以随意往后靠，放松下来，无需将屏幕靠近眼睛才能阅读。
• 每行字符数目标：我认识的很少有人喜欢比需要做的工作更努力，阅读也是如此。 尝试缩小宽度，而不是使用整个视窗宽度，并将其与更大的字体大小相平衡，以在每行文本中显示更少的字符。 您的最佳点可能会有所不同，但许多人建议每行 45-75 个字符之间，这有助于限制读者眼睛从左到右移动的距离。 Chris 有一个 书签工具来帮助计算字符数，但我们也有 CSS 中的 ch 单位，可以获得可预测的结果。
• 增加行高：默认行高会让人感觉很拥挤。 很有意思，但行之间更多的空间（当然要适度）会减少眼睛的负担，这似乎与每行字符数的建议背道而驰，因为通常我们希望眼睛在水平方向上的移动距离更短。 行高介于 1.2 和 1.5 之间似乎是长篇幅内容的典型范围。

如果您以前没有见过，Pierrick Calvez 有一个很棒的 “五分钟” 排版指南 ，其中包含许多诸如此类的简单易行的技巧。

设计更多呼吸空间

您可能习惯于设计“可见区域”，在那里空间是一项宝贵的资产。 这有点像网络世界的海滨房产，因为我们习惯于将高价值的东西塞进这里，例如英雄横幅、号召性用语，以及任何其他有助于销售产品的东西。 可见区域很像繁忙的市中心，交通拥挤，高楼林立。

文章则不同。 它们让您能够伸展一些。 如果我们把城市发展类比再深入一点，文章拥有足够的面积可以采用一种“少即是多”的设计理念。 这就是为什么看似微不足道的设计选择（比如字体）对整体体验如此重要的原因。

请查看下面的示例。 链接下划线有更多呼吸空间（具体来说，它们出现在下降线下）。 这实际上是可以在全站启用的一种效果，但在文章页面上效果尤为明显，因为它可以提高可读性。 这种细微的设计选择有助于创造更多呼吸空间。

text-underline-position: under; 是使此效果生效的 CSS 代码行。 自然，text-decoration 也必须设置为除 none 之外的其他值（本例中为 underline）。

上面的示例还使用了 text-decoration-thickness，它可以更改下划线（和其他线型）的粗细。 您可以使用此 CSS 属性使线的粗细与字体的尺寸和/或粗细相匹配。

以下是一个完整示例

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;

  /* or */
  text-decoration: underline 2px;
  text-underline-position: under;
}

在您开始使用 text-decoration 简写之前，Šime Vidas 关于使用该简写时 一些“注意事项”，值得您回顾一下。

引导读者进入内容

首字母下沉 是将样式化字母放置在文档或文档部分开头的一种方式。 它们曾经被用于拉丁文本中，但如今主要用于装饰目的。

我个人认为首字母下沉会降低可读性。 然而，它们可以成为引导读者进入主要内容的一种不错的方式，并且只要您使用 ::first-letter 伪元素，它们就不会出现任何严重的辅助功能问题。 还有一些 其他（更旧的） 方法 涉及更多 HTML 和 CSS，以及使用 ARIA 属性以确保内容的可访问性。

使用 ::first-letter，CSS 代码如下所示

/* select the first letter of the first paragraph */
article > p:first-child::first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

如果我们可以使用 initial-letter 属性，那将非常棒，但在我写这篇文章时，该属性几乎没有得到支持。 如果我们有它，字体大小和行高的一切计算都会自动完成！

CodePen 几年前曾挑战人们展示他们的首字母下沉样式技巧，您可以在 此集合 中看到一大堆来自 CodePen 的精彩示例。

跳至主要内容

只要将主要内容包装在 <main> 元素中，屏幕阅读器就可以让用户跳至主要内容。 但是，通过制表符浏览网站的用户无法从中受益。 相反，我们必须创建一个“跳至主要内容”的锚点链接。 此链接通常隐藏，但当用户首次按下制表符时会显示（即在获得焦点时显示）。

它看起来像这样

<!-- anchor -->
<a id="skip-link" href="#main">Skip to main content</a>

<!-- target -->
<main class="main">
  <!-- main content -->
</main>

#skip-link {
  position: absolute; /* remove it from the flow */
  transform: translateX(-100%); /* move it off-screen so that it appears hidden but remains focusable */
}
#skip-link:focus {
  position: unset; /* insert it back into the flow */
  transform: unset; /* move it back onto the screen */
}

.main {
  scroll-margin: 1rem; /* adds breathing room above the scroll target */
}

当然，还有其他方法可以实现。 以下是一些更深入地探讨创建跳过链接的文章。

无缝视觉

我喜欢这篇文章中的插图。尽管它们看起来令人难以置信，但它们并不要求过多的认知注意力。它们带来了短暂的喜悦，但也暗示文章本身还有更重要的内容要表达。部分原因是由于透明度的使用，而矩形图像捕获了更多的负空间，因此需要更多的注意力（如果这是想要的效果并且图像对故事至关重要，那么这很好）。

但是，重要的是要知道这些图像实际上并非完全透明，而是与内容具有相同背景色的非透明 JPEG。我推测这样做是为了让图像的大小比支持透明度的 PNG 小。

这样“伪造”透明背景的缺点是，如果你的网站恰好提供暗黑模式 UI，那么它将需要额外的技巧（和维护）来支持暗黑模式 UI。如果插图非常扁平且简单，那么 SVG 可能是一个更好的选择，因为它体积小，可缩放，并且能够与任何背景融为一体。

但是，如果你必须使用栅格图像，并且更愿意使用支持透明度的 PNG 文件，那么你需要研究使用响应式图像和loading="lazy" 属性来提高加载速度。

将重点放在类型和语义上

如今，你可能对人们在网络上阅读内容的“方式”或“位置”几乎没有发言权。无论用户是在 RSS 订阅中收到内容，通过电子邮件接收内容，从同事处复制粘贴内容，在抓取的网站上找到内容，还是其他方式，你的内容可能看起来与你期望的不同。你可以设计出你认为是世界上最漂亮的文章，但用户仍然可能会点击阅读器模式按钮，让你沮丧。

这没关系！内容的可发现性与内容的设计一样重要，许多用户有自己发现内容的方式和对良好阅读体验的偏好。

但是，有些人想要阅读器模式的原因。首先，它就像“根本看不到任何 CSS”。我的意思是Safari 的阅读器模式或Brave SpeedReader，它们使用机器学习来检测文章。没有获取或执行 CSS、JavaScript 或非文章图像，这可以提高性能，还可以阻止广告和跟踪。

这种“纯粹的最小化”将重点放在内容而不是样式上。因此，你实际上可能想要接受浏览器对阅读样式的意见，仅仅出于这个目的。

实现这一点的方法不是使用 CSS，而是更加注意你的 HTML。阅读器模式在使用简单、语义化、与文章相关的 HTML 的标记时效果最佳。你必须做的不仅仅是将<article>标签放在文章周围，才能充分利用它。

你可能会发现，一种强调可读性而不是光鲜的极简设计实际上是在你的网站设计中使用的一种好策略。我强烈建议你阅读 Robin 关于“最小 CSS”以获得良好的阅读体验的文章。

长篇幅文章的汇总！

我已经分享了我认为构成网络上优秀长篇幅文章阅读体验的很多内容。但眼见为实，我汇总了一些展示我们所涵盖内容的示例。