F模式

检视用户如何去浏览网页内容的一个关键关键模式，这将有助于指导页面设计，提高用户的交互行为。

网页上的阅读与你在高中和大学里所阅读课本的方式略有不同。如今，当人们在网上发现他们感兴趣的内容时，他们首先会快速浏览。用户已经发展出快速浏览信息的习惯：只关注对他们而言重要的部分。

眼动跟踪研究已经表明在线阅读者浏览信息是在一种形似字母「F」的模式引导下。听起来有点扯？下面将要解释这个理论为什么不是随意的结论，以及为什么它对你们的商业网站有重要影响。

什么是「F模式」？

如果你觉得了解它的运作比较困难，那么你需要了解，它并不是那么显而易见，并且，它也不是我们曾经所了解的阅读，传统的阅读习惯是从上至下。然而，当浏览信息，尤其是网页内容的时候，用户的思维会自动寻找最重要的信息。这就是它的运作方式。

当你的用户来到你的页面顶部，也就是来到「F」字母的头部，阅读你的标题和紧随其后的摘要，他们会继而让焦点回到屏幕左侧，然后关注点从上至下，直到遇到下一个吸引眼球的标题或信息。这里的信息通常属于他们正在搜索的主题范围，并且他们将会花时间阅读这些信息，这就产生了「F」字母的第二条水平线。

一旦这个用户找到足够多的他们所想要的信息，他们将继续在这个页面上浏览，即使其他内容吸引了他们的眼球而停止了阅读进程，但他们还是大部分会继续移步到你网站的其他页面内容。

为什么它很重要？

了解这个网页浏览模式对你的商业运作大有助益。如果你的网页布局和内容并非符合F模式，那么用户也许会浪费更多时间去寻找他们所需。如果他们感觉自己浪费了太多时间，或者轻松获取有价值的信息是不太可能的，那么他们会离开并寻找一个更容易阅读的网站。当你使用F模式开始计划你的网页内容，这就能给到用户他们想要的——即使他们对此过程并不知情。

怎样让它为你服务？

F模式不仅可以鼓励用户继续停留在你的网站，它也可以让他们看到网站还会提供哪些内容。在你的网页设计中使用该布局，就会增加你的网页使用率。

当采用这个方法，你的网站将会感觉更加的灵敏，你会提供用户真正所需的内容。当你懂得这个模式并且指导怎样利用它，你就已经可以控制你想要传递的信息流。这个研究会告诉你用户将会停留在哪里，所以你可以设置内容的优先级。当你应用F模式到你的内容中时，可以考虑下面这些建议：

1）首先是最重要的元素

了解到用户会你的页面顶部开始浏览，在此考虑网站会提供什么产品、服务、或者你将提供什么信息。下一个重要的信息——或者说是你想让他们附带了解的信息——就安排在用户会停留或者仔细阅读的地方稍微往下的位置。

2）创造预期

你的用户也许不知道网站内容所仰赖F模式，但是他们会想要你提供给他们真正所需要的内容。没有这些，他们不得不耗费更多的时间和精力去搜索获取。这种对布局的期待将会让你的用户再次回到网站进行浏览，并且以正常的速度进行阅读。

3）引发与侧边栏的参与度

你的侧边栏可以放任何内容：相关文章，链接到其他社交网页或者广告。在当前的网页当中，侧边栏可以中止用户现有的阅读内容，引导他们考虑更多网站相关的其他业务。

F模式设计元素

F模式不止对你的文本和文章阅读有好处。这是一个可以应用到整个网页设计的方法。眼动跟踪研究表明在用户浏览完页面顶部以后就会继而将眼睛移往左侧。这意味这，你的网页顶部是最重要的。

所以页头应该是要吸引眼球的。这是用户到达你的网页第一眼会看到的。这个区域应该展示出网站的业务，品牌，在此应用你的配色方案。主要的导航栏应该置于顶部下方，清晰展现给用户怎样去往其他页面。

随后，剩下的设计元素放置在页面左侧。加入一些文字和图片来营造阅读的间隙，然而吸引用户回到引人注目的标题或页面顶部。

然而，不要因为这是F模式就忽略页面的底部。即使你已经利用上了两条水平线，你仍然希望为继续阅读下去的用户创建分页。插入图片和副标题可以截断文字的长度，也能让你的网站更具有视觉上的吸引力。

它是怎样影响业务的

你的网站中的这个布局和它所带来体验上的易用性会大大增加用户的便利。你可以对此模式或布局大加利用，因为它已经被证实可以让更多用户来到你的网站，并且他们一旦来到这里就会持续访问。

F模式能确保他们首先可以访问到最重要的信息，而你是可以决定信息重要性的人。一些成功的网站都应用了下面这三项要点，并且被得到成功认可：

1）左上方的LOGO，能让用户的眼球来到页面顶部，提醒用户你的品牌。

2）右上方的电话号码或者联系信息能让你的用户知道如何联系你。

3）应用F模式的网页，会给用户一份成熟的页面向导。

一份工作参考

没有人会比你自己更了解你的客户和精准的用户群。在眼动跟踪研究发现当用户浏览网站时最多人看到的是哪个区域以后，F模式就被发展出来。

利用这个信息作为一个参考去开发你的网站和页面内容。它不需要非常严格的一套模板，而是把它视为一个起点，确保最重要的内容能被注意。

译后记

F模式对于网页设计师来说，或许已经不是什么新鲜的规则。但是奇怪的是，我们常常会不自觉陷入“日用而不知”的情景，F模式看起来简单易懂，但是实际运用起来就会发现有太多可深入的交互细节。

比如按钮到底应该靠左还是居中？导航收起来变成汉堡包的菜单还是作为顶部下方的内容而出现？……每一个交互细节除了考虑用户的眼动规律，还需要兼顾网页传达的目的、页面的视觉效应以及整体的品牌原则。

不应该简单理解是一个元素放在左边就一定优过右边，而是要综合式地考量所有的元素。对于所有“理论”，我们都应有所警觉，如果一个判断过于肯定，一定要想想它的反面加以验证，从而得出自己的理解。

而对F模式很好理解的部分是，我们都有过绘制表格的经验，如果把表格的表头和侧边栏当作重要内容的话，那么制表的思维其实和F模式是可以融会贯通的。表格里的数据其实也等同于网页的内容，只是后者会更丰富一些，可以有文本、图片、视频等等。

我们每个人的阅读总是有所期待的，对于布局的规划一开始就应该从用户的习惯模式开始。尤其是以内容传达为重点的网页。

当然也有非内容传达的网页，比如有些短期使用的活动页面，以炫酷而瞬间吸引用户眼球。但是要作为长期运营的网站来说，光是炫酷是无法达成传达目的的。

而这一切都仰赖一套扎实的已被证实有效的布局原则。F模式，大概就是这些原则当中最老实可靠的一个。

原文链接：http://uxmag.com/articles/the-f-pattern-understanding-how-users-scan-content
译文地址：https://www.ui.cn/detail/476996.html
翻译：飞屋睿