傳統的布局方式，依賴布置視覺線索，“控制”用戶的視覺路徑，相較之下，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.

 

 
因此，設計師要協調好內容與布局之間的關系。這就有點像武俠小說了，內容好比內力，布局好比招式?；ㄈC腿再漂亮，內力深厚的人一招便能“以力破巧”
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.