虽然网页布局不断变化，但布局通常遵循几个常见规则。在众多布局方法中，F风格的布局是更实用和广泛适用的布局方法之一。今天的文章将与您探讨在网页中使用F风格的布局。

F风格布局的设计基于以下事实：当用户扫描内容时，运动轨迹类似于字母F，并且匹配这种读取模式的布局允许用户更快地（快速）获得信息，因此名称F型布局。 。

　F式布局从何而来?

F风格的布局源于NNGroup的一个引人注目的研究项目。他们跟踪了200多名浏览各种网页的用户的眼球运动，并发现当用户的眼球快速浏览网页时，尤其是在快速浏览文本内容时。眼球的运动类似于字母F，整个运动遵循以下三个部分：

·用户将首先在水平方向上浏览，并优先浏览内容块的上部。此时，眼球运动构成了字母F的顶部。

·那么视线将垂直向下平移在屏幕的左侧，寻找会引起兴趣的段落中的内容。当他们找到他们感兴趣的内容时，他们继续水平浏览，并且通常对应于内容的视线It将小于第一水平视图，并且该视线构成字母F之间的交叉。 。

·接下来，用户将视线移动到屏幕的左侧并继续向下浏览。

我们浏览内容的方式是训练从左上角水平开始，向左移动以向下看以找到感兴趣的点，并继续水平浏览。

NNGroup的眼动追踪研究证明了这一点。红色部分是用户感兴趣的区域，黄色区域是第二个，不感兴趣的区域是蓝色区域。灰色区域是用户直接忽略不停的部分。

显然，用户的浏览过程并非全部分为三个部分，而是使用其模型。

　为何要使用F式布局?

F风格的布局允许您创建更加分层的设计，使用户更容易浏览和获取信息。对于世界上大多数国家和地区而言，F风格的布局非常适合阅读习惯。此规则使其可广泛用于UI和Web设计。

　什么时候使用F式布局?

具有大量文本的新闻和博客等代购源码网站适用于F风格的布局，主要适用于文本阅读。

CNN正在使用F风格的布局

　如何运用F式布局?

F风格的布局使设计人员能够更好地控制内容的可见性。

　　1、确定内容的优先级

如果您对页面内容有很好的理解，可以结合用户的浏览习惯，在用户的视线中安排重要内容。让这些呈现重要内容的“热点”带来核心互动。

　2、设置初始预期

文本的前几段非常重要。尝试将最核心和最重要的内容放在页面顶部，这就是标题，引号和导航栏非常重要的原因。

用户可以在几秒钟内快速阅读内容。

　3、为速读而设计

用户通常不会一次读取一个单词，但是使用该组来获取内容，因此您需要在F样式布局中排列可能包含用户内容的感兴趣的组，以便它们可以像可能。含量：

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

·用户将优先考虑优先级最高的元素（即视觉权重最大的区域）。因此，在基于文本的代购源码网站中，您应该突出显示文本本身的重要性（例如关键字），并使用颜色匹配等元素来增强元素的存在，例如涉及关键交互的按钮。

·每个段落陈述一件事，并尽可能做出有针对性的陈述。

·将最重要的元素（如CTA按钮等）放在左侧或右侧，这是用户阅读的开始。此时，用户通常会暂停阅读，这一刻他们可以有更多时间考虑并选择下一次互动。

　4、善用侧边栏

侧边栏通常可以帮助用户深入到下一级别，并且用户交互更深入：

·提供用户想要看到的内容，而不是广告，相关文章和小部件。

·将其设计为用户查找特定内容的工具。最常见的设计是目录列表，标签云和“最大点击”。文章列表。

5、避免无聊的布局

F风格布局的最大问题在于它使整个页面看起来很无聊。类似且重复的内容出现在整个页面的不同位置，并且用户可能很快厌倦了类似的布局。因此，您需要创建一些能够打破枷锁的元素，让用户不断调整注意力并继续阅读。

　结语

当然，F风格的布局遵循人类浏览信息的趋势和习惯。它可以帮助您优化布局和结构。你不必使用它。有趣的设计与良好的可读性同样重要，有时候处理这​​两者并不困难。

« Rhinoceros cloud·Net赢得战车：SEO优化与AI技术祝福的影响是什么？ | 在文章的开头，掌握这四项技能。读者希望看到没有困难 »