F型浏览模式

产品设计 2017-04-07 阅读原文

本文将引导您了解F型内容布局的原理,它是如何工作的,以及如何应用到设计中?

什么是F型浏览模式以及它的工作原理?

F型浏览模式:当阅读内容区块时,一种最常见的用户眼睛扫描模式。F(Fast)指的就是快速浏览。F型浏览模式阐述了用户是如浏览内容。在短短几秒内,他们的眼睛以惊人的速度扫过你的网站页面。

该阅读模式由NNGroup的眼动追踪研究而被推广普及,在这个研究中记录了超过200位用户浏览网页时,发现用户的主要阅读行为在许多不同的网站和任务中相当一致。这个阅读模式看起来有点像字母F,并包含以下3个组成部分:

  • 用户首先以水平方向阅读,通常是在内容区域的上半部分。这个初始的部分形成了F型的头部。
  • 接下来,他们在屏幕左侧垂直浏览,寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时,他们在第二个水平方向上快速浏览,通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分。
  • 最后,用户在垂直方向上浏览内容的左侧区域。

  • NNGroup演示了眼动追踪研究,如何揭露在从左至右阅读文化中的用户,他们通常是如何扫描区块内容的,通常看起来像字母F或E形状。用户看得最多的区域是红色的,黄色区域表示较少的查看,其次是最少观看的蓝色区域。灰色区域表示没有任何吸引的。

    很显然,用户的浏览模式有时候不是都包含以上三部分的。当用户发现他们感兴趣的内容时,他们就会开始正常阅读行为,形成水平阅读。

    为何要应用F型浏览模式?

    F型浏览模式将能帮助你创建一个具有良好视觉层级结构的设计,这样的设计,人们就能很舒服地浏览啦。

    对大多数的西方读者,F型布局方式能让他们感到很舒服,因为他们一直是从上至下、从左至右的阅读习惯。

    何时应用F型浏览模式?

    F型浏览模式适用于以文字为主的网站布局(如博客和新闻站)。如果有非常多的内容,尤其是大量文本内容,用户会对依照自然扫描格式(也就是上边说的F型布局模式)的设计布局会有更正向的反应。

    如何应用F型浏览模式?

    F型布局,在文字层面给设计师更多在内容展示层面的控制感。

    确定你的内容的优先级

    在你布局页面元素之前,先区分元素优先级和重要度。一旦你知道你希望用户看到什么,你就可以很简单地将他们放置在上述浏览模式中的交互“热点区域”啦。

    设定初始预期

    前两段内容是最重要的。将最重要的内容放置在接近页面上部的位置,以便尽可能快地传达给用户网站/页面的目标。用户通常横向读取页面头部,所以这块区域是放置导航栏的好位置。

    为扫描而设计,而非为阅读设计

    当我们应用F型浏览模型去思考用户行为方式的时候,可以将用户最感兴趣的内容沿着F型浏览模型去布局:

  • 用走心的关键字开始新的段落
  • 人们首先查看页面上最主要的元素(视觉感官吸引度最大的元素)。因此,给予更重要的元素更强的视觉吸引度:使用排版来突出文本关键字(例如:高亮文本中的关键字)、使用某些颜色突出显示按钮。
  • 每个段落仅表达一个想法/主题,尽可能使用项目符号/编号
  • 在左侧或右侧放置最重要的内容,因为这两个位置是用户横向视线扫描开始的起点和终点。这两处用户会做短暂停顿,所以能给予用户额外的时间来进行思考。
  • 利用侧边栏

    侧边栏的存在能让用户有更深层次的参与感,因此使用侧边栏来推动用户的参与感:

  • 提供你希望用户看到的任何内容,可以是一个广告,相关文章系列、社交媒体小部件等。
  • 为用户提供一个挖掘特定内容的工具。举个例子,像分类列表、标签云、热门帖子等。
  • 避免千篇一律的布局

    F型布局的缺点是比较单调(或者说千篇一律)。用户很容易就对重复的、相似的内容感到厌烦。在一个对一切都感到厌倦的用户那边得不到任何好处,所以在用户浏览区域,可以适当添加一些“微妙的元素”来保持用户参与感。

    当你滚动浏览前几个部分之后,如果内容长度很长,用户就感觉很无聊,那么这种“打破预期”的布局手段就非常有用啦。

    总结

    F型浏览模式只是遵循人眼浏览的共同趋势,以便你去优化布局结构。但是你没必要完完全全严格遵守它,因为这只是一个指导准则,而不是一个标准模板。

    翻译:Maker

    校对:逗砂

    原文链接: https:// uxplanet.org/f-shaped-p attern-for-reading-content-80af79cd3394

    非科班设计

    责编内容by:非科班设计阅读原文】。感谢您的支持!

    您可能感兴趣的

    5个方面,谈 To B 互联网产品的几大坑 作者根据自身工作经验总结了B端产品常见的几个坑,希望能够大家带来些借鉴。 本文大纲如下: 笔者也算是长期从事互联网ToB产品工作了。经历12-15年互联网在各个领域的C端高歌猛进和15年末...
    2018上半年“最人气”50篇文章,广告人必看的榜单!... 转眼,2018 已过半,那些风靡营销圈上半年的热门话题还记得吗? 2018 动物系事件小猪佩奇、旅行青蛙。抖音病毒的肆意蔓延,不知道你是不是还在“深受其害”?听说AI文案已经要抢人类饭碗啦,你做好准备了嘛?广告圈付费比稿声明,你怎...
    健康从一次称重开始——云康宝智能体脂秤体验... 原标题:健康从一次称重开始——云康宝智能体脂秤体验 对于一位专业奶爸而言,最扎心的不是带娃辛苦,而是辣么辛苦竟然还疯狂长肉。之前每天朝九晚五外加两小时篮球的规律生活,自从拿起奶瓶的那一刻,就一去不复返了。不规律作息、没时间运动,几年下来,...
    荣耀V10曝光:全面屏+麒麟970,性价比秒Mate 10!... 华为虽然不是国内第一家用上全面屏的厂商,但面对全面屏的趋势,反应也是相当快。旗下两大独立品牌HUAWEI和荣耀都纷纷布局全面屏产品线,前者代表产品包括今天发布的麦芒6和下月的Mate 10,后者据称也将推出荣耀畅玩7X和荣耀V10两款全面屏...
    基础设施无边界:企业如何在多云世界中重新考虑IT... 如今, 多云承诺的未来与企业IT当前的现实背道而驰。这意味着需要改变的不仅仅是对当前体系结构和运营实践的增量式延续。实际上,企业的业务需要进行整体规划,因为它们不仅将应用转移到云端,而且还要为多云做好准备。 多云原则 企业在规...