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

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

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

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

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

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

　　Google的分頁(yè)導(dǎo)航

　　Bing的分頁(yè)導(dǎo)航

　　Yahoo的分頁(yè)導(dǎo)航

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

　　Amazon的分頁(yè)導(dǎo)航

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

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

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

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

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

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

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

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

　　3：是否需要自定義頁(yè)碼

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

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

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

　　出現(xiàn)兩位數(shù)頁(yè)碼后，Google 的頁(yè)碼數(shù)字間距太小

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

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

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

　　6：“上一頁(yè)”和“下一頁(yè)”

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

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

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

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

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

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

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

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

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

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

　　8：區(qū)分訪問(wèn)過(guò)/未訪問(wèn)過(guò)的頁(yè)碼

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

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

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

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

　　10：其它

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