今天這篇文章,主要介紹「F 型掃視」。讀完后,你會(huì)明白我們到底如何瀏覽網(wǎng)頁(yè),也知道網(wǎng)頁(yè)應(yīng)該如何設(shè)計(jì),才能帶來(lái)更好的體驗(yàn)。
一、什么是「F 型掃視」?
「F 型掃視」是界面閱讀最常見的一種掃視"/>

亚洲精品国产第一综合99久久,免费男女羞羞的视频网站黄色,国产在线精品一区二区高清不卡 ,91福利国产在线在线播放

網(wǎng)站首頁(yè) 網(wǎng)站建設(shè) 推廣運(yùn)營(yíng) 關(guān)于我們 聯(lián)系我們 建站知識(shí) 新聞動(dòng)態(tài) 幫助文檔 客戶案例

網(wǎng)頁(yè)設(shè)計(jì)怎樣利用“F 型掃視”習(xí)慣?

2018年07月16日

閱讀量:


         今天這篇文章,主要介紹「F 型掃視」。讀完后,你會(huì)明白我們到底如何瀏覽網(wǎng)頁(yè),也知道網(wǎng)頁(yè)應(yīng)該如何設(shè)計(jì),才能帶來(lái)更好的體驗(yàn)。


一、什么是「F 型掃視」?
         「F 型掃視」是界面閱讀最常見的一種掃視模式,在有很多內(nèi)容板塊的界面上非常實(shí)用。「F」也可以被理解為「Fast」。大多數(shù)人閱讀界面內(nèi)容時(shí),都采用了「F 型掃視」模式——只需要幾秒,就可以快速將頁(yè)面掃完。「F 型掃視」最早是由尼爾森諾曼集團(tuán)(NNGroup)通過(guò)眼球追蹤實(shí)驗(yàn)提出的,該項(xiàng)實(shí)驗(yàn)記錄了 200 多名用戶閱讀上千個(gè)網(wǎng)頁(yè)的數(shù)據(jù)。實(shí)驗(yàn)結(jié)果發(fā)現(xiàn),用戶的閱讀習(xí)慣相當(dāng)一致,即便是在不同站點(diǎn)和不同閱讀任務(wù)的前提下。實(shí)驗(yàn)對(duì)象的閱讀軌跡看似像字母「F」,并包括以下 3 個(gè)部分:

         首先,人們會(huì)橫向閱讀,通常掃視范圍僅停留在頁(yè)面頂端部分。這一軌跡形成了字母「F」的第一橫。
         然后,我們會(huì)順著頁(yè)面左端縱向閱讀。我們的閱讀重點(diǎn)僅停留在段首其感興趣的部分。發(fā)現(xiàn)感興趣的內(nèi)容后,我們會(huì)再次橫向閱讀,不過(guò)這次橫向閱讀的范圍通常較第一次小。這一軌跡形成了字母「F」的第二橫。
         最后,我們會(huì)再次順著頁(yè)面左端縱向閱讀。

二、為什么用「F 型掃視」?
         通過(guò)「F 型掃視」模式,更容易體現(xiàn)出良好的視覺(jué)層次,從而方便用戶了解界面內(nèi)容。對(duì)大多數(shù)西方用戶來(lái)講,「F 型掃視」模式是非常舒適的,因?yàn)樗麄兊拈喿x習(xí)慣一直以來(lái)都是從上到下、從左至右的。

三、什么時(shí)候用「F 型掃視」最舒服?
         針對(duì)有大量文本的網(wǎng)站,比如博客或新聞?wù)军c(diǎn),「F 型掃視」模式是再好不過(guò)的選擇;在內(nèi)容過(guò)多(特別是文本過(guò)多)的情況下,若頁(yè)面布局是根據(jù)自然掃視模式(即「F 型掃視」)來(lái)設(shè)計(jì)的,用戶反饋會(huì)更好。


四、網(wǎng)頁(yè)應(yīng)該怎樣用「F 型掃視」?


1. 按重要性對(duì)內(nèi)容排序
         在設(shè)計(jì)規(guī)劃頁(yè)面元素時(shí),一定要按重要性對(duì)各項(xiàng)內(nèi)容進(jìn)行排序。通過(guò)排序,你可以清楚地知道你最想讓用戶閱讀的內(nèi)容。這樣一來(lái),你只需要將這些內(nèi)容放在頁(yè)面的「熱點(diǎn)」區(qū)域即可。

2. 設(shè)置預(yù)定期望
         整個(gè)頁(yè)面最開始的一兩段是非常重要的。盡可能將重要內(nèi)容放置在頁(yè)面頂端,從而可以在短時(shí)間內(nèi)讓人們知道網(wǎng)站(或頁(yè)面)是用來(lái)做什么的。根據(jù)「F 型掃視」模式,我們通常會(huì)橫向閱讀頁(yè)面頂端。因此,在頂端區(qū)域設(shè)計(jì)一個(gè)導(dǎo)航欄是個(gè)不錯(cuò)的選擇。用戶掃視頁(yè)面最重要的內(nèi)容只需要幾秒鐘。

3. 設(shè)計(jì)要方便掃讀,而不是閱讀
         設(shè)計(jì)頁(yè)面布局時(shí),要從用戶角度出發(fā)。順著「F 型掃視」的閱讀軌跡,將人們最感興趣的內(nèi)容按重要性放置于相應(yīng)區(qū)域:段首用詞一定要足夠吸引用戶眼球。用戶首先會(huì)閱讀最突出的內(nèi)容(即最具視覺(jué)重量的內(nèi)容)。因此,一定要凸顯重要內(nèi)容的視覺(jué)重量。可以通過(guò)字體排版來(lái)體現(xiàn)文本的重要性,比如高亮文本關(guān)鍵詞;也可以通過(guò)各種顏色突顯某些按鈕。每個(gè)段落只覆蓋一個(gè)觀點(diǎn),并盡可能多地使用項(xiàng)目符號(hào)(即本條左邊的小黑圓點(diǎn))。將最重要的內(nèi)容(比如行為召喚相關(guān)的內(nèi)容)放置在頁(yè)面左右兩端,這也是用戶橫向掃視的起始兩端。當(dāng)他們繼續(xù)往下掃視至下一橫向內(nèi)容時(shí),剛好有幾秒時(shí)間,可以讓他們稍作思考。

4. 好好利用工具欄
         工具欄可以讓人們進(jìn)一步參與交互,好好利用工具欄,可以進(jìn)一步提高用戶參與度。讓希望用戶點(diǎn)擊的任何元素顯得更有特色,盡管它可能和頁(yè)面主要內(nèi)容「迥然不同」,比如廣告,相關(guān)文章列表,社交媒體小組件等等。把它定義為用戶尋找特定內(nèi)容(比如目錄列表,標(biāo)簽群,熱門文章小組件等等)的工具。


5. 避免視覺(jué)疲勞
         「F 型掃視」模式最大的缺點(diǎn),是可能存在的視覺(jué)疲勞。要讓用戶覺(jué)得無(wú)聊,其實(shí)并不難,比如在頁(yè)面加入重復(fù)和相似的內(nèi)容。如果用戶真覺(jué)得無(wú)聊了,那你也不會(huì)得到什么好處。所以,不妨試試在人們掃視范圍內(nèi)加入「出人意料」的元素,從而保持用戶的參與度。此外,將頁(yè)面拆分為左右兩欄——左欄為主要信息,右欄為輔助信息(工具欄),可以進(jìn)一步保持用戶的參與度。整個(gè)界面布局設(shè)計(jì)簡(jiǎn)單,但核心元素都體現(xiàn)了出來(lái)。人們打開頁(yè)面,能夠清晰了解頁(yè)面主要功能,工具欄中也有目錄列表導(dǎo)航,用戶也可以直觀地看到相關(guān)內(nèi)容。通過(guò)頁(yè)面左端方形卡片和引人注目的標(biāo)題,可以吸引用戶關(guān)注。盡管用戶可能對(duì)這些內(nèi)容不感興趣,但至少發(fā)現(xiàn)有趣內(nèi)容的機(jī)會(huì)是存在的。順著字母「F」的第二橫,再加入一些「出人意料」的元素,比如圖片或行為召喚相關(guān)的內(nèi)容,從而進(jìn)一步保持用戶的參與度。

         「F 型掃視」模式是人眼閱讀的自然軌跡。設(shè)計(jì)頁(yè)面時(shí),結(jié)合該模式可以進(jìn)一步優(yōu)化頁(yè)面設(shè)計(jì)。但值得注意的是,最好不要死板地運(yùn)用這個(gè)模式,畢竟它只能算作設(shè)計(jì)的指導(dǎo)原則,而非設(shè)計(jì)模板。它是死的,而人是活的。


文章均為奇跡mu私服專注網(wǎng)站建設(shè)青島網(wǎng)站建設(shè)青島網(wǎng)站建設(shè)公司原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自
http://m.avtb2063.com/faq/606.html

填寫服務(wù)需求或選擇下列套餐服務(wù)。

 PC端網(wǎng)站建設(shè) 600 手機(jī)網(wǎng)站建設(shè) 600 PC+手機(jī)網(wǎng)站建設(shè) 1000 響應(yīng)式網(wǎng)站建設(shè) 1000 外貿(mào)網(wǎng)站建設(shè) 800

* 服務(wù)套餐價(jià)格會(huì)不定時(shí)變化,請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

網(wǎng)站建設(shè)套餐

PC端600元

網(wǎng)站類型
前臺(tái)模板
后臺(tái)管理系統(tǒng)
建站所需時(shí)間
推廣運(yùn)營(yíng)
企業(yè)PC端網(wǎng)站建設(shè)
HTML5+DIV+CSS布局
帝國(guó)CMS(安全穩(wěn)定開源)
1-3個(gè)工作日
保證百度收錄,不包排名
服務(wù)內(nèi)容
1.欄目添加刪除
2.模板微調(diào)
3.產(chǎn)品文章添加(20個(gè)內(nèi))
4.網(wǎng)站數(shù)據(jù)定時(shí)備份
5.SEO關(guān)鍵詞設(shè)置
6.客服、分享、統(tǒng)計(jì)插件
7.7X24技術(shù)支持
贈(zèng)送內(nèi)容
1.COM/NET/CN域名1個(gè)
2.萬(wàn)網(wǎng)或海外1G虛擬空間
3.網(wǎng)站備案
4.免費(fèi)維護(hù)1年
5.簡(jiǎn)單LOGO設(shè)計(jì)
6.三張廣告圖制作

網(wǎng)站建設(shè)套餐

手機(jī)端600元

網(wǎng)站類型
前臺(tái)模板
后臺(tái)管理系統(tǒng)
建站所需時(shí)間
推廣運(yùn)營(yíng)
企業(yè)手機(jī)端網(wǎng)站建設(shè)
HTML5+DIV+CSS布局
帝國(guó)CMS(安全穩(wěn)定開源)
1-3個(gè)工作日
保證百度收錄,不包排名
服務(wù)內(nèi)容
1.欄目添加刪除
2.模板微調(diào)
3.產(chǎn)品文章添加(20個(gè)內(nèi))
4.網(wǎng)站數(shù)據(jù)定時(shí)備份
5.SEO關(guān)鍵詞設(shè)置
6.客服、分享、統(tǒng)計(jì)插件
7.7X24技術(shù)支持
贈(zèng)送內(nèi)容
1.COM/NET/CN域名1個(gè)
2.萬(wàn)網(wǎng)或海外1G虛擬空間
3.網(wǎng)站備案
4.免費(fèi)維護(hù)1年
5.簡(jiǎn)單LOGO設(shè)計(jì)
6.三張廣告圖制作

網(wǎng)站建設(shè)套餐

PC+手機(jī)端1000元

網(wǎng)站類型
前臺(tái)模板
后臺(tái)管理系統(tǒng)
建站所需時(shí)間
推廣運(yùn)營(yíng)
PC+手機(jī)端同步數(shù)據(jù)
HTML5+DIV+CSS布局
帝國(guó)CMS(安全穩(wěn)定開源)
1-3個(gè)工作日
保證百度收錄,不包排名
服務(wù)內(nèi)容
1.欄目添加刪除
2.模板微調(diào)
3.產(chǎn)品文章添加(20個(gè)內(nèi))
4.網(wǎng)站數(shù)據(jù)定時(shí)備份
5.SEO關(guān)鍵詞設(shè)置
6.客服、分享、統(tǒng)計(jì)插件
7.7X24技術(shù)支持
贈(zèng)送內(nèi)容
1.COM/NET/CN域名1個(gè)
2.萬(wàn)網(wǎng)或海外2G虛擬空間
3.網(wǎng)站備案
4.免費(fèi)維護(hù)1年
5.簡(jiǎn)單LOGO設(shè)計(jì)
6.三張廣告圖制作

網(wǎng)站建設(shè)套餐

響應(yīng)式1000元

網(wǎng)站類型
前臺(tái)模板
后臺(tái)管理系統(tǒng)
建站所需時(shí)間
推廣運(yùn)營(yíng)
企業(yè)響應(yīng)式網(wǎng)站建設(shè)
HTML5+DIV+CSS布局
帝國(guó)CMS(安全穩(wěn)定開源)
1-3個(gè)工作日
保證百度收錄,不包排名
服務(wù)內(nèi)容
1.欄目添加刪除
2.模板微調(diào)
3.產(chǎn)品文章添加(20個(gè)內(nèi))
4.網(wǎng)站數(shù)據(jù)定時(shí)備份
5.SEO關(guān)鍵詞設(shè)置
6.客服、分享、統(tǒng)計(jì)插件
7.7X24技術(shù)支持
贈(zèng)送內(nèi)容
1.COM/NET/CN域名1個(gè)
2.萬(wàn)網(wǎng)或海外2G虛擬空間
3.網(wǎng)站備案
4.免費(fèi)維護(hù)1年
5.簡(jiǎn)單LOGO設(shè)計(jì)
6.三張廣告圖制作

網(wǎng)站建設(shè)套餐

英文外貿(mào)800元

網(wǎng)站類型
前臺(tái)模板
后臺(tái)管理系統(tǒng)
建站所需時(shí)間
推廣運(yùn)營(yíng)
英文外貿(mào)網(wǎng)站建設(shè)
HTML5+DIV+CSS布局
帝國(guó)CMS(安全穩(wěn)定開源)
1-3個(gè)工作日
保證百度收錄,不包排名
服務(wù)內(nèi)容
1.欄目添加刪除
2.模板微調(diào)
3.產(chǎn)品文章添加(20個(gè)內(nèi))
4.網(wǎng)站數(shù)據(jù)定時(shí)備份
5.SEO關(guān)鍵詞設(shè)置
6.客服、分享、統(tǒng)計(jì)插件
7.7X24技術(shù)支持
贈(zèng)送內(nèi)容
1.COM/NET/CN域名1個(gè)
2.香港或美國(guó)1G虛擬空間
3.免費(fèi)維護(hù)1年
4.簡(jiǎn)單LOGO設(shè)計(jì)
5.三張廣告圖制作
線上服務(wù)咨詢15906391238填寫需求索取報(bào)價(jià)