欢迎光临江苏一网通科技有限公司,公司主要服务网站SEO优化,企业高端网站开发定制!

咨询电话:17361814777 | XML地图

WEB THINK NEW

全球最新、最热的APP 和小程序新闻资讯

网站建设方法 网站推广方法

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

发表时间:2017-10-12 16:44:32
  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型同样适用于文字不多的网站。