探讨F式布局在网页中的运用

虽然网页排版 方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,F式布局是可用性较强,且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。


虽然网页排版方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,F式布局是可用性较强,且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。

探讨F式布局在网页中的运用

F式布局的设计基础是用户扫视内容的时候,实现的运动轨迹和字母F相似,而布局匹配这种这种阅读方式可以让用户更快(Fast)地获取信息,因此得名为F式布局。

F式布局从何而来?

F式布局源于NNGroup的一项眼动研究项目,他们跟踪了超过200名用户浏览各种网页时的眼动轨迹,发现用户的眼球快速浏览网页时,尤其是在快速浏览文字内容的时候,眼球的运动轨迹类似字母F,并且整个运动过程遵循下面三个部分:

  • 用户先会沿着水平方向浏览,优先浏览内容块的上部,这个时候的眼动构成了字母F 最上面一横。
  • 接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F 中间的一横。
  • 接下来用户会将视线移到屏幕左侧,继续向下浏览。

探讨F式布局在网页中的运用

我们浏览内容的方式被训练为从左上角开始水平浏览,回到左侧向下扫视找到兴趣点,继续横向浏览。

探讨F式布局在网页中的运用

NNGroup 的眼动跟踪研究证明了这一点,红色的部分是用户感兴趣的区域,黄色的区域次之,不感兴趣的则为蓝色的区域,灰色的区域是用户直接忽略不作停留的部分。

显然,用户的浏览过程并不全是分为三个部分,但是它的模式是沿用下来的。

为何要使用F式布局?

F式布局能让你创造出更加富有层次感的设计,这样的设计更容易为用户浏览和获取信息。对于世界范围内绝大多数的国家和地区而言,F式布局是非常符合阅读习惯的。这种规则使得它可以广泛运用在UI和网页设计上。

什么时候使用F式布局?

诸如新闻和博客这种重文本内容的网站是适合F式布局的,它主要适用于文本的阅读。

探讨F式布局在网页中的运用

CNN 就是使用F式布局的。

如何运用F式布局?

F式布局让设计师能够更好控制内容的可见性。

1、确定内容的优先级

如果你对于页面中内容的轻重缓急有着足够的了解,那么就可以结合用户的浏览习惯,将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。

2、设置初始预期

文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端,这也是为什么标题、引言和导航栏是如此的重要的原因。

探讨F式布局在网页中的运用

用户能够在几秒钟之内快速读取内容。

3、为速读而设计

用户通常不会一个字一个词地阅读文章,而是通过意群来获取内容,所以,你需要将可能包含用户感兴趣内容的意群按照F式布局来排布,这样可以尽可能高效地呈现内容:

  • 段落以新鲜有趣、关键核心的词汇开头。
  • 用户会优先查看优先级最高的元素(也就是视觉重量最重的区域)。因此,在文本为主的网站中,你应该突出文本本身的重要性(比如关键词),并且借助配色等元素,强化按钮等涉及关键交互的元素的存在感。
  • 每个段落陈述一件事情,并尽量有针对性地陈述。
  • 将最重要的元素(诸如CTA按钮等)置于最左侧或者最右侧,也就是用户阅读的起始部分。这个时候,用户通常会有阅读的停顿,而这个时刻可以让他们有额外的时间来考虑并且选择下一步的交互。

4、善用侧边栏

侧边栏通常可以帮助用户深入到下一个层级,用户的交互也更加的深入:

  • 提供用户想要看到的内容,而不是广告、相关文章和小控件这样的东西。
  • 将它设计成为用户找到特定内容的工具。最常见的设计是目录列表,标签云和“最多点击”文章列表。

探讨F式布局在网页中的运用

5、避免无聊的布局

F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重复的内容出现在整个页面的不同位置,用户很可能在相似的布局中快速感到疲倦。所以,你需要创造一些和打破尴尬格局的元素,让用户不断调整注意力,持续的阅读。

探讨F式布局在网页中的运用

结语

当然,F式布局是遵循人类浏览信息的趋势和习惯的,它能帮你优化布局与结构,你并不一定非得这么用。有趣的设计和良好的可读性同等重要,有的时候兼顾两者并不难。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/f-shaped-pattern-webdesign

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

(0)
CatherineCatherine
上一篇 2017-05-04 02:57
下一篇 2017-05-04 05:01

相关推荐

  • 皮克斯教给我们的22条改善用户体验的原则

    注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯。1986年,在史蒂夫·乔布斯以1000万入主以后,创作了《玩具总动员》、《海底总动员》、《头脑特工队》等经典3D动 画电影。2006年,皮克斯被迪士尼以74…

    2016-06-12
  • 针对产品UI国际化提出的7条建议

    近年来,越来越多的国内开发者将目光从国内转移到国外,纷纷投入到移动大航海时代的浪潮之中。在产品国际化的过程中,产品UI是否也跟上了国际化的步伐?Dropbox 设计师 John Saito 针对产品设计国际化中出现的问题进行了分析并提出了 7 条建议,值得一看。

    2017-05-09
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24
  • 如何写一份全面、易读的交互说明文档?

    交互说明文档,是交互设计师的输出物中必不可少的一项,它关系着设计方案能否最大程度的被实现。交互新人,大多会烦恼如何写交互文档,今天来聊聊这个话题。 交互文档,写给谁看 交互文档可以看做交互设计师输出的”…

    2015-12-25
  • 工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • 重版权轻用户体验 盲目IPO的腾讯音乐或成下一个多米

    最近,音乐版权又起风云,各大新闻版面被网易云音乐因版权续约未果,下架周杰伦作品的信息霸占,这场由杰威尔音乐独家版权方腾讯音乐主导的“版权狙击战”再次成为行业焦点。众所周知,自在线音乐兴起至今,腾讯与网易云音乐、虾米音乐等音乐平台之间在版权上的纷争已经历了多个回合。但是,距离国家版权局宣布推动腾讯音乐和网易云音乐达成版权合作还不到两个月,在线音乐市场版权之争就因腾讯再起硝烟,令人诧异之余不免有些心寒。所以,腾讯音乐“阳奉阴违”背后,到底有...

    2018-04-08
  • 关于增强移动端交互设计的7条小建议

    本文转译自TubikStudio,内容有删减如果你要问某个产品的移动端交互设计好不好?很简单,如果用户能够很轻松愉快的使用以至于没有感受到它的存在,这就表示这款产品的设计是专业的、成功的。另一方面,如果整套交互中存在不合理的地方,用户一定会注意到他们,并且引发吐槽。移动应用的设计,需要清晰易用,可以随时随地进行有效使用。设计师的认识是创建一个直观的界面,指导用户们,帮助他们顺利操作使用。1、降低学习成本每个产品经理或者交互设计师,都想创...

    2018-02-17
  • 三款备孕育儿类APP简单分析 (多图慎入)

    2015年,母婴类APP可以说是百花齐放,各种各样的产品竞争激烈,但是还没有出现寡头,窗口期依然还在。刚好下午在准备一家母婴类公司的招聘,简单体验了几款备孕育儿类产品,和大家一起分享一下。 产品简介 体验的产…

    2016-03-06
  • 818那些影响用户体验的创意

    作为创意经常不通过审核的一枚苦逼广告主,你一定经常看到以下拒绝原因:因模糊、变形,出现马赛克等原因导致无法识别,请优化。人物形象影响用户体验,如【动作不雅、衣服暴露、大头照】。文字包含【低俗、不良诱导、负面描述】等影响用户体验。……有没有觉得很委屈,很痛苦,很莫名其妙?作为苦逼的设计师,好不容易满足了甲方爸爸的变态要求,没想到又被更变态(划掉,正规)的腾讯社交广告审核拒绝了。概括一下,这些拒绝原因全部称为“影响用户体验”。那什么是影响用...

    2018-04-19
  • 浅谈APP交互设计师是一个什么样的职位

    这篇文章算是一篇对APP交互设计师重新阐述的一篇常识文章。希望对哪些想要从事APP交互设计师的小伙伴们有一定的基础认识。
    今天跟大家从下面4个方面来聊聊APP交互设计师到底是一个什么样的职位。

    2017-05-29