善用F式布局讓網頁可讀性更強

　　導語：雖然網頁排版方式千變萬化，但是布局方式通常都遵循著幾種常見的規(guī)則。在諸多布局方式當中，F(xiàn)式布局是可用性較強，且適用范圍較廣的一種。今天的文章同你來探討F式布局在網頁中的運用。

　　F式布局的設計基礎是用戶掃視內容的時候，實現(xiàn)的運動軌跡和字母F相似，而布局匹配這種這種閱讀方式可以讓用戶更快(Fast)地獲取信息，因此得名為F式布局。

　　F式布局從何而來?

　　F式布局源于NNGroup的一項眼動研究項目，他們跟蹤了超過 200 名用戶瀏覽各種網頁時的眼動軌跡，發(fā)現(xiàn)用戶的眼球快速瀏覽網頁時，尤其是在快速瀏覽文字內容的時候，眼球的運動軌跡類似字母F，并且整個運動過程遵循下面三個部分：

　　·用戶先會沿著水平方向瀏覽，優(yōu)先瀏覽內容塊的上部，這個時候的眼動構成了字母F 最上面一橫。

　　·接下來視線會沿著屏幕左側向下垂直掃視，尋找段落中能引起興趣點的內容，當他們發(fā)現(xiàn)引起他們興趣的內容之時，繼續(xù)橫向仔細瀏覽，而通常這些內容對應的視線范圍會比第一次橫向瀏覽的范疇要更小一些，而這個視線軌跡則構成了字母F 中間的一橫。

　　·接下來用戶會將視線移到屏幕左側，繼續(xù)向下瀏覽。

　　我們?yōu)g覽內容的方式被訓練為從左上角開始水平瀏覽，回到左側向下掃視找到興趣點，繼續(xù)橫向瀏覽。

　　NNGroup 的眼動跟蹤研究證明了這一點，紅色的部分是用戶感興趣的區(qū)域，黃色的區(qū)域次之，不感興趣的則為藍色的區(qū)域，灰色的區(qū)域是用戶直接忽略不作停留的部分。

　　顯然，用戶的瀏覽過程并不全是分為三個部分，但是它的模式是沿用下來的。

　　為何要使用F式布局?

　　F式布局能讓你創(chuàng)造出更加富有層次感的設計，這樣的設計更容易為用戶瀏覽和獲取信息。對于世界范圍內絕大多數(shù)的國家和地區(qū)而言，F(xiàn)式布局是非常符合閱讀習慣的。這種規(guī)則使得它可以廣泛運用在UI和網頁設計上。

　　什么時候使用F式布局?

　　諸如新聞和博客這種重文本內容的網站是適合F式布局的，它主要適用于文本的閱讀。

　　CNN 就是使用F式布局的

　　如何運用F式布局?

　　F式布局讓設計師能夠更好控制內容的可見性。

　　1、確定內容的優(yōu)先級

　　如果你對于頁面中內容的輕重緩急有著足夠的了解，那么就可以結合用戶的瀏覽習慣，將重要的內容排布在用戶視線時常停留的位置。讓這些呈現(xiàn)重要內容的“熱點區(qū)域”承載核心的交互。

　　2、設置初始預期

　　文本的前幾段內容是非常之重要的。盡量讓最核心、最重點的內容放置在頁面的頂端，這也是為什么標題、引言和導航欄是如此的重要的原因。

　　用戶能夠在幾秒鐘之內快速讀取內容。

【善用F式布局讓網頁可讀性更強】相關文章：

網頁設計的布局08-13

網頁布局基礎08-10

網頁設計靈動布局之相對自由式示例08-29

常見的網頁布局設計07-25

網頁設計中美麗的布局05-13

關于網頁設計布局的分析09-26

網頁設計的布局的方式有哪些08-06

常見的網頁布局設計有哪些09-11

如何用css進行網頁布局07-06

網頁設計要明確的那些布局細節(jié)09-11