F型阅读模式

本文将带你理解F型布局的基本原则，它是怎样运作的，以及怎样创建你自己F型布局。

什么是F型布局，它如何运作？

当人们面对大块大块的文字时，F型是最常见的浏览模式，F代表“fast”。这正是用户阅读内容的方法。几秒里，他们眼神以神奇的速度横跨网页。

这种模式因为NNGroup的视线路径研究而被普及，在这项研究里记录了200多为用户浏览成千上万网页时的主要阅读行为，同时，这些阅读行为在不同的站点和任务上都保持了一致性。这种阅读模式有点像F，由以下三部分组成：

a.用户的视线首先是水平移动，通常是浏览内容区域的顶部。这构成了F上面那一横。

b.接下来，用户的视线会沿着屏幕左侧的垂直线从上到下移动，从而找到段落里他们感兴趣的点。如果他们发现了感兴趣的句子，视线就会形成第二条水平线。但是通常这条线会比之前的水平线短些。这构成了F下面那条短一点儿的横线。

c.最后，用户的视线继续沿着屏幕左侧屏幕的垂直线向下移动。

人的眼睛通常会在左上角开始，沿水平线移动，然后乡下移动到另一条水平线，在没有感兴趣的内容时，会保持沿垂直线移动。

NNGroup做的眼动研究解释了典型用户浏览大段文字时的阅读轨迹看起来像是字母F或E。图中红色区域代表用户集中阅读，黄色代表注意力没那么集中，蓝色区域代表一扫而过，灰色区域代表根本没注意到。

显然，用户浏览模式并不总是由这三部分组成。当用户找到他们感兴趣的内容时，他们自然而然的就会横向阅读。

为什么我们要使用F型阅读模式？

F型模式会使你的设计具有良好的视觉层次，这种设计会带给用户良好的阅读体验。F型布局对于大部分西方读者是很舒适的，因为他们的阅读习惯是从上到下从左到右的。

我们什么时候使用它？

F型模式通常用在文本较多的网页，比如博客活着新闻站点。如果有大量的内容尤其是文字内容，自然的浏览模型会使用户具有良好的体验。

如何使用F模型？

F型布局实际上让设计师能够把控用户的视线。

划分内容的优先级

在组织页面重的元素前，首先要划分出来哪些是最重要的哪些是最不重要的。一旦你知道哪些是你想让用户看到的，你就应该放在阅读模型的热点上，从而保证正确的交互。

最前面的两段内容是最重要的。将最重要的内容放置在页面的顶部，尽可能快速地表达整个站点的主旨。用户通常横向阅读页眉，所以这个地方最好放导航条。

为浏览设计而不是阅读

在F型阅读模式中要时刻记住用户的主要行为是浏览，所以把用户感兴趣的内容放在浏览路径上。

a.以具有诱惑力的关键词起始段落

b.用户第一眼看到的是主要元素。页面的主要元素或者区域最好具有较重的视觉重量。可以通过使用不同的字体样式暗示文本的重要性（比如高亮文本中的关键词），或者某些高亮色的按钮。

每段只表述一个观点，尽量使用点句。

c.将重要的内容（比如CTA）放在左右边上，用户开始或者停止横向视线的地方。这些点会存在视线向下移动时的短暂的停留，这些短暂的停留构成了用户的思考时间。

使用侧边

侧边栏的存在是指引用户到更高的层级，使用侧边栏驱动用户参与。

a.明确你希望用户看到的内容，但不适合有机的与基础内容相结合。可能是广告，或者一系列文章列表，或者社交媒体组件等等。

b.把它当作工具指引用户发现指定内容。最常见的例子是分类列表、标签云，或则最热的组件等等。

避免单一的布局

F模式布局最大的问题是它倾向于单一布局。同一行重复和相似的内容，会让用户觉得无聊。如果用户开始厌恶界面你肯定不会从中获益的，所以增加些令人惊讶元素保持用户的注意力。

如果你的内容文字纵向很长，当用户滚过第一屏后就很容易感觉无聊和空洞，这时打破布局期望的技术是非常有用的。

结论：

F型布局很贴合人眼的路径，利用这个原理可以优化你的布局结构。但不是说你一定要严格遵从这个规则，这是指个指导意见而不是模版。

---

原文链接