虽然网页的布局方式是可变的，但布局通常遵循几种常见的规则。在众多布局方法中，F-type布局是一种实用性强、应用范围广的布局方法。今天的文章讨论了f-layout在网页中的应用。

F式布局的设计基础是用户扫视内容的时候，实现的运动轨迹和字母F相似，而布局匹配这种这种阅读方式可以让用户更快(Fast)地获取信息，因此得名为F式布局。

F式布局从何而来?

F型布局源自NNG的眼动研究项目。他们追踪了200多名用户在浏览各种网页时的眼球运动轨迹。他们发现，在快速浏览网页时，尤其是在快速浏览文本内容时，用户的眼动轨迹与字母F相似，整个移动过程遵循以下三个部分：

·用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成了字母F 最上面一横。

·接下来视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当他们发现引起他们兴趣的内容之时，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些，而这个视线轨迹则构成了字母F 中间的一横。

&米德多；接下来，用户将眼睛移到屏幕左侧，继续向下浏览。

我们浏览内容的方式经过训练，可以从左上角水平浏览，返回左侧，向下扫描以找到感兴趣的点，然后继续水平浏览。

NNGrou的眼动跟踪研究证明了这一点，红色的部分是用户感兴趣的区域，黄色的区域次之，不感兴趣的则为蓝色的区域，灰色的区域是用户直接忽略不作停留的部分。

显然，用户的浏览过程并不全是分为三个部分，但是它的模式是沿用下来的。

为何要使用F式布局?

F-layout允许您创建更分层的设计，这使得用户更容易浏览和获取信息。对于世界上绝大多数国家和地区来说，f-layout非常符合阅读习惯。这一规则使其广泛应用于用户界面和网页设计中。

什么时候使用F式布局?

新闻、博客等文本内容较多的网站适合F风格布局，主要适合文本阅读。

CNN 就是使用F式布局的

如何运用F式布局?

F式布局让设计师能够更好控制内容的可见性。

1、确定内容的优先级

如果你对于页面中内容的轻重缓急有着足够的了解，那么就可以结合用户的浏览习惯，将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。

2.设定最初的预期

文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端，这也是为什么标题、引言和导航栏是如此的重要的原因。

用户能够在几秒钟之内快速读取内容。

3.专为快速阅读而设计

用户通常不会一个字一个词地阅读文章，而是通过意群来获取内容，所以，你需要将可能包含用户感兴趣内容的意群按照F式布局来排布，这样可以尽可能高效地呈现内容：

·段落以新鲜有趣、关键核心的词汇开头。

·用户会优先查看优先级最高的元素(也就是视觉重量最重的区域)。因此，在文本为主的网站中，你应该突出文本本身的重要性(比如关键词)，并且借助配色等元素，强化按钮等涉及关键交互的元素的存在感。

·每个段落陈述一件事情，并尽量有针对性地陈述。

·将最重要的元素(诸如CTA按钮等)置于最左侧或者最右侧，也就是用户阅读的起始部分。这个时候，用户通常会有阅读的停顿，而这个时刻可以让他们有额外的时间来考虑并且选择下一步的交互。

4、善用侧边栏

侧边栏通常可以帮助用户进入下一个层次，用户交互也更深入：

·提供用户想要看到的内容，而不是广告、相关文章和小控件这样的东西。

&米德多；将其设计为用户查找特定内容的工具。最常见的设计是目录列表、标记云和&ldquo；点击&rdquo；文章列表。

5、避免无聊的布局

F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重复的内容出现在整个页面的不同位置，用户很可能在相似的布局中快速感到疲倦。所以，你需要创造一些和打破尴尬格局的元素，让用户不断调整注意力，持续的阅读。

结语

当然，f-layout遵循人类浏览信息的趋势和习惯。它可以帮助你优化布局和结构。你不必那样使用它。有趣的设计和良好的可读性同样重要，有时要平衡两者并不困难。