为什么喜欢运用F型浏览模式来设计网站界面？.pdfVIP

为什么喜欢运用F型浏览模式来设计网站界面？ 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型同样适用于文字不多的网站。 iZet t le 在其首页运用了非常规的F型。实际上，它采用了一种F和Z的混合模型布局（后面将提到） 。 通过加入一句主文案（“Grow your business with iZett le”），并在大背景图上添加一个按钮来避免 模板化。我们认为，在布局设计时可以参考这个案例，他们最低限度地采用了F型。当然，还有许 多视觉上更为诱人的案例可以参考，但这个也是不错的。 这个模型为何有效？ 设计师们都在采用F型，是因为它模拟了用户的自然视觉模式。大部分人在他们一生中都是从上 到下，从左到右地阅读。 顺应趋势去设计一个 F 型的网站布局，意味着顺应用户的自然视觉习惯。反之，如果重内容的网站 忽视F型，则会强迫用户重新调整自己的自然视觉习惯，带来不必要的冲突。 网站布局会影响转化，所以，了解屏幕这块不动产的价值则至关重要。拿Freespee来说，当他们将 网站重新设计成上图版本后，通过 A/B test 显示，在相同的广告开支下，只是简单地将电话号码放 在右上角更重要的位置，就能提升 30％ 的电话转化率。 那么，让我们来仔细分析下它的厉害之处： 用户会自然而然地从图中点 1 位置开始浏览导航，搜索或做其他动作，故而左上方的 Logo 能吸 引用户。 右上方的电话号码（图中点 2 位置）首先就能鼓动用