?小伙伴們大家好??

最近在上公開(kāi)課中聽(tīng)到大神總講到F模型，可能一些童鞋跟我一樣不是太熟悉，于是我便上網(wǎng)搜索了一番改执，也結(jié)合原文翻譯终蒂，將這個(gè)模型的來(lái)龍去脈做了一個(gè)梳理突那，加強(qiáng)我們更深層的理解猫缭，也希望對(duì)不了解的童鞋有幫助。

本文共1505字，需要閱讀時(shí)間約4分鐘~

一、F型視覺(jué)模型是什么

F型視覺(jué)模型是尼爾森于2006年通過(guò)報(bào)告形式提出的，2017年該團(tuán)隊(duì)在網(wǎng)站又更新了此模型的相關(guān)實(shí)驗(yàn)結(jié)果。

一聽(tīng)名字可能有的童鞋會(huì)覺(jué)得很高深莫測(cè)，實(shí)質(zhì)上非常容易理解，是指用戶第一次瀏覽頁(yè)面的時(shí)候，視線通常會(huì)以字母F的形狀觀看頁(yè)面內(nèi)容，尤其是大面積文章的時(shí)候，如下圖：

用戶的關(guān)注點(diǎn)著重放在左邊棺克，閱讀前幾行時(shí)視線會(huì)形成F的第一條橫纱皆，閱讀第二部分視線會(huì)縮短铛楣，就形成第二條橫勿侯，最后兵钮，用戶會(huì)以垂直的視線瀏覽后面的內(nèi)容葱轩，形成F左側(cè)的豎（如圖中，并非完美的F，而是整體呈F型）评架。

二浙芙、為什么會(huì)呈現(xiàn)F型

根本原因是人們的“懶”導(dǎo)致南窗。Kara Pernice（尼爾森·諾曼集團(tuán)的高級(jí)副總裁）在《文本掃描模式：眼動(dòng)證據(jù)》中提到：在網(wǎng)絡(luò)中敌买，人們并不會(huì)閱讀每個(gè)單詞，常用習(xí)慣方式是：掃描。

尤其是文章沒(méi)有主次標(biāo)題或者沒(méi)有吸引力的信息引導(dǎo)時(shí)，用戶會(huì)遵循自己最省力的路徑來(lái)瀏覽內(nèi)容铺韧；他們?cè)L問(wèn)網(wǎng)頁(yè)僅僅只是找到想要的答案料仗，而并不是研究?jī)?nèi)容氛改，所以輕掃自然而然便取代了逐字閱讀澈段，前幾行左側(cè)內(nèi)容看得多，而右側(cè)內(nèi)容和頁(yè)面靠后部分便看得少充择，通常情況下便形成大體的F型观挎。

三缓升、F型模式帶來(lái)的弊端歧寺，設(shè)計(jì)師如何解決奴艾？

這種習(xí)慣性模式會(huì)導(dǎo)致用戶只關(guān)注左側(cè)偏上方內(nèi)容，許多重要的內(nèi)容都會(huì)被忽視掉。

怎么解決？這就需要發(fā)揮設(shè)計(jì)師的作用眠菇，設(shè)計(jì)合理有效的樣式引導(dǎo)用戶去閱讀怖侦。

1、使用主次標(biāo)題，與內(nèi)容做區(qū)分：

這一點(diǎn)與層狀蛋糕(Kara Pernice提出)的觀點(diǎn)一致一罩，排列結(jié)構(gòu)類似于千層蛋糕欲逃，一層二層三層… ?據(jù)Kara Pernice研究表明竭望，這種模式是目前掃描網(wǎng)頁(yè)最有效的方式影钉，用戶更容易找到他們想要找的信息肉微。

下圖是夾層蛋糕模式下的眼動(dòng)實(shí)驗(yàn)結(jié)果：

從9位研究參與者那里獲得的分層蛋糕眼動(dòng)圖表明铁孵，小標(biāo)題（和按鈕）更能引起參與者的注意溉浙。

例如新聞知識(shí)類App列表頁(yè)互躬，其結(jié)構(gòu)是標(biāo)題+圖片的瀑布流展示坎背，主標(biāo)題簡(jiǎn)要概括急膀，字號(hào)加粗加大呜呐，用戶通過(guò)掃描標(biāo)題來(lái)發(fā)現(xiàn)感興趣的內(nèi)容喜鼓，進(jìn)而再去閱讀相關(guān)正文邦尊。

2捍掺、頁(yè)面最重要的信息要放在前面：

我認(rèn)為，這一點(diǎn)不僅針對(duì)的是文章內(nèi)容孽椰，也針對(duì)功能布局，重要的功能盡量放在整個(gè)頁(yè)面上方霎终，最次要的內(nèi)容放在最下方。

3、相關(guān)內(nèi)容進(jìn)行分組：

就是格式塔接近原則，把功能相關(guān)的內(nèi)容整合在一個(gè)模塊企蹭，整體頁(yè)面模塊化，模塊與模塊之間有一定的間距由蘑，這樣可以有效減少用戶界面上的視覺(jué)凌亂感裳擎。如下圖：

4启涯、使用標(biāo)簽或者顏色區(qū)分：

例如下面的頁(yè)面

5宏所、同級(jí)信息流使用列表符號(hào)或者數(shù)字序號(hào)來(lái)展示：

如下方設(shè)計(jì)的對(duì)比

6、簡(jiǎn)明扼要：刪除不必要的信息：?

總結(jié)：F型視覺(jué)模型本質(zhì)上就是由于頁(yè)面沒(méi)有有效引導(dǎo)而引發(fā)摊溶，所以如果要提高用戶的視覺(jué)體驗(yàn)爬骤，就需要我們通過(guò)優(yōu)化樣式去突出重點(diǎn)，有效引導(dǎo)用戶去瀏覽哪些內(nèi)容莫换。

其實(shí)通過(guò)梳理霞玄，我們可以發(fā)現(xiàn)很多理論本質(zhì)上都是貫連的，如F型其解決方法就是尼爾森十大交互原則中“易取和簡(jiǎn)約原則”的具體延伸拉岁，其中也貫連著格式塔原則坷剧，都是換湯不換藥，最主要是看我們?nèi)绾卧趯?shí)際工作中喊暖，知其源頭惫企，學(xué)以致用，讓我們的設(shè)計(jì)有理有據(jù)陵叽！

好啦雅任，今天分享到這里

謝謝閱讀，我們共同進(jìn)步~ 筆芯~

覺(jué)得有用的話就轉(zhuǎn)發(fā)給更多有需要的人吧~ 咨跌，公眾號(hào)【胖小魚(yú)設(shè)計(jì)小棧】硼婿，歡迎大家關(guān)注锌半。

參考文獻(xiàn)：

https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/