易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

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

来源:网站建设行业资讯网
添加时间:2021-12-16
  网页排版方式千变万化,但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中,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式布局是遵循人类浏览信息的趋势和习惯的,它能帮你优化布局与结构,你并不一定非得这么用。有趣的设计和良好的可读性同等重要,有的时候兼顾两者并不难。

网站建设计最新案例赏析:


东莞五源企业形象设计网站制作首页设计效果图
东莞五源企业形象设计
吴江正大纺织厂网站制作首页设计效果图
吴江正大纺织厂
东莞吉川机械科技网站制作首页设计效果图
东莞吉川机械科技
广州庄齐实验室工程网站制作首页设计效果图
广州庄齐实验室工程
广东旭峰环保科技网站制作首页设计效果图
广东旭峰环保科技
深圳华璨文化传播网站制作首页设计效果图
深圳华璨文化传播
山东博纳电气网站制作首页设计效果图
山东博纳电气
乐清乐鸟电气网站制作首页设计效果图
乐清乐鸟电气
西安天星塔钟工程网站制作首页设计效果图
西安天星塔钟工程
深圳捷益达电子网站制作首页设计效果图
深圳捷益达电子
 

网站建设行业资讯推荐阅读:


为什么红火的微信板块带不活“搜索”深圳企业网站建站的五大发展方向个人网站与企业网站的关系怎么去提高网站页面的加载速度建设网站时不应该做的10件事情做为网站开发招标方该做些哪些网站备案被注销后的应对办法门户网站建设中哪些数据可以做参考-广州网站建设惊人的“雷同”!网页设计与西方建筑的相似发展历程网站首页设计要把重中之重放到哪些地方如何设计网站背景网站建设中如何降低网站访问跳出率为设计而生!深圳网站设计总结深圳网站制作较重要的是什么2015年全球网站设计趋势全预测网站建设带来的好处深圳网站建设浅析各地设计风格的区别网站如何设计才能赢得信任如何保证网站迁移服务器的稳定深圳网络公司建站为何要最先出主页效果图深圳福田外贸网站建设,外贸网站建设中有些功能板块是重要的建立网站如何降低成本网站建设对企业的重要性!深圳网站建设:用户体验十大原则广州网站建设制作公司易捷因为专注所以专业网页设计有难题12款网页设计模板给你灵感!网站制作如何选择主机什么是微信网站企业网站建设中虚拟主机如何选择合适的网站设计必知技巧带来更好效果网站设计如何提高品牌价值企业网站建设过程中需注意的低价陷阱 网页页面设计哪家售后好 恭喜麦克斯网站建设项目顺利完成网站建设技术难点有哪些深圳网站建设中企业网站目录结构应如何搭建高端网站定制自主性高如何获得更多流量网站建设外部链接的方法有哪些注册域名这种常见问题要了解很多企业都追求的简约风网站设计如何增加网站的信赖度先进的网站建设要具备的特性珠海网站建设-网站建设的发展现状和趋势企业网站导航栏设计有哪些技巧外贸网站的建设方法有什么如何让网站内容规划做的有特点如何设计一个简单大气的网站互动营销和SEO的世界定制软件哪个好网络营销企业如何赢利-深圳网站设计分享外贸网站制作的标准是什么为什么会有人说SEO根本没有技术可言怎样免费建网站怎样做才会更强怎样打造高质量的SEO内部链接系统网站建设是如何盈利的如何做好网站建设内容的策划深圳响应式网站建设有哪些流程要注意如何生成微网站效果好的网站建设最大作用是什么企业推广品牌时应该如何抓住热点事件
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询