为什么喜欢运用F型浏览模式来设计网站界面
发布网友
发布时间：2022-04-06 03:49
共3个回答
懂视网
时间：2022-04-06 08:10
【相关学习推荐：网站制作视频教程】
虽然网页排版方式千变万化，但是布局方式通常都遵循着几种常见的规则。在诸多布局方式当中，F式布局是可用性较强，且适用范围较广的一种。今天的文章同你来探讨F式布局在网页中的运用。
F式布局的设计基础是用户扫视内容的时候，实现的运动轨迹和字母F相似，而布局匹配这种这种阅读方式可以让用户更快(Fast)地获取信息，因此得名为F式布局。
F式布局从何而来?
F式布局源于NNGroup的一项眼动研究项目，他们跟踪了超过200名用户浏览各种网页时的眼动轨迹，发现用户的眼球快速浏览网页时，尤其是在快速浏览文字内容的时候，眼球的运动轨迹类似字母F，并且整个运动过程遵循下面三个部分：
·用户先会沿着水平方向浏览，优先浏览内容块的上部，这个时候的眼动构成了字母F 最上面一横。
·接下来视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当他们发现引起他们兴趣的内容之时，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更小一些，而这个视线轨迹则构成了字母F 中间的一横。
·接下来用户会将视线移到屏幕左侧，继续向下浏览。
我们浏览内容的方式被训练为从左上角开始水平浏览，回到左侧向下扫视找到兴趣点，继续横向浏览。
NNGrou的眼动跟踪研究证明了这一点，红色的部分是用户感兴趣的区域，黄色的区域次之，不感兴趣的则为蓝色的区域，灰色的区域是用户直接忽略不作停留的部分。
显然，用户的浏览过程并不全是分为三个部分，但是它的模式是沿用下来的。
为何要使用F式布局?
F式布局能让你创造出更加富有层次感的设计，这样的设计更容易为用户浏览和获取信息。对于世界范围内绝大多数的国家和地区而言，F式布局是非常符合阅读习惯的。这种规则使得它可以广泛运用在UI和网页设计上。
什么时候使用F式布局?
诸如新闻和博客这种重文本内容的网站是适合F式布局的，它主要适用于文本的阅读。
CNN 就是使用F式布局的
如何运用F式布局?
F式布局让设计师能够更好控制内容的可见性。
1、确定内容的优先级
如果你对于页面中内容的轻重缓急有着足够的了解，那么就可以结合用户的浏览习惯，将重要的内容排布在用户视线时常停留的位置。让这些呈现重要内容的“热点区域”承载核心的交互。
2、设置初始预期
文本的前几段内容是非常之重要的。尽量让最核心、最重点的内容放置在页面的顶端，这也是为什么标题、引言和导航栏是如此的重要的原因。
用户能够在几秒钟之内快速读取内容。
3、为速读而设计
用户通常不会一个字一个词地阅读文章，而是通过意群来获取内容，所以，你需要将可能包含用户感兴趣内容的意群按照F式布局来排布，这样可以尽可能高效地呈现内容：
·段落以新鲜有趣、关键核心的词汇开头。
·用户会优先查看优先级最高的元素(也就是视觉重量最重的区域)。因此，在文本为主的网站中，你应该突出文本本身的重要性(比如关键词)，并且借助配色等元素，强化按钮等涉及关键交互的元素的存在感。
·每个段落陈述一件事情，并尽量有针对性地陈述。
·将最重要的元素(诸如CTA按钮等)置于最左侧或者最右侧，也就是用户阅读的起始部分。这个时候，用户通常会有阅读的停顿，而这个时刻可以让他们有额外的时间来考虑并且选择下一步的交互。
4、善用侧边栏
侧边栏通常可以帮助用户深入到下一个层级，用户的交互也更加的深入：
·提供用户想要看到的内容，而不是广告、相关文章和小控件这样的东西。
·将它设计成为用户找到特定内容的工具。最常见的设计是目录列表，标签云和“最多点击”文章列表。
5、避免无聊的布局
F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重复的内容出现在整个页面的不同位置，用户很可能在相似的布局中快速感到疲倦。所以，你需要创造一些和打破尴尬格局的元素，让用户不断调整注意力，持续的阅读。
结语
当然，F式布局是遵循人类浏览信息的趋势和习惯的，它能帮你优化布局与结构，你并不一定非得这么用。有趣的设计和良好的可读性同等重要，有的时候兼顾两者并不难。
想了解更多相关学习，敬请关注php培训栏目！
热心网友
时间：2022-04-06 05:18
设计师们都在采用F型，是因为它模拟了用户的自然视觉模式。大部分人在他们一生中都是从上到下，从左到右地阅读。
顺应趋势去设计一个 F 型的网站布局，意味着顺应用户的自然视觉习惯。反之，如果重内容的网站忽视F型，则会强迫用户重新调整自己的自然视觉习惯，带来不必要的冲突。
网站布局会影响转化，所以，了解屏幕这块不动产的价值则至关重要。拿Freespee来说，当他们将网站重新设计成上图版本后，通过 A/B test 显示，在相同的广告开支下，只是简单地将电话号码放在右上角更重要的位置，就能提升 30％ 的电话转化率。
那么，让我们来仔细分析下它的厉害之处：
用户会自然而然地从图中点 1 位置开始浏览导航，搜索或做其他动作，故而左上方的 Logo 能吸引用户。
右上方的电话号码（图中点 2 位置）首先就能鼓动用户，而它绿色高亮的效果更进一步吸引了用户。
网页的主体里，简洁的文案放在了点 3 位置。这些文字的排版也恰似一个迷你版 F 型，所以用户会自然而然地看到下方的按钮。
但F型也不是绝对有效的，主要原因是因为这种布局本身的单调性——用户很容易就因为每行内容的重复和相似而厌倦。这也是为什么建议在这种布局中加入“突兀的”一行，这种差异有助于保持用户的注意力。
F模型不仅仅适用于文本。
要展示多样化的内容，免不了对内容进行组织整理。F模型仅仅遵循了人眼（运动）的共同趋势。因此，你可以根据自己的布局做不同的优化处理。它只是一个指南，而不是一个模板，不用完全照搬。哪怕你只是想添加一个按钮来强化顶部导航栏，小调整也可能带来大不同。
热心网友
时间：2022-04-06 06:36
采用F型浏览模式设计网站界面是因为它模拟了用户的自然视觉模式。大部分人在他们一生中都是从上到下，从左到右地阅读。反之，如果重内容的网站忽视F型，则会强迫用户重新调整自己的自然视觉习惯，带来不必要的冲突，导致用户体验度下降，在网站的设计上可以考虑使用nicebox。
