網頁設計技巧:網頁設計中的F式布局

來源:互聯網
上載者:User

文章描述:今天我們來重點介紹網頁設計中的F式布局。傳統的布局方式,依賴布置視覺線索,“控制”使用者的視覺路徑,相較之下,F式布局更加自然,更加友好。本文將講述一些F式布局的規則、原理以及設計方法。

網頁設計中的F式布局

今天我們來重點介紹網頁設計中的F式布局。傳統的布局方式,依賴布置視覺線索,“控制”使用者的視覺路徑,相較之下,F式布局更加自然,更加友好。本文將講述一些F式布局的規則、原理以及設計方法。

F式布局簡介

F式布局是一種很科學的布局方法,基本原理依據了大量的眼動研究。一般來說,使用者瀏覽網頁的視覺軌跡是這樣的——先看看頂部,然後看看左上方,然後沿著左邊緣順勢直下….而使用者往往不太注意右邊的資訊,這是不是有點像字母F?據此,我們習慣性的把重要元素(諸如品牌Logo,導航,行為召喚控制項)放在左邊,而右邊一般放置一些對使用者無關緊要的廣告資訊。

我們來看一下Webdesigntuts+的眼動熱點圖:


這張眼動熱點圖展示了使用者瀏覽此網站的視覺軌跡,呈一個F型。熱區(途中紅色、黃色、橙色部分)代表使用者注意力最集中的地方。
總結一下使用者瀏覽網頁的一般模式:

先看看頁面的左上方,瞭解一下這是什麼網站(因此此處適合放置Logo)——“知道是什麼”
然後掃描一下頁面的頂部(導覽列,搜尋欄)——“瞭解用法”
下一步,使用者的視線下移,開始閱讀下一行的內容。
使用者進入“掃描模式”,一旦找到感興趣的內容便會開啟。

將此種瀏覽模式以線框圖的形式呈現,形狀如下圖。

有個規律不容忽視:閱讀一般是從上到下,從左至右的。使用者往往忽視右側邊的內容,大致的掃一眼而已,因此不要在右側邊下太大功夫。應該把內容欄放在使用者注意力高度集中的左邊。

綜上所述,按照邏輯,我們得出以下結論:

品牌標誌和導航應該放在頁面的頂部,這是使用者對網站的第一印象。
在內容結構中,圖片更容易獲得關注
使用者瀏覽完圖片後,下一個關注點便是標題。
使用者會大致的瀏覽文本,但是往往不會通讀。

將F式布局應用到設計中

這裡我做了一個小練習,使用線框圖方法,對主要元素進行了布局。

下圖中可以看到,我把網站的主題/宗旨(Mission Statement)放在了導覽列的下面,這樣使用者瀏覽完Logo和導航,就能迅速的瞭解網站的宗旨.兩欄布局的好處是資訊層級清晰,可方便使用者快速掃描內容…主要內容欄+輔助側邊欄

挺粗糙的,但是關鍵點都在,瀏覽此網頁時只需幾秒鐘,便能擷取該網站的宗旨/主題…

導覽列的作用是引導使用者,讓使用者知道如何轉至不同的頁面。

頂部下方的內容欄中,將標題設定的非常醒目,使用者瀏覽完圖片後,便能迅速察覺到標題的存在…至於常值內容吧不做強求。

你們瀏覽這個頁面的視覺路徑應該是這樣的吧?

效果還可以是把?完成F式布局後,我們便可以此為基礎,加入一些細節性元素。

還有一點值得注意的是F式布局中對行與行之間距離的控制。(圖中紅線部分)

根據不同的設計需求,設計師可以適度調整。如果想要打造一種悠閑的閱讀氛圍,間距可以大一點;如果資訊量大,可以縮小一點,打造出緊湊的閱讀感。至於閱讀的節奏感和一致性的保持,請翻閱優設網之前的文章,這裡就不做贅述了。

如果頁面無限長,老這麼瀏覽下去,使用者一定會很煩,感到枯燥,對不對?這裡可以稍微做一下調整,加入一點與F式布局規則“不協調”的元素,給閱讀節奏帶來一些變數。

你看,上圖中那個圖片欄就是“不協調”元素,它的出現有些出人意料、打破了使用者的預期,這種設計適合於那種超長垂直滾動的網頁,這樣使用者就不會感到枯燥了。

F式布局原理

F式布局能夠奏效的原因,在於F式布局符合使用者的瀏覽習慣,更自然。符合“從上到下,從左至右”的閱讀模式。

但是這種閱讀模式有利也有弊:

這樣一來,最有價值的內容只能放置在頁面頂部了。有些俗套
常值內容無法有效引起使用者注意,使用者甚至連摘要都懶得讀,看看標題就“過”了
網頁過分注重對“標題”和“映像”的封裝,無疑不符合內容至上的原則

在採用F式布局進行設計師,很多設計師感覺自己不像是設計師,而想是製造噱頭的“廣告商”。網頁設計太具備功利性,只追求一時的瀏覽量,不遵循“內容為王”的原則,很多使用者第一次可能感覺不錯,但是看了內容後大呼上當,可能下一次他們就不會再次訪問該網頁了。

因此,設計師要協調好內容與布局之間的關係。這就有點像武俠小說了,內容好比內力,布局好比招式。花拳繡腿再漂亮,內力深厚的人一招便能“以力破巧”

那麼右面的側邊欄該要怎麼設計呢?這裡給出兩點建議:

      1.呈遞相關內容。比如和網站主題相關的連結、廣告,相關閱讀推薦,社交媒體微件等等。不要為了牟利而放置些低俗的、和內容不相干的廣告。
      2.可以防止一些內容檢索工具,比如過標籤、文章檢索、最熱文章等等。

F式布局案例

那麼實際操作起來應該怎樣呢?這裡提供了一些標準F式布局的網站,一起來看一下吧。

DesignSnack.com

The LAtimes.com 在節奏控制方面做的不錯

Kickstarter

Phototuts  (對於這個廣告的亂入我也很無語!)

SquareSpace’s Product Tour 側邊欄放置了文章檢索,很好的想法,很方便使用者。

 

總結

不管設計趨勢怎麼變,F式布局暗藏的原理不會過時,因為這是使用者長期的習慣。

或者說,F式布局只是一個幌子,本文的目的是為了強化大家對使用者長期閱讀習慣的理解——“從上到下,從左至右”,儘管這有點老生長談,但是經過本文形象化的剖析,你是否也有所感悟了呢?對於節奏的切分,你又產生了什麼新的看法?

迷人的映像、具有噱頭的標題僅僅是花招,內容才是王道,如何結合,如何兩者兼而有之,設計師需要走得更遠。

讓布局不僅僅是一種方法,我們可以看的更遠,融入一些使用者體驗設計項目。嘗試一下,讓你的設計不斷“升級”。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。