編輯導(dǎo)語：我們在瀏覽網(wǎng)頁時，經(jīng)常會用到網(wǎng)頁導(dǎo)航的功能，網(wǎng)頁導(dǎo)航欄內(nèi)包含了各種分類和產(chǎn)品，極大的方便了用戶，所以一個好的網(wǎng)站導(dǎo)航設(shè)計是非常重要的；本文作者分享了關(guān)于網(wǎng)站導(dǎo)航的七個最佳實踐、設(shè)計技巧等，我們一起來看一下。

一些小的事物可以創(chuàng)造大的變化，網(wǎng)站導(dǎo)航欄就是一個很好的例子。

導(dǎo)航的結(jié)構(gòu)和標(biāo)簽可能會對結(jié)果產(chǎn)生巨大影響，原因如下：

• 導(dǎo)航會影響流量：你的網(wǎng)站在搜索引擎中的排名高低會影響你從搜索中獲得的流量量的多少。
• 導(dǎo)航會影響轉(zhuǎn)化：網(wǎng)站的易用性會影響訪問者轉(zhuǎn)化為潛在客戶的百分比。

一、讓導(dǎo)航欄具有描述性

“我們做什么”這五個字并沒有說明你具體到底做什么，“產(chǎn)品”、“服務(wù)”、“解決方案”這些詞其實也沒有。

使用帶有關(guān)鍵詞的描述性導(dǎo)航更好，原因有二：

• 導(dǎo)航中的描述性標(biāo)簽更適合搜索引擎：導(dǎo)航欄是與搜索引擎相關(guān)性很大的關(guān)鍵位置；由于導(dǎo)航欄出現(xiàn)在每個頁面上，因此描述性標(biāo)簽會向搜索引擎（如谷歌、百度）展示您的網(wǎng)頁內(nèi)容確實關(guān)乎該主題。
• 導(dǎo)航中的描述性標(biāo)簽對訪問者有利：導(dǎo)航欄在視覺上突出顯示，因此它可以與訪問者進行即時互動；當(dāng)導(dǎo)航欄列出i你的主要產(chǎn)品或服務(wù)時，訪問者一眼看就能知道你公司的主要業(yè)務(wù)，并確定他們在正確的網(wǎng)站中。

警告！?避免使用諸如“服務(wù)”之類的標(biāo)簽。

沒有人會搜索“產(chǎn)品”或“服務(wù)”這樣的詞語，因此這些標(biāo)簽對你的排名沒有幫助。

此外，如果你把所有的業(yè)務(wù)列在同一個網(wǎng)頁里，那它將永遠(yuǎn)不會位于搜索結(jié)果的前列，這是因為它沒有專注于一個主題；其實你網(wǎng)站上的每個頁面都有機會在搜索結(jié)果中獲得高位次，只要它專注于某單一主題或關(guān)鍵短語。

這就是為什么你的網(wǎng)站架構(gòu)（而不只是導(dǎo)航）是SEO的關(guān)鍵所在，在經(jīng)過搜索優(yōu)化的網(wǎng)站上，每個服務(wù)、每個產(chǎn)品、每個主題都會擁有一個頁面；總之，請避免創(chuàng)建籠統(tǒng)的“服務(wù)”主題頁面，除非你將其鏈接到經(jīng)過搜索優(yōu)化的具體服務(wù)的頁面上。

二、避免以格式為標(biāo)簽的導(dǎo)航欄

以“視頻”、“照片”、“白皮書”作為標(biāo)簽的導(dǎo)航欄告訴訪問者內(nèi)容的格式，卻沒有告訴訪問者主題；人們訪問網(wǎng)站的真正目的是尋找所需要的答案和信息，而不是單純的尋找“視頻”或“白皮書”。

指示格式的標(biāo)簽不是描述性的，因此對訪問者不是很有幫助，這就是某大型用戶體驗研究機構(gòu)的Aurora Bedford建議避免導(dǎo)航欄以格式為標(biāo)簽的原因。

“對特定主題感興趣的用戶通常不在乎信息以何種格式傳遞給他們；他們只專注于找到可以解決他們所想到的問題的答案?！?/p>

——Aurora Bedford，某大型用戶體驗研究機構(gòu)用戶體驗專家

三、避免使用下拉菜單

是的，下拉菜單很流行，但它不是一個好主意。避免使用下拉菜單有兩個好處：

• 對搜索引擎有利：由于編程式的原因，搜索引擎是很難下拉菜單的，因為這可能會導(dǎo)致一些問題。
• 對訪問者有利：可用性研究表明下拉菜單很煩人——因為訪問者移動眼睛的速度比移動鼠標(biāo)的速度快得多，當(dāng)他們將鼠標(biāo)移到菜單項時，他們可能能已經(jīng)決定單擊，然后你給他們提供了更多選項，這會導(dǎo)致訪問者思維上的卡頓。

更重要的是，下拉菜單會導(dǎo)致訪問者跳過重要頁面，如果你使用下拉菜單，那就很容易在分析結(jié)果中看到此問題。

但是研究也表明，在可用性測試中，一種類型的下拉菜單表現(xiàn)良好——“大型下拉菜單”；此類下拉菜單提供了許多種選擇，使那一刻的思路阻力減弱。

如果你的網(wǎng)站很大，頁面很多而且產(chǎn)品或服務(wù)種類繁多，那么大型菜單可能是個好主意，雖然它們大大增加了首頁的鏈接數(shù)量。

四、將菜單項的數(shù)量限制在七個以內(nèi)

一些網(wǎng)站的主頁上有數(shù)百個鏈接，這是非常糟糕的。

限制主導(dǎo)航中的鏈接數(shù)量是有好處的，原因有二，且這兩個原因與使用描述性標(biāo)簽的兩個原因相同：

1. 導(dǎo)航欄中放較少的項目適合搜索引擎

你的首頁在搜索引擎中擁有最高的“權(quán)限”，因為鏈接到你的首頁的網(wǎng)站比鏈接到你的內(nèi)部頁面的網(wǎng)站要多，通過導(dǎo)航欄，該權(quán)限可以深入到更深的頁面。

如果你的首頁具有大量鏈接，這可能會稀釋傳遞到內(nèi)部頁面的權(quán)限，這樣會降低你的內(nèi)部頁面在搜索結(jié)果中處于靠前位次的可能性。

導(dǎo)航越簡潔，就越會有更多權(quán)限流到每個內(nèi)部頁面，從而使你的內(nèi)部頁面在搜索結(jié)果中可能有更高排名。

2. 導(dǎo)航中較少的項目對訪問者有利

“短期記憶僅包含七個事物，上下浮動兩個?！闭詥讨巍っ桌眨℅eorge Miller）在1956年發(fā)表的著名心理學(xué)論文。

最近的研究表明，盡管大腦使用“分塊”作為改善短期記憶的回想方法，但短期記憶的數(shù)量取決于類別，對數(shù)字來說可能是七個，但對單詞來講可能只有五個。

無論如何，導(dǎo)航中的項目越多，對于訪客來說，記住和處理信息的難度就越大；在視覺上，八個比七個多很多，如果數(shù)量過多，訪客的眼睛可能會忽略掉重要信息。

將導(dǎo)航欄盡量分成五到七個項目，如果你需要使用七個以上的項目，請考慮將它們分成幾個組。

警告！避免長列表。

小技巧！每次從頁面上刪減菜單項（或任何其他元素）時，剩下的所有內(nèi)容在視覺上都變得更加突出，重要內(nèi)容更有可能被訪客看到并作出考慮。

做出艱難的決定需要一定的磨練，但相信你能行的，挑戰(zhàn)自己，將其減少到五個！

五、網(wǎng)站導(dǎo)航的順序很重要

不僅導(dǎo)航欄中的項目的數(shù)量很重要，這些項目的順序也很重要。

在網(wǎng)站導(dǎo)航中，就像任何列表一樣，開頭和結(jié)尾的項目最有效，因為這是關(guān)注度和保留度最高的地方。

上述現(xiàn)象叫序列位置效應(yīng)，它與認(rèn)知偏見結(jié)合在一起：

• 優(yōu)先效果：更容易記住列表開頭的項目。
• 新近度效果：更容易記住列表末尾的項目（或剛剛發(fā)生的事情）。

因此，在導(dǎo)航開始或結(jié)束時放置的所有內(nèi)容都會變得更加突出，我們應(yīng)該將對我們的業(yè)務(wù)和訪客最重要的項目放在這些地方。

始終設(shè)法將最重要的東西放在視覺上最顯眼的地方，這符合網(wǎng)頁設(shè)計和內(nèi)容營銷的核心原則：首先給訪問者他們想要的東西，然后他們就可能給你你想要的東西。

因此，你應(yīng)當(dāng)將最流行，重要的項目放在導(dǎo)航的開頭；如果不知道最重要的項目是什么，只要查看你的數(shù)據(jù)分析結(jié)果就行了。

說到數(shù)據(jù)分析，我們繼續(xù)講后面的技巧。

六、如何優(yōu)化網(wǎng)站的導(dǎo)航

設(shè)計導(dǎo)航是開始，而不是結(jié)束；創(chuàng)建導(dǎo)航幾周后，你可以使用數(shù)據(jù)進行回顧并進行一些評估。

有兩種報告可以向你顯示訪問者最常使用的導(dǎo)航項：一種是行為報告中的導(dǎo)航摘要或頁內(nèi)視圖，另一種是行為流/用戶流報告。

頁內(nèi)分析功能在每個導(dǎo)航項旁邊顯示一個小的橙色框，指示從任何頁面訪問每個頁面的訪問者的百分比；由于某些原因，它不準(zhǔn)確且具有誤導(dǎo)性。

如果此報告不適合你，則可以從主頁上查看導(dǎo)航摘要，頁面列表和頁面瀏覽量的百分比可以讓你很好地了解菜單上的內(nèi)容。

人們點擊的另一種視圖是在“行為>行為流”報告中，該報告與“受眾群體>用戶流”報告相同；除非你要跟蹤事件，否則，這兩種報告是相同的，事件跟蹤已添加到行為流報告數(shù)據(jù)中。

無論哪種情況，報告都將如下所示：

通過這些報告，你可以了解訪問者正在使用哪些導(dǎo)航項以及哪些導(dǎo)航項未使用，從而進行導(dǎo)航欄優(yōu)化。

以下是你可能根據(jù)這些報告中的分析做出的一些決策示例：

• 如果不是很重要，請刪除很少被點擊的項目；
• 如果某些很少被點擊的項目很重要，則對它們進行重命名或重新貼標(biāo)簽；
• 將經(jīng)常被點擊的項目移到開頭。

警告！請記住，你的主頁可能不是許多訪問者的切入點，經(jīng)過搜索優(yōu)化的網(wǎng)站有許多入口點，許多（甚至大多數(shù)）訪問者都不會從首頁開始。

七、移動設(shè)備上的網(wǎng)站導(dǎo)航

響應(yīng)式網(wǎng)頁設(shè)計帶來了移動端導(dǎo)航欄最佳實踐和標(biāo)準(zhǔn)，可以用兩個詞來概括——“漢堡圖標(biāo)”。

“漢堡圖標(biāo)”是由三個短的水平線組成的圖標(biāo)，代表一個菜單，但是它看起來有點像三明治，所以人們稱其為漢堡包圖標(biāo)；它顯示在移動網(wǎng)站的右上角，單擊它會顯示導(dǎo)航菜單。

以下是一些移動導(dǎo)航示例：

在“漢堡圖標(biāo)”旁添加“菜單”一詞可能會幫助訪問者找到這種隱藏導(dǎo)航；然而，尼爾森諾曼集團警告說，隱藏導(dǎo)航也可能會增加訪問者任務(wù)完成的時間。

專業(yè)技巧！對于移動訪問者，請確保電話號碼變成一個在點擊時會撥打電話的按鈕；在你網(wǎng)站上的移動版本電話號碼的href代碼中添加tel，這很簡單，代碼：<ahref=”tel:773-348-4581″>(773)348.4581</a>

八、結(jié)語

我希望這些技巧能為你的菜單提供新的思路和靈感，理想情況下，你可以在內(nèi)容管理系統(tǒng)中快速實現(xiàn)你的想法；一個好的內(nèi)容管理系統(tǒng)，可以讓你靈活地調(diào)整菜單的標(biāo)簽和順序。

上述的每個規(guī)則都可能有例外，如果不確定是否應(yīng)該進行更改，你可以請網(wǎng)絡(luò)策略專家一起評估分析結(jié)果。

如果你能讓導(dǎo)航既迎合“人類”訪客，也適合“機器人”搜索引擎，那么你的數(shù)據(jù)分析團隊將非常感謝你！

本文由 @汪仔1558 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議