關(guān)于網(wǎng)站分頁導(dǎo)航的十個(gè)細(xì)節(jié)分析

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

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

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

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

　　淘寶和京東的分頁導(dǎo)航頁碼數(shù)量為6，Google、Bing 和 Yahoo 是10。百度和亞馬遜采用了可變長(zhǎng)度的形式。百度的起始長(zhǎng)度為10，隨著頁面的下翻，分頁頁數(shù)逐漸增加，最終保持20頁的長(zhǎng)度;而 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)航長(zhǎng)度都在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ì)齊。

　　出現(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)容只有可憐的一兩段，然后就又得翻頁，一篇不長(zhǎng)的文章，被分割成了十幾頁。這種為了增加網(wǎng)站 PV 而故意分割文章增加頁數(shù)吸引用戶點(diǎn)擊的行為真的是令人發(fā)指。