良好的網(wǎng)站導航是必不可少的成都網(wǎng)站設計功能。我們不只是這么說——有研究支持它。根據(jù)全美網(wǎng)絡的一項研究，38%的消費者在第一次瀏覽網(wǎng)站時會查看頁面的導航鏈接和布局。
導航的重要性不可低估。而且，訪問者更喜歡實施網(wǎng)站導航最佳實踐的網(wǎng)站的原因是可以理解的。它可以幫助他們快速輕松地找到他們正在尋找的信息，因此導航是用戶體驗和網(wǎng)站策略的典型組成部分。
今天，我們將仔細研究網(wǎng)站導航設計，以便您可以創(chuàng)建適合訪問者的系統(tǒng)。我們還將探索網(wǎng)站導航最佳實踐。之后，我們將查看網(wǎng)站導航示例并探索有效設計的一些必備條件。讓我們開始吧。
網(wǎng)站導航是用戶界面組件的集合，允許訪問者在網(wǎng)站上查找內(nèi)容和功能。這些組件可以是副本、鏈接文本和按鈕以及菜單的形式。
最后一次提到的可以說是與有效網(wǎng)站導航最相關的，所以讓我們簡要定義一下菜單在成都網(wǎng)站設計中的含義。
網(wǎng)站導航菜單是指向其他網(wǎng)頁（通常是內(nèi)部網(wǎng)站頁面）的有組織的鏈接列表。導航菜單出現(xiàn)在整個網(wǎng)站的頁眉或側邊欄中，允許訪問者快速訪問最有用的頁面。
雖然幫助訪問者從一個網(wǎng)頁移動到另一個網(wǎng)頁是首要任務，但它并不是唯一的優(yōu)先事項。導航還可以幫助訪問者理解網(wǎng)站上各個頁面之間的關系。但在實踐中到底是什么樣子的呢？讓我們分解一下。
全美網(wǎng)絡分析師的一篇文章中表示，導航被視為網(wǎng)站信息架構(IA)的冰山一角。水面以下是前端訪問者看不到的冰山部分：用于構建網(wǎng)站IA的研究、策略、管理和組織。表面上方是導航界面，通常表示為一系列超文本鏈接和搜索欄。
因此，您網(wǎng)站的IA在導航界面中不可見，但卻是該界面的基礎。這最終讓訪問者感覺到內(nèi)容是相互聯(lián)系和分類的，以滿足他們的需求和期望，但實際上并沒有顯示所有用于識別和組織內(nèi)容之間關系的電子表格和圖表。
子導航或本地導航是網(wǎng)站訪問者可以找到網(wǎng)站IA的較低級別類別的界面。這些通常是主要導航鏈接的子類別。
主導航菜單包含導航項“支持”。當您將鼠標懸停在該項目上時，會出現(xiàn)一個子導航菜單，提供多種支持的方式。這是一個有效的添加，因為訪問者可以無縫地找到他們正在尋找的東西，但菜單乍一看并沒有讓人不知所措。這是雙贏的。
為什么網(wǎng)站導航如此重要？那么，對于初學者來說，它會影響訪問者是否到達您的主頁并瀏覽或單擊“后退”按鈕，從而導致更高 的跳出率。因此，您應該深入考慮構建網(wǎng)站導航的最佳方式。這就是它的不同類型出現(xiàn)的地方。
您如何構建網(wǎng)站導航取決于您的目標受眾以及您認為最直觀和易于訪問的格式。以下是您在構建網(wǎng)站時可能會考慮的一些常見網(wǎng)站導航類型。
讓我們從水平導航欄開始吧。您可能已經(jīng)猜到，水平導航欄是最常見的類型。它并排列出主要頁面并將它們放在 網(wǎng)站標題中。許多網(wǎng)站都有相同的部分，例如“關于”、“產(chǎn)品”、“定價”和“聯(lián)系方式”，因為訪問者希望看到它們。
雖然這些部分很受歡迎是有原因的，但您不應該害怕通過定制菜單來定制您的網(wǎng)站。在構建導航欄時，請考慮您的網(wǎng)站目的和受眾。你想在你的網(wǎng)站上實現(xiàn)什么，訪問者在尋找什么？從回答這兩個問題開始，然后從那里開始。
接下來，我們有下拉導航菜單。此選項非常適合具有復雜IA的內(nèi)容豐富的站點。如果您希望您的菜單包含大量指向頁面的鏈接，您可以考慮使用此選項，因為您無法并排列出所有選項。相反，您可以在頂級導航欄中列出最重要或最一般的項目。然后，您可以在下拉菜單中添加其余內(nèi)容。
您應該記住的另一個網(wǎng)站導航選項是漢堡包。您可能已經(jīng)熟悉此菜單，因為它在移動網(wǎng)頁設計中很受歡迎。如果您使用這種方法，您的導航項將在較大的屏幕尺寸上水平列出。
然而，在較小的屏幕上，它們會折疊在較小屏幕尺寸的 漢堡包按鈕后面 。當訪問者單擊這個三行圖標時，會出現(xiàn)帶有導航鏈接的垂直下拉或水平彈出窗口。如果您網(wǎng)站上的空間有限，或者您不希望導航占用大量空間，那么漢堡式導航菜單可能是正確的選擇。
現(xiàn)在，我們有了垂直側邊欄導航菜單。這是網(wǎng)站導航的絕佳選擇，因為它提供了無縫的用戶體驗。這些項目彼此堆疊并位于側邊欄中。不可否認，這不如水平導航受歡迎，但垂直導航有好處。房地產(chǎn)不受限制，因此您可以編寫更長的導航鏈接。還有機會獲得更多頂級選項。
另一個選項是頁腳菜單。它通常與水平導航欄配對并擴展。如果訪問者在標題中看不到他們需要的鏈接，他們可以向下滾動到頁面底部，在那里他們會找到更多選項。
對于網(wǎng)站導航設計，沒有一種“正確”的方式。但是有一種正確的方法來考慮如何設置導航：考慮如何使首次訪問者和重復訪問者能夠充分利用您的網(wǎng)站。如果您在創(chuàng)建網(wǎng)站導航時考慮到這一點，就不會出錯。
當您將注意力集中在站點訪問者身上時，您的導航結構的外觀和功能可能與其他站點上的導航結構不同。這實際上是一件好事，因為這意味著您充分考慮了您的目標受眾。
讓我們在創(chuàng)建網(wǎng)站導航時逐步完成設計過程。
因為您的站點上有很多頁面，所以確定哪些頁面足夠重要以成為通用導航的一部分可能會很棘手。對于SEO和用戶體驗，Orbit MedIA建議將您的導航限制在最多七個項目。
但是你如何開始縮小范圍呢？貴公司的利益相關者可能對什么值得導航、什么不值得有不同的看法，但要以用戶體驗為中心。最后，考慮您的網(wǎng)站訪問者來確定您應該采用哪條路線。您可以使用以下一些策略來開始解讀您的網(wǎng)站訪問者希望在您的菜單上看到的內(nèi)容。
卡片分類 是一種簡單的用戶體驗技術，可幫助您了解網(wǎng)站訪問者的想法并從他們的角度設計導航。不，您不需要任何用戶體驗經(jīng)驗即可嘗試此練習。
首先，邀請組織外部的人員參與20分鐘的練習。在桌子上放一堆索引卡，每張索引卡代表您網(wǎng)站上的一個重要頁面。
接下來，請參與者按照他們認為合適的方式組織卡片。尋找參與者如何對您網(wǎng)站上的頁面進行分組的趨勢，并詢問他們?nèi)绾蚊總€類別。這是一種非常有效的方式來理解用戶的直覺感受。
接下來，您的網(wǎng)站導航設計可以從歸因報告中受益。如果您的營銷分析軟件提供了它，那么這非常適合決定您的主導航中應該包含哪些內(nèi)容。
此報告將新創(chuàng)建聯(lián)系人的數(shù)量歸因于他們與您的業(yè)務的互動，因此您可以更好地了解您網(wǎng)站上將訪問者轉(zhuǎn)化為潛在客戶的內(nèi)容和功能。
如果您沒有歸因報告，您仍然可以通過百度站長中的用戶流報告查看哪些頁面在您的網(wǎng)站上是必不可少的。此報告不會區(qū)分來自客戶的標準流量，但會突出顯示人們?nèi)绾卧谀木W(wǎng)站上瀏覽他們的體驗。
用百度自己的話說：“用戶流報告是用戶從源頭到各種頁面以及他們離開網(wǎng)站的路徑的圖形表示。”
網(wǎng)站導航中的順序很重要。認知研究提供的證據(jù)表明，網(wǎng)頁瀏覽者往往會最生動地記住導航兩端的鏈接。通常被稱為首因效應和近因效應，它們說明了這樣一種現(xiàn)象，即列表中出現(xiàn)在最前面或最后的詞往往更能吸引觀眾的注意力。因此，對于您的網(wǎng)站，您需要非常有意識地考慮在這些位置放置的項目。想想對您的典型訪客來說什么最重要。
表達導航選項的最佳方式取決于您經(jīng)營的組織或企業(yè)的類型。對于初學者，您可以選擇直接導航或嘗試更多創(chuàng)意標簽。當然，請確保您選擇的任何內(nèi)容對您的品牌來說都是直觀的。
在選擇要在主要導航鏈接中使用的詞時，最重要的是要記住首先考慮客戶會使用哪些詞來描述這些頁面。然后，考慮搜索引擎優(yōu)化。
可以說，網(wǎng)站最明確的選擇是基于對象的導航。基于對象的導航將內(nèi)容置于具體（通常只有名詞）類別下。636a.com是基于對象的導航示例，如下面的艾默生學院網(wǎng)站也是如此。這種類型的組織將導航視為目錄，并將頁面分組為最適合的主題或類別。
面向操作的導航可能更適合其他站點。要知道什么時候這樣做合適，請詢問您的受眾，他們訪問您的網(wǎng)站主要是為了了解某事還是為了采取特定行動。在下面來自霍華德大學的例子中，訪客帶著一個動作來到這里。他們不是來閱讀“關于”頁面的——他們是來申請、訪問或捐贈的。
對于擁有多個受眾且線條清晰的公司，您可能需要考慮基于受眾的導航或子導航，如下例所示。但是，這僅在訪問者可以輕松地對自己進行分類時才有效。例如，您不希望使用小型公司與中型公司，或營銷與廣告公司，因為這些界限通常很模糊，可能會讓您的聽眾對先去哪里感到困惑。
除了匹配您的受眾本能地組織您的網(wǎng)站的方式之外，您還需要考慮如何優(yōu)化您的導航術語以實現(xiàn)最佳搜索。在百度上的一篇文章中，SEO策略師何林根建議使用百度站長的的關鍵字工具來識別最常將人們帶到您網(wǎng)站的搜索詞。然后，您可以使用這些詞的變體作為網(wǎng)站導航的指南。
網(wǎng)站導航的黃金法則？不要讓人覺得。從這些網(wǎng)站導航示例中可以看出，越明顯越好。可用性顧問蘇揚珺基于這種觀點寫了一整本書。遵循這些網(wǎng)站導航最佳實踐，讓用戶在瀏覽您的網(wǎng)站時不會感到沮喪或困惑。
一致性是關鍵，網(wǎng)站導航設計也不例外。這是一個至關重要的網(wǎng)站導航最佳實踐，因為它可以成就或破壞用戶體驗。在格式化和設計導航界面的方式上保持一致。這一切都是為了與訪問者的當前知識和期望保持一致。
例如，考慮一下如果您的主頁鏈接是黑色的并且當用戶將鼠標懸停在它們上面時會出現(xiàn)下劃線，訪問者會有什么感受。然后，當他們查看“聯(lián)系人”頁面時，鏈接是藍色的，并且沒有下劃線。這很令人困惑，對吧？相反，您的鏈接在每個站點頁面上都應該具有相同的樣式。否則，訪問者將不知道哪些文本帶有超鏈接，哪些不在您的導航菜單中。
2022年第四季度，移動設備占 全球網(wǎng)站流量的59%以上，因此無論屏幕大小如何，針對所有屏幕優(yōu)化您的網(wǎng)站和導航變得越來越重要。而且， 根據(jù)Shopify的數(shù)據(jù)，到2024年，超過42%的電子商務購買總額將發(fā)生在移動設備上——因此優(yōu)先考慮移動設備至關重要。是的，這擴展到您的網(wǎng)站導航菜單。
在設計菜單時，我們鼓勵您首先考慮移動設備。從最小的屏幕尺寸開始，您必須優(yōu)先考慮哪些鏈接最重要以包含在您的主導航中以及按什么順序。這也是確定優(yōu)先級的一個很好的練習。
您還必須決定哪些導航功能（如漢堡包按鈕）在移動設備上是必需的，以及它們?nèi)绾芜m合您的桌面設計。這將幫助您轉(zhuǎn)向設計更大的屏幕尺寸，并清楚了解哪些頁面和導航功能最重要。
你熟悉三擊規(guī)則嗎？從本質(zhì)上講，這個概念說明了每個網(wǎng)站導航結構都應該使人們能夠登陸網(wǎng)站上的任何頁面并在三下點擊內(nèi)找到他們需要的東西。
盡管這個概念在網(wǎng)頁設計領域根深蒂固，但它在很大程度上已經(jīng)聲名狼藉。一項 研究 發(fā)現(xiàn)，用戶在點擊3次后退出任務的可能性并不比點擊12次后高。
盡管規(guī)則可能不準確，但該基礎告訴我們一個重要原則。您確實希望限制訪問者訪問關鍵信息或在您的站點上完成任務所需的工作量。計算點擊次數(shù)是一個過于膚淺的指標。因此，我們鼓勵您專注于建立清晰的路徑、減少頁面加載時間并消除用戶旅程中的其他摩擦點。
如果您需要面包屑導航的示例 ，請記住Hansel和Gretel的童話故事。當兩人穿過樹林時，孩子們?nèi)鱿旅姘家员闼麄冋业交丶业穆贰?
同樣，通過面包屑導航，訪問者可以直觀地看到他們在網(wǎng)站結構中的位置。然后，他們只需單擊一下即可返回到其他頁面。最好的部分是它不會占用您網(wǎng)站上的太多空間。此輔助導航欄通常由文本鏈接組成，文本鏈接由“大于”符號 (>) 分隔并位于標題下方。
成都網(wǎng)站設計導航時，必須仔細考慮訪問者和網(wǎng)站目標。請記住：屏幕另一側的人必須瀏覽您的網(wǎng)站，他們這樣做的能力會顯著影響他們留下來的意愿。此外，搜索引擎機器人可以從強大的網(wǎng)站導航設計中受益。
