檢視用戶如何去瀏覽網(wǎng)頁內(nèi)容的一個關(guān)鍵關(guān)鍵模式，這將有助于指導(dǎo)頁面設(shè)計菩貌，提高用戶的交互行為卢佣。
網(wǎng)頁上的閱讀與你在高中和大學(xué)里所閱讀課本的方式略有不同。如今箭阶，當(dāng)人們在網(wǎng)上發(fā)現(xiàn)他們感興趣的內(nèi)容時虚茶，他們首先會快速瀏覽。用戶已經(jīng)發(fā)展出快速瀏覽信息的習(xí)慣：只關(guān)注對他們而言重要的部分仇参。
眼動跟蹤研究已經(jīng)表明在線閱讀者瀏覽信息是在一種形似字母「F」的模式引導(dǎo)下嘹叫。聽起來有點扯？下面將要解釋這個理論為什么不是隨意的結(jié)論诈乒，以及為什么它對你們的商業(yè)網(wǎng)站有重要影響罩扇。
什么是「F模式」？
如果你覺得了解它的運(yùn)作比較困難怕磨，那么你需要了解暮蹂，它并不是那么顯而易見寞缝，并且，它也不是我們曾經(jīng)所了解的閱讀仰泻，傳統(tǒng)的閱讀習(xí)慣是從上至下荆陆。然而，當(dāng)瀏覽信息集侯，尤其是網(wǎng)頁內(nèi)容的時候被啼，用戶的思維會自動尋找最重要的信息。這就是它的運(yùn)作方式棠枉。
當(dāng)你的用戶來到你的頁面頂部浓体，也就是來到「F」字母的頭部，閱讀你的標(biāo)題和緊隨其后的摘要辈讶，他們會繼而讓焦點回到屏幕左側(cè)命浴，然后關(guān)注點從上至下，直到遇到下一個吸引眼球的標(biāo)題或信息贱除。這里的信息通常屬于他們正在搜索的主題范圍生闲，并且他們將會花時間閱讀這些信息，這就產(chǎn)生了「F」字母的第二條水平線月幌。
一旦這個用戶找到足夠多的他們所想要的信息碍讯，他們將繼續(xù)在這個頁面上瀏覽，即使其他內(nèi)容吸引了他們的眼球而停止了閱讀進(jìn)程扯躺，但他們還是大部分會繼續(xù)移步到你網(wǎng)站的其他頁面內(nèi)容捉兴。
為什么它很重要？
了解這個網(wǎng)頁瀏覽模式對你的商業(yè)運(yùn)作大有助益录语。如果你的網(wǎng)頁布局和內(nèi)容并非符合F模式倍啥，那么用戶也許會浪費(fèi)更多時間去尋找他們所需。如果他們感覺自己浪費(fèi)了太多時間澎埠，或者輕松獲取有價值的信息是不太可能的虽缕，那么他們會離開并尋找一個更容易閱讀的網(wǎng)站。當(dāng)你使用F模式開始計劃你的網(wǎng)頁內(nèi)容失暂，這就能給到用戶他們想要的——即使他們對此過程并不知情。
怎樣讓它為你服務(wù)鳄虱？
F模式不僅可以鼓勵用戶繼續(xù)停留在你的網(wǎng)站弟塞，它也可以讓他們看到網(wǎng)站還會提供哪些內(nèi)容。在你的網(wǎng)頁設(shè)計中使用該布局拙已，就會增加你的網(wǎng)頁使用率决记。
當(dāng)采用這個方法，你的網(wǎng)站將會感覺更加的靈敏倍踪，你會提供用戶真正所需的內(nèi)容系宫。當(dāng)你懂得這個模式并且指導(dǎo)怎樣利用它索昂，你就已經(jīng)可以控制你想要傳遞的信息流。這個研究會告訴你用戶將會停留在哪里扩借，所以你可以設(shè)置內(nèi)容的優(yōu)先級椒惨。當(dāng)你應(yīng)用F模式到你的內(nèi)容中時，可以考慮下面這些建議：
1）首先是最重要的元素
了解到用戶會你的頁面頂部開始瀏覽潮罪，在此考慮網(wǎng)站會提供什么產(chǎn)品康谆、服務(wù)、或者你將提供什么信息嫉到。下一個重要的信息——或者說是你想讓他們附帶了解的信息——就安排在用戶會停留或者仔細(xì)閱讀的地方稍微往下的位置沃暗。
2）創(chuàng)造預(yù)期
你的用戶也許不知道網(wǎng)站內(nèi)容所仰賴F模式，但是他們會想要你提供給他們真正所需要的內(nèi)容何恶。沒有這些孽锥，他們不得不耗費(fèi)更多的時間和精力去搜索獲取。這種對布局的期待將會讓你的用戶再次回到網(wǎng)站進(jìn)行瀏覽细层，并且以正常的速度進(jìn)行閱讀惜辑。
3）引發(fā)與側(cè)邊欄的參與度
你的側(cè)邊欄可以放任何內(nèi)容：相關(guān)文章，鏈接到其他社交網(wǎng)頁或者廣告今艺。在當(dāng)前的網(wǎng)頁當(dāng)中韵丑，側(cè)邊欄可以中止用戶現(xiàn)有的閱讀內(nèi)容，引導(dǎo)他們考慮更多網(wǎng)站相關(guān)的其他業(yè)務(wù)虚缎。
F模式設(shè)計元素
F模式不止對你的文本和文章閱讀有好處撵彻。這是一個可以應(yīng)用到整個網(wǎng)頁設(shè)計的方法。眼動跟蹤研究表明在用戶瀏覽完頁面頂部以后就會繼而將眼睛移往左側(cè)实牡。這意味這陌僵，你的網(wǎng)頁頂部是最重要的。
所以頁頭應(yīng)該是要吸引眼球的创坞。這是用戶到達(dá)你的網(wǎng)頁第一眼會看到的碗短。這個區(qū)域應(yīng)該展示出網(wǎng)站的業(yè)務(wù)，品牌题涨，在此應(yīng)用你的配色方案偎谁。主要的導(dǎo)航欄應(yīng)該置于頂部下方，清晰展現(xiàn)給用戶怎樣去往其他頁面纲堵。
隨后巡雨，剩下的設(shè)計元素放置在頁面左側(cè)。加入一些文字和圖片來營造閱讀的間隙席函，然而吸引用戶回到引人注目的標(biāo)題或頁面頂部铐望。
然而，不要因為這是F模式就忽略頁面的底部。即使你已經(jīng)利用上了兩條水平線正蛙，你仍然希望為繼續(xù)閱讀下去的用戶創(chuàng)建分頁督弓。插入圖片和副標(biāo)題可以截斷文字的長度，也能讓你的網(wǎng)站更具有視覺上的吸引力乒验。
它是怎樣影響業(yè)務(wù)的
你的網(wǎng)站中的這個布局和它所帶來體驗上的易用性會大大增加用戶的便利愚隧。你可以對此模式或布局大加利用，因為它已經(jīng)被證實可以讓更多用戶來到你的網(wǎng)站徊件，并且他們一旦來到這里就會持續(xù)訪問奸攻。
F模式能確保他們首先可以訪問到最重要的信息，而你是可以決定信息重要性的人虱痕。一些成功的網(wǎng)站都應(yīng)用了下面這三項要點睹耐，并且被得到成功認(rèn)可：
1）左上方的LOGO，能讓用戶的眼球來到頁面頂部部翘，提醒用戶你的品牌硝训。
2）右上方的電話號碼或者聯(lián)系信息能讓你的用戶知道如何聯(lián)系你。
3）應(yīng)用F模式的網(wǎng)頁新思，會給用戶一份成熟的頁面向?qū)А?/p>
一份工作參考
沒有人會比你自己更了解你的客戶和精準(zhǔn)的用戶群窖梁。在眼動跟蹤研究發(fā)現(xiàn)當(dāng)用戶瀏覽網(wǎng)站時最多人看到的是哪個區(qū)域以后，F(xiàn)模式就被發(fā)展出來夹囚。
利用這個信息作為一個參考去開發(fā)你的網(wǎng)站和頁面內(nèi)容纵刘。它不需要非常嚴(yán)格的一套模板，而是把它視為一個起點荸哟，確保最重要的內(nèi)容能被注意假哎。
譯后記
F模式對于網(wǎng)頁設(shè)計師來說，或許已經(jīng)不是什么新鮮的規(guī)則鞍历。但是奇怪的是舵抹，我們常常會不自覺陷入“日用而不知”的情景，F(xiàn)模式看起來簡單易懂劣砍，但是實際運(yùn)用起來就會發(fā)現(xiàn)有太多可深入的交互細(xì)節(jié)惧蛹。
比如按鈕到底應(yīng)該靠左還是居中？導(dǎo)航收起來變成漢堡包的菜單還是作為頂部下方的內(nèi)容而出現(xiàn)刑枝？……每一個交互細(xì)節(jié)除了考慮用戶的眼動規(guī)律香嗓，還需要兼顧網(wǎng)頁傳達(dá)的目的、頁面的視覺效應(yīng)以及整體的品牌原則装畅。
不應(yīng)該簡單理解是一個元素放在左邊就一定優(yōu)過右邊靠娱，而是要綜合式地考量所有的元素。對于所有“理論”洁灵，我們都應(yīng)有所警覺饱岸，如果一個判斷過于肯定，一定要想想它的反面加以驗證徽千，從而得出自己的理解苫费。
而對F模式很好理解的部分是，我們都有過繪制表格的經(jīng)驗双抽，如果把表格的表頭和側(cè)邊欄當(dāng)作重要內(nèi)容的話百框，那么制表的思維其實和F模式是可以融會貫通的。表格里的數(shù)據(jù)其實也等同于網(wǎng)頁的內(nèi)容牍汹，只是后者會更豐富一些铐维，可以有文本、圖片慎菲、視頻等等嫁蛇。
我們每個人的閱讀總是有所期待的，對于布局的規(guī)劃一開始就應(yīng)該從用戶的習(xí)慣模式開始露该。尤其是以內(nèi)容傳達(dá)為重點的網(wǎng)頁睬棚。
當(dāng)然也有非內(nèi)容傳達(dá)的網(wǎng)頁，比如有些短期使用的活動頁面解幼，以炫酷而瞬間吸引用戶眼球抑党。但是要作為長期運(yùn)營的網(wǎng)站來說，光是炫酷是無法達(dá)成傳達(dá)目的的撵摆。
而這一切都仰賴一套扎實的已被證實有效的布局原則底靠。F模式，大概就是這些原則當(dāng)中最老實可靠的一個特铝。
原文鏈接：http://uxmag.com/articles/the-f-pattern-understanding-how-users-scan-content
譯文地址：https://www.ui.cn/detail/476996.html
翻譯：飛屋睿
