你知道用户刷网页的「F 型扫视」习惯吗？

今天这篇文章，首要介绍「F 型环视」。读完后，你会理解咱们究竟怎样阅览网页，也知道网页应该怎样规划，才干带来更好的体会。

什么是「F 型环视」？

「F 型环视」是界面阅览最常见的一种环视形式，在有许多内容板块的界面上十分有用。「F」也能够被理解为「Fast」。大多数人阅览界面内容时，都采用了「F 型环视」形式——只需要几秒，就能够快速将页面扫完。

「F 型环视」最早是由尼尔森诺曼集团（NNGroup）经过眼球追踪试验提出的，该项试验记录了 200 多名用户阅览上千个网页的数据。试验成果发现，用户的阅览习气适当共同，即便是在不同站点和不同阅览使命的前提下。试验目标的阅览轨道看似像字母「F」，并包括以下 3 个部分：

人们首先会横向阅览，一般环视规模仅停留在页面顶端部分。这一轨道构成了字母「F」的第一横。紧接着，咱们会顺着页面左端纵向阅览。咱们的阅览要点仅停留在段首其感兴趣的部分。发现感兴趣的内容后，咱们会再次横向阅览，不过这次横向阅览的规模一般较第一次小。这一轨道构成了字母「F」的第二横。最终，咱们会再次顺着页面左端纵向阅览。

在下面这张图，赤色区域是人们的中心阅览要点，黄色区域是次阅览要点，紧接着是相对重视较少的蓝色区域，而灰色区域根本不受用户重视。能够看出，咱们阅览网页根本构成了 F 型。

经过热度图，尼尔森诺曼集团提醒了眼球追踪试验是怎样发现用户阅览轨道的（本处用户特指阅览习气为从左至右的用户）。

很明显，咱们的环视形式并不只包括 3 个部分。当咱们发现其感兴趣的内容后，就会要点阅览该部分，然后构成相应的横向阅览轨道。

为什么用「F 型环视」

经过「F 型环视」形式，更简略表现出杰出的视觉层次，然后便使用户了解界面内容。对大多数西方用户来讲，「F 型环视」形式是十分舒适的，因为他们的阅览习气一直以来都是从上到下、从左至右的。

注：作者之所以提及西方用户的阅览习气，是因为有些（东方）国家或区域用户的书写和阅览习气是从右至左的。在有些国家和文明中，书写习气乃至以竖写为主，相应阅览习气也稍显不同。因为中文的书写和阅览习气并不特别，所以本文所讲的「F 型环视」仍能够适用。

什么时候用「F 型环视」最舒服？

针对有很多文本的网站，比方博客或新闻站点，「F 型环视」形式是再好不过的挑选。

在内容过多（特别是文本过多）的情况下，若页面布局是依据天然环视形式（即「F 型环视」）来规划的，用户反应会更好。

CNN 主页也运用了「F 型环视」形式

网页应该怎样用「F 型环视」？

凭借「F 型环视」形式，规划师在页面内容选题方面有更多的「话事权」。

1. 按重要性对内容排序

在规划规划页面元素时，必定要按重要性对各项内容进行排序。经过排序，你能够清楚地知道你最想让用户阅览的内容。这样一来，你只需要将这些内容放在页面的「抢手」区域即可。

2. 设置预订期望

整个页面最开端的一两段是十分重要的。尽或许将重要内容放置在页面顶端，然后能够在短时刻内让人们知道网站（或页面）是用来做什么的。

依据「F 型环视」形式，咱们一般会横向阅览页面顶端。因而，在顶端区域规划一个导航栏是个不错的挑选。

用户环视页面最重要的内容只需要几秒钟。图片来历：tutsplus

3. 规划要便利扫读，而不是阅览

规划页面布局时，要从用户视点动身。顺着「F 型环视」的阅览轨道，将人们最感兴趣的内容按重要性放置于相应区域：

段首用词必定要满足招引用户眼球。用户首先会阅览最杰出的内容（即最具视觉分量的内容）。因而，必定要凸显重要内容的视觉分量。能够经过字体排版来表现文本的重要性，比方高亮文本关键词；也能够经过各种色彩突显某些按钮。每个阶段只掩盖一个观念，并尽或许多地运用项目符号（即本条左面的小黑圆点）。将最重要的内容（比方行为呼唤相关的内容）放置在页面左右两头，这也是用户横向环视的开始两头。当他们持续往下环视至下一横向内容时，刚好有几秒时刻，能够让他们稍作考虑。4. 好好使用东西栏

东西栏能够让人们进一步参加交互，好好使用东西栏，能够进一步进步用户参加度。

让期望用户点击的任何元素显得更有特征，虽然它或许和页面首要内容「截然不同」，比方广告，相关文章列表，交际媒体小组件等等。把它界说为用户寻觅特定内容（比方目录列表，标签群，抢手文章小组件等等）的东西。

Medium 在东西栏中参加了二级导航

5. 防止视觉疲惫

「F 型环视」形式最大的缺陷，是或许存在的视觉疲惫。要让用户觉得无聊，其实并不难，比方在页面参加重复和相似的内容。假如用户真觉得无聊了，那你也不会得到什么优点。所以，无妨试试在人们环视规模内参加「出其不意」的元素，然后坚持用户的参加度。

这个「打破预期」的页面布局技巧，在有长篇幅内容的页面上特别适用。试想，假如人们阅览相似页面时，尽是烦闷或无聊的内容，那他们很快就会「想吐」……

下图页面的上半部分，页面的使命宣言（即图中 This is a headline … 该句）置于页面顶端，能够在短时刻内向用户传达该页面的功用。

此外，将页面拆分为左右两栏——左栏为首要信息，右栏为辅佐信息（东西栏），能够进一步坚持用户的参加度。

图片来历：tutsplus

整个界面布局规划简略，但中心元素都表现了出来。人们翻开页面，能够明晰了解页面首要功用，东西栏中也有目录列表导航，用户也能够直观地看到相关内容。

经过页面左端方形卡片和有目共睹的标题，能够招引用户重视。虽然用户或许对这些内容不感兴趣，但至少发现风趣内容的时机是存在的。

顺着字母「F」的第二横，再参加一些「出其不意」的元素，比方图片或行为呼唤相关的内容，然后进一步坚持用户的参加度。

结束语

「F 型环视」形式是人眼阅览的天然轨道。规划页面时，结合该形式能够进一步优化页面规划。但值得注意的是，最好不要呆板地运用这个形式，究竟它只能算作规划的辅导准则，而非规划模板。它是死的，而人是活的。

谢谢！

译者：Jorri

作者：Nick Babich，软件工程师，重视 UX 和 UI。

来历：http://www.ifanr.com/app/814890

原文地址： F-Shaped Pattern for Reading Content

本文来历于人人都是产品司理协作媒体@爱范儿，作者@Nick Babich

上一年今天运营文章2023:在B站一年内涨粉百万、流量狂飙3倍，三步营销跻身“必玩游戏”队伍(0)2023:怎样在电脑上检查手机备忘录文件(0)2023:手机备忘录引荐 手机备忘录app哪个好用(0)2023:主播收入增加447%，近期视频号变现动作不断，创作者的时机在哪？(0)2023:从2022年B站爆款商单数据中，咱们能分分出什么？(0)