F型阅览模型是内容网站的首选布局模型，比方新闻网站、博客或着陆页。当咱们解说完它的作用和原因时，你就会开端留意到，很多闻名网站都在这样做。
什么是F模型？
F型是用户阅览内容版块时最常用的扫描阅览形式。
它是指，读者会首要从左往右以水平线方向阅览，这种阅览习气是很简略了解的，然后，用户会从屏幕最左面笔直往下阅览，从段首句或小标题中寻求自己感兴趣的要害词或内容。找到后，他们又会开端从左到右正常阅览，构成（“F”的第二条）水平线。终究就构成了一个字母 F 或 E的形状。
如《2014 Web UI形式》中所述，CNN和纽约时报都运用了F型。
尼尔森·诺曼集团的 Jakob Nielson 曾做过一项依据 232 名用户阅览上千个网站的可读性研讨，并具体论述了 F 模型的实际意义：
用户很少会阅览文本中的每一个字（实际上，均匀只要20％的人会悉数阅览）前两个章节最重要，是保证留存的要害一段话只表达一个观念敞开新阶段或新章节时，运用招引眼球的要害词
这将怎么影响你的网站的界面规划？且往下看。
怎么运用F型
下图来自 Brandon Jones 的课题研讨，F型可视化的姿态。
显着，你要把最优质、最能招引人的内容放在最上方，而左上角（见图中点 1）就像一个全体锚点，必定会被关注到。这也是为什么许多公司的 Logo 会放在这儿。
一般来说，规划师会把导航条放在顶部，从左上角（见图中点 1）到右上角（见图中点 2），便运用户点击及查找要害词，规划师们对导航条的规划也各有不同：轻细的导航条会让用户进一步阅览下方的其他内容，厚重的导航则会让用户更多的关注到导航条自身，而不是下方的内容。
榜首行之后，用户就会来到下一个要害节点（见图中点 3）并做相同的动作（到图中点 4）。理论上，用户会持续往下阅览，直到他们找到感兴趣的内容。但实际状况是，他们很或许在几秒后就走人了，除非你能持续招引住他们。
因而，为了打破页面的单调，专家们主张规划师在第二行或第三行（即“F”的第二横或“E的第三横）之后，凭借一些“突兀的”元从来“损坏”全体布局的连续性。运用一些规划上的改变来坚持视觉影响。常用的做法是，在每过1000像素的版块后方就来一些不一样的布局规划。
比方下面的比方：
值得留意的是，由于每行结束（如图中2和4等右侧的点）会呈现阅览中止，所以这种当地一般用来放置广告。这也是为什么你总能在某一行结束处看到“电子书新鲜出炉啦”之类的广告。
这种广告就很好地应用在F模型上，由于它们的方位清楚明了，却又不会涣散用户在首要内容上的留意力。内容永远是最重要的，只要当你要将用户带到更深的一个层级时，才应该安置侧边栏。
在F型下，右侧边栏的首要作用有二：
放置有相关但无直接关系的内容——任何你想展现给用户，却与主内容无关紧要的，比方广告、其他文章链接、交际媒体控件等。作为一个查找东西——能够显着地安置一个查找栏，或许分类列表、标签云、“抢手文章”控件等。
上面的内容或许短时刻难消化，所以，下面会举一些比方：
纽约客向咱们展现了F型的广告布局在网站中是很适用的。顶部David Yurman的广告很显眼，但好在主内容中运用了一张赤色相片，广告并不会喧宾夺主。如前面所说，这个广告还放在了第二行结束处，在换行阅览中止时就能看到。
F型相同适用于文字不多的网站。
iZettle 在其主页运用了非常规的F型。实际上，它选用了一种F和Z的混合模型布局（后边将说到）。
经过参加一句主案牍（“Grow your business with iZettle”），并在大布景图上增加一个按钮来防止模板化。咱们以为，在布局规划时能够参阅这个事例，他们最低极限地选用了F型。当然，还有许多视觉上更为诱人的事例能够参阅，但这个也是不错的。
这个模型为何有用？
规划师们都在选用F型，是由于它模拟了用户的天然视觉形式。大部分人在他们一生中都是从上到下，从左到右地阅览。
习惯趋势去规划一个 F 型的网站布局，意味着习惯用户的天然视觉习气。反之，假如重内容的网站忽视F型，则会逼迫用户从头调整自己的天然视觉习气，带来不必要的抵触。
网站布局会影响转化，所以，了解屏幕这块不动产的价值则至关重要。拿Freespee来说，当他们将网站从头规划成上图版别后，经过 A/B test 显现，在相同的广告开支下，仅仅简略地将电话号码放在右上角更重要的方位，就能提高 30％ 的电话转化率。
那么，让咱们来仔细分析下它的凶猛之处：
用户会天然而然地从图中点 1 方位开端阅览导航，查找或做其他动作，故而左上方的 Logo 能招引用户。右上方的电话号码（图中点 2 方位）首要就能煽动用户，而它绿色高亮的作用更进一步招引了用户。网页的主体里，简练的案牍放在了点 3 方位。这些文字的排版也恰似一个迷你版 F 型，所以用户会天然而然地看到下方的按钮。
但F型也不是肯定有用的，首要原因是由于这种布局自身的单调性——用户很简略就由于每行内容的重复和类似而厌恶。这也是为什么主张在这种布局中参加“突兀的”一行，这种差异有助于坚持用户的留意力。
如上图，Kickstrater 将网页分成了显着的三行结构。第三行则是“乖僻的”那一行，经过一些笔直部件（刚好在 1000 像素左右的高度）与前面的布局形式差异开来。
留意，用户一般运用F模型下阅览大块儿的内容，然后依据状况调整，以习惯你的网站品牌和风格。假如你要修正这个模型，请保证你遵从 A List Apart 针对规划份额和网格所说的规矩来做。
值得一提的内容
F模型不仅仅适用于文本。
要展现多样化的内容，免不了对内容进行安排收拾。F模型仅仅遵从了人眼（运动）的一起趋势。因而，你能够依据自己的布局做不同的优化处理。它仅仅一个攻略，而不是一个模板，不必彻底照搬。哪怕你仅仅想增加一个按钮来强化顶部导航栏，小调整也或许带来大不同。
作者：Jerry Cao
原文：http://thenextweb.com/dd/2015/04/10/how-to-design-websites-that-mirror-how-our-eyes-work/
来历：IXDC
上一年今天运营文章2022:什么是活动策划？活动策划的认知整理(0)2021:TimeBlocks 时刻积木的根本操作和入门(0)2021:一款奥特曼游戏让我揭露了破解版游戏的套路(0)2021:抖音要做心动外卖了(0)2021:危险项目之脱单盲盒，是月入过万仍是国家管饭？(0)
微信扫一扫 
支付宝扫一扫 
