赶紧收藏！连BAT设计师都在使用的视觉动线技巧（下）

最后一篇文章“赶快接受！连BAT设计师都在用的视觉动线技巧(上)都和大家分享了视觉动线和 Z 我不知道你是否还记得类型布局的详细解释？我们的互联网用户希望有效地阅读页面，这意味着人们经常跳跃阅读页面，从而形成阅读模式 Z、F 对角线这些模式，所以今天和大家分享另一个更经典的模式 F 模式。

一、F模式的起源

2006年，尼尔森诺曼发表了一篇关于人们如何扫描和阅读网站习惯的文章。通过研究，他们发现用户往往是一个 F 查看网站的模式。

这项研究是由2000多名用户完成的。研究发现，几乎每个人都采用相同的浏览顺序。首先，从顶部开始，阅读路线，重复这个动作几次。几行之后，他们开始阅读界面中的一些副本。试着想象这种浏览形式，你会发现它是一个 F 模式。

二、F模式的原理

移动屏幕要小得多，每个产品的内容和形式都不同，但用户做同样的事情，所以我们需要考虑如何使用用户的习惯来构建设计结构。

上图显示了一个网站的热图，以及用户的浏览视线，我们不难发现：

首先，当用户阅读文章或网站时，他们首先水平移动，通常在顶部区域，这条动线构成 F 顶部的水平。

其次，他们扫描屏幕左侧的垂直线，在文章中找到感兴趣的点。当他们发现一些感兴趣的内容时，他们会在水平移动的过程中第二次阅读，然后随着路径越来越长，阅读区域越来越短，这就形成了 F 以下部分。

最后，用户用垂直移动扫描完成整个页面的阅读。

△ 当然 F 用户扫描模式并不总是由三个部分组成。当用户找到他感兴趣的内容时，他们会恢复正常阅读，形成水平阅读。

第三，看看别人是怎么用的

F 该模型可以帮助我们创建一个良好的视觉层次结构设计，因为这是一个布局，人们可以很容易地扫描和设计，它可以让大多数用户感到舒适，因为我们的用户从上到下，从左到右阅读。

△ 在很多移动设计中也是如此。上图是 JTBC NOW 一个韩国 app，界面中可以发现，用户习惯于从左上角开始，扫描水平，然后下降到下一行，从左到右阅读，直到找到感兴趣的内容并点击，否则直接减少阅读。

△ F 模式是新闻类 app 以及电子商务等文本和内容密集的产品的首选布局。如果您有大量的内容，特别是大量的文本，用户将能够根据这种自然的扫描模式设计和布局来更好地完成任务。

△ 在美国等一些大型网站上， CNN 官网是典型的 F 布局形式，让用户浏览设计师设计的整个框架内容。

△ F 模型的一个重要原则是把最好的内容放在顶部，因为这是用户最快注意到的内容，这就是为什么我们的许多产品导航放在顶部，搜索放在顶部，一些重要的功能模块放在顶部，一些公司 LOGO 放到顶部。

如图所示，位置为1的公司品牌 logo，在第二点，这里会有一些帮助，然后在上排，当用户下降到3位，然后浏览4，重复过程，理论上，用户将继续沿着页面，直到找到感兴趣的内容，但实际上用户可能会在几秒钟内离开，如果你的内容不够有吸引力，那么如何避免这种情况呢？

△ 出于这个原因，我们建议当用户浏览一个屏幕时，我们需要打破传统元素和单调，通过视觉刺激引导他重新找到感兴趣的点。如图所示，用户扫描第一个屏幕后，将另一个不同的布局放在页面中间，让用户有一个短暂的停留视觉。

四、如何使用F布局

F 从字母的角度来看，布局使设计师能够更好地控制用户看到的内容，F 布局的原则是当用户看到大量的内容时，特别是文本密集的页面。他们会沿着网站左侧的主线，从左到右，从上到下，减少阅读信息，所以我们需要在设计之前思考。

1. 确定内容优先级

在设计之前，我们必须确定什么是最重要的，什么是最不重要的，并做好优先级排名。只有当我们清楚地知道你想让用户看到什么时，我们才能把它们放在用户的视线热点上，所以我们必须在设计的早期阶段找到优先级。

2. 避免视觉疲劳

△ 正如前面提到的，我们只需要弄清楚内容的优先级，把重要的内容放在上面 F 在布局上，我们还需要通过排版来突出内容的重要性。我们可以使用颜色和亮点按钮来增加重要信息的视觉重量。此时，我们的设计师需要创建视觉水平，使用户更容易浏览设计，以控制我们的眼睛从重要信息到重要信息，而不是漫无目的地浏览。

△ 上图以大标题加色块的形式加强内容引导，吸引用户关注。

3. 设计扫描，而不是阅读

ielson Norman 雅各布·尼尔森在访问用户后得出结论：

用户很少阅读文本中的每个单词；第一个屏幕信息是页面中最重要的链接，我们必须把钩子放在那里；最简单、粗糙和直接的标题通常可以吸引用户。

如何理解这句话？用户在网站或网站上 app 停留时间很短，我们必须在最重要的位置，通过内容吸引用户，内容永远是王道，F 布局的存在是为了帮助用户更深层次地理解内容，但是 F 模型不是指南，也不是模板。

△ 内容一定要有吸引力，Youtube 今天最流行的新闻将被列入页面列表，同时在 F 把今天世界杯决赛的新闻内容放在视线上，吸引用户浏览。

总结

不管以前分享过 Z 类型布局，或者今天分享的 F 类型布局遵循用户浏览习惯，使其更自然、更高效。无论设计趋势如何变化，这些布局原则都永远不会过时。在理解这些布局的前提下，我们通过组织和使用视觉元素来指导我们的视觉焦点，吸引用户关注我们想要传达的内容是核心本质。

欢迎关注作者微信微信官方账号:我们的设计日记，每周分享最新的设计趋势和经验，科学的设计方法。

图片素材作者：Julian Ybarra

「让作品有节奏的设计案例」

“如何掌握设计的节奏？让我们来看看这个全面的总结！”想成为一名高级视觉设计师吗？首先学习如何引导读者的视线！”想要提高工作的层次感吗？首先学习这12个字体应用技能！”