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

为什么喜欢运用F型浏览模式来设计网站界面 ？ F型浏览模型是内容网站的首选布局模型 ，比如 闻网站、博客或着陆页。当我们解释完它 的作用和原因时 ，你就会开始注意到 ，大量知名网站都在这样做。 什么是F模型 ？ F型是用户浏览内容版块时最常用的扫描浏览模式。 它是指 ，读者会首先从左往右以水平线方向浏览 ，这种浏览习惯是很容易理解的 ，然后 ，用户会从 屏幕最左边垂直往下浏览 ，从段首句或小标题中寻求自己感兴趣的关键词或内容。找到后 ，他们又 会开始从左到右正常阅读 ，形成 （“F”的第二条 ）水平线。最终就形成了一个字母 F 或 E的形状。 如 《2014 Web UI模式》中所述 ，CNN和纽约时报都使用了F型。 尼尔森·诺曼集团的 Jako b Nielso n 曾做过一项基于 232 名用户浏览上千个网站的可读性研究 ，并详 细阐述了 F 模型的实际意义 ： 用户很少会阅读文本中的每一个字 （实际上 ，平均只有20％的人会全部阅读 ） 前两个章节最重要 ，是保证留存的关键 一段话只表达一个观点 开启 段落或 章节时 ，使用吸引眼球的关键词 这将如何影响你的网站的界面设计 ？且往下看。 这将如何影响你的网站的界面设计 ？且往下看。 如何运用F型 下图来自 Brando n Jo nes 的课题研究 ，F型可视化的样子。 显然 ，你要把最优质、最能吸引人的内容放在最上方 ，而左上角 （见图中点 1 ）就像一个整体锚点 ，一定会被关注到。这也是为什么许多公司的 Logo 会放在这里。 通常来说 ，设计师会把导航条放在顶部 ，从左上角 （见图中点 1 ）到右上角 （见图中点 2 ），方便用 户点击及搜索关键词 ，设计师们对导航条的设计也各有不同 ：轻细的导航条会让用户进一步浏览下 方的其他内容 ，厚重的导航则会让用户更多的关注到导航条本身 ，而不是下方的内容。 第一行之后 ，用户就会来到下一个关键节点 （见图中点 3 ）并做同样的动作 （到图中点 4 ）。理 论上 ，用户会继续往下浏览 ，直到他们找到感兴趣的内容。但实际情况是 ，他们很可能在几秒后就 走人了 ，除非你能继续吸引住他们。 因此 ，为了打破页面的单调 ，专家们建议设计师在第二行或第三行 （即“F”的第二横或“E的第三横 ） 之后 ，借助一些“突兀的”元素来“破坏”整体布局的连续性。利用一些设计上的变化来保持视觉刺激。 常用的做法是 ，在每过1000像素的版块后方就来一些不一样的布局设计。 比如下面的例子 ： 值得注意的是 ，因为每行结尾 （如图中2和4等右侧的点 ）会出现浏览中断 ，所以这种地方一般用来 放置广告。这也是为什么你总能在某一行结尾处看到“电子书 鲜出炉啦”之类的广告。 这种广告就很好地应用在F模型上 ，因为它们的位置显而易见 ，却又不会分散用户在主要内容上的注 意力。内容永远是最重要的 ，只有当你要将用户带到更深的一个层级时 ，才应该布置侧边栏。 在F型下 ，右侧边栏的主要作用有二 ： 放置有关联但无直接关系的内容 任何你想展示给用户 ，却与主内容无关紧要的 ，比如广告、 其他文章链接、社交媒体控件等。 作为一个搜索工具 可以明显地布置一个搜索栏 ，或者分类列表、标签云、“热门文章”控件等。 上面的内容可能短时间难消化 ，所以 ，下面会举一些例子 ： 纽约客向我们展示了F型的广告布局在网站中是很适用的。顶部David Yurman的广告很显眼 ，但好 在主内容中使用了一张红色照片 ，广告并不会喧宾夺主。如前面所说 ，这个广告还放在了第二行结 尾处 ，在换行浏览中断时就能看到。 F型同样适用于文字不多的网站。 iZ et t le 在其首页运用了非常规的F型。实际上 ，它采用了一种F和Z 的混合模型布局 （后面将提到 ） 。 通过加入一句主文案 （“Grow yo ur business w it h iZ et t le” ），并在大背景图上添加一个按钮来避免 模板化。我们认为 ，在布局设计时可以参考这个案例 ，他们最低限度地采用了F型。当然 ，还有许 多视觉上更为诱人的案例可以参考 ，但这个也是不错的。 这个模型为何有效 ？ 设计师们都在采用F型 ，是因为它模拟了用户的自然视觉模式。大部分人在他们一生中都是从上 到下 ，从左到右地阅读。 顺应趋势去设计一个 F 型的网站布局 ，意味着顺应用户的自然视觉习惯。反之 ，如果重内容的网站 忽视F型 ，则会强迫用户重 调整自己的自然视觉习惯 ，带来不必要的冲突。 网站布局会影响转化 ，所以 ，了解屏幕这块不动产的价值