F型浏览受网站设计等因素影响
文章来源于 aliued，感谢作者 情非得已 给我们带来经精彩的文章！在《眼球轨迹的研究》报告中提出，大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。
研究者用了几种不同的页面做眼动仪测试，得到了3张热度图，用颜色来表示浏览者眼光聚集的热度，分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。其中图3搜索结果页因SERP中网站标题、网页摘要较宽，第二条线会随之加长，但仍然是F形状。
讨论: http://www.missyuan.com/viewthread.php?tid=419125
图1：F型浏览
研究人员这样诠释F型浏览：
第一步：水平移动
浏览者首先在网页最上部形成一个水平浏览轨迹。
第二步：目光下移，短范围水平移动
浏览者会将目光向下移，扫描比上一步短的区域。
第三步：垂直浏览
浏览者完成上两步后，会将目光沿网页左侧垂直扫描;这一步的浏览速度较慢，也较有系统性、条理性。
F型浏览背后的问题
F型浏览模式这个理论已经推出很久了，我在很多网站和BLOG上也看到过这样的分享。我在思考几个问题：
1. 出现F型浏览模式的原因是什么?它的背后是什么样的用户需求?
2. F型浏览会受到网站内容、用户需求影响而发生改变吗?会出现别的形状吗?
3. F型浏览模式能够给我们什么启示?如何指导我们进行SERP的设计?
带着这些问题，我进行了一些资料的发掘和尝试，进而有了更多的疑问。
什么造成了F型浏览？
Jakob Nielsen花费的苦心用三种不同的网页进行测试，目的是为了告诉我们，F型浏览在不同的网站上都是通用的，用户的F型浏览行为并不会受到网站内容和设计出现太大的不同。
但是他并未进一步分析出现F型浏览的原因，结果让很多人误认为这真的是一种“不由自主”的行为。
也正因为如此，F型浏览也很容易被看出很多漏洞来。比如：
为什么不是E而是F?因为我们看到很多眼动仪测试的图片F下面并未一只有一个水平浏览线，而是多个。
为什么下面的一个水平浏览线要短于上面的一条，而实际上我们看到的很多眼动仪图片却是下面的水平浏览线要长于上面的一个?
而进一步的研究也发现，当考虑到网页丰富的内容元素，比如图片时，F型浏览很容易就被打破。如图，你能看到一个典型的F吗?
图2：图片因素对F型浏览的影响
那么，研究人员又来补充F型浏览了，他们说，当有了图片元素影响后，用户的浏览行为发生了改变，不再呈现F型浏览，而是出现了一个E字：
我想，再这么推下去，还是避免不了漏洞百出，E出来了，F出来了，将来还会有L，I,C，Z……
还是早早透过现象去分析本质，让我们早点接触F型浏览背后的原因更好。
F型浏览背后的研究以及眼动仪确实能够帮助我们发现一些问题，但是F型浏览的理论在很多场合下显得不是很靠谱。不要被F型浏览忽悠，主要是要警惕那些片面理解F型浏览的拿来主义者。
我认为，F型或者是E型浏览方式，绝对不是无意识的“不由自主”的行为，而是网站内容、设计，用户需求和用户习惯多重因素作用下的结果。
用户的习惯：从左向右，从上到下，这也是传统阅读习惯在网络上的延伸。
互联网用户的阅读习惯：有些像我们阅读黄页或者产品目录的方式：快速扫描的方式，捕捉关键点，读短句子，忽视长篇大论——这些是可以有定论的。
用户的需求：这种习惯是如何养成的?我想是因为互联网用户心中有个需求：寻找某个东西。这个东西可能是具体的，比如搜索某个产品。也可能是模糊的，比如浏览新闻网站，我们是想扫描一下看看有没有“激发兴趣”的关键词。当发现这些“关键词”后，我们会阅读更多的辅助信息以帮助决断：这究竟是不是我要找的东西，当发现是的时候，会产生到详情页面的点击，当然发现不是的话，就会继续向下阅读，继续又一次循环。
用户的耐心是有限度的，所以随着扫描的进行，页面长度的拉伸，他们若找不到太多兴趣点，兴趣自然会逐渐消减，因此就可能形成了所谓的F型或者金三角热区。
用户在浏览的时候，大脑里出现了三个词语：也许是，是，否。
当词语是“也许是”的时候，用户水平浏览以获取更多信息，当答案是否时，用户放弃水平浏览，下移阅读下一段或者下一个搜索条目。当答案是是时，一般会产生一个点击。如图所示:
情非得已
-
21个Sketch实用高频小技巧2019-02-15
-
25款值得收藏的优秀网站模板免费下载2015-09-16
-
20套高质量的免费网页模版PSD素材2013-09-02
-
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
-
CSS实例教程：十步学会用CSS建站2011-10-05
-
网页设计师：浅淡网页BANNER设计2010-09-27
-
网页细节教程：WEB设计精确点滴2010-09-13
-
网页设计中的点滴细节把握2010-09-01
-
总结交互组件创新的四种方式2010-06-28
-
最全的国外电子商务CSS模板下载2010-06-18
-
5个网站设计实例解析网页设计趋势
相关文章4452018-11-29
-
5个作品集网站设计中常见的问题
相关文章3742018-05-10
-
详解个性化网站设计的优点和缺点
相关文章3702018-01-10
-
9个设计技巧帮助您把网站设计的更专业
相关文章2602017-11-17
-
聊聊Web网站设计和移动App的六大差异
相关文章2932016-02-20
-
详细解析循环视频在网站设计中的应用
相关文章2672015-12-13
-
色彩心理学对用户究竟有哪些影响
相关文章2902015-10-02
-
浅谈理解色彩心理学对网页设计的影响
相关文章4662015-08-25
