可以在线看av的网站,洗澡BBWBBWBBWBBW毛,大屁股熟女一区二区三区,久久久亚洲精华液精华液精华液

歡迎來(lái)到海淘科技官網(wǎng) 官方微信 官方微博 平面活動(dòng)官網(wǎng)
微信

網(wǎng)絡(luò)傳播媒介服務(wù)提供商

熱線電話

021-62677988

海淘新聞
首頁(yè) > 新聞列表 > 網(wǎng)頁(yè)設(shè)計(jì)排版F型布局可讀性更強(qiáng)

網(wǎng)頁(yè)設(shè)計(jì)排版F型布局可讀性更強(qiáng)

發(fā)布時(shí)間: 2017-04-07 17:57

海淘科技編者為你推出《網(wǎng)頁(yè)設(shè)計(jì)排版F型布局可讀性更強(qiáng)》。

雖然網(wǎng)頁(yè)排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見(jiàn)的規(guī)則。在諸多布局方式當(dāng)中,F(xiàn)式布局是可用性較強(qiáng),且適用范圍較廣的一種。今天的文章同你來(lái)探討F式布局在網(wǎng)頁(yè)中的運(yùn)用。

F式布局的設(shè)計(jì)基礎(chǔ)是用戶掃視內(nèi)容的時(shí)候,實(shí)現(xiàn)的運(yùn)動(dòng)軌跡和字母F相似,而布局匹配這種這種閱讀方式可以讓用戶更快(Fast)地獲取信息,因此得名為F式布局。

F式布局從何而來(lái)

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

用戶先會(huì)沿著水平方向?yàn)g覽,優(yōu)先瀏覽內(nèi)容塊的上部,這個(gè)時(shí)候的眼動(dòng)構(gòu)成了字母F 最上面一橫。

接下來(lái)視線會(huì)沿著屏幕左側(cè)向下垂直掃視,尋找段落中能引起興趣點(diǎn)的內(nèi)容,當(dāng)他們發(fā)現(xiàn)引起他們興趣的內(nèi)容之時(shí),繼續(xù)橫向仔細(xì)瀏覽,而通常這些內(nèi)容對(duì)應(yīng)的視線范圍會(huì)比第一次橫向?yàn)g覽的范疇要更小一些,而這個(gè)視線軌跡則構(gòu)成了字母F 中間的一橫。

接下來(lái)用戶會(huì)將視線移到屏幕左側(cè),繼續(xù)向下瀏覽。


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

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

顯然,用戶的瀏覽過(guò)程并不全是分為三個(gè)部分,但是它的模式是沿用下來(lái)的。

為何要使用F式布局

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

什么時(shí)候使用F式布局

諸如新聞和博客這種重文本內(nèi)容的網(wǎng)站是適合F式布局的,它主要適用于文本的閱讀。

CNN 就是使用F式布局的

如何運(yùn)用F式布局

F式布局讓設(shè)計(jì)師能夠更好控制內(nèi)容的可見(jiàn)性。

1、確定內(nèi)容的優(yōu)先級(jí)

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

2、設(shè)置初始預(yù)期

文本的前幾段內(nèi)容是非常之重要的。盡量讓最核心、最重點(diǎn)的內(nèi)容放置在頁(yè)面的頂端,這也是為什么標(biāo)題、引言和導(dǎo)航欄是如此的重要的原因。

用戶能夠在幾秒鐘之內(nèi)快速讀取內(nèi)容。

3、為速讀而設(shè)計(jì)

  • 用戶通常不會(huì)一個(gè)字一個(gè)詞地閱讀文章,而是通過(guò)意群來(lái)獲取內(nèi)容,所以,你需要將可能包含用戶感興趣內(nèi)容的意群按照F式布局來(lái)排布,這樣可以盡可能高效地呈現(xiàn)內(nèi)容:
  • 段落以新鮮有趣、關(guān)鍵核心的詞匯開(kāi)頭。
  • 用戶會(huì)優(yōu)先查看優(yōu)先級(jí)最高的元素(也就是視覺(jué)重量最重的區(qū)域)。因此,在文本為主的網(wǎng)站中,你應(yīng)該突出文本本身的重要性(比如關(guān)鍵詞),并且借助配色等元素,強(qiáng)化按鈕等涉及關(guān)鍵交互的元素的存在感。
  • 每個(gè)段落陳述一件事情,并盡量有針對(duì)性地陳述。
  • 將最重要的元素(諸如CTA按鈕等)置于最左側(cè)或者最右側(cè),也就是用戶閱讀的起始部分。這個(gè)時(shí)候,用戶通常會(huì)有閱讀的停頓,而這個(gè)時(shí)刻可以讓他們有額外的時(shí)間來(lái)考慮并且選擇下一步的交互。

4、善用側(cè)邊欄

側(cè)邊欄通??梢詭椭脩羯钊氲较乱粋€(gè)層級(jí),用戶的交互也更加的深入:

提供用戶想要看到的內(nèi)容,而不是廣告、相關(guān)文章和小控件這樣的東西。

將它設(shè)計(jì)成為用戶找到特定內(nèi)容的工具。最常見(jiàn)的設(shè)計(jì)是目錄列表,標(biāo)簽云和“最多點(diǎn)擊”文章列表。相關(guān)的網(wǎng)頁(yè)設(shè)計(jì)排版技巧,可點(diǎn)擊直接瀏覽。

5、避免無(wú)聊的布局

F式布局最大的問(wèn)題是它會(huì)讓整個(gè)頁(yè)面看起來(lái)比較無(wú)聊。相似而重復(fù)的內(nèi)容出現(xiàn)在整個(gè)頁(yè)面的不同位置,用戶很可能在相似的布局中快速感到疲倦。所以,你需要?jiǎng)?chuàng)造一些和打破尷尬格局的元素,讓用戶不斷調(diào)整注意力,持續(xù)的閱讀。


結(jié)語(yǔ)

當(dāng)然,F(xiàn)式布局是遵循人類瀏覽信息的趨勢(shì)和習(xí)慣的,它能幫你優(yōu)化布局與結(jié)構(gòu),你并不一定非得這么用。有趣的設(shè)計(jì)和良好的可讀性同等重要,有的時(shí)候兼顧兩者并不難。更多的網(wǎng)頁(yè)設(shè)計(jì)行業(yè)動(dòng)態(tài)供你閱讀。

以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你推出《網(wǎng)頁(yè)設(shè)計(jì)排版F型布局可讀性更強(qiáng)》的全部?jī)?nèi)容。找網(wǎng)頁(yè)設(shè)計(jì)服務(wù),可直接聯(lián)系海淘科技客服。

相關(guān)文章:

版權(quán)所有 @ 2007-2023上海海淘信息科技有限公司 滬ICP備11050025號(hào)-4