詳細解析網(wǎng)頁(yè)設計中的F式布局發(fā)布者：本站     時(shí)間：2021-12-21 14:12:06

今天我們來(lái)重點(diǎn)介紹網(wǎng)頁(yè)設計中的F式布局。傳統的布局方式，依賴(lài)布置視覺(jué)線(xiàn)索，“控制”用戶(hù)的視覺(jué)路徑，相較之下，F式布局更加自然，更加友好。本文將講述一些F式布局的規則、原理以及設計方法。

F式布局簡(jiǎn)介

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

我們來(lái)看一下Webdesigntuts+的眼動(dòng)熱點(diǎn)圖：

詳細解析<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>中的F式布局,PS教程,

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

這張眼動(dòng)熱點(diǎn)圖展示了用戶(hù)瀏覽此網(wǎng)站的視覺(jué)軌跡，呈一個(gè)F型。熱區(途中紅色、黃色、橙色部分)代表用戶(hù)注意力最集中的地方。

總結一下用戶(hù)瀏覽網(wǎng)頁(yè)的一般模式：

先看看頁(yè)面的左上角，了解一下這是什么網(wǎng)站(因此此處適合放置Logo)——“知道是什么”

然后掃描一下頁(yè)面的頂部(導航欄，搜索欄)——“了解用法”

下一步，用戶(hù)的視線(xiàn)下移，開(kāi)始閱讀下一行的內容。

用戶(hù)進(jìn)入“掃描模式”，一旦找到感興趣的內容便會(huì )打開(kāi)。

將此種瀏覽模式以線(xiàn)框圖的形式呈現，形狀如下圖。

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

有個(gè)規律不容忽視：閱讀一般是從上到下，從左到右的。用戶(hù)往往忽視右側邊的內容，大致的掃一眼而已，因此不要在右側邊下太大功夫。應該把內容欄放在用戶(hù)注意力高度集中的左邊。

綜上所述，按照邏輯，我們得出以下結論：

品牌標志和導航應該放在頁(yè)面的頂部，這是用戶(hù)對網(wǎng)站的第一印象。

在內容結構中，圖片更容易獲得關(guān)注

用戶(hù)瀏覽完圖片后，下一個(gè)關(guān)注點(diǎn)便是標題。

用戶(hù)會(huì )大致的瀏覽文本，但是往往不會(huì )通讀。

將F式布局應用到設計中

這里我做了一個(gè)小練習，使用線(xiàn)框圖方法，對主要元素進(jìn)行了布局。

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

下圖中可以看到，我把網(wǎng)站的主題/宗旨(Mission Statement)放在了導航欄的下面，這樣用戶(hù)瀏覽完Logo和導航，就能迅速的了解網(wǎng)站的宗旨.兩欄布局的好處是信息層級清晰，可方便用戶(hù)快速掃描內容…主要內容欄+輔助側邊欄

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

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

導航欄的作用是引導用戶(hù)，讓用戶(hù)知道如何轉至不同的頁(yè)面。

頂部下方的內容欄中，將標題設置的非常醒目，用戶(hù)瀏覽完圖片后，便能迅速察覺(jué)到標題的存在…至于文本內容吧不做強求。

你們?yōu)g覽這個(gè)頁(yè)面的視覺(jué)路徑應該是這樣的吧?

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

效果還可以是把?完成F式布局后，我們便可以此為基礎，加入一些細節性元素。

還有一點(diǎn)值得注意的是F式布局中對行與行之間距離的控制。(圖中紅線(xiàn)部分)

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

根據不同的設計需求，設計師可以適度調整。如果想要打造一種悠閑的閱讀氛圍，間距可以大一點(diǎn);如果信息量大，可以縮小一點(diǎn)，打造出緊湊的閱讀感。至于閱讀的節奏感和一致性的保持，請翻閱優(yōu)設網(wǎng)之前的文章，這里就不做贅述了。

如果頁(yè)面無(wú)限長(cháng)，老這么瀏覽下去，用戶(hù)一定會(huì )很煩，感到枯燥，對不對?這里可以稍微做一下調整，加入一點(diǎn)與F式布局規則“不協(xié)調”的元素，給閱讀節奏帶來(lái)一些變數。

詳細解析網(wǎng)頁(yè)設計中的F式布局,PS教程,

你看，上圖中那個(gè)圖片欄就是“不協(xié)調”元素，它的出現有些出人意料、打破了用戶(hù)的預期，這種設計適合于那種超長(cháng)垂直滾動(dòng)的網(wǎng)頁(yè)，這樣用戶(hù)就不會(huì )感到枯燥了。

F式布局原理

F式布局能夠奏效的原因，在于F式布局符合用戶(hù)的瀏覽習慣，更自然。符合“從上到下，從左到右”的閱讀模式。

但是這種閱讀模式有利也有弊：

這樣一來(lái)，最有價(jià)值的內容只能放置在頁(yè)面頂部了。有些俗套

文本內容無(wú)法有效的引起用戶(hù)注意，用戶(hù)甚至連摘要都懶得讀，看看標題就“過(guò)”了

網(wǎng)頁(yè)過(guò)分注重對“標題”和“圖像”的包裝，無(wú)疑不符合內容至上的原則

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

因此，設計師要協(xié)調好內容與布局之間的關(guān)系。這就有點(diǎn)像武俠小說(shuō)了，內容好比內力，布局好比招式?；ㄈC腿再漂亮，內力深厚的人一招便能“以力破巧”

那么右面的側邊欄該要怎么設計呢?這里給出兩點(diǎn)建議：

1.呈遞相關(guān)內容。比如和網(wǎng)站主題相關(guān)的鏈接、廣告，相關(guān)閱讀推薦，社交媒體微件等等。不要為了牟利而放置些低俗的、和內容不相干的廣告。

2.可以防止一些內容檢索工具，比如過(guò)標簽、文章檢索、最熱文章等等。

F式布局案例

那么實(shí)際操作起來(lái)應該怎樣呢?這里提供了一些標準F式布局的網(wǎng)站，一起來(lái)看一下吧。