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

下面是幾個關(guān)于幾個分頁導(dǎo)航的樣式和細節(jié)：

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

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

1：分頁導(dǎo)航的長度

分頁導(dǎo)航既不可過長，又不可過短。過長的分頁導(dǎo)航，加重了用戶的負擔(dān);過短的分頁導(dǎo)航，不能很好地起到導(dǎo)航的作用。

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


　　Google的分頁導(dǎo)航


　　Bing的分頁導(dǎo)航


　　Yahoo的分頁導(dǎo)航


　　百度的分頁導(dǎo)航


　　Amazon的分頁導(dǎo)航


　　淘寶的分頁導(dǎo)航


　　京東的分頁導(dǎo)航

可以看出，電子商務(wù)網(wǎng)站的分頁導(dǎo)航頁碼數(shù)量普遍少于搜索引擎。最主要的原因當(dāng)然是電商網(wǎng)站的搜索結(jié)果數(shù)量遠遠不及搜索引擎。其次，因為電商網(wǎng)站主要是賣東西的，相對于以把信息呈現(xiàn)給用戶為目標(biāo)的搜索引擎來說，它們更愿意讓用戶仔細地瀏覽前面幾頁的商品，而不是引導(dǎo)用戶隨意地點擊任意一個頁面去查看商品。

2：是否需要首末頁導(dǎo)航鏈接

Google、Bing、Yahoo、Amazon、百度、淘寶、京東這幾個網(wǎng)站的分頁導(dǎo)航中都沒有首頁和末頁的鏈接。

Google、Bing、Yahoo 和百度這些搜索引擎沒有首頁和末頁，我們可以理解，因為搜索結(jié)果數(shù)量太大，頁數(shù)太多，所以提供末頁沒有太大的意義。并且他們的分頁導(dǎo)航長度都在10頁以上，而用戶很有可能在10頁以內(nèi)就能夠找到自己想要的信息，即使找不到，也可以通過點擊第1頁方便地回到首頁，所以“首頁”的鏈接用處不大。

而 Amazon、淘寶和京東這種電商網(wǎng)站，用戶的商品信息需求更加個性化，對搜索準(zhǔn)確性的要求不如搜索引擎那么高。所以電商網(wǎng)站的用戶所需要的商品信息更接近于平均分布到各個檢索結(jié)果頁中，而不是像搜索引擎那樣集中在首頁。另外，還有一種可能是，如果用戶翻到一定頁數(shù)時，發(fā)現(xiàn)結(jié)果越來越背離自己的需求，通常會修改搜索條件(如限定男裝、女裝、品牌等)，或者重新搜索。

此外，以上兩類網(wǎng)站的共同點是，搜索結(jié)果里面的鏈接默認會在新窗口中打開，所以，如果用戶瀏覽到后面的頁面時，又想再瀏覽首頁中的商品信息或搜索結(jié)果，可以通過切換窗口來實現(xiàn)(前提是你沒有關(guān)閉窗口的強迫癥)。

3：是否需要自定義頁碼

自定義頁面對選項數(shù)目有限的分頁來說是很常見的。淘寶和京東都提供了這種導(dǎo)航方式。但是，我覺得，在這種信息量很大的頁面上，用戶往往不知道具體頁碼上的具體內(nèi)容，所以不太可能自定義某個頁碼去查看。我們可以把淘寶和京東提供的這種功能理解為對沒有在導(dǎo)航頁碼中放“首頁”鏈接的一種補充。另外，電商網(wǎng)站提供這種自定義頁碼功能，也可以提高排名靠后的商品的曝光度，從電商平臺的角度出發(fā)，這也是一種需要。

4：頁碼數(shù)字的間距

頁碼數(shù)字間距太小，用戶容易誤點擊;間距太大，會增加鼠標(biāo)。在這一點上，Google 似乎做得有些欠佳。出現(xiàn)雙位數(shù)的頁碼后，Google 的分頁導(dǎo)航顯得有些擁擠。我們姑且可以將這理解成是 Google 為了保證每個頁碼數(shù)字都和分頁導(dǎo)航上方的字母o對齊。

關(guān)于網(wǎng)站分頁導(dǎo)航的十個細節(jié)分析,互聯(lián)網(wǎng)的一些事出現(xiàn)兩位數(shù)頁碼后，Google 的頁碼數(shù)字間距太小。

5：鼠標(biāo)響應(yīng)

理想狀況下，鼠標(biāo)劃過或者點擊頁碼時，頁碼應(yīng)該有響應(yīng)。這樣能夠提醒用戶鼠標(biāo)當(dāng)前所劃過或點擊的頁碼。當(dāng)鼠標(biāo)劃過頁碼時，淘寶是將對應(yīng)的小方框加上橘黃色 border，京東是將對應(yīng)的小方框變成藍色，百度和 Bing 是將對應(yīng)的小方框變成灰色，而谷歌是將對應(yīng)的頁碼數(shù)字加上下劃線。當(dāng)鼠標(biāo)點擊時，百度和 Google 會將對應(yīng)的頁碼數(shù)字變?yōu)榧t色。

以上處理方法應(yīng)該都是正確的，但 Google 的處理方式有點讓人不解。給鏈接加上下劃線，本來是 HTML 的默認處理方式，以此來提醒用戶這是一個鏈接，這種方式貌似是萬維網(wǎng)之父 Tim Berners Lee 所定義的。但是，隨著用戶對網(wǎng)頁的熟悉，很多時候即使不加下劃線，用戶也知道那是個鏈接。我記得6月份的時候，新浪就去除了其首頁所有鏈接的下劃線，那時我還真感覺頁面清爽了許多，可沒過多久，它又給加上了。再回過頭來，看 Google 的導(dǎo)航鏈接，鼠標(biāo)放上去的時候會出現(xiàn)下劃線，就連“上一頁”和“下一頁”這兩個鏈接也有下劃線。我個人覺得，這可能是沒有必要的，因為絕大多數(shù)的用戶其實已經(jīng)知道那是一個可以點擊的鏈接了。也許 Google 又是在用這種復(fù)古的風(fēng)格來彰顯與眾不同吧。反正復(fù)古和屌絲就一步之遙。

6：“上一頁”和“下一頁”

“上一頁”和“下一頁”一般分別放在頁碼導(dǎo)航的左端和右端，并且通常會有向左和向右的箭頭來形象化地指引用戶，如 Yahoo、Amazon、百度、淘寶和京東。

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

另外，淘寶和京東還在頁面的右上角提供了簡單的上翻和下翻功能。下面是完整的分頁功能，上面是簡化功能。產(chǎn)品頁下面需要完整的分頁功能很好理解，因為用戶都是瀏覽完該頁產(chǎn)品再翻頁，所以把完整功能置于底部。那什么時候用戶需要在產(chǎn)品頁上面使用分頁功能呢?可能是在用戶不想看產(chǎn)品頁內(nèi)容就翻頁的時候，可能是在用戶想了解自己所處位置的時候。另外由于產(chǎn)品頁上部的分頁模塊常常和產(chǎn)品篩選條件模塊放于一處，所以這里的功能需要盡量簡化、節(jié)約空間。此外，淘寶和京東還在此處顯示了搜索結(jié)果的總頁數(shù)，可能是為用戶提供是否重新輸入檢索詞或者修改搜索條件的決策支持信息。


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


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

7：當(dāng)前所在頁

用戶當(dāng)前所在頁的頁碼應(yīng)該與其它頁碼的樣式有所區(qū)別，以此來提示用戶當(dāng)前所在的位置，便于導(dǎo)航。Google、Bing、Yahoo 和百度都使用了黑色的字體來表示用戶當(dāng)前所在頁的頁碼，京東用了橘黃色的字體來表示，而淘寶將當(dāng)前所在頁的小方框背景設(shè)置為黃色。

另外，當(dāng)前頁應(yīng)該是不可鏈接的，所以鼠標(biāo)放上去之后，應(yīng)該不會變成 hover 狀態(tài)。而在京東的網(wǎng)頁上，鼠標(biāo)放到當(dāng)前頁上面時，當(dāng)前頁會像其它頁碼一樣，背景變成藍色，鼠標(biāo)也會變成手指的形狀，這樣會誤導(dǎo)用戶，以為當(dāng)前頁是可以鏈接的。

值得一提的是新浪微博。新浪微博的默認方式是，隨著用戶向下瀏覽，自動加載兩次，之后再出現(xiàn)分頁。對于大多數(shù)用戶，在閑暇時瀏覽微博，加載兩次的內(nèi)容已經(jīng)能夠滿足他們，對于需要瀏覽更多信息的用戶，也讓他們知道自己到底瀏覽了多少。這種方式無疑更加靈活，既保證了用戶瀏覽信息的連續(xù)性，又提供了快速導(dǎo)航和預(yù)估信息量的作用。


　　新浪微博信息流中的頁碼導(dǎo)航

8：區(qū)分訪問過/未訪問過的頁碼

按照 HTML 的默認設(shè)置，訪問過和未訪問過的鏈接顏色是不同的。但是，上述網(wǎng)站中，只有百度和 Bing 將訪問過和未訪問過的頁碼導(dǎo)航鏈接用顏色區(qū)分出來了。我個人認為做這一區(qū)分是有必要的，尤其是當(dāng)我用搜索引擎搜索信息的時候。

9：導(dǎo)航頁碼中的品牌宣傳

前面提到過，Google 的導(dǎo)航頁碼上方是一個變形的 Google Logo，每個頁碼都對應(yīng) Logo 里面的一個字母o。用戶甚至可以通過點擊這些o來跳轉(zhuǎn)到其對應(yīng)的導(dǎo)航頁碼所在的頁面上去。

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

10：其它

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

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

在原標(biāo)簽頁中打開

聽起來像是再簡單不過的一件事，但確是新手最容易犯錯的地方。可以想象一下如果當(dāng)你點擊“下一頁”“上一頁”這些按鈕時，突然打開一個新的標(biāo)簽頁，如果點擊的太快還有可能打開多個標(biāo)簽頁，不管網(wǎng)站內(nèi)容本身有多好，當(dāng)你反復(fù)的被這樣的分頁困擾時也沒有興趣再瀏覽下去。很多人習(xí)慣在中標(biāo)注新窗口打開，在設(shè)計分頁時就需要額外注意這點。

最后一頁

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

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

跳頁

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

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

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

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

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

準(zhǔn)確而精簡的設(shè)計往往最能得到用戶青睞的。

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

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