F式布局是什么如何合理的利用它

来源:设计经验分享网
添加时间:2024年02月
  网页排版方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,F式布局是可用性较强,且适用范围较广的一种。今天的文章深圳网站设计科技小编同你来探讨F式布局在网页中的运用。
  F式布局的设计基础是用户扫视内容的时候,实现的运动轨迹和字母F相似,而布局匹配这种这种阅读方式可以让用户更快(Fast)地获取信息,因此得名为F式布局。
  F式布局从何而来?
  F式布局源于NNGroup的一项眼动研究项目,他们跟踪了超过200名用户浏览各种网页时的眼动轨迹,发现用户的眼球快速浏览网页时,尤其是在快速浏览文字内容的时候,眼球的运动轨迹类似字母F,并且整个运动过程遵循下面三个部分:
  ·用户先会沿着水平方向浏览,优先浏览内容块的上部,这个时候的眼动构成了字母F最上面一横。
  ·接下来视线会沿着屏幕左侧向下垂直扫视,寻找段落中能引起兴趣点的内容,当他们发现引起他们兴趣的内容之时,继续横向仔细浏览,而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些,而这个视线轨迹则构成了字母F中间的一横。

  ·接下来用户会将视线移到屏幕左侧,继续向下浏览。

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



  NNGroup的眼动跟踪研究证明了这一点,红色的部分是用户感兴趣的区域,黄色的区域次之,不感兴趣的则为蓝色的区域,灰色的区域是用户直接忽略不作停留的部分。
  显然,用户的浏览过程并不全是分为三个部分,但是它的模式是沿用下来的。
  为何要使用F式布局?
  F式布局能让你创造出更加富有层次感的设计,这样的设计更容易为用户浏览和获取信息。对于世界范围内绝大多数的国家和地区而言,F式布局是非常符合阅读习惯的。这种规则使得它可以广泛运用在UI和网页设计上。
  什么时候使用F式布局?
  诸如新闻和博客这种重文本内容的网站是适合F式布局的,它主要适用于文本的阅读。



  CNN就是使用F式布局的
  如何运用F式布局?
  F式布局让设计师能够更好控制内容的可见性。
  1、确定内容的优先级
  如果你对于页面中内容的轻重缓急有着足够的了解,那么就可以结合用户的浏览习惯,将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。
  2、设置初始预期
  文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端,这也是为什么标题、引言和导航栏是如此的重要的原因。

  用户能够在几秒钟之内快速读取内容。
  3、为速读而设计
  用户通常不会一个字一个词地阅读文章,而是通过意群来获取内容,所以,你需要将可能包含用户感兴趣内容的意群按照F式布局来排布,这样可以尽可能高效地呈现内容:
  ·段落以新鲜有趣、关键核心的词汇开头。
  ·用户会优先查看优先级最高的元素(也就是视觉重量最重的区域)。因此,在文本为主的网站中,你应该突出文本本身的重要性(比如关键词),并且借助配色等元素,强化按钮等涉及关键交互的元素的存在感。
  ·每个段落陈述一件事情,并尽量有针对性地陈述。
  ·将最重要的元素(诸如CTA按钮等)置于最左侧或者最右侧,也就是用户阅读的起始部分。这个时候,用户通常会有阅读的停顿,而这个时刻可以让他们有额外的时间来考虑并且选择下一步的交互。
  4、善用侧边栏
  侧边栏通常可以帮助用户深入到下一个层级,用户的交互也更加的深入:
  ·提供用户想要看到的内容,而不是广告、相关文章和小控件这样的东西。
  ·将它设计成为用户找到特定内容的工具。最常见的设计是目录列表,标签云和“最多点击”文章列表。



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


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

 

平面设计相关资讯推荐阅读:


SEO布词技巧网页建设需要掌握那些知识技术为什么域名被停止解析自适应网页建设方案是什么[PhpStorm]UndefinednamespaceUndefinedclass来给大家具体分析什么叫做用户行为网页建设之阿里云备案流程解析网页色彩与人的心理影响关系深圳网页建设公司为您讲解独立服务器的基本管理及如何下载网页源文件深圳网页设计小编教你制作PS原生LOL图标!企业网页怎样才可以完成权益的很大化微信h5用什么软件做出来展现效果好网页页面内容怎么样才能不被搜索引擎抓取模板建站的不足和优点网页优化能给我带来什么好处解析全网整合营销网页建设如何降低改版的风险边玩边学!掌握PS钢笔工具的酷站企业网页建设中不可缺少什么网页域名的结构怎样设计才能让全屏网页更有冲击力网页备案和域名备案有什么区别如何设计与适配深色系网页对网页內部结构提升的好多个方法FoxMail的设置方法营销网页建设后如何做好网页运营不容易网页开发技术能够基本建设网页吗成功的网页有哪些设计技巧可借鉴2020年十大Web设计和UI趋势(二)开展网页优化的情况下要留意什么难题学会色彩搭配,优秀的网页设计手到擒来软件定制化的发展有很大的区别,我们可以在了解清楚之后再做决定!浅谈营销型网页的首页该如何去设计搞好网页优化的实际意义和益处易捷网络分析出现网页降权的原因哪些原因会导致公司网页打不开呢什么样的企业网页更能吸引客户怎么合理的在企业网页建设中使用小文本易捷网络给你总结的网页优化问题深圳网页建设的时代趋势企业网页建设优化怎样突出网页价值移动建站的模式选择易捷网络讲述门户网页建设你所不知道的知识如何建设一个高端网页网页建设中不可忽视的准则阿里巴巴IPO最终定价为每股68美元常见网页建设问题和答案科技浅析网页设计中令人抓狂的错误PDF文件怎么优化提升用户体验的网页结构搭建响应性的网页设计的挑战深圳网页建设分享手机网页优化细节怎样判定外贸网页平台搭建是不是出色网页设计完成后排版步骤网页被k后如何快速搞定经验技巧分享网页优化后为何很长期都没好的排名什么是DNS的MX记录网页内页排名怎么优化如何找到一款适合自己企业的管理软件,以及定制软件的费用是多少网页维护的内容有哪些
网站备案号:豫ICP备2024041165号