雖然網(wǎng)頁(yè)布局不斷變化，但布局通常遵循幾個(gè)常見(jiàn)規(guī)則。在眾多布局方法中，F(xiàn)風(fēng)格的布局是更實(shí)用和廣泛適用的布局方法之一。今天的文章將與您探討在網(wǎng)頁(yè)中使用F風(fēng)格的布局。

F風(fēng)格布局的設(shè)計(jì)基于以下事實(shí)：當(dāng)用戶掃描內(nèi)容時(shí)，運(yùn)動(dòng)軌跡類似于字母F，并且匹配這種讀取模式的布局允許用戶更快地（快速）獲得信息，因此名稱F型布局。 。

　F式布局從何而來(lái)?

F風(fēng)格的布局源于NNGroup的一個(gè)引人注目的研究項(xiàng)目。他們跟蹤了200多名瀏覽各種網(wǎng)頁(yè)的用戶的眼球運(yùn)動(dòng)，并發(fā)現(xiàn)當(dāng)用戶的眼球快速瀏覽網(wǎng)頁(yè)時(shí)，尤其是在快速瀏覽文本內(nèi)容時(shí)。眼球的運(yùn)動(dòng)類似于字母F，整個(gè)運(yùn)動(dòng)遵循以下三個(gè)部分：

·用戶將首先在水平方向上瀏覽，并優(yōu)先瀏覽內(nèi)容塊的上部。此時(shí)，眼球運(yùn)動(dòng)構(gòu)成了字母F的頂部。

·那么視線將垂直向下平移在屏幕的左側(cè)，尋找會(huì)引起興趣的段落中的內(nèi)容。當(dāng)他們找到他們感興趣的內(nèi)容時(shí)，他們繼續(xù)水平瀏覽，并且通常對(duì)應(yīng)于內(nèi)容的視線It將小于第一水平視圖，并且該視線構(gòu)成字母F之間的交叉。 。

·接下來(lái)，用戶將視線移動(dòng)到屏幕的左側(cè)并繼續(xù)向下瀏覽。

我們?yōu)g覽內(nèi)容的方式是訓(xùn)練從左上角水平開始，向左移動(dòng)以向下看以找到感興趣的點(diǎn)，并繼續(xù)水平瀏覽。

NNGroup的眼動(dòng)追蹤研究證明了這一點(diǎn)。紅色部分是用戶感興趣的區(qū)域，黃色區(qū)域是第二個(gè)，不感興趣的區(qū)域是藍(lán)色區(qū)域。灰色區(qū)域是用戶直接忽略不停的部分。

顯然，用戶的瀏覽過(guò)程并非全部分為三個(gè)部分，而是使用其模型。

　為何要使用F式布局?

F風(fēng)格的布局允許您創(chuàng)建更加分層的設(shè)計(jì)，使用戶更容易瀏覽和獲取信息。對(duì)于世界上大多數(shù)國(guó)家和地區(qū)而言，F(xiàn)風(fēng)格的布局非常適合閱讀習(xí)慣。此規(guī)則使其可廣泛用于UI和Web設(shè)計(jì)。

　什么時(shí)候使用F式布局?

具有大量文本的新聞和博客等網(wǎng)站適用于F風(fēng)格的布局，主要適用于文本閱讀。

CNN正在使用F風(fēng)格的布局

　如何運(yùn)用F式布局?

F風(fēng)格的布局使設(shè)計(jì)人員能夠更好地控制內(nèi)容的可見(jiàn)性。

　　1、確定內(nèi)容的優(yōu)先級(jí)

如果您對(duì)頁(yè)面內(nèi)容有很好的理解，可以結(jié)合用戶的瀏覽習(xí)慣，在用戶的視線中安排重要內(nèi)容。讓這些呈現(xiàn)重要內(nèi)容的“熱點(diǎn)”帶來(lái)核心互動(dòng)。

　2、設(shè)置初始預(yù)期

文本的前幾段非常重要。嘗試將最核心和最重要的內(nèi)容放在頁(yè)面頂部，這就是標(biāo)題，引號(hào)和導(dǎo)航欄非常重要的原因。

用戶可以在幾秒鐘內(nèi)快速閱讀內(nèi)容。

　3、為速讀而設(shè)計(jì)

用戶通常不會(huì)一次讀取一個(gè)單詞，但是使用該組來(lái)獲取內(nèi)容，因此您需要在F樣式布局中排列可能包含用戶內(nèi)容的感興趣的組，以便它們可以像可能。含量：

·段落以一個(gè)新鮮，有趣，關(guān)鍵的核心詞匯開頭。

·用戶將優(yōu)先考慮優(yōu)先級(jí)最高的元素（即視覺(jué)權(quán)重最大的區(qū)域）。因此，在基于文本的網(wǎng)站中，您應(yīng)該突出顯示文本本身的重要性（例如關(guān)鍵字），并使用顏色匹配等元素來(lái)增強(qiáng)元素的存在，例如涉及關(guān)鍵交互的按鈕。

·每個(gè)段落陳述一件事，并盡可能做出有針對(duì)性的陳述。

·將最重要的元素（如CTA按鈕等）放在左側(cè)或右側(cè)，這是用戶閱讀的開始。此時(shí)，用戶通常會(huì)暫停閱讀，這一刻他們可以有更多時(shí)間考慮并選擇下一次互動(dòng)。

　4、善用側(cè)邊欄

側(cè)邊欄通?？梢詭椭脩羯钊氲较乱患?jí)別，并且用戶交互更深入：

·提供用戶想要看到的內(nèi)容，而不是廣告，相關(guān)文章和小部件。

·將其設(shè)計(jì)為用戶查找特定內(nèi)容的工具。最常見(jiàn)的設(shè)計(jì)是目錄列表，標(biāo)簽云和“最大點(diǎn)擊”。文章列表。

5、避免無(wú)聊的布局

F風(fēng)格布局的最大問(wèn)題在于它使整個(gè)頁(yè)面看起來(lái)很無(wú)聊。類似且重復(fù)的內(nèi)容出現(xiàn)在整個(gè)頁(yè)面的不同位置，并且用戶可能很快厭倦了類似的布局。因此，您需要?jiǎng)?chuàng)建一些能夠打破枷鎖的元素，讓用戶不斷調(diào)整注意力并繼續(xù)閱讀。

　結(jié)語(yǔ)

當(dāng)然，F(xiàn)風(fēng)格的布局遵循人類瀏覽信息的趨勢(shì)和習(xí)慣。它可以幫助您優(yōu)化布局和結(jié)構(gòu)。你不必使用它。有趣的設(shè)計(jì)與良好的可讀性同樣重要，有時(shí)候處理這??兩者并不困難。

« 案例研究：移動(dòng)應(yīng)用程序的UI設(shè)計(jì)流程 | 《從0建站，90天關(guān)鍵詞百度進(jìn)前5》啟動(dòng)課程 »