您的網(wǎng)站設(shè)計(jì)的許多方面  都可以培養(yǎng)良好的用戶體驗(yàn)，而許多細(xì)節(jié)如果被忽視，可能會(huì)破壞它。從網(wǎng)站的視覺(jué)吸引力到布局、文本的使用等等，一個(gè)好的網(wǎng)站需要在良好的美學(xué)和功能之間取得平衡。

在所有需要考慮的因素中，可以決定您網(wǎng)站的 UX 設(shè)計(jì)的成?。壕W(wǎng)站導(dǎo)航。一個(gè)易于導(dǎo)航的網(wǎng)站將幫助用戶找到他們正在尋找的內(nèi)容，并為他們提供積極的體驗(yàn)，鼓勵(lì)他們?cè)俅畏祷亍?/span>

讓我們看看為什么網(wǎng)站導(dǎo)航很重要，以及如何為用戶提供完美的用戶體驗(yàn)。在這里，我們深入探討了基礎(chǔ)知識(shí)，以及有關(guān)如何設(shè)計(jì)網(wǎng)站的提示。

什么是網(wǎng)站導(dǎo)航？

想象一下這樣的場(chǎng)景：你想要一個(gè)新包已經(jīng)有一段時(shí)間了。最后，您坐下來(lái)，瀏覽不同設(shè)計(jì)師的電子商務(wù)網(wǎng)站并選擇您最喜歡的網(wǎng)站。經(jīng)過(guò)深思熟慮，您找到了完美的包袋并想進(jìn)行購(gòu)買(mǎi)。

經(jīng)過(guò)所有這些瀏覽，完成購(gòu)買(mǎi)似乎太復(fù)雜了。所以最終，你放棄了，轉(zhuǎn)而選擇另一個(gè)品牌。

網(wǎng)站導(dǎo)航是指促進(jìn)此用戶旅程的因素，并受您網(wǎng)站架構(gòu)的影響：鏈接的組織、菜單以及您網(wǎng)站上不同頁(yè)面之間的連接都在導(dǎo)航中發(fā)揮作用。

良好的網(wǎng)站導(dǎo)航習(xí)慣可以避免您自己的品牌出現(xiàn)上述情況。它會(huì)影響流量、轉(zhuǎn)化率、跳出率，并且是設(shè)計(jì)用戶體驗(yàn)的決定性因素。

什么是網(wǎng)站導(dǎo)航菜單？

導(dǎo)航的核心在于您網(wǎng)站的菜單。網(wǎng)站菜單是一系列鏈接項(xiàng)目，可幫助用戶在網(wǎng)站的不同頁(yè)面或部分之間導(dǎo)航。

這有助于訪問(wèn)者輕松快速地找到他們正在尋找的內(nèi)容。它通常是一個(gè)水平條或垂直條（盡管存在其他廣告素材布局），其中包含指向  您網(wǎng)站最重要頁(yè)面和部分的鏈接列表。

網(wǎng)站導(dǎo)航菜單的類型

有幾種標(biāo)準(zhǔn)類型的網(wǎng)站導(dǎo)航菜單在整個(gè)在線世界中得到認(rèn)可。我們?cè)谙旅娓攀隽诉@些內(nèi)容，包括網(wǎng)站模板中的視覺(jué)示例。根據(jù)您的設(shè)計(jì)或您是否遵循扁平架構(gòu)方法，其中任何一種，如果以我們的最佳實(shí)踐實(shí)施，都將幫助用戶輕松找到您的網(wǎng)站。

• 水平導(dǎo)航

  這是一個(gè)經(jīng)典菜單，通常出現(xiàn)在您網(wǎng)站的標(biāo)題處。水平導(dǎo)航菜單在屏幕上水平運(yùn)行，將列出您網(wǎng)站上可用的頁(yè)面。

  因?yàn)樗蔷W(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)，所以這種類型的菜單使用起來(lái)很直觀，并且很容易讓訪問(wèn)者找到。

• 下拉導(dǎo)航

  雖然我們確實(shí)建議限制您的菜單項(xiàng)，但如果網(wǎng)站包含大量?jī)?nèi)容，這并不總是可行的。在這種情況下，您可以創(chuàng)建下拉菜單。下拉菜單是打開(kāi)一系列選項(xiàng)的大型列表或面板。

  為避免信息過(guò)載，您可以使用設(shè)計(jì)工具在此元素中創(chuàng)建層次結(jié)構(gòu)。注意排版并確保每個(gè)類別和子類別都脫穎而出。您還可以在每個(gè)項(xiàng)目周?chē)褂妙~外的空間，以便訪問(wèn)者了解區(qū)別。

• 漢堡菜單

  雖然這主要在移動(dòng)導(dǎo)航上看到，但這個(gè)簡(jiǎn)單的三行圖標(biāo)現(xiàn)在也出現(xiàn)在許多桌面版本的網(wǎng)站上。漢堡菜單提供了一個(gè)最小的圖標(biāo)，不會(huì)干擾網(wǎng)站的設(shè)計(jì)，并且在空間有限時(shí)（如在移動(dòng)設(shè)備上）特別有用。

• 側(cè) 欄

  側(cè)邊欄菜單是放置在網(wǎng)站左側(cè)或右側(cè)的垂直菜單。這是一個(gè)位于頁(yè)面?zhèn)让娴牧斜?。您的?cè)邊欄列表可以是最小的，也可以占據(jù)中心位置并成為設(shè)計(jì)不可或缺的一部分。

• 頁(yè)腳導(dǎo)航

  您的網(wǎng)站頁(yè)腳是添加社交媒體鏈接以及網(wǎng)站訪問(wèn)者可能認(rèn)為有用的任何其他重要鏈接的好地方。它還可以重復(fù)頁(yè)面頂部的導(dǎo)航菜單。

網(wǎng)站導(dǎo)航提示

使用站點(diǎn)地圖規(guī)劃導(dǎo)航

確定頁(yè)面的優(yōu)先級(jí)

堅(jiān)持慣例

使用粘性菜單

限制項(xiàng)目數(shù)

添加搜索欄

清楚地標(biāo)記您的菜單

將您的 logo 鏈接回主頁(yè)

指示用戶所在的頁(yè)面

確保訪客可以從任何頁(yè)面訪問(wèn)任何頁(yè)面

• 01. 使用站點(diǎn)地圖規(guī)劃導(dǎo)航

  在決定創(chuàng)建網(wǎng)站時(shí)，一點(diǎn)前瞻性的思考會(huì)大有幫助。闡明您的網(wǎng)站需要哪些功能和頁(yè)面，以及它們的層次結(jié)構(gòu)應(yīng)該是什么。您需要關(guān)于我們頁(yè)面、博客或常見(jiàn)問(wèn)題解答部分嗎？這些頁(yè)面中的哪些頁(yè)面對(duì)您的網(wǎng)站訪問(wèn)者最重要或最有價(jià)值？

  要開(kāi)發(fā)此層次結(jié)構(gòu)，通常的做法是創(chuàng)建站點(diǎn)地圖。站點(diǎn)地圖應(yīng)包括用戶界面的所有主要項(xiàng)目  及其中的所有子類別的列表。由于它將構(gòu)成導(dǎo)航菜單的基礎(chǔ)，因此這種做法應(yīng)該可以幫助您清楚地指出哪些頁(yè)面對(duì)訪問(wèn)者訪問(wèn)最重要。

  要?jiǎng)?chuàng)建一個(gè)，您可以使用任何您覺(jué)得最舒服的方法：手寫(xiě)，以流程圖或圖表形式呈現(xiàn)，或在電子表格上鍵入。

• 02. 優(yōu)先考慮你的頁(yè)面

  在決定層次結(jié)構(gòu)時(shí)，請(qǐng)考慮您希望首先將訪客引導(dǎo)到何處。您的目標(biāo)將取決于您創(chuàng)建的網(wǎng)站類型，但以下是一些需要考慮的準(zhǔn)則：

您將如何引導(dǎo)訪客通過(guò)您的渠道？

哪些信息對(duì)您和您的訪客最有價(jià)值？

訪問(wèn)您的網(wǎng)站的目標(biāo)是什么，訪問(wèn)者可以在您的導(dǎo)航菜單中輕松實(shí)現(xiàn)嗎？

這些頁(yè)面是您主要導(dǎo)航的一部分，應(yīng)該顯示在您網(wǎng)站的主菜單中，以使其盡可能易于訪問(wèn)。

• 03. 堅(jiān)持常規(guī)

  雖然打破常規(guī)很誘人，但有時(shí)最好堅(jiān)持最佳實(shí)踐。畢竟，超鏈接通常顯示為藍(lán)色，或者為什么logo通常會(huì)放置在網(wǎng)站的頂角之一，這是有原因的。這些熟悉的細(xì)微差別或設(shè)計(jì)慣例之所以存在，是因?yàn)樗鼈冇行А?/span>

  您希望訪問(wèn)者無(wú)縫瀏覽您的網(wǎng)站。因此，雖然我們鼓勵(lì)讓您的品牌形象大放異彩，但在導(dǎo)航方面，強(qiáng)調(diào)清晰性而不是審美大膽。

• 04. 使用粘性菜單

  粘性菜單（也稱為“固定”或“浮動(dòng)”菜單）是一種即使訪問(wèn)者向下滾動(dòng)您的網(wǎng)站也會(huì)保持不動(dòng)的菜單。這對(duì)于長(zhǎng)滾動(dòng)頁(yè)面尤其重要，因?yàn)槟幌ＭL問(wèn)者一直訪問(wèn)您網(wǎng)站的頂部，只是為了訪問(wèn)另一個(gè)頁(yè)面。

  還可以選擇添加“返回頂部”按鈕，以幫助用戶節(jié)省時(shí)間。無(wú)論您選擇哪種解決方案都取決于您網(wǎng)站的設(shè)計(jì)和布局，因此在考慮為訪問(wèn)者最方便的導(dǎo)航形式時(shí)，請(qǐng)考慮不同的選項(xiàng)。

• 05. 限制菜單中的項(xiàng)目數(shù)量

  保持菜單最少，最多有六到七個(gè)類別，這樣用戶就可以更快地處理信息并到達(dá)他們想要的頁(yè)面。這樣，用戶將能夠輕松處理信息并更快地訪問(wèn)他們想要的頁(yè)面。

  如果您的網(wǎng)站包含大量信息，您可以使用下拉菜單將其分解為多個(gè)部分。這意味著當(dāng)訪客將鼠標(biāo)懸停在菜單上的一個(gè)項(xiàng)目上時(shí)，將出現(xiàn)一個(gè)子類別列表，他們可以從中進(jìn)行選擇。

• 06. 添加搜索欄

  對(duì)于內(nèi)容繁重的網(wǎng)站，一個(gè)很好的導(dǎo)航做法是添加自定義搜索欄。此工具可以幫助用戶無(wú)縫、快速地找到他們想要的內(nèi)容。搜索欄對(duì)于上網(wǎng)經(jīng)驗(yàn)較少的訪問(wèn)者特別有用，因?yàn)檫@是一個(gè)熟悉的概念，他們可以直觀地理解。

  就搜索欄的位置而言，最好將其靠近菜單。就像您的導(dǎo)航菜單一樣，當(dāng)訪問(wèn)者向下滾動(dòng)您的網(wǎng)站時(shí)，它可以保持固定位置，以便輕松訪問(wèn)您網(wǎng)站的頁(yè)面。在 Thinkart 上，您可以使用  編輯器中嵌入的拖放功能添加搜索欄。

• 07. 清楚地標(biāo)記您的菜單

  一旦您知道菜單中會(huì)出現(xiàn)哪些項(xiàng)目，您應(yīng)該戰(zhàn)略性地考慮如何標(biāo)記它們。在這種情況下，最優(yōu)先考慮的是清晰度——所以不要使用創(chuàng)造性的微復(fù)制和行業(yè)術(shù)語(yǔ)。

  確保您的菜單文本清晰、描述性強(qiáng)、切中要害，并且不要過(guò)于籠統(tǒng)。如果您不完全確定哪種措辭效果更好，您可以嘗試兩個(gè)不同的版本，并通過(guò)  在您的網(wǎng)站上執(zhí)行 A/B 測(cè)試來(lái)測(cè)試它們。

  除了確保項(xiàng)目可找到之外，描述性導(dǎo)航菜單還將向 Google 和其他搜索引擎提示您的網(wǎng)站是關(guān)于什么主題的。

• 08. 指示用戶所在的頁(yè)面

  沒(méi)有人喜歡迷失方向——瀏覽網(wǎng)站時(shí)也不例外。您可以通過(guò)明確訪問(wèn)者在您的網(wǎng)站上的位置來(lái)避免這種情況。

  最好也是最復(fù)雜的方法之一是向您的網(wǎng)站添加面包屑。 痕跡導(dǎo)航是一種顯示用戶在頁(yè)面上相對(duì)于網(wǎng)站其余部分的位置的方法，使其易于操作。

  痕跡導(dǎo)航通常以一系列水平鏈接的形式顯示在頁(yè)面頂部，由“大于”（>） 符號(hào)分隔，但當(dāng)然，您可以使用箭頭或其他與您網(wǎng)站的視覺(jué)語(yǔ)言保持一致的圖像。對(duì)于內(nèi)容較長(zhǎng)的網(wǎng)站，一個(gè)簡(jiǎn)約的選項(xiàng)是狀態(tài)欄，它向用戶指示他們?cè)跒g覽特定頁(yè)面時(shí)的位置。

• 09. 確保訪問(wèn)者可以從任何頁(yè)面訪問(wèn)任何頁(yè)面

  最后一個(gè)提示和經(jīng)驗(yàn)法則是，訪問(wèn)者應(yīng)該能夠從任何頁(yè)面導(dǎo)航到他們想要的任何頁(yè)面。請(qǐng)記住，并非每個(gè)人都會(huì)從其主頁(yè)訪問(wèn)您的網(wǎng)站。這意味著他們登陸的任何其他頁(yè)面都應(yīng)該連接到你網(wǎng)站的其余部分。

  一個(gè)簡(jiǎn)單的解決方案是確保所有頁(yè)面都可以從菜單訪問(wèn)，并且每個(gè)頁(yè)面都包含一個(gè)菜單。為了使事情更加直觀，請(qǐng)保持每個(gè)頁(yè)面上的網(wǎng)站菜單設(shè)計(jì)一致，將其放置在完全相同的位置以避免混淆。

專業(yè)提示：在考慮消化冗長(zhǎng)文本頁(yè)面（例如長(zhǎng)篇博客文章或登錄頁(yè)面）的用戶體驗(yàn)時(shí)，錨鏈接是您武器庫(kù)中的另一個(gè)方便的導(dǎo)航工具。

這些鏈接位于導(dǎo)航菜單之外，通常位于頁(yè)面頂部，以幫助訪問(wèn)者跳過(guò)不相關(guān)的內(nèi)容，即他們最感興趣的部分。