國內外網站案例：關於網站分頁導航的十個細節分析

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

在流覽網頁時，經常會遇到分頁導航的情況。 分頁導航主要有四個作用：告訴使用者要流覽的資訊量;讓使用者快速跳過一些不想看的資訊;便於定位和查找;減少頁面大小，提高載入速度。 此外，分頁導航實際上還給了流覽網頁的使用者一定的停頓，可以讓產品「更有節奏感」，減少使用者流覽的疲勞感。

下面以國內外常見的幾個網站(主要為搜尋引擎和電子商務網站)為例，分別從幾個方面來談一下分頁導航的設計。

1：分頁導航的長度

分頁導航既不可過長，又不可過短。 過長的分頁導航，加重了使用者的負擔;過短的分頁導航，不能很好地起到導航的作用。

淘寶和京東的分頁導航頁碼數量為6，Google、Bing 和 Yahoo 是10。 百度和亞馬遜採用了可變長度的形式。 百度的起始長度為10，隨著頁面的下翻，分頁頁數逐漸增加，最終保持20頁的長度;而 Amazon 最初隻有4頁，最後維持在5頁的數量上。

Google的分頁導航

Bing的分頁導航

Yahoo的分頁導航

百度的分頁導航

Amazon的分頁導航

淘寶的分頁導航

京東的分頁導航

可以看出，電子商務網站的分頁導航頁碼數量普遍少於搜尋引擎。 最主要的原因當然是電商網站的搜尋結果數量遠遠不及搜尋引擎。 其次，因為電商網站主要是賣東西的，相對於以把資訊呈現給使用者為目標的搜尋引擎來說，它們更願意讓使用者仔細地流覽前面幾頁的商品，而不是引導使用者隨意地點擊任意一個頁面去查看商品。

2：是否需要首末頁導航連結

Google、Bing、Yahoo、Amazon、百度、淘寶、京東這幾個網站的分頁導航中都沒有首頁和末頁的連結。

Google、Bing、Yahoo 和百度這些搜尋引擎沒有首頁和末頁，我們可以理解，因為搜尋結果數量太大，頁數太多，所以提供末頁沒有太大的意義。 並且他們的分頁導航長度都在10頁以上，而使用者很有可能在10頁以內就能夠找到自己想要的資訊，即使找不到，也可以通過點擊第1頁方便地回到首頁，所以「首頁」的連結用處不大。

而 Amazon、淘寶和京東這種電商網站，使用者的商品資訊需求更加個人化，對搜索準確性的要求不如搜尋引擎那麼高。 所以電商網站的使用者所需要的商品資訊更接近于平均分佈到各個檢索結果頁中，而不是像搜尋引擎那樣集中在首頁。 另外，還有一種可能是，如果使用者翻到一定頁數時，發現結果越來越背離自己的需求，通常會修改搜尋條件(如限定男裝、女裝、品牌等)，或者重新搜索。

此外，以上兩類網站的共同點是，搜尋結果裡面的連結預設會在新視窗中打開，所以，如果使用者流覽到後面的頁面時，又想再流覽首頁中的商品資訊或搜尋結果，可以通過切換視窗來實現(前提是你沒有關閉視窗的強迫症)。

3：是否需要自訂頁碼

自訂頁面對選項數目有限的分頁來說是很常見的。 淘寶和京東都提供了這種導航方式。 但是，我覺得，在這種資訊量很大的頁面上，使用者往往不知道具體頁碼上的具體內容，所以不太可能自訂某個頁碼去查看。 我們可以把淘寶和京東提供的這種功能理解為對沒有在導航頁碼中放「首頁」連結的一種補充。 另外，電商網站提供這種自訂頁碼功能，也可以提高排名靠後的商品的曝光度，從電商平臺的角度出發，這也是一種需要。

4：頁碼數位的間距

頁碼數位間距太小，使用者容易誤點擊;間距太大，會增加滑鼠。 在這一點上，Google 似乎做得有些欠佳。 出現雙位數的頁碼後，Google 的分頁導航顯得有些擁擠。 我們姑且可以將這理解成是 Google 為了保證每個頁碼數位都和分頁導航上方的字母o對齊。

出現兩位數頁碼後，Google 的頁碼數位間距太小

5：滑鼠回應

理想狀況下，滑鼠劃過或者點擊頁碼時，頁碼應該有回應。 這樣能夠提醒使用者滑鼠當前所劃過或點擊的頁碼。 當滑鼠劃過頁碼時，淘寶是將對應的小方框加上橘黃色 border，京東是將對應的小方框變成藍色，百度和 Bing 是將對應的小方框變成灰色，而谷歌是將對應的頁碼數位加上底線。 當滑鼠點擊時，百度和 Google 會將對應的頁碼數位變為紅色。

以上處理方法應該都是正確的，但 Google 的處理方式有點讓人不解。 給連結加上底線，本來是 HTML 的預設處理方式，以此來提醒使用者這是一個連結，這種方式貌似是萬維網之父 Tim Berners Lee 所定義的。 但是，隨著使用者對網頁的熟悉，很多時候即使不加底線，使用者也知道那是個連結。 我記得6月份的時候，新浪就去除了其首頁所有連結的底線，那時我還真感覺頁面清爽了許多，可沒過多久，它又給加上了。 再回過頭來，看 Google 的導航連結，滑鼠放上去的時候會出現底線，就連「上一頁」和「下一頁」這兩個連結也有底線。 我個人覺得，這可能是沒有必要的，因為絕大多數的使用者其實已經知道那是一個可以點擊的連結了。 也許 Google 又是在用這種復古的風格來彰顯與眾不同吧。 反正復古和屌絲就一步之遙。

6：「上一頁」和「下一頁」

「上一頁」和「下一頁」一般分別放在頁碼導航的左端和右端，並且通常會有向左和向右的箭頭來形象化地指引使用者，如 Yahoo、Amazon、百度、淘寶和京東。

「上一頁」和「下一頁」的位置也很重要。 位置最好相對固定，讓使用者可以很方便地使用上一頁和下一頁來進行頁面切換。 在這一點上，上述幾個網站都做得不錯。 而百度的前 20 頁分頁頁碼會隨著頁碼的下翻而向右移動，這一點體驗並不是太好。 可能百度的出發點是想讓使用者在20頁之內方便地進行頁面的切換。

另外，淘寶和京東還在頁面的右上角提供了簡單的上翻和下翻功能。 下面是完整的分頁功能，上面是簡化功能。 產品頁下面需要完整的分頁功能很好理解，因為使用者都是流覽完該頁產品再翻頁，所以把完整功能置於底部。 那什麼時候使用者需要在產品頁上面使用分頁功能呢?可能是在使用者不想看產品頁內容就翻頁的時候，可能是在使用者想瞭解自己所處位置的時候。 另外由於產品頁上部的分頁模組常常和產品篩選準則模組放于一處，所以這裡的功能需要儘量簡化、節約空間。 此外，淘寶和京東還在此處顯示了搜尋結果的總頁數，可能是為使用者提供是否重新輸入檢索詞或者修改搜尋條件的決策支援資訊。

淘寶頁面右上角的簡單翻頁功能

京東頁面右上角的簡單翻頁功能

7：當前所在頁

使用者當前所在頁的頁碼應該與其它頁碼的樣式有所區別，以此來提示使用者當前所在的位置，便於導航。 Google、Bing、Yahoo 和百度都使用了黑色的字體來表示使用者當前所在頁的頁碼，京東用了橘黃色的字體來表示，而淘寶將當前所在頁的小方框背景設置為黃色。

另外，當前頁應該是不可連結的，所以滑鼠放上去之後，應該不會變成 hover 狀態。 而在京東的網頁上，滑鼠放到當前頁上面時，當前頁會像其它頁碼一樣，背景變成藍色，滑鼠也會變成手指的形狀，這樣會誤導使用者，以為當前頁是可以連結的。

值得一提的是新浪微博。 新浪微博的預設方式是，隨著使用者向下流覽，自動載入兩次，之後再出現分頁。 對於大多數使用者，在閒暇時流覽微博，載入兩次的內容已經能夠滿足他們，對於需要流覽更多資訊的使用者，也讓他們知道自己到底流覽了多少。 這種方式無疑更加靈活，既保證了使用者流覽資訊的連續性，又提供了快速導航和預估資訊量的作用。

新浪微博資訊流中的頁碼導航

8：區分訪問過/未訪問過的頁碼

按照 HTML 的預設設置，訪問過和未訪問過的連結顏色是不同的。 但是，上述網站中，只有百度和 Bing 將訪問過和未訪問過的頁碼導航連結用顏色區分出來了。 我個人認為做這一區分是有必要的，尤其是當我用搜尋引擎搜索資訊的時候。

9：導航頁碼中的品牌宣傳

前面提到過，Google 的導航頁碼上方是一個變形的 Google Logo，每個頁碼都對應 Logo 裡面的一個字母o。 使用者甚至可以通過點擊這些o來跳轉到其對應的導航頁碼所在的頁面上去。

另外，配色也可以和品牌宣傳結合起來。 Google 的導航頁碼的藍色和其Logo 中的G和g的顏色很相近，百度的導航頁碼上方顯示的是百度的Logo，京東的導航頁碼中使用的橘黃色和藍色是其 Logo 的主要顏色，淘寶的導航頁碼中使用的橘黃色也是其 Logo 以及網站的主要顏色。

10：其它

在進行產品設計的時候，我們一切都是從使用者需求的角度出發來進行思考和設計的。 但是，產品是同時滿足使用者需求和公司需求(通常是盈利)的東西，所以，有時候，不得不考慮其它的一些東西。 比如，在你流覽某些新聞資訊類網站的時候，你會發現，每一頁的內容只有可憐的一兩段，然後就又得翻頁，一篇不長的文章，被分割成了十幾頁。 這種為了增加網站 PV 而故意分割文章增加頁數吸引使用者點擊的行為真的是令人髮指。

恰好最近在進行產品設計的時候也遇到了類似的問題，所以把這一問題梳理了一下。

　　更多精彩內容，請關注互聯網分析沙龍微信：techxue 每天為您推送最新、最熱乾貨!