網(wǎng)頁三種布局方式和視線瀏覽路徑探索

按照基本的閱讀模式，用戶研究領(lǐng)域的先驅(qū)尼爾森集團(tuán)，曾對這種用戶行為進(jìn)行過深入的研究，為設(shè)計(jì)者和可用性設(shè)計(jì)人員提供了更好的素材和設(shè)計(jì)基礎(chǔ)。簡單地說，當(dāng)人們訪問某網(wǎng)站時(shí)，尤其是第一次訪問網(wǎng)站時(shí)，他們通常不會仔細(xì)地瀏覽所有的內(nèi)容，而是快速瀏覽，尋找能吸引他們注意的信息，這些信息正是他們一直留在網(wǎng)站的原因。他們通過眼睛運(yùn)動測試和各種實(shí)驗(yàn)，發(fā)現(xiàn)游客的視覺瀏覽模式可以歸納為幾種典型的模式。

設(shè)計(jì)者StevenBradley在他的文章中總結(jié)了三種常見的模式：古騰堡式、Z型和F型。

古騰堡式：
對于信息結(jié)構(gòu)層次不太清楚的網(wǎng)頁，用戶經(jīng)常使用古騰堡式瀏覽模式，用戶瀏覽頁面內(nèi)容時(shí)，整個(gè)視線路徑是一個(gè)大號Z，其中最開始的兩個(gè)視覺駐留點(diǎn)就在頁頭上。

Z圖形模式：
也不難理解，用戶從上到下，視線沿Z字形來回掃視，用戶會左右快速掃視，視線的起點(diǎn)是左上角，行跨頂部一欄到右上角，然后向下延伸。

F圖形模式：
或者F圖形的布局，我們會更熟悉。這是尼爾森諾曼Group研究中最典型的閱讀模式。類型為F的瀏覽模式只是遵循一般的視覺瀏覽趨勢，從而優(yōu)化布局結(jié)構(gòu)。但你不必完全完全遵守它，因?yàn)檫@僅僅是一個(gè)指導(dǎo)方針，并非一個(gè)標(biāo)準(zhǔn)的模板。雖然諸如古騰堡圖、Z模式和F模式布局等模式都表明眼睛在設(shè)計(jì)中有一條自然的路徑，但事實(shí)上它們只是指大文本塊控制的設(shè)計(jì)，而且?guī)缀鯖]有層次。

若此描述的是您的設(shè)計(jì)，則3個(gè)模式中的任何一個(gè)都會對重要信息的位置提出建議。您也可以考慮這些模式，這樣用戶就可以對您的設(shè)計(jì)進(jìn)行掃描，并放置元素，讓用戶進(jìn)入他們的路徑。當(dāng)你開始增加不同視覺分量的元素，眼睛就會穿過你的設(shè)計(jì)路徑。如有必要，可選擇增強(qiáng)Gutenburg、F或Z模式，但不受其限制。

不要試圖將您的設(shè)計(jì)放入描述的模式中，而是要通過一系列重點(diǎn)和設(shè)計(jì)過程，確定您想讓用戶看到所需的信息，從而讓您的眼睛了解您的信息層次，這是你唯一需要用的模式。