如何设计网页正文

设计跟随内容，这是一个大家经常听到的词。用户访问网站的目的主要是为了查看内容，因而内容是否吸引人至关重要。而如何让我们的网页内容能够被用户所吸引，一份好的网页正文设计不可或缺。

Part 1. 如何组织网页内容

用户在浏览网页时，主要目的是为了获取有用信息。他们会使用最舒服的方式，去评估获取信息的可能性，只有我们设计的浏览路径足够的自然，且提示清晰，内容易懂，符合用户的心理模型，用户才会使用该路径。用户会非常迅速的决定该网页内容是否值得花时间阅读，因此网页正文设计的好与坏非常重要，只有制定的设计策略能让用户在寻找和使用信息时，以最少的投入获得最大的利益，我们的设计才有价值。

大部分场景，用户只会扫视页面，不会进行在线阅读。大部分场景用户都是在查找自己想要和自己感兴趣的相关信息，而不是逐字阅读。用户一般用非线性的方式阅读屏幕内容，且不会去寻找最佳选择，一般很快就会做出决定点击还是离开，因为看完全部内容去查找最佳选择，太花费时间和精力了。全部网页内容中，只有20%才会被用户阅读，我们需要知道用户想要阅读的20%的内容是什么，从而有效的确定页面架构，编写内容来捕捉用户的注意力，以说服用户阅读更多内容。

眼动追踪热力图

用户阅读网页的过程中，主要是扫描内容，查找他想要的和感兴趣的相关信息。

网页正文浏览方式

常见的浏览轨迹像一个“F”形。这种浏览方式由3部分组成：

水平从左向右浏览（本文讨论的是从左向右阅读习惯的用户群体），一般首先会阅读顶部的主要内容区域；用户一般不会阅读整个网页，但会向下并再次沿水平方向从左向右阅读；沿正文区域左侧垂直向下阅读。

“F”形浏览方式

此热力图显示了一个典型的浏览方式，先阅读前几行，然后沿垂直方向向下浏览，当遇到感兴趣的内容，会多阅读一些，整体形状看起来，像一个“F”形。

除了“F”形的浏览模式以外，根据网页内容吸引度的不同，可能会导致用户更多的水平方向（“E”形）或更少水平方向（“L”形）的浏览。而如果用户浏览的目的更加明确，是为了查找特定的信息，则浏览视线会更加不规则跳转，同时不同的年龄，文化水平、互联网使用经验也会影响阅读的模式。

吸引用户注意的网页内容

刚才有提到，网页中，近80%的内容会被用户忽略，用户阅读的20%内容的价值决定用户是否继续花时间阅读下去。

那20%的内容是：

网页标题网页前面的几个句子突出显示的标题和副标题有趣标题或副标题附近正文的前几个字图像标题

用户从不阅读的是：

长段落与用户意图无关的首行标题、标题或副标题下的内容

那如何运用用户浏览网页的这些既定习惯去更好的设计呢，一般我们可以采用如下几种设计策略：

将重要的内容放在显眼位置

前面提到了用户阅读网页的一般浏览方式，以及习惯注意的网页内容，既然用户习惯于在特定的地方查找感兴趣的信息，则可以利用用户的这些阅读习惯，将有用的或吸引人的信息放置在用户最容易注意到的地方。一般内容设计上，要注意的地方是：

网页最上面的内容（用户最开始注意到的内容），要有足够的吸引力；内容要“头重脚轻”，以吸引用户的视线继续往下移动；

把重要的内容放在显眼位置，即网页首屏显示区域,且考虑放在左侧比右侧更具有吸引力（用户从左向右阅读）。用户很有可能不会滚动鼠标，查看屏幕以外的内容。因为用户不一定知道下面还有内容，如果页面内容较多，重要内容无法一屏显示完，设计需要考虑页面布局能够鼓励用户继续往下浏览，如部分可见的图片或文本，以及明显的提示。

腾讯云官网首页首屏内容，首屏下方，部分内容可见，暗示用户还有更多内容。

倒金字塔格式

除了在用户最容易注意到的地方放置你最希望用户关注的内容之外，正文内容是否能吸引用户真正阅读下去也很重要。先抛出结论的形式去组织正文内容，能够帮助用户快速掌握核心信息。

传统写作方式

如上图，是传统写作方式的内容组织形式，估计有很多人会阅读一点开始的内容，但很少有人会从头读到尾，而吸引眼球的内容组织方式，是先抛结论，这才是用户想要看的信息，大多数人只需要一个结论。

倒金字塔写作方式

将关键信息放置在阅读的开始部分，从而有效地吸引用户阅读下去，通过开头的一两个短句吸引用户眼球并引导用户阅读更多内容。可以考虑将用户感兴趣的内容，如内容结论放置在前面。

结尾与开头呼应，显示行动号召

结尾一般放置的是背景信息与空洞内容的地方，传统观念认为列表最后一项阅读的人最少，但其实根据相关眼动追踪测试表明，整个列表中最后一项得到的关注也较多。如果我们在结尾处放置一些有趣的内容，或行动号召，则有可能吸引浏览者继续留在网站上，比如一张有趣的品牌图片，或一个引人注目的操作提示。

腾讯云官网首页最后，显示一个行动号召，吸引用户继续停留在网站上。

Part 2. 如何有效设计网页正文

说到网页正文设计，其实就是排版，网页排版设计需要考虑网站上的每一个元素，通过一系列的设计手段去降低用户的阅读负担。

视觉层次

好的视觉层次可以引导用户阅读网页的顺序。在阅读的过程中，用户的视线会落在首行标题、副标题、短的文本块上，原因是它们比周围的文本更加显眼，设计就是要达到这样的效果。视觉层次可以帮助用户理解网页结构，如何阅读能够选出最重要的信息或者帮助用户决定哪里应该停下来阅读更多细节。

以我们所熟知的报纸为例，标题阐述核心，尺寸最大，粗体强调，其次是副标题，字体小点，再其次是正文，字体最小。如果打破了这种层次结构，用户会迷惑，哪些重要哪些其次，分不清楚。

上左图没有视觉层次，用户无法看出哪些是主要信息，对比之下，上右图用大小、加粗、颜色，间距把内容做了区分，形成视觉层级，让用户很容易知道哪里是重点。

留白

编辑：cherlee