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

相关推荐

  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 产品设计不能闭门造车

     用户调研的重要性不言而喻,没有用户调研的产品设计是闭门造车,不能完美解决用户的痛点,自然也不能创造最大的价值,那么用户调研到底应该怎么做呢? 产品不同阶段的诉求之前的文章中,笔者提到过用户体验5要素,…

    2017-03-28
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 用AB测试改进用户体验设计,做出正确决策

    本文转译自TubikStudio,全文有删减。设计师们每天都在面对一些难以抉择的情况。面对这样的问题,有经验的团队会对两者进行测试,来确定哪种方案最好,其中一种流行的方法是AB测试。AB测试将用户分成两组,每组都显示不同的版本,一半看到A版本,另一半看到B版本。AB两个选项的差异根据产品经理来决定,可以是颜色差异,也可以是位置差异等。两个版本的有效性可以用浏览量、点击次数或其他数据来衡量。对于设计师来说,这是分析目标受众群体行为模式和特...

    2018-02-24
  • 不做这一步,用户调研就全白做了

    认认真真做了用户调研,就算大功告成了?图样图森破!古语说得好,学而不思则罔。你通过用户学到了很多他们关于产品的感受,如果不能将其好好分析与整理,那就只能是然并卵了。下面教大家其中一个分析用户调研资料的实用方法——绘制用户体验地图。

    2017-05-27
  • 智能场景设计:深入场景和意图的体验设计

    “hey各位!我们要开始做一件重要的事了!”陈老湿已经走到我们的工位前,兴致昂扬地说道,“竞对已经上线了类似的功能,我们得抓紧了。上海那边出了方案,看,在这里!”

    2017-05-23
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 超全面!界面交互动效核心知识的分类与总结

    Echo  :这篇文章是基于我自己的理解对界面交互动效设计 进行了分类整理和总结。

    2017-09-13
  • 随想:智能车人机交互设计三要素

    BYTON拜腾标志性的共享体验屏和触摸式方向盘近期会总结下自己对智能车、自动驾驶人机交互相关的思考,很碎片,想到哪总结到哪。今天先写智能车相关的内容。这里的智能车先缩小范围到还需要人类驾驶员的智能网联汽车。1、总结之前,有个疑问。我很想知道各大车企在研发测试智能车的时候,是否有认真、大量地拿真实用户、真实场景,而非实验室场景去测试其诸如中控大屏这样的智能产品/功能?在我的印象里,或许车企更多的测试依旧在传统意义上汽车这一交通工具的性能、...

    2018-04-22
  • 前Apple员工谈交互设计的未来【UXRen译#177】

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing   现在,有很多流行的有关未来交互设计的想象。 机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏…

    交互专题 2017-08-30