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

在所有需要考慮的因素中，可以決定您網(wǎng)站的 UX 設(shè)計的成?。壕W(wǎng)站導(dǎo)航。一個易于導(dǎo)航的網(wǎng)站將幫助用戶找到他們正在尋找的內(nèi)容，并為他們提供積極的體驗，鼓勵他們再次返回。

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

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

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

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

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

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

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

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

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

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

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

• 水平導(dǎo)航

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

  因為它是網(wǎng)頁設(shè)計的標(biāo)準(zhǔn)，所以這種類型的菜單使用起來很直觀，并且很容易讓訪問者找到。

• 下拉導(dǎo)航

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

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

• 漢堡菜單

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

• 側(cè) 欄

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

• 頁腳導(dǎo)航

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

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

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

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

堅持慣例

使用粘性菜單

限制項目數(shù)

添加搜索欄

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

將您的 logo 鏈接回主頁

指示用戶所在的頁面

確保訪客可以從任何頁面訪問任何頁面

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

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

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

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

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

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

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

哪些信息對您和您的訪客最有價值？

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

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

• 03. 堅持常規(guī)

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

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

• 04. 使用粘性菜單

  粘性菜單（也稱為“固定”或“浮動”菜單）是一種即使訪問者向下滾動您的網(wǎng)站也會保持不動的菜單。這對于長滾動頁面尤其重要，因為您不希望訪問者一直訪問您網(wǎng)站的頂部，只是為了訪問另一個頁面。

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

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

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

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

• 06. 添加搜索欄

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

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

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

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

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

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

• 08. 指示用戶所在的頁面

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

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

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

• 09. 確保訪問者可以從任何頁面訪問任何頁面

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

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

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

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