傳統(tǒng)的布局方式，依賴布置視覺線索，“控制”用戶的視覺路徑，相較之下，F(xiàn)式布局更加自然，更加友好。本文將講述一些F式布局的規(guī)則、原理以及設(shè)計(jì)方法。紹網(wǎng)頁(yè)設(shè)計(jì)中的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.

 
來(lái)源:網(wǎng)頁(yè)教學(xué)網(wǎng)
Source: web site teaching network

 
F式布局簡(jiǎn)介
An introduction to the f-type layout

 

 
F式布局是一種很科學(xué)的布局方法，基本原理依據(jù)了大量的眼動(dòng)研究。一般來(lái)說(shuō)，用戶瀏覽網(wǎng)頁(yè)的視覺軌跡是這樣的——先看看頂部，然后看看左上角，然后沿著左邊緣順勢(shì)直下….而用戶往往不太注意右邊的信息，這是不是有點(diǎn)像字母F?據(jù)此，我們習(xí)慣性的把重要元素（諸如品牌Logo，導(dǎo)航，行為召喚控件）放在左邊，而右邊一般放置一些對(duì)用戶無(wú)關(guān)緊要的廣告信息。
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.

 

 
我們來(lái)看一下Webdesigntuts+的眼動(dòng)熱點(diǎn)圖：
Let's take a look at Webdesigntuts + eye heat map:

 

 
這張眼動(dòng)熱點(diǎn)圖展示了用戶瀏覽此網(wǎng)站的視覺軌跡，呈一個(gè)F型。熱區(qū)（途中紅色、黃色、橙色部分）代表用戶注意力最集中的地方。
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.
總結(jié)一下用戶瀏覽網(wǎng)頁(yè)的一般模式：
Summarize the general patterns of user browsing:

 

 
先看看頁(yè)面的左上角，了解一下這是什么網(wǎng)站（因此此處適合放置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".

 

 
然后掃描一下頁(yè)面的頂部（導(dǎo)航欄，搜索欄）——“了解用法”
Then scan the top of the page (navigation bar, search bar) -- "understand usage"
下一步，用戶的視線下移，開始閱讀下一行的內(nèi)容。
Next, the user's eyes move down and begin to read the next line.
用戶進(jìn)入“掃描模式”，一旦找到感興趣的內(nèi)容便會(huì)打開。
The user enters the "scanning mode", and once the content of interest is found, it opens.

 
將此種瀏覽模式以線框圖的形式呈現(xiàn)，形狀如下圖。
This view is presented as a wireframe, as shown in the figure below.

 
有個(gè)規(guī)律不容忽視：閱讀一般是從上到下，從左到右的。用戶往往忽視右側(cè)邊的內(nèi)容，大致的掃一眼而已，因此不要在右側(cè)邊下太大功夫。應(yīng)該把內(nèi)容欄放在用戶注意力高度集中的左邊。
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.

 

 
綜上所述，按照邏輯，我們得出以下結(jié)論：
To sum up, according to the logic, we draw the following conclusions:

 

 
品牌標(biāo)志和導(dǎo)航應(yīng)該放在頁(yè)面的頂部，這是用戶對(duì)網(wǎng)站的第一印象。
Brand logos and navigation should be placed at the top of the page, which is the user's first impression of the site.
在內(nèi)容結(jié)構(gòu)中，圖片更容易獲得關(guān)注
In content structures, images are more likely to gain attention
用戶瀏覽完圖片后，下一個(gè)關(guān)注點(diǎn)便是標(biāo)題。
After the user has viewed the image, the next focus is the title.
用戶會(huì)大致的瀏覽文本，但是往往不會(huì)通讀。
Users browse the text roughly, but they don't usually read it.

 

 
將F式布局應(yīng)用到設(shè)計(jì)中
Apply the F layout to the design

 

 
這里我做了一個(gè)小練習(xí)，使用線框圖方法，對(duì)主要元素進(jìn)行了布局。
I've done a little exercise here, using wireframes, and layout the main elements.

 
下圖中可以看到，我把網(wǎng)站的主題/宗旨（Mission Statement）放在了導(dǎo)航欄的下面，這樣用戶瀏覽完Logo和導(dǎo)航，就能迅速的了解網(wǎng)站的宗旨.兩欄布局的好處是信息層級(jí)清晰，可方便用戶快速掃描內(nèi)容…主要內(nèi)容欄+輔助側(cè)邊欄
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

 
挺粗糙的，但是關(guān)鍵點(diǎn)都在，瀏覽此網(wǎng)頁(yè)時(shí)只需幾秒鐘，便能獲取該網(wǎng)站的宗旨/主題…
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...

 

 
導(dǎo)航欄的作用是引導(dǎo)用戶，讓用戶知道如何轉(zhuǎn)至不同的頁(yè)面。
The role of navigation is to guide users and let users know how to switch to different pages.

 

 
頂部下方的內(nèi)容欄中，將標(biāo)題設(shè)置的非常醒目，用戶瀏覽完圖片后，便能迅速察覺到標(biāo)題的存在…至于文本內(nèi)容吧不做強(qiáng)求。
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.

 

 
你們?yōu)g覽這個(gè)頁(yè)面的視覺路徑應(yīng)該是這樣的吧？
So you're looking at the visual path of this page, right?

 
效果還可以是把？完成F式布局后，我們便可以此為基礎(chǔ)，加入一些細(xì)節(jié)性元素。
Can it be the same effect? After the F layout is completed, we can build on this and add some details.

 

 
還有一點(diǎn)值得注意的是F式布局中對(duì)行與行之間距離的控制。（圖中紅線部分）
Another thing to note is the control of the distance between rows and rows in the F layout. (red line)

 
根據(jù)不同的設(shè)計(jì)需求，設(shè)計(jì)師可以適度調(diào)整。如果想要打造一種悠閑的閱讀氛圍，間距可以大一點(diǎn)；如果信息量大，可以縮小一點(diǎn)，打造出緊湊的閱讀感。至于閱讀的節(jié)奏感和一致性的保持，請(qǐng)翻閱優(yōu)設(shè)網(wǎng)之前的文章，這里就不做贅述了。
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.

 

 
如果頁(yè)面無(wú)限長(zhǎng)，老這么瀏覽下去，用戶一定會(huì)很煩，感到枯燥，對(duì)不對(duì)？這里可以稍微做一下調(diào)整，加入一點(diǎn)與F式布局規(guī)則“不協(xié)調(diào)”的元素，給閱讀節(jié)奏帶來(lái)一些變數(shù)。
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.

 
你看，上圖中那個(gè)圖片欄就是“不協(xié)調(diào)”元素，它的出現(xiàn)有些出人意料、打破了用戶的預(yù)期，這種設(shè)計(jì)適合于那種超長(zhǎng)垂直滾動(dòng)的網(wǎng)頁(yè)，這樣用戶就不會(huì)感到枯燥了。
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式布局符合用戶的瀏覽習(xí)慣，更自然。符合“從上到下，從左到右”的閱讀模式。
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:

 
這樣一來(lái)，最有價(jià)值的內(nèi)容只能放置在頁(yè)面頂部了。有些俗套
In this way, the most valuable content can only be placed at the top of the page. Some of the mould
文本內(nèi)容無(wú)法有效的引起用戶注意，用戶甚至連摘要都懶得讀，看看標(biāo)題就“過(guò)”了
Text content can't effectively attract users, and users can't even bother to read a summary, and read the title

 

 
網(wǎng)頁(yè)過(guò)分注重對(duì)“標(biāo)題”和“圖像”的包裝，無(wú)疑不符合內(nèi)容至上的原則
The web page focuses too much on the "title" and "image" packaging, which undoubtedly does not conform to the principle of content supremacy

 
在采用F式布局進(jìn)行設(shè)計(jì)師，很多設(shè)計(jì)師感覺自己不像是設(shè)計(jì)師，而想是制造噱頭的“廣告商”。網(wǎng)頁(yè)設(shè)計(jì)太具備功利性，只追求一時(shí)的瀏覽量，不遵循“內(nèi)容為王”的原則，很多用戶第一次可能感覺不錯(cuò)，但是看了內(nèi)容后大呼上當(dāng)，可能下一次他們就不會(huì)再次訪問該網(wǎng)頁(yè)了。
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.

 

 
因此，設(shè)計(jì)師要協(xié)調(diào)好內(nèi)容與布局之間的關(guān)系。這就有點(diǎn)像武俠小說(shuō)了，內(nèi)容好比內(nèi)力，布局好比招式?；ㄈC腿再漂亮，內(nèi)力深厚的人一招便能“以力破巧”
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".

 

 
那么右面的側(cè)邊欄該要怎么設(shè)計(jì)呢？這里給出兩點(diǎn)建議：
So how do you design the sidebar on the right? Here are two Suggestions:

 

 
1.呈遞相關(guān)內(nèi)容。比如和網(wǎng)站主題相關(guān)的鏈接、廣告，相關(guān)閱讀推薦，社交媒體微件等等。不要為了牟利而放置些低俗的、和內(nèi)容不相干的廣告。
1. Submit relevant content. For example, links, ads, related reading recommendations, social media widgets, etc. Don't place vulgar, irrelevant ads for profit.

 

 
2.可以防止一些內(nèi)容檢索工具，比如過(guò)標(biāo)簽、文章檢索、最熱文章等等。
2. You can prevent some content retrieval tools, such as labels, articles retrieval, hot articles, etc.