網站制作之什么是分頁導航

在博客、雜志甚至是大多數站點中，分頁的點擊次數可能比搜索還要多，因為在很多時候，訪客并沒有明確自己的需求，只是在網頁中一頁接著一頁的瀏覽信息，如果在分頁上有良好的用戶體驗同時又能引導訪客進行瀏覽，就能大大增加網站制作的黏性。但在很多站點中，分頁并沒有得到足夠多的重視，即便是花時間來制作分頁也不過是基于圖標的樣式和設計，對分頁組件的整體理念并沒有清晰的認識。

下面是幾個關于幾個分頁導航的樣式和細節：

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

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

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 頁分頁頁碼會隨著頁碼的下翻而向右移動，這一點體驗并不是太好?？赡馨俣鹊某霭l點是想讓用戶在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 而故意分割文章增加頁數吸引用戶點擊的行為真的是令人發指。

在這之前我們首先要明白的是“什么是分頁導航”。在搜索引擎的搜索結果頁中，“下一頁”、“上一頁”、“2”、“3”這樣的鏈接就是一個分頁組件，如果用戶在第一頁沒有找到自己需要的信息則會下一頁下一頁地反復瀏覽頁面，當然，如果用戶迫切的需要找到一段時間以前的信息，也可能選擇跳頁，良好的分頁設計就是能夠在最少的時間內幫助用戶到達他需要的頁面。這其中包括一些基本的分頁設計原則和技巧，雖然它們很微小但卻常常成為新手最容易忽略的問題：

在原標簽頁中打開

聽起來像是再簡單不過的一件事，但確是新手最容易犯錯的地方?？梢韵胂笠幌氯绻斈泓c擊“下一頁”“上一頁”這些按鈕時，突然打開一個新的標簽頁，如果點擊的太快還有可能打開多個標簽頁，不管網站內容本身有多好，當你反復的被這樣的分頁困擾時也沒有興趣再瀏覽下去。很多人習慣在中標注新窗口打開，在設計分頁時就需要額外注意這點。

最后一頁

在百度的搜索結果頁和淘寶中，都能發現他們并不提供直接跳轉到最后一頁，一方面是數據本身很大不利于計算，一方面則是考慮到排名的有利性。在用戶瀏覽時如果多出一個最后一頁，我想很多人在反復找不到自己需要的信息也會從后往前找，但是在具有排名性的搜索結果中最好不要提供最后一頁的選項，這樣才能夠規定用戶必須是從前向后。想象一下如果存在“最后一頁”的按鈕，根據排名來算最后一頁的信息肯定是低質的，當用戶直接跳轉到最后一頁時會大大影響體驗，對百度來說也不好在最后一頁再搞上競價。

當然這也是根據行業不同而有所區別的，比如一些資源網站，提供最后一頁跳頁等等翻頁功能可能會對用戶的瀏覽有幫助，如果你考慮是否要放置這樣一個按鈕也要結合實際的網站類型，并不是說取消“最后一頁”的按鈕就是最好的選擇。

跳頁

有過瀏覽論壇經驗的朋友能發現在論壇中都會出現“電梯”“跳往幾樓”之類的按鈕，這有些類似于搜索的自定義選擇，如果用戶對他的信息檢索排頁方式不滿意或者清楚的知道自己需要的信息大約在哪一頁就會使用“跳頁”，但也不是說跳頁就是必須要有的功能，比如淘寶有按時間排列按銷售排列這樣的功能，跳頁就能很好的展示商品，而搜索引擎則只是為了保證信息按質量和相關度排列，所以盡可能的簡化操作取消跳頁，他們的目的在于讓用戶從前幾頁中獲取信息。

在添加跳頁時也需要考慮用戶的感受，特別是跳頁后的確定按鈕是否能夠友好的點擊到（不少論壇都很難點擊），當激活跳頁輸入框時，按下Enter鍵要也可以觸發事件，在瀏覽一定的頁面之后才出現跳頁輸入框等等，用戶雖然不會直觀的明白你所有的細節，但他們能感受到一個網站是“好”還是“壞”。
快速返回首頁

通常處理快速返回首頁的辦法是，在瀏覽到較多的頁面時，將“1”代表的第一頁獨立出來，和最近展示的幾個頁碼放在一起，用戶當然知道這里的“1”就是直接跳往第一頁。實際上這只有在列表頁面和較多的展示內容時才會有所體驗，很多開發者喜歡直接放上一個“首頁”按鈕，但相比較而言，在瀏覽之后才出現“1”這樣的設計更能給用戶好感。因為這樣的“1”按鈕在第一頁時是默認不可點擊作為頁碼顯示，而“首頁”這樣的按鈕如果頻繁出現則會給用戶造成選擇上的困難，當你在一排中放上多個按鈕，即便是每個按鈕上都有明確的文字，也是在讓用戶選擇，一個成功和具有高度用戶體驗的網站的要點就是，讓用戶盡快的明白自己要做什么，哪里才需要自己點擊。

有的開發者也注意到幾乎所有的搜索引擎都沒有返回第一頁的按鈕，因為搜索引擎是按相關性排列的，當你瀏覽超過5頁時可能這個搜索詞就與你的預期結果有一定差距，這時用戶會選擇搜索引擎在分頁旁邊推薦的“相關搜索”和其他關鍵詞進入其他頁面。
整體的平衡性

當你留給分頁組件一個足夠大的區域時，你可能想設計擁有“上一頁”、“下一頁”、“跳頁”等等按鈕，在瀏覽多個頁面時也給予用戶選擇第一頁的權利，但要注意這時不能再展示過多的頁碼。想像一下，一個頁面上有近十個頁碼，同時又有這些功能性的按鈕，會嚴重干擾用戶的選擇。比如提供了前后各5頁的展示還有跳頁，當用戶想要往后跳轉7頁時就有很多種選擇，他既可以輸入7來跳頁，又可以先往后翻5頁，也能先點擊下一頁瀏覽再點擊頁碼跳頁等等，這樣的猶豫對于用戶來說會很煩躁，有時候并不是留給用戶的選擇越多越好。

準確而精簡的設計往往最能得到用戶青睞的。

說起來這也不過是網站用戶體驗中的一小部分，我也沒有系統的收集各方面的資料分析，只是分享一些自己的經驗看法。仔細想想這些細節給用戶帶來的感受時，我更覺得開發者并不能只專注代碼、運營、設計，要為用戶考慮的更多，畢竟網站還是做給訪客的，并不能看作開發者自娛自樂的產品。

對一些純編程、后端、算法工作者轉向前端或建站之類的工作來說，可能對代碼傾注的注意力過大而導致網站太專業化，在同行業里固然是不錯的作品甚至是藝術品，但對大眾用戶來說則并沒有良好的體驗。分頁上的整體理念不過是站點的一個縮影，真正能拿出來說的干貨并不多，只是借由這細微的一點來談談用戶體驗而已。