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

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

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

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

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

分頁導(dǎo)航既不可過長，又不可過短。過長的分頁導(dǎo)航，加重了用戶的負(fù)擔(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ù)量遠(yuǎn)遠(yuǎn)不及搜索引擎。其次，因?yàn)殡娚叹W(wǎng)站主要是賣東西的，相對(duì)于以把信息呈現(xiàn)給用戶為目標(biāo)的搜索引擎來說，它們更愿意讓用戶仔細(xì)地瀏覽前面幾頁的商品，而不是引導(dǎo)用戶隨意地點(diǎn)擊任意一個(gè)頁面去查看商品。

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

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

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

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

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

3：是否需要自定義頁碼

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

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

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

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

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

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

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

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

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

“上一頁”和“下一頁”的位置也很重要。位置最好相對(duì)固定，讓用戶可以很方便地使用上一頁和下一頁來進(jìn)行頁面切換。在這一點(diǎn)上，上述幾個(gè)網(wǎng)站都做得不錯(cuò)。而百度的前 20 頁分頁頁碼會(huì)隨著頁碼的下翻而向右移動(dòng)，這一點(diǎn)體驗(yàn)并不是太好?？赡馨俣鹊某霭l(fā)點(diǎn)是想讓用戶在20頁之內(nèi)方便地進(jìn)行頁面的切換。

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


　　淘寶頁面右上角的簡(jiǎn)單翻頁功能


　　京東頁面右上角的簡(jiǎn)單翻頁功能

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)該不會(huì)變成 hover 狀態(tài)。而在京東的網(wǎng)頁上，鼠標(biāo)放到當(dāng)前頁上面時(shí)，當(dāng)前頁會(huì)像其它頁碼一樣，背景變成藍(lán)色，鼠標(biāo)也會(huì)變成手指的形狀，這樣會(huì)誤導(dǎo)用戶，以為當(dāng)前頁是可以鏈接的。

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


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

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

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

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

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

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

10：其它

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

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

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

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

最后一頁

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

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

跳頁

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

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

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

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

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

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

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

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

文章內(nèi)容來源于網(wǎng)絡(luò)，侵刪