F型视觉模型，你真正了解多少？

大家好，我是胖小魚。

本文首发于微信公众号：胖小魚设计小栈，欢迎关注

小伙伴们大家好🌞

最近在上公开课中听到大神总讲到F模型，可能一些童鞋跟我一样不是太熟悉，于是我便上网搜索了一番，也结合原文翻译，将这个模型的来龙去脉做了一个梳理，加强我们更深层的理解，也希望对不了解的童鞋有帮助。

本文共1505字，需要阅读时间约4分钟~

一、F型视觉模型是什么

F型视觉模型是尼尔森于2006年通过报告形式提出的，2017年该团队在网站又更新了此模型的相关实验结果。

一听名字可能有的童鞋会觉得很高深莫测，实质上非常容易理解，是指用户第一次浏览页面的时候，视线通常会以字母F的形状观看页面内容，尤其是大面积文章的时候，如下图：

用户的关注点着重放在左边，阅读前几行时视线会形成F的第一条横，阅读第二部分视线会缩短，就形成第二条横，最后，用户会以垂直的视线浏览后面的内容，形成F左侧的竖（如图中，并非完美的F，而是整体呈F型）。

二、为什么会呈现F型

根本原因是人们的“懒”导致。Kara Pernice（尼尔森·诺曼集团的高级副总裁）在《文本扫描模式：眼动证据》中提到：在网络中，人们并不会阅读每个单词，常用习惯方式是：扫描。

尤其是文章没有主次标题或者没有吸引力的信息引导时，用户会遵循自己最省力的路径来浏览内容；他们访问网页仅仅只是找到想要的答案，而并不是研究内容，所以轻扫自然而然便取代了逐字阅读，前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的F型。

三、F型模式带来的弊端，设计师如何解决？

这种习惯性模式会导致用户只关注左侧偏上方内容，许多重要的内容都会被忽视掉。

怎么解决？这就需要发挥设计师的作用，设计合理有效的样式引导用户去阅读。

1、使用主次标题，与内容做区分：

这一点与层状蛋糕(Kara Pernice提出)的观点一致，排列结构类似于千层蛋糕，一层二层三层…  据Kara Pernice研究表明，这种模式是目前扫描网页最有效的方式，用户更容易找到他们想要找的信息。

下图是夹层蛋糕模式下的眼动实验结果：

从9位研究参与者那里获得的分层蛋糕眼动图表明，小标题（和按钮）更能引起参与者的注意。

例如新闻知识类App列表页，其结构是标题+图片的瀑布流展示，主标题简要概括，字号加粗加大，用户通过扫描标题来发现感兴趣的内容，进而再去阅读相关正文。

2、页面最重要的信息要放在前面：

我认为，这一点不仅针对的是文章内容，也针对功能布局，重要的功能尽量放在整个页面上方，最次要的内容放在最下方。

3、相关内容进行分组：

就是格式塔接近原则，把功能相关的内容整合在一个模块，整体页面模块化，模块与模块之间有一定的间距，这样可以有效减少用户界面上的视觉凌乱感。如下图：

4、使用标签或者颜色区分：

例如下面的页面

5、同级信息流使用列表符号或者数字序号来展示：

如下方设计的对比

6、简明扼要：删除不必要的信息： 

总结：F型视觉模型本质上就是由于页面没有有效引导而引发，所以如果要提高用户的视觉体验，就需要我们通过优化样式去突出重点，有效引导用户去浏览哪些内容。

其实通过梳理，我们可以发现很多理论本质上都是贯连的，如F型其解决方法就是尼尔森十大交互原则中“易取和简约原则”的具体延伸，其中也贯连着格式塔原则，都是换汤不换药，最主要是看我们如何在实际工作中，知其源头，学以致用，让我们的设计有理有据！

好啦，今天分享到这里

谢谢阅读，我们共同进步~ 笔芯~

觉得有用的话就转发给更多有需要的人吧~ ，公众号【胖小魚设计小栈】，欢迎大家关注。

参考文献：

https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/