在網(wǎng)站設(shè)計(jì)的過(guò)程中，導(dǎo)航系統(tǒng)可以說(shuō)是最重要的一部分，一般情況下所有網(wǎng)站都會(huì)有導(dǎo)航系統(tǒng)，而提到網(wǎng)站的導(dǎo)航設(shè)計(jì)，分頁(yè)導(dǎo)航可以說(shuō)也是最常見(jiàn)、最重要的一種，隨便點(diǎn)開(kāi)一個(gè)網(wǎng)站基本都可以看到分頁(yè)導(dǎo)航的存在。
分頁(yè)導(dǎo)航主要作用：
告訴用戶要瀏覽的信息量；
讓用戶可以快速跳過(guò)一些不想看的信息；
便于定位和查找；
減少頁(yè)面大小，提高加載速度；
分頁(yè)的使用可以增加每個(gè)用戶的網(wǎng)站的綜合瀏覽量；
提高用戶體驗(yàn)，通過(guò)分割用戶需求信息的細(xì)化，提供更小的精華內(nèi)容塊，促進(jìn)用戶瀏覽頁(yè)面內(nèi)容的深入便捷度。
此外，分頁(yè)導(dǎo)航還給了用戶一定的停頓，可以讓產(chǎn)品“更有節(jié)奏感”，減少用戶瀏覽的疲勞感。
下面列出了幾個(gè)網(wǎng)站的分頁(yè)導(dǎo)航，根據(jù)這些導(dǎo)航特點(diǎn)分別從幾方面談一下分頁(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ù)量都是10，360、bing、淘寶和亞馬遜及京東都采用了可變長(zhǎng)度的形式。360的起始長(zhǎng)度為10，隨著頁(yè)面的下翻，分頁(yè)頁(yè)數(shù)逐漸增加，最終保持20頁(yè)的長(zhǎng)度；bing的起始長(zhǎng)度為5，分頁(yè)頁(yè)數(shù)逐漸增加，最終保持9頁(yè)的長(zhǎng)度；而亞馬遜最初只有4頁(yè)，最后維持在5頁(yè)的數(shù)量上；淘寶最初是5頁(yè)，最終保持9頁(yè)的長(zhǎng)度；京東起始長(zhǎng)度為4頁(yè)，分頁(yè)頁(yè)數(shù)逐漸增加，最終保持8頁(yè)的長(zhǎng)度。
可以看到電子商務(wù)網(wǎng)站的分頁(yè)導(dǎo)航頁(yè)碼數(shù)量普遍少于搜索引擎，最主要的原因當(dāng)然是電商網(wǎng)站的搜索結(jié)果數(shù)量遠(yuǎn)遠(yuǎn)不及搜索引擎。其次因?yàn)殡娚叹W(wǎng)站主要是賣東西的，不是像搜索引擎把信息簡(jiǎn)單的呈現(xiàn)給用戶，它們更愿意讓用戶仔細(xì)地瀏覽前面幾頁(yè)的商品，而不是引導(dǎo)用戶隨意地點(diǎn)擊任意一個(gè)頁(yè)面去查看商品。
2、是否需要首末頁(yè)導(dǎo)航鏈接？
很多網(wǎng)站的分頁(yè)導(dǎo)航中都沒(méi)有首頁(yè)和末頁(yè)的鏈接,google、bing、360和百度這些搜索引擎沒(méi)有首頁(yè)和末頁(yè)可以理解，因?yàn)樗阉鹘Y(jié)果數(shù)量太大，頁(yè)數(shù)太多，所以提供末頁(yè)沒(méi)有太大的意義，用戶也看不到那么多去。并且他們的分頁(yè)導(dǎo)航長(zhǎng)度都至少在10頁(yè)以上，而絕大多數(shù)用戶都能在10頁(yè)以內(nèi)就能夠找到自己想要的信息，如果前10頁(yè)都沒(méi)找到需求的信息，估計(jì)早就換搜索詞了，所以“首頁(yè)”鏈接意義不大。
而淘寶、亞馬遜及京東這種電商網(wǎng)站，用戶的商品信息需求更加個(gè)性化，對(duì)搜索準(zhǔn)確性的要求不如搜索引擎那么高，用戶更多的是進(jìn)行對(duì)比，所以電商網(wǎng)站的用戶所需要的商品信息更接近于平均分布到各個(gè)檢索結(jié)果頁(yè)中，而不是像搜索引擎那樣集中在首頁(yè)的導(dǎo)航里就可以解決需求。另外還有一種可能是，如果用戶翻到一定頁(yè)數(shù)時(shí)，發(fā)現(xiàn)結(jié)果越來(lái)越背離自己的需求或覺(jué)得還是最前面看的好，就可以直接點(diǎn)擊“1”返回首頁(yè)了，這就和“首頁(yè)”鏈接是一個(gè)效果，同理上面幾個(gè)電商網(wǎng)站的末頁(yè)鏈接也很好的設(shè)置在了分頁(yè)導(dǎo)航里面，和前面的“1”效果是一樣的。
3、是否需要自定義頁(yè)碼
自定義頁(yè)面對(duì)選項(xiàng)數(shù)目有限的分頁(yè)來(lái)說(shuō)是很常見(jiàn)的。淘寶、京東以及亞馬遜以前都提供了這種導(dǎo)航方式。但是現(xiàn)在只有淘寶還存在，個(gè)人覺(jué)得在這種信息量很大的頁(yè)面上，而且在用戶不知道具體頁(yè)碼上的具體內(nèi)容的情況下，這種自定義頁(yè)面沒(méi)什么效果，如果你的分頁(yè)導(dǎo)航能夠很好的進(jìn)行遠(yuǎn)距離跳轉(zhuǎn)，基本沒(méi)有必要做自定義頁(yè)碼，如果分頁(yè)導(dǎo)航相對(duì)比較簡(jiǎn)單，可以用這個(gè)彌補(bǔ)一下。另外如果你的產(chǎn)品確實(shí)比較多，并且想提高排名靠后的商品的曝光度，也可以有這個(gè)需要。
4、頁(yè)碼數(shù)字的間距
頁(yè)碼數(shù)字間距太小，用戶容易誤點(diǎn)擊，而間距太大，會(huì)增加鼠標(biāo)工作。google這一點(diǎn)似乎做得有些欠佳，出現(xiàn)雙位數(shù)的頁(yè)碼后，google的分頁(yè)導(dǎo)航顯得就有些擁擠。難道是google為了保證每個(gè)頁(yè)碼數(shù)字都和分頁(yè)導(dǎo)航上方的字母o對(duì)齊？
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è)碼。這一點(diǎn)上面所例舉的網(wǎng)站都做得很好，這樣用戶能很好的知道鼠標(biāo)所在的位置以及當(dāng)前所點(diǎn)擊的頁(yè)面，能很好的加強(qiáng)用戶的體驗(yàn)。
6、“上一頁(yè)”和“下一頁(yè)”
“上一頁(yè)”和“下一頁(yè)”一般分別放在頁(yè)碼導(dǎo)航的左端和右端，并且通常會(huì)有向左和向右的箭頭來(lái)形象化地指引用戶?！吧弦豁?yè)”和“下一頁(yè)”的位置也很重要，位置最好相對(duì)固定，讓用戶可以很方便地在同一個(gè)位置使用上一頁(yè)和下一頁(yè)來(lái)進(jìn)行頁(yè)面切換。另外京東還在頁(yè)面的右上角提供了簡(jiǎn)單的上翻和下翻功能，下面是完整的分頁(yè)功能，上面是簡(jiǎn)化功能。產(chǎn)品頁(yè)下面需要完整的分頁(yè)功能很好理解，因?yàn)橛脩舳际菫g覽完該頁(yè)產(chǎn)品再翻頁(yè)，所以把完整功能置于底部，但有很多時(shí)候用戶看不到最低端就想翻頁(yè)了，這個(gè)時(shí)候上面的簡(jiǎn)化分頁(yè)就起到了很好的作用。
7、當(dāng)前所在頁(yè)
用戶當(dāng)前所在頁(yè)的頁(yè)碼應(yīng)該與其它頁(yè)碼的樣式有所區(qū)別，以此來(lái)提示用戶當(dāng)前所在的位置，便于導(dǎo)航。這一點(diǎn)想必大部分分頁(yè)導(dǎo)航都會(huì)這樣設(shè)計(jì)。另外當(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ù)估信息量的作用。
8、導(dǎo)航頁(yè)碼中的品牌宣傳
看一下google 的導(dǎo)航頁(yè)碼上方是一個(gè)變形的 googlelogo，每個(gè)頁(yè)碼都對(duì)應(yīng) logo里面的一個(gè)字母o。用戶甚至可以通過(guò)點(diǎn)擊這些o來(lái)跳轉(zhuǎn)到其對(duì)應(yīng)的導(dǎo)航頁(yè)碼所在的頁(yè)面上去。再看百度現(xiàn)在的新分頁(yè)導(dǎo)航，每一個(gè)頁(yè)碼上面都有一個(gè)百度小熊掌，而且在當(dāng)前頁(yè)碼上，上方還會(huì)變成一個(gè)點(diǎn)亮的大熊掌，這樣每一次都是在很好的宣傳品牌，另外配色也可以和品牌宣傳結(jié)合起來(lái)。
寫在最后
在進(jìn)行網(wǎng)站設(shè)計(jì)的時(shí)候，我們一切都是從用戶需求的角度出發(fā)來(lái)進(jìn)行思考和設(shè)計(jì)的。產(chǎn)品是需要同時(shí)滿足用戶需求和公司需求，所以有時(shí)候，不得不考慮其它的一些東西。比如內(nèi)容頁(yè)的分頁(yè)導(dǎo)航，在你瀏覽某些新聞資訊類網(wǎng)站的時(shí)候，你會(huì)發(fā)現(xiàn)，每一頁(yè)的內(nèi)容只有可憐的一兩段，然后就又得翻頁(yè)，一篇不長(zhǎng)的文章，被分割成了十幾頁(yè)，這種情況是屬于內(nèi)容頁(yè)分頁(yè)導(dǎo)航了，一般都是為了增加收錄，增加pv量。但是這種內(nèi)容頁(yè)的分頁(yè)導(dǎo)航往往也會(huì)有不利的因素：
1.增加用戶的無(wú)效點(diǎn)擊，讓用戶感到厭煩，頁(yè)面停留時(shí)間短，跳出率高。
2.大量重復(fù)內(nèi)容，頁(yè)面標(biāo)題與url意義多樣化。
3.頁(yè)面圖片alt屬性的確定與添加，編輯人員工作量加大，網(wǎng)頁(yè)加載服務(wù)器可能加大負(fù)載。
4.頁(yè)面核心內(nèi)容相關(guān)性與下一頁(yè)承載關(guān)系容易混亂，會(huì)導(dǎo)致索引擎抓取收錄出錯(cuò)。
5.分頁(yè)會(huì)導(dǎo)致分散鏈接，權(quán)重分散，讓搜索引擎不好判斷第幾頁(yè)作為權(quán)重傳遞頁(yè)面。
所以分頁(yè)有時(shí)是必要的，但也應(yīng)謹(jǐn)慎使用。在一些情況下，它可在不修改您的網(wǎng)站的內(nèi)部鏈接結(jié)構(gòu)情況下實(shí)現(xiàn)你的內(nèi)容更相關(guān)性類別的劃分。如果操作不好對(duì)搜索引擎優(yōu)化和用戶體驗(yàn)有著嚴(yán)重的影響。并且如果文章內(nèi)容足夠長(zhǎng)不方便閱讀，且每一段都圍繞著一個(gè)核心點(diǎn)，可獨(dú)立支撐起一個(gè)頁(yè)面內(nèi)容量的情況下可以考慮分頁(yè)使用，每個(gè)頁(yè)面可以用標(biāo)題（1）、標(biāo)題（2）的形式，并且可以用標(biāo)簽代碼來(lái)引導(dǎo)搜索引擎，這里就不多說(shuō)了，總之純粹為了增加網(wǎng)站 pv 而故意胡亂分割文章增加頁(yè)數(shù)吸引用戶點(diǎn)擊的行為應(yīng)該終止。

分享標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)分頁(yè)導(dǎo)航優(yōu)化細(xì)節(jié)分享
網(wǎng)頁(yè)地址：http://www.rwnh.cn/news38/144988.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、云服務(wù)器、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)