地 址：北京市朝阳区6666号
电 话：19930496374
网址：huaquantongstone.com
邮 箱：18206711@qq.com
虽然网页排版方式千变(bian)万化，何让但是网页布局方式通常都遵循着几种常见的规则。在诸多布局方式当中，可读F式(shi)布局是(shi)性更可用性较强，且适用范围较广的(de)强善强网一种。今天的用F页文章同你来探讨F式布局在网页中的(de)运用。
F式布局的(de)式布设计基础是用户扫视内容的时候，实现的局设计增解答运(yun)动轨迹和字母F相似，而(er)布局匹配这种这(zhe)种阅读方式可以(yi)让用户更快(Fast)地获取信息，读性因此得名为F式布局。何让
F式布局从何而来?网页
F式布局源于NNGroup的一项眼动研究项目，他们跟踪了超过200名(ming)用户浏览各种网页时的可读眼动轨迹，发现用户的性更眼球快速浏览网页时，尤其是强善强网在快速浏览文字内容的时候，眼球的用(yong)F页运动轨迹类似字母F，并且整个运动过(guo)程遵循下面三个部分：
·用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成(cheng)了字母F 最上面一横。
·接下来视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当他(ta)们发现引起他们兴趣的(de)内(nei)容之时，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向(xiang)浏览的范畴要更小一些，而这个(ge)视线轨迹则构成了(le)字母F 中间的一横。
·接下来用户会将视线移到屏幕左侧，继续向下浏览。
我们浏览内容的(de)方式被训练为(wei)从左上角开(kai)始水平浏览，回到左侧向下扫视找到兴趣点，继续横向浏览。
NNGrou的眼动跟踪研究证明了这一点，红色的部分是用(yong)户感兴趣的区域，黄色的区域次之，不感兴趣的则为蓝色的区域，灰色的区域是用户直接忽略不作停留的部分(fen)。
显然，用户的浏览过程并不全是分为三个部分，但是它的模式是沿用下来的。
为何要使用F式布局?
F式布局能让你创造出更加富有层次感的设计(ji)，这样的设计更容易为用户浏览和获取信息。对于世界范围内绝大多数(shu)的国家和地区而言，F式布(bu)局是非常符合阅读习惯的。这(zhe)种规则使得它(ta)可以广泛运用在UI和(he)网页设计上。
什么时候使用F式布局?
诸如新闻和博客这种重文(wen)本内容的网站是适合F式布(bu)局的，它主要适用于文本的阅读。
CNN 就是(shi)使(shi)用F式布局的
如何运用F式(shi)布局?
F式布局让设计师能够更好控制内容的(de)可见(jian)性。
1、确定内容的优先级
如果你对于页面中内容的轻重缓急有着足够的了解，那么就可(ke)以结合用户的浏览习惯，将重要的内容排布在(zai)用户视线时常停留的位置。让这些呈现重要内容的“热(re)点区域”承载核心的交互。
2、设置初始预期(qi)
用户能够在几秒钟之内(nei)快速读取内容。
3、为速读而(er)设计(ji)
·段落以(yi)新鲜有趣、关键核心(xin)的词汇开头。
·用户会优先查看优先(xian)级最(zui)高的元素(也就是视觉重量最重(zhong)的(de)区域)。因此，在文本为主的网站中，你应该突出文本本身的(de)重要性(比如关(guan)键词)，并且借助配色等元素，强化(hua)按钮等涉及关键交互的元素的存在感。
·每个段落陈述一件事情，并尽量有针对性地陈述。
·将(jiang)最重要的元素(诸如CTA按钮等(deng))置于最左侧或者最右侧，也就是用户阅读的起始部分。这个时候，用户通常会有阅读的停顿，而(er)这个时刻(ke)可以让他们有额外的时间来考虑并且选择下一步的交互。
4、善用侧边栏
侧边栏通常可以帮助用户深入到下一个层级，用户的交互也更加的深入：
·提供用户想要看到的内容，而不是广告、相关文章和小控件这(zhe)样的东西。
·将它设计成(cheng)为用户找到特定内(nei)容(rong)的工具(ju)。最常见的(de)设计(ji)是目录列(lie)表，标签云和“最(zui)多点击”文章列表。
5、避免无聊的布局
F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重(zhong)复的内(nei)容出现在整个页面的不同位置，用户很(hen)可能在相似的布局中快速感到疲倦。所以，你需要创造一些和打破尴尬格局的元素，让用户不(bu)断调整注意力，持续的阅读。
结语
当然，F式布局是遵循人类浏览信息的趋势和习惯的，它能帮你优化布局与结(jie)构，你(ni)并不一定非得这么用。有(you)趣的设计和良好(hao)的可读性(xing)同等重要(yao)，有的时候兼顾两者并不(bu)难。
