传统的布局方式，依赖布置视觉线索，“控制”用户的视觉路径，相较之下，F式布局更加自然，更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。绍网页设计中的F式布局。
Traditional layout, relying on layout visual cues, "control" the user's visual path, by contrast, the f-style layout is more natural and friendlier. This article will describe some of the rules, principles and design methods of the f-type layout. The f-type layout in the design of shao web pages.

 
来源:网页教学网
Source: web site teaching network

 
F式布局简介
An introduction to the f-type layout

 

 
F式布局是一种很科学的布局方法，基本原理依据了大量的眼动研究。一般来说，用户浏览网页的视觉轨迹是这样的——先看看顶部，然后看看左上角，然后沿着左边缘顺势直下….而用户往往不太注意右边的信息，这是不是有点像字母F?据此，我们习惯性的把重要元素（诸如品牌Logo，导航，行为召唤控件）放在左边，而右边一般放置一些对用户无关紧要的广告信息。
The f-type layout is a very scientific method of layout, based on a large number of eye movement studies. In general, the visual trajectory of a user's web page looks like this -- look at the top, then look at the top left corner, and then down the left edge... . And users tend not to pay much attention to the information on the right. Is it a bit like the letter F? On this basis, we tend to place important elements (such as brand logos, navigation, and behavioral call controls) on the left, while the right side of the box is typically placed on ads that don't matter to the user.

 

 
我们来看一下Webdesigntuts+的眼动热点图：
Let's take a look at Webdesigntuts + eye heat map:

 

 
这张眼动热点图展示了用户浏览此网站的视觉轨迹，呈一个F型。热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。
This eye-tracking hotspot shows the user's visual trajectory of the site, showing an f-type. The hot zone (red, yellow, orange) represents the focus of the user's attention.
总结一下用户浏览网页的一般模式：
Summarize the general patterns of user browsing:

 

 
先看看页面的左上角，了解一下这是什么网站（因此此处适合放置Logo)——“知道是什么”
Take a look at the top left corner of the page to see what the site is (hence the Logo) - "know what it is".

 

 
然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法”
Then scan the top of the page (navigation bar, search bar) -- "understand usage"
下一步，用户的视线下移，开始阅读下一行的内容。
Next, the user's eyes move down and begin to read the next line.
用户进入“扫描模式”，一旦找到感兴趣的内容便会打开。
The user enters the "scanning mode", and once the content of interest is found, it opens.

 
将此种浏览模式以线框图的形式呈现，形状如下图。
This view is presented as a wireframe, as shown in the figure below.

 
有个规律不容忽视：阅读一般是从上到下，从左到右的。用户往往忽视右侧边的内容，大致的扫一眼而已，因此不要在右侧边下太大功夫。应该把内容栏放在用户注意力高度集中的左边。
There is a rule that cannot be ignored: reading is generally from top to bottom, from left to right. Users tend to ignore the right side of the content and scan it roughly, so don't try too hard on the right side. You should place the inside column on the left side of the user's attention height.

 

 
综上所述，按照逻辑，我们得出以下结论：
To sum up, according to the logic, we draw the following conclusions:

 

 
品牌标志和导航应该放在页面的顶部，这是用户对网站的第一印象。
Brand logos and navigation should be placed at the top of the page, which is the user's first impression of the site.
在内容结构中，图片更容易获得关注
In content structures, images are more likely to gain attention
用户浏览完图片后，下一个关注点便是标题。
After the user has viewed the image, the next focus is the title.
用户会大致的浏览文本，但是往往不会通读。
Users browse the text roughly, but they don't usually read it.

 

 
将F式布局应用到设计中
Apply the F layout to the design

 

 
这里我做了一个小练习，使用线框图方法，对主要元素进行了布局。
I've done a little exercise here, using wireframes, and layout the main elements.

 
下图中可以看到，我把网站的主题/宗旨（Mission Statement）放在了导航栏的下面，这样用户浏览完Logo和导航，就能迅速的了解网站的宗旨.两栏布局的好处是信息层级清晰，可方便用户快速扫描内容…主要内容栏+辅助侧边栏
In the image below you can see, I put the website topic/purpose (Mission Statement) on the bottom of the navigation bar, so that users browse the Logo and navigation, can quickly understand the purpose of the site. Two-column layout is the benefits of the information level is clear, easy to user a quick scan content... Main internal container and auxiliary sidebar

 
挺粗糙的，但是关键点都在，浏览此网页时只需几秒钟，便能获取该网站的宗旨/主题…
It's pretty rough, but the key point is that it takes just a few seconds to get to the website and get the purpose/theme of the site...

 

 
导航栏的作用是引导用户，让用户知道如何转至不同的页面。
The role of navigation is to guide users and let users know how to switch to different pages.

 

 
顶部下方的内容栏中，将标题设置的非常醒目，用户浏览完图片后，便能迅速察觉到标题的存在…至于文本内容吧不做强求。
In the inner space below the top, the title is set up very clearly, and the user can quickly detect the presence of the title after browsing the image... As for the text, don't do it.

 

 
你们浏览这个页面的视觉路径应该是这样的吧？
So you're looking at the visual path of this page, right?

 
效果还可以是把？完成F式布局后，我们便可以此为基础，加入一些细节性元素。
Can it be the same effect? After the F layout is completed, we can build on this and add some details.

 

 
还有一点值得注意的是F式布局中对行与行之间距离的控制。（图中红线部分）
Another thing to note is the control of the distance between rows and rows in the F layout. (red line)

 
根据不同的设计需求，设计师可以适度调整。如果想要打造一种悠闲的阅读氛围，间距可以大一点；如果信息量大，可以缩小一点，打造出紧凑的阅读感。至于阅读的节奏感和一致性的保持，请翻阅优设网之前的文章，这里就不做赘述了。
According to different design requirements, designers can adjust appropriately. If you want to create a relaxed reading atmosphere, you can have a larger space. If the information is large, you can narrow it down and create a compact reading. As for the sense of rhythm and consistency of reading, please review the articles before the web site.

 

 
如果页面无限长，老这么浏览下去，用户一定会很烦，感到枯燥，对不对？这里可以稍微做一下调整，加入一点与F式布局规则“不协调”的元素，给阅读节奏带来一些变数。
If the page is infinite and long, the user will be annoyed and bored, right? Here you can tweak it a little bit, adding a bit of "incongruent" elements to the f-style layout rules, which can bring some variables to the reading rhythm.

 
你看，上图中那个图片栏就是“不协调”元素，它的出现有些出人意料、打破了用户的预期，这种设计适合于那种超长垂直滚动的网页，这样用户就不会感到枯燥了。
You see above the pictures in the column is "not harmonious" element, it came as a surprise, to break the user's expectations, this design is suitable for the long vertical scrolling web pages, so users won't feel boring.

 

 
F式布局原理
Principle of f-type layout

 

 
F式布局能够奏效的原因，在于F式布局符合用户的浏览习惯，更自然。符合“从上到下，从左到右”的阅读模式。
The reason that the f-type layout works is that the f-type layout conforms to the user's browsing habits and is more natural. Follow the "from top to bottom, from left to right" reading mode.

 

 
但是这种阅读模式有利也有弊：
But there are pros and cons to this reading model:

 
这样一来，最有价值的内容只能放置在页面顶部了。有些俗套
In this way, the most valuable content can only be placed at the top of the page. Some of the mould
文本内容无法有效的引起用户注意，用户甚至连摘要都懒得读，看看标题就“过”了
Text content can't effectively attract users, and users can't even bother to read a summary, and read the title

 

 
网页过分注重对“标题”和“图像”的包装，无疑不符合内容至上的原则
The web page focuses too much on the "title" and "image" packaging, which undoubtedly does not conform to the principle of content supremacy

 
在采用F式布局进行设计师，很多设计师感觉自己不像是设计师，而想是制造噱头的“广告商”。网页设计太具备功利性，只追求一时的浏览量，不遵循“内容为王”的原则，很多用户第一次可能感觉不错，但是看了内容后大呼上当，可能下一次他们就不会再次访问该网页了。
In the use of the f-style layout, many designers feel that they are not designers, but are "advertisers" who create gimmicks. Web design is too utilitarian, only the pursuit of a temporary views, not following the principle "content is king", and many users may feel good for the first time, but the content after the fall, probably they will not have access to the web page again next time.

 

 
因此，设计师要协调好内容与布局之间的关系。这就有点像武侠小说了，内容好比内力，布局好比招式。花拳绣腿再漂亮，内力深厚的人一招便能“以力破巧”
Therefore, designers should coordinate the relationship between content and layout. It's kind of like a martial arts novel. It's like internal force. Beautiful and beautiful, the people who have deep inner strength can "make the best of it".

 

 
那么右面的侧边栏该要怎么设计呢？这里给出两点建议：
So how do you design the sidebar on the right? Here are two Suggestions:

 

 
1.呈递相关内容。比如和网站主题相关的链接、广告，相关阅读推荐，社交媒体微件等等。不要为了牟利而放置些低俗的、和内容不相干的广告。
1. Submit relevant content. For example, links, ads, related reading recommendations, social media widgets, etc. Don't place vulgar, irrelevant ads for profit.

 

 
2.可以防止一些内容检索工具，比如过标签、文章检索、最热文章等等。
2. You can prevent some content retrieval tools, such as labels, articles retrieval, hot articles, etc.