f型设计 网站 第1篇
下图来自 Brandon Jones 的课题研究，F型可视化的样子。
显然，你要把最优质、最能吸引人的内容放在最上方，而左上角（见图中点 1）就像一个整体锚点，一定会被关注到。这也是为什么许多公司的 Logo 会放在这里。
第一行之后，用户就会来到下一个关键节点（见图中点 3）并做同样的动作（到图中点 4）。理论上，用户会继续往下浏览，直到他们找到感兴趣的内容。但实际情况是，他们很可能在几秒后就走人了，除非你能继续吸引住他们。
因此，为了打破页面的单调，专家们建议设计师在第二行或第三行（即“F”的第二横或“E的第三横）之后，借助一些“突兀的”元素来“破坏”整体布局的连续性。利用一些设计上的变化来保持视觉刺激。常用的做法是，在每过1000像素的版块后方就来一些不一样的布局设计。
比如下面的例子。
值得注意的是，因为每行结尾（如图中2和4等右侧的点）会出现浏览中断，所以这种地方一般用来放置广告。这也是为什么你总能在某一行结尾处看到“电子书新鲜出炉啦”之类的广告。
这种广告就很好地应用在F模型上，因为它们的位置显而易见，却又不会分散用户在主要内容上的注意力。内容永远是最重要的，只有当你要将用户带到更深的一个层级时，才应该布置侧边栏。
在F型下，右侧边栏的主要作用有二：
放置有关联但无直接关系的内容——任何你想展示给用户，却与主内容无关紧要的，比如广告、其他文章链接、社交媒体控件等。
作为一个搜索工具——可以明显地布置一个搜索栏，或者分类列表、标签云、“热门文章”控件等。
上面的内容可能短时间难消化，所以，下面会举一些例子：
纽约客向我们展示了F型的广告布局在网站中是很适用的。顶部David Yurman的广告很显眼，但好在主内容中使用了一张红色照片，广告并不会喧宾夺主。如前面所说，这个广告还放在了第二行结尾处，在换行浏览中断时就能看到。
F型同样适用于文字不多的网站。
iZettle 在其首页运用了非常规的F型。实际上，它采用了一种F和Z的混合模型布局（后面将提到）。
通过加入一句主文案（“Grow your business with iZettle”），并在大背景图上添加一个按钮来避免模板化。我们认为，在布局设计时可以参考这个案例，他们最低限度地采用了F型。当然，还有许多视觉上更为诱人的案例可以参考，但这个也是不错的。
f型设计 网站 第2篇
用到我们常见的“表格顶栏”上的一行操作区来说，从左到右操作优先级依次为“高—中—高（中高）”，1 号位置所在地放置操作类行为是这一行【最高】的；其次是2号位置，最后是中间的 3-4号位置。
根据尼尔森F模型，我们可以得出几个心理暗示：
F型浏览模式将能帮助你创建一个具有良好视觉层级结构的设计，这样的设计，人们就能很舒服地浏览啦。
F型布局方式能遵循人的从上至下、从左至右的阅读习惯。
三、F型浏览模式的应用
F型浏览模式适用于以文字为主的网站布局，如果有非常多的内容，尤其是大量文本内容，用户会对依照自然扫描格式（也就是上边说的F型布局模式）的设计布局会有更正向的反应，那么如何使用F型模型：
1. 确定你的内容的优先级
在你布局页面元素之前，先区分元素优先级和重要度。你希望用户看到什么，那么就将最重要的内容放置在接近页面上部的位置，以便尽可能快地传达给用户网站/页面的目标。
用户通常横向读取页面头部，所以这块区域是放置导航栏的好位置。
2. 为扫描而设计，而非为阅读设计
当我们应用F型浏览模型去思考用户行为方式的时候，可以将用户最感兴趣的内容沿着F型浏览模型去布局：
3. 利用侧边栏
侧边栏的存在能让用户有更深层次的参与感，因此使用侧边栏来推动用户的参与感：
f型设计 网站 第3篇
报告指出用户第一次浏览页面的时候，视线通常会以字母F的形状观看页面内容，尤其是大面积文章的时候，如下图：
有时这是一个相当缓慢和系统的扫描，在眼动追踪热图上显示为实心条纹。其他时候用户移动得更快，创建一个眼动热图，最后一个元素构成了“F”左边竖。
使用F模式可以确保页面上有一个高效的视觉层次结构这样用户就可以快速浏览内容并快速找到相应问题的解决方案。
适用场景：内容比较多，用户通常会用扫描的页面。