詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局發(fā)布者：本站 時(shí)間：2021-12-21 14:12:06
今天我們來重點(diǎn)介紹網(wǎng)頁設(shè)計(jì)中的F式布局。傳統(tǒng)的布局方式，依賴布置視覺線索，“控制”用戶的視覺路徑，相較之下，F(xiàn)式布局更加自然，更加友好。本文將講述一些F式布局的規(guī)則、原理以及設(shè)計(jì)方法。
F式布局簡(jiǎn)介
F式布局是一種很科學(xué)的布局方法，基本原理依據(jù)了大量的眼動(dòng)研究。一般來說，用戶瀏覽網(wǎng)頁的視覺軌跡是這樣的——先看看頂部，然后看看左上角，然后沿著左邊緣順勢(shì)直下….而用戶往往不太注意右邊的信息，這是不是有點(diǎn)像字母F?據(jù)此，我們習(xí)慣性的把重要元素(諸如品牌Logo，導(dǎo)航，行為召喚控件)放在左邊，而右邊一般放置一些對(duì)用戶無關(guān)緊要的廣告信息。
我們來看一下Webdesigntuts+的眼動(dòng)熱點(diǎn)圖：
詳細(xì)解析<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁設(shè)計(jì)</a>中的F式布局,PS教程,
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
這張眼動(dòng)熱點(diǎn)圖展示了用戶瀏覽此網(wǎng)站的視覺軌跡，呈一個(gè)F型。熱區(qū)(途中紅色、黃色、橙色部分)代表用戶注意力最集中的地方。
總結(jié)一下用戶瀏覽網(wǎng)頁的一般模式：
先看看頁面的左上角，了解一下這是什么網(wǎng)站(因此此處適合放置Logo)——“知道是什么”
然后掃描一下頁面的頂部(導(dǎo)航欄，搜索欄)——“了解用法”
下一步，用戶的視線下移，開始閱讀下一行的內(nèi)容。
用戶進(jìn)入“掃描模式”，一旦找到感興趣的內(nèi)容便會(huì)打開。
將此種瀏覽模式以線框圖的形式呈現(xiàn)，形狀如下圖。
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
有個(gè)規(guī)律不容忽視：閱讀一般是從上到下，從左到右的。用戶往往忽視右側(cè)邊的內(nèi)容，大致的掃一眼而已，因此不要在右側(cè)邊下太大功夫。應(yīng)該把內(nèi)容欄放在用戶注意力高度集中的左邊。
綜上所述，按照邏輯，我們得出以下結(jié)論：
品牌標(biāo)志和導(dǎo)航應(yīng)該放在頁面的頂部，這是用戶對(duì)網(wǎng)站的第一印象。
在內(nèi)容結(jié)構(gòu)中，圖片更容易獲得關(guān)注
用戶瀏覽完圖片后，下一個(gè)關(guān)注點(diǎn)便是標(biāo)題。
用戶會(huì)大致的瀏覽文本，但是往往不會(huì)通讀。
將F式布局應(yīng)用到設(shè)計(jì)中
這里我做了一個(gè)小練習(xí)，使用線框圖方法，對(duì)主要元素進(jìn)行了布局。
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
下圖中可以看到，我把網(wǎng)站的主題/宗旨(Mission Statement)放在了導(dǎo)航欄的下面，這樣用戶瀏覽完Logo和導(dǎo)航，就能迅速的了解網(wǎng)站的宗旨.兩欄布局的好處是信息層級(jí)清晰，可方便用戶快速掃描內(nèi)容…主要內(nèi)容欄+輔助側(cè)邊欄
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
挺粗糙的，但是關(guān)鍵點(diǎn)都在，瀏覽此網(wǎng)頁時(shí)只需幾秒鐘，便能獲取該網(wǎng)站的宗旨/主題…
導(dǎo)航欄的作用是引導(dǎo)用戶，讓用戶知道如何轉(zhuǎn)至不同的頁面。
頂部下方的內(nèi)容欄中，將標(biāo)題設(shè)置的非常醒目，用戶瀏覽完圖片后，便能迅速察覺到標(biāo)題的存在…至于文本內(nèi)容吧不做強(qiáng)求。
你們?yōu)g覽這個(gè)頁面的視覺路徑應(yīng)該是這樣的吧?
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
效果還可以是把?完成F式布局后，我們便可以此為基礎(chǔ)，加入一些細(xì)節(jié)性元素。
還有一點(diǎn)值得注意的是F式布局中對(duì)行與行之間距離的控制。(圖中紅線部分)
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
根據(jù)不同的設(shè)計(jì)需求，設(shè)計(jì)師可以適度調(diào)整。如果想要打造一種悠閑的閱讀氛圍，間距可以大一點(diǎn);如果信息量大，可以縮小一點(diǎn)，打造出緊湊的閱讀感。至于閱讀的節(jié)奏感和一致性的保持，請(qǐng)翻閱優(yōu)設(shè)網(wǎng)之前的文章，這里就不做贅述了。
如果頁面無限長(zhǎng)，老這么瀏覽下去，用戶一定會(huì)很煩，感到枯燥，對(duì)不對(duì)?這里可以稍微做一下調(diào)整，加入一點(diǎn)與F式布局規(guī)則“不協(xié)調(diào)”的元素，給閱讀節(jié)奏帶來一些變數(shù)。
詳細(xì)解析網(wǎng)頁設(shè)計(jì)中的F式布局,PS教程,
你看，上圖中那個(gè)圖片欄就是“不協(xié)調(diào)”元素，它的出現(xiàn)有些出人意料、打破了用戶的預(yù)期，這種設(shè)計(jì)適合于那種超長(zhǎng)垂直滾動(dòng)的網(wǎng)頁，這樣用戶就不會(huì)感到枯燥了。
F式布局原理
F式布局能夠奏效的原因，在于F式布局符合用戶的瀏覽習(xí)慣，更自然。符合“從上到下，從左到右”的閱讀模式。
但是這種閱讀模式有利也有弊：
這樣一來，最有價(jià)值的內(nèi)容只能放置在頁面頂部了。有些俗套
文本內(nèi)容無法有效的引起用戶注意，用戶甚至連摘要都懶得讀，看看標(biāo)題就“過”了
網(wǎng)頁過分注重對(duì)“標(biāo)題”和“圖像”的包裝，無疑不符合內(nèi)容至上的原則
在采用F式布局進(jìn)行設(shè)計(jì)師，很多設(shè)計(jì)師感覺自己不像是設(shè)計(jì)師，而想是制造噱頭的“廣告商”。網(wǎng)頁設(shè)計(jì)太具備功利性，只追求一時(shí)的瀏覽量，不遵循“內(nèi)容為王”的原則，很多用戶第一次可能感覺不錯(cuò)，但是看了內(nèi)容后大呼上當(dāng)，可能下一次他們就不會(huì)再次訪問該網(wǎng)頁了。
因此，設(shè)計(jì)師要協(xié)調(diào)好內(nèi)容與布局之間的關(guān)系。這就有點(diǎn)像武俠小說了，內(nèi)容好比內(nèi)力，布局好比招式?；ㄈC腿再漂亮，內(nèi)力深厚的人一招便能“以力破巧”
那么右面的側(cè)邊欄該要怎么設(shè)計(jì)呢?這里給出兩點(diǎn)建議：
1.呈遞相關(guān)內(nèi)容。比如和網(wǎng)站主題相關(guān)的鏈接、廣告，相關(guān)閱讀推薦，社交媒體微件等等。不要為了牟利而放置些低俗的、和內(nèi)容不相干的廣告。
2.可以防止一些內(nèi)容檢索工具，比如過標(biāo)簽、文章檢索、最熱文章等等。
F式布局案例
那么實(shí)際操作起來應(yīng)該怎樣呢?這里提供了一些標(biāo)準(zhǔn)F式布局的網(wǎng)站，一起來看一下吧。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開發(fā)