關於網站分頁導航的十個細節分析

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

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

　　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 狀態。而在京東的網頁上，鼠標放到當前頁上面時，當前頁會像其它頁碼一樣，背景變成藍色，鼠標也會變成手指的形狀，這樣會誤導用戶，以為當前頁是可以鏈接的。

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