F式布局的运用方法，在用户的视线停留处排布重要内容

一、F式布局的运用方法

1、确定内容的优先级

需要对页面中的内容进行重要程度的划分，结合用户的浏览习惯，将重要的内容排布在用户视线时常停留的位置，让这些呈现重要内容的“热点区域”承载核心的交互。

2、设置初始预期

页面前端的内容是非常重要的，在布局时尽可能让最核心、最重点的内容放置在页面的顶端，这也是为什么标题、引言和导航栏都在顶部的原因。

3、为速读而设计

（1）将可能包括用户感兴趣内容的意群按照F式布局进行排布，这样可以尽量高效地呈现内容。

（2）段落可以以新鲜有趣、关键核心的词汇开头。

（3）在文本为主的网站中，需要突出文本本身的重要性（比如关键词），还可以借助配色，按钮等方法强化重点交互元素的存在感。

（4）将最重要的元素放在最左侧或者最右侧，也就是用户阅读的起始部分。这个时候，用户一般会有阅读的停顿，这个时间刚好可以让他们用来考虑进行下一步交互。

3、善用侧边栏

（1）侧边栏通常可以帮助用户深入到下一个层级，用户的交互也更加的深入。

（2）侧边栏应该提供用户想要看到的内容，而不是广告、相关文章等。

（3）侧边栏可以放一些特定的功能控件。最常见的设计是目录列表，标签云和“最多点击”文章列表。

4、防止无聊的布局

（1）F式布局最大的问题是它会让整个页面看起来比较无聊。相似而重复的内容出如今整个页面的不同位置，非常容易让用户感到视觉疲劳失去耐心。

（2）我们需要创造一些有趣的元素，打破无聊的布局，让用户不断调整注意力，持续的进行阅读。

二、设计的版式怎么布局

1、初步编排

首先文档中梳理最基本的文案内容，将文案放置到画面中简化做另一个初步框架的编排。

2、信息分层

阅读文案并分类出主题、副标题、内容、时间信息以及小部分弱化文字的关系，这样就可在之后的排版中做出字体、大小、位置、比例等信息的分层。

3、放置背景找到问题

尝试置入背景找寻问题的所在，例如填充底色，再放入跟主题相关的素材融入看看大概的感觉，当发现色系和风格不与主题相符时，可尝试换成与主题相似的色系和素材找出影响版式美感的问题所在。

4、版式编排

（1）通常情况下可以利用色块先将文字层次划分出来，比如主题可以放大，小标题缩小，内容层进行拆分。

（2）再结合一开始提到的布局比例关系，当图像的面占比越大时，版式上的构造就会相对简单的原理，解决初学者或者想快速排出好版式的首选。

5、解决配色

最简单的办法就是吸取你想要放置的主视觉图像或素材上的主颜色，以此得到一个主色调与辅助色，有人说另外一个颜色如何配的，正常利用相邻色、间隔色、互补色等等来找寻之间的配比关系。

6、图像处理

比如可以利用渐变映射对其图像置换新的颜色，扁平和手绘风改变其原有纹理和色彩质感。