網站導航是許多人將頁面和內容作為事後思考而創建的東西。在最近的一項調查中，只有50％的互聯網用戶能夠根據標準的網站導航結構預測相關內容的位置。
在哪裡可以找到特定問題的答案
如果您的訪問者中有一半找不到他們要查找的頁面，那將是一個巨大的UX問題。
這將導致更高的跳出率，更少的現場時間和更低的轉化率。
免費試用
如果您要管理的是電子商務商店，導航不暢也會對您的底線和收入產生負面影響。
在本文中，我將介紹從A到Z的網站導航。這意味著，您將學到最佳實踐，不同類型的導航，以及為您的網站創建完美導航所需的操作。
開始吧！
什麼是網站導航？
網站導航是在互聯網上瀏覽頁面，應用程序和網站的過程。其背後的技術稱為超文本或超媒體。
超文本或媒體是基於文本的網頁，使用超鏈接將其連接到Internet上的其他頁面。超鏈接是將您的網路瀏覽器引導至URL的鏈接。
URL指示瀏覽器應從伺服器訪問哪個文件，並下載並呈現數據，以便用戶查看。
內部鏈接指向同一域上的不同頁面。外部鏈接指向另一個域，一個完全獨立的網站和伺服器的不同頁面。
網站導航使用帶有內部鏈接的菜單，使訪問者可以輕鬆找到他們要查找的頁面。良好的導航是用戶友好站點的基本要素。
什麼是網站導航菜單？
網站導航菜單是一組鏈接（通常鏈接到內部頁面），這些鏈接被組織成一個菜單。大多數網站，包括我們自己的網站，在其網站的頂部都有菜單。
Kinsta標題菜單
此部分稱為網站設計和開發網站的「標題」。這些菜單中鏈接到的一些最常見的頁面是：
- 關於我們。
- 博客。
- 聯繫。
- 特徵。
- 計劃/定價。
該菜單當然還可以包含指向其他頁面的鏈接。
網站的導航結構是什麼？
網站的導航結構描述了網站上不同頁面的組織方式以及相互之間的聯繫。
例如，某些頁面和內容只能通過訪問特定頁面來訪問。設計師和Web開發人員在製作新網站時通常會計劃導航結構。
網站導航結構
在此示例中，「關於」，「計劃」，「聯繫人」和「博客」頁面從主菜單鏈接到。要訪問任務和團隊頁面，您需要先訪問關於頁面。
為什麼導航在網站上很重要？
在本文的簡介中，您了解到50％的互聯網用戶無法正確使用標準菜單。想像一下，幾乎沒有人能找到完全沒有導航的正確內容。
使用正確的導航和菜單方法，您可以將百分比降低到50％以下。這將降低跳出率，增加您的平均停留時間，並帶來更多的流量，潛在客戶和客戶。
不要讓您的訪客迷路?我們將分享您需要了解的有關網站導航的所有信息，以及為什麼它對網站成功至關重要？
點擊鳴叫
網路導航的類型
網站導航有三種主要類型。他們是：
正確組合後，它們可以幫助您的訪問者瀏覽您的網站並毫無問題地找到目的地。讓我們仔細看看每個。
1.全球網站導航
使用全球網站導航，網站的所有頁面上的菜單和鏈接都是相同的。許多現代菜單都是以這種方式設計的，包括我們在Kinsta站點上的菜單：如果您向下滾動頁面，菜單將「跟隨」。
Kinsta全局標題菜單
在屏幕截圖中，您可以看到我們簡單易懂的標題菜單。在我們所有頁面上都一樣，並指向我們最重要的頁面和內容。
我們知道潛在客戶在做出決定之前想要了解的有關託管公司的重要信息。因此，我們使潛在客戶可以輕鬆找到我們的計劃，功能並與我們聯繫。並且，對於現有用戶，我們具有登錄選項，使他們可以登錄其MyKinsta儀錶板。
信息
想一窺MyKinsta的外觀嗎？免費創建您的模擬賬戶100％，然後開始試用。
我們的頁腳菜單也是全球性的，突出顯示了我們網站的基本部分以及一些特色內容。
頁腳菜單
全局菜單是大多數CMS解決方案的標準配置。
每個WordPress主題都允許您為導航菜單設置不同類型和區域。如果需要更多功能，可以使用菜單插件提供更多選項。
2.分級網站導航
分層導航意味著菜單根據每個頁面的上下文而變化。
大多數報紙和純粹基於內容的網站都具有分層導航功能。例如，如果您訪問報紙的首頁，通常會在標題菜單中看到指向頂部新聞類別的鏈接。
來自紐約時報的分層導航示例
如果菜單是全局菜單，則單擊其他類別後，菜單將保持不變。但是，由於它是分層結構，因此會顯示新的鏈接，這些鏈接指向我們訪問的類別頁面的子類別。
分層導航示例
在《紐約時報》的《科學》頁面上，您根本看不到頂層菜單。相反，您會看到指向科學研究和文章的不同小節的鏈接。
此項更改使此菜單與您在大多數較小站點上找到的常規全局菜單分開。
3.本地網站導航
與分層導航和全局導航相反，本地網站導航是指內容本身包含的內部鏈接。通常，會在層次結構的同一級別或更深的級別為用戶提供選項，或者提供導航到其他相關頁面的鏈接。
雜誌網站就是一個很好的例子，它經常使用鏈接來幫助讀者探索某篇文章的更深層次的背景。如果他們提到過去所涉及的事件，則將鏈接到該文章，而無需深入解釋。
頁面上鏈接的相關內容的示例
但這不僅限於雜誌和新聞網站。電子商務商店嚴重依賴這種類型的導航菜單來展示相同類別的產品。
電子商務中的本地導航示例
通常，內部鏈接也是SEO（尤其是WordPress SEO）的重要方面，因此對於管理網站的任何人來說，內部鏈接現在都是標準做法。
網站導航示例
讓我們不再深入探討理論，而是深入研究一些示例。我將報道新聞網站和二十二十個WordPress主題。
新聞網站：紐約時報
紐約時報首頁菜單
乍一看，《紐約時報》似乎主要使用其類別的單個全局標題菜單。
但這不是終點。紐約時報在其數百個類別頁面和數百萬篇文章中使用了所有類型的導航。
使用的導航類型：
- 分層的。
- 全球。
- 本地。
讓我們看一下每個頁面的不同標題導航。
主頁
在其網站的標題部分，它包含兩個菜單，一個位於徽標上方的可擴展全局菜單，一個位於標題下方的層次菜單。本質上，這就像標題和子標題菜單設置一樣。
紐約時報首頁–標題菜單
如果展開標題漢堡菜單，則它會變成左側的側邊欄，在大多數現代解析度下，邊欄都有很大的餘量。
它不會模糊/使用覆蓋層隱藏網站上的任何內容。
主頁（移動版）
讓我們研究一下移動設備上的相同標題部分。大多數互聯網用戶通過智能手機訪問新聞網站，因此移動體驗可能比台式機更為重要。
紐約時報首頁–移動版
新聞類別子標題菜單不屬於移動設備主頁的一部分。相反，您只有可用的可擴展選項。
展開後，它將變成一個全屏菜單，並完全覆蓋主頁上的所有內容。
展開菜單-紐約時報首頁（移動版）
它包括台式機主菜單中的每個選項，並且鏈接按類別整齊地組織。
分類頁面
在類別頁面的標題漢堡菜單下方，您會看到一個指向其他類別子集的鏈接。
紐約時報科學頁面–主菜單
對於只對更廣泛主題中的特定領域感興趣的人，可以更輕鬆地找到可能與他們的興趣更一致的文章。
分類頁面（移動）
在移動設備上，這些類別頁面包括與桌面版本相同的標題漢堡菜單和結構。輔助標題菜單並未完全隱藏，從而使導航和內容發現更加容易。
紐約時報科學頁面–主菜單（移動）
另一個原因可能是，許多移動體驗是通過搜索或社交媒體開始的，而不是直接訪問NYT主頁。
單條
對於單篇文章，浮動標題指示您當前所在的部分，但僅具有可展開的全局菜單（以及搜索框）。
紐約時報文章–標題菜單
單一文章（移動）
在移動設備上，保持清潔的導航，因為唯一的菜單是標題漢堡包菜單。
紐約時報文章–標題菜單（移動）
頁腳
NYT頁腳菜單在首頁，類別頁面和單個文章中相同。
紐約時報文章–頁腳菜單
頁腳（移動）
紐約時報文章–頁腳菜單（移動）
在移動設備上，頁腳菜單僅顯示五個菜單項，一旦單擊，所有這些項都會擴展為子部分。
例如，如果您點擊「藝術」部分，則可以瀏覽以下子部分：
紐約時報文章–擴展頁腳菜單（移動）
由於該網站在向下滾動時使用JavaScript動態載入了更多內容，因此頁腳似乎根本不存在。
這是一個巧妙的技巧，可以幫助您節省現場時間並吸引讀者閱讀更多文章，但是這會使網站導航更加困難。
內容布局
有人可能會爭辯說，在線報紙和博客使用的主要導航工具不僅僅是菜單。正是報紙的版面本身為NYT和其他類似網站提供了導航主幹。
紐約時報首頁
所有突出顯示的元素都是可單擊的，並指向《紐約時報》網站內的不同內部頁面。
內容布局是網站導航在其主頁和類別頁面上實現的另一個關鍵元素。
二十二十WordPress主題
一年後，另一個默認的WordPress主題。這次是20點20分，我們將深入探討一下導航的變化。
我將檢查開發人員如何決定使用此最新WordPress實例處理菜單和內部鏈接是否有任何不同。
標題菜單
就像任何標準的WordPress主題一樣，新的官方發行版在標頭部分提供簡潔的菜單。您可以選擇不同的顯示位置，這是「桌面水平菜單」選項的外觀：
「二十二十」主題中的標題菜單示例
另一方面，「桌面擴展菜單」選項將使您有可能在右上角的合理欄中擴展菜單鏈接。
「二十二十」主題中擴展標題菜單的示例
主要內容區域以深灰色著色，從而將用戶的焦點吸引到鏈接上的菜單。
頁腳
「二十二十」主題中的頁腳菜單示例
在頁腳中，沒有用於內部導航的鏈接，只有一個簡單的「 To the top」鏈接可以帶您回到頁面頂部。
什麼使良好的網站導航？
良好的網站導航始終以用戶為中心。它使用清晰易懂的語言，並鏈接到最重要的頁面。
它利用充足的空白空間，顏色變化或其他設計技術將自己與主要內容清楚地分開。另外，它更易於在所有設備（移動設備和台式機）上閱讀和使用。
以用戶為中心的導航也意味著上下文。它考慮了用戶的體驗和期望。這可能就是為什麼在線報紙仍然無法擺脫其「擁擠」設計的原因。
在閱讀報紙的背景下，這就是用戶和潛在客戶的期望，其中包括非常廣泛的類別和子類別菜單。
在下一節中，我將介紹如何為您的網站創建良好導航的基礎知識。
改進網站導航的8條原則
即使您是一個完整的初學者，也可以按照以下提示為網站添加導航功能。
1.規劃頁面結構和導航
在甚至開始為網站編寫內容之前，請計劃一下頁面結構和導航的外觀。
規劃是為您的訪客提供令人滿意的導航的過程中必不可少的一部分。您可以使用站點地圖創建器來幫助您快速創建自己想要的網站體驗的模型。
GlooMaps是一個很好的站點地圖工具的示例。
GlooMaps
您可以免費創建任意數量的文檔。每個人都有一個唯一的URL，您可以共享該URL以收集反饋並讓其他人對其進行編輯。創建後，您的URL將持續14天，除非再次訪問。每次新訪問都會將鏈接壽命再延長14天。
GlooMaps不是您唯一可以使用的工具，還有很多其他功能，例如Octopus，VisualSitemaps，Creately等。
2.遵循既定標準
不要嘗試重新發明輪子。網站導航更多是關於可用性而不是創造力。
對於基本的設計元素，例如菜單的放置位置以及如何指示菜單可擴展，請遵循已知的標準。
三個水平條紋或「漢堡」符號是識別可擴展菜單的最易識別的圖標之一。另一個是創建一條水平線的三個點。
如果您想發揮創意並開發自定義圖標，那麼許多訪問者可能會無法理解您的設計目的，並且會很難找到您的菜單。
3.使用用戶的辭彙
使用標準的Web開發術語或過度創意的副本，而不僅僅是鏈接到相同的舊頁面，而是使用一種更接近您的用戶使用，搜索和想要的語言。
這種方法對於SEO和可用性都是有益的。創建可反映用戶在線搜索內容的頁面。
然後，您可以使用相同的單詞和短語來幫助用戶在Google上找到您的網站，從而鏈接到這些頁面。
4.使用響應菜單
由於現在超過52％的在線流量是移動的，因此響應/移動優先的設計已成為絕對必要。
確保菜單實現可擴展的移動菜單，而不是菜單在移動Web瀏覽器中繼續出現在框架之外或太混亂。
由於某種原因，它已成為行業標準。帶有微小文本的水平菜單很難在移動設備上閱讀，單擊和正確使用。
好消息是，所有最佳WordPress主題默認都帶有響應式設計和響應式菜單。除非您是從頭開始設計WordPress網站，否則WordPress一定會讓您滿意。
5.利用頁腳菜單
不斷閱讀並滾動到網站底部的讀者比普通用戶更具吸引力。利用這一點，並使用每頁底部的空白突出顯示有價值的內容。
由於頁腳沒有佔據「摺疊之上」的空間，因此您可以細化並包括多個類別，甚至突出顯示重要的基石頁面或文章。
例如，在此頁面上查看我們如何處理頁腳。我們涵蓋了重要的功能頁面，我們的公司，資源分解等等。
頁腳可讓您突出顯示「完全不適合」頁眉的內容。
6.使用顏色和空白將導航與其他元素分開
使用顏色，字體和空格將菜單與主要內容和側邊欄分開。明確導航的開始和結束位置。
如果您的網站訪問者甚至根本找不到菜單，那麼您在菜單中使用哪種語言或鏈接到哪個頁面都沒有關係。
7.避免使用下拉菜單
對於大多數網站（並非全部），下拉菜單不是必需或有用的。當用戶在菜單中看到鏈接時，即認為該鏈接是可單擊的。除非設計將其與可單擊的鏈接分開，否則可能導致混亂。
主菜單中的鏈接過多也會對網站的可用性產生負面影響。
在下拉菜單中實現分層導航和本地導航可以使用戶流程更加順暢。它還允許用戶與多個頁面進行交互，並在您的網站上花費更多的時間，而不用瀏覽龐大的鏈接列表。
8.扁平化您的結構
如果您想讓訪問者儘可能輕鬆地瀏覽網站的所有頁面，請儘可能保持導航結構平坦。
使事情變得簡單，而不是從主頁鏈接到少數頁面，然後再擴展到更多的子頁面和類別。
確保從您的首頁鏈接到重要類別，並從那裡鏈接到單層子類別或單個文章頁面。
扁平的網站結構
有證據表明，以這種方式使結構變平對SEO有積極作用，並可能導致Google站點鏈接。因此，不要讓您的網站結構過於混亂！
網站導航菜單趨勢2020
儘管近年來更廣泛的網路設計趨勢包括3D設計元素和將量身定製的照片納入創意設計之類的東西，但菜單的發展並不令人興奮。
但這並不意味著沒有任何改變。這是我們過去幾年中一些最關鍵的菜單趨勢的快速介紹。
全屏移動菜單中的可擴展類別
優步–菜單移動
優步（Uber）和其他具有經過改良的現代設計的巨型公司已經更新了菜單，以使其更加實用。
對於這些企業來說，一個問題是它們擁有太多不同的產品和類別，以致於不可能明智地將它們包含在單個菜單中。
這樣可以產生清晰，分類的可擴展移動菜單，而不僅僅是無窮無盡的鏈接列表。
浮動標題菜單
過去幾年中菜單的普遍趨勢可能是浮動標題菜單。
浮動標題菜單是在向下滾動頁面時（如我們在kinsta.com上所使用的）的菜單，該菜單粘貼在Web瀏覽器窗口的頂部。通常，它是標題部分的一部分，標題部分包括小徽標以及搜索欄。
很難反駁，因為不斷訪問菜單會使內部導航更加容易。此類菜單包含在許多WordPress主題中，並且趨勢沒有停止的跡象。
桌面上的疊加下拉菜單
關於網站導航的一些最基本的建議是遠離下拉菜單。這是有原因的。
但這並不意味著它們天生就可怕。下拉菜單很難在計算機屏幕上實現有意義的實現。
通過在主要內容上覆蓋顏色，他們可以將100％的用戶注意力吸引到菜單上。與在懸停時顯示更多鏈接相比，可擴展類別還具有更好的選擇。
這些因素加在一起，使其在2019年成為增長趨勢。實際上，許多創新的網站和模板在桌面上都包含疊加的下拉菜單。
更高的跳出率，更低的轉化率，更少的網站停留時間…網站導航是UX的重要組成部分?通過本指南了解如何提高自己的表現️
點擊鳴叫
摘要
這篇文章應該使您對什麼是網站導航及其某些關鍵點有清晰的了解。
網站導航應始終側重於簡潔，清晰，而不是強烈的色彩和創意設計。由於您網站的導航和菜單需要同時考慮台式機和移動用戶，因此事情可能會變得更加棘手，因此聘請網路開發人員是一個不錯的選擇。
始終嘗試遵循網站菜單設計的最佳做法，以確保您的訪問者和搜索引擎可以輕鬆瀏覽您的內容。
可用性和清晰度將繼續成為前進的重點。因此，如果您可以掌握用戶的語言並創建對他們有意義的結構，則可以對菜單進行過時的驗證。
如果您喜歡這篇文章，那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站，並從我們經驗豐富的WordPress團隊獲得24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展，性能和安全性。讓我們向您展示Kinsta的與眾不同！查看我們的計劃