如何利用F型浏览模式来设计网站页面

大多数情况下浏览者都不由自主的以“Ｆ”形状的模式阅读网页，这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。研究者用了几种不同的页面做眼动仪测试，得到了3张热度图，用颜色来表示浏览者眼光聚集的热度，分为*热（红色）、较热（黄色）、不热（蓝色）和基本不关注（灰色）4种。其中搜索结果页因SERP中网站标题、网页摘要较宽，第二条线会随之加长，但仍然是F形状。那么如何运用F型浏览模式来设计网站页面呢？

通常来说，设计师会把导航条放在顶部，从左上角到右上角，方便用户点击及搜索关键词，设计师们对导航条的设计也各有不同：轻细的导航条会让用户进一步浏览下方的其他内容，厚重的导航则会让用户更多的关注到导航条本身，而不是下方的内容。

第一行之后，用户就会来到下一个关键节点并做同样的动作。理论上，用户会继续往下浏览，直到他们找到感兴趣的内容。但实际情况是，他们很可能在几秒后就走人了，除非你能继续吸引住他们。

因此，为了打破页面的单调，专家们建议设计师在第二行或第三行（即“F”的第二横或“E的第三横）之后，借助一些“突兀的”元素来“破坏”整体布局的连续性。利用一些设计上的变化来保持视觉刺激。常用的做法是，在每过1000像素的版块后方就来一些不一样的布局设计。

F 模型不仅仅适用于文本，要展示多样化的内容，免不了对内容进行组织整理。F 模型仅仅遵循了人眼（运动）的共同趋势，因此，你可以根据自己的布局做不同的优化处理。它只是一个指南，而不是一个模板，不用完全照搬。哪怕你只是想添加一个按钮来强化顶部导航栏，小调整也可能带来大不同。