F型浏览模式:设计一个良好的视觉层级结构

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


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

F型浏览模式:设计一个良好的视觉层级结构

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

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

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

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

F型浏览模式:设计一个良好的视觉层级结构

F型浏览模式:设计一个良好的视觉层级结构

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

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

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

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

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

何时应用F型浏览模式?

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

F型浏览模式:设计一个良好的视觉层级结构

如何应用F型浏览模式?

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

确定你的内容的优先级

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

设定初始预期

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

F型浏览模式:设计一个良好的视觉层级结构

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

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

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

利用侧边栏

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

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

F型浏览模式:设计一个良好的视觉层级结构

避免千篇一律的布局

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

F型浏览模式:设计一个良好的视觉层级结构

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

总结

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

 

翻译:Maker

校对:逗砂

原文作者:Nick Babich

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

本文由 @Maker  翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23063/

(0)
CatherineCatherine
上一篇 2017-05-03 20:50
下一篇 2017-05-03 22:33

相关推荐

  • 为什么你越来越爱用那些看起来丑而贱的表情?

    好奇心研究所的微博(@好奇心研究所)和微信公众号(ID:QLab42)全面上线啦,微信直接搜索「好奇心研究所」就可以订阅,关注与所长亲密接触,赶紧的。

    2017-06-02
  • 写给产品经理和设计师的用户体验知识4(大结局)

    从2015年起,我陆续写了《写给产品经理和设计师的用户体验知识》系列文章,当时的写作提纲如下:第一部分:先纠结两个概念「用户体验」和「设计」第二部分:设计原则概览原则1:符合用户使用需求原则2:基于用户的心理模型设计原则3:一致性原则4:及时有效的反馈和解释原则5:形式追随功能原

    微信热点 2018-02-12
  • 设计产品的第一个环节:定义方向策略,有理有据做设计

    本文作者将来聊聊设计产品的第一个环节——定义方向策略,这是后续设计的大前提和指导方针。我们需要从老板、产品/运营、用研及设计团队分别获取有效信息,进行分析整合,以得到正确、完善的方向策略定义。

    2017-05-13
  • 为何设计师要学会做版本控制?

    XX项目视觉稿.PSD

    XX项目视觉稿新版.PSD

    XX项目视觉稿最新版.PSD

    未标题-1.PSD

    XX项目视觉稿最终版.PSD

    我已经不想做了.PSD

    XX项目视觉稿这个一定是最终版.PSD

    XX项目视觉稿最终的最终版.PSD

    这稿坚决不改了就这么着吧.PSD

    这个标题是凑字数的.PSD

    2017-05-24
  • 产品体验分析之7步走(附PPT下载)

    我最近一直在做新产品的策划,方案一个又一个的被毙掉,方向一次又一次的调整,PPT一遍又一遍的改,交互一稿又一稿的画,所以我还在继续努力中,也深深的感受到产品「从0到1」的不容易。产品经理在日常生活中将发现的问题记录下来后经过分析转化为可落地的产品方案,这个过程很复杂,也很容易出错,原因就是思维的过程是不可控的,也就是没有一个相对的衡量「标准」,导致一个现象是想法人人都有,却不一定人人都对,所以产品策划「从0到1」的整个过程十分考究产品经理的功力。

    2017-05-31
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 关于2017年设计趋势的13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。 在2016这一年,全世界笃信…

    交互专题 2017-08-07
  • 设计思考模式(一):删除、组织、隐藏、附加

    “删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“先假定所有内容都是视觉噪音,除非你证明它们不是。”(《Don’t make me think》)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-03