DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：Above the fold是一個平面設計術語，通常指報紙版面上第一版折疊線以上的重要閱讀部分。在Web領域，一般是指首頁第一屏你所能看到的、不需要向下滾動的那部分內容區域。

原文：The myth of the page fold：evidence from user testing

在此文中，我們試圖打破page fold給我們帶來的困惑，並總結出一些確保fold以下的內容能被有效展示的建議。

首先，什麼是fold？

Above the fold是一個平面設計術語，通常指報紙版面上第一版折疊線以上的重要閱讀部分。在Web領域，一般是指首頁第一屏你所能看到的、不需要向下滾動的那部分內容區域。

（譯者注：Above the fold這個詞組來自紙質報紙，報紙送到家、通過自動販售機或報攤出售的時候，為了節省空間一般都會折起來，這樣只能看到一半內容，報紙會在這一半版面上絞盡腦 汁，爭取更大銷量。above the fold就是這一半絞盡腦汁的內容，而fold就是這道折痕。如果below the fold，內容自然就會差一些。這也很好的解釋了為什麼很多報紙頭版的下半部分都是廣告。此段注釋摘自：http://www.yummyux.com/?p=54）

為什麼不用擔心fold？

用戶告訴我們，他們不介意滾動屏幕。從用戶測試的行為觀察中我們也驗證了這一點。我們發現用戶很自然地在頁面上做很長的滾動來尋找他們想找的內容。一個適合快速掃視的第一屏頁面能夠有效地的展示品牌而不用擔心用戶看不到fold以下的部分：

BBC，Play，Amazon.co.uk和New York Times網站頁面的fold相對位置。

從用戶測試中尋找真相

當我們在cxpartners進行用戶測試時，我們會利用眼動跟蹤技術。眼動跟蹤可以讓我們了解用戶看到了什麼。之後，我們將獲得的數據制作成一系列的熱區圖。熱區圖可以展示出一組用戶的視覺焦點集合。

滾動條可用於揭示fold以下的內容長度

從熱區圖上我們經常可以看到在滾動條上有一個很亮的熱點。這表明滾動條通常被用來揭示頁面的長度，用戶期望頁面能滾動。該熱區圖展示如下：

在fold以上有更少的內容有助於促進fold以下部分的浏覽

以下圖片來自於最近我們為Bristol Airport做的一項眼動研究。下圖展示了兩種不同的主頁設計風格。從中我們驚奇地發現在fold上有更少內容的頁面（一個大的內容塊、相對小的2個內容塊），在fold以下的部分吸引了更多的浏覽。

左側的圖片在fold的上方更擁擠一些，而右側的則相對清爽一點。

什麼時候用戶不浏覽fold下方的內容

如我在前言裡提到的，只碰到過3次用戶在fold以下部分幾乎沒有點擊。這3個案例都有著相同的原因。

一種情況就像去年我們給First Choice做的用戶測試一樣。頁面很長，但用戶並沒有滾動頁面的操作。

藍色水平線是妨礙用戶滾動的原因。

很長的藍色“Accommodation”通欄標題扮演了障礙的角色。這是很普遍的情況，突顯的水平分割線不利於吸引用戶滾動。

First Choice目前已經改進了設計，讓內容顯示在fold之上。

在fold之上的圖片庫暗示在fold下面還有內容。

促進滾動的設計建議

最後，我們提出3點建議來確保fold以下的內容可見：

1. 少即是多：不要試圖將所有的內容放到fold上方。良好地利用空白和圖片能促進用戶浏覽更多的內容。
2. 生硬的水平線不利於滾動頁面：但這並不意味著完全不要通欄的水平線元素。讓一小部分內容在fold處可見有助於刺激用戶滾動頁面。
3. 避免使用內嵌的滾動條：浏覽器的滾動條是一個頁面信息量的提示器。而內嵌的iFrame和其他包含滾動條的元素會打破這種提示。這也會導致內容不可見。

作者於2009年10月9日10點更新：

做一些澄清。在我們的用戶測試環境中，我們給用戶呈現的浏覽尺寸是1024×740。因此平均的頁面fold在700 px左右。

我們的研究表明：有效的顯示區域還是fold以上的部分，這並不令人驚訝。而本文想表達的觀點是：從現實數據上看用戶確實會滾動頁面。在有滾動的線索且沒有滾動設計障礙的情況下，用戶會滾動頁面。

作者於2009年10月9日13點更新：

Richie Lee make a really good point below 有有關fold以下內容的視覺線索提示。

這裡有一些關於電子商務商品頁面和表單fold的內容：

• What people see before they buy: Design guidelines for e-commerce product pages with eyetracking data
• Web form design guidelines: an eyetracking study