網站導航是許多人在頁面和內容之後才想到的。在最近的一項調查中，只有50%的網際網路使用者能夠根據標準的網站導航結構預測相關內容的位置。
在哪裡可以找到特定問題的答案
如果一半的訪問者找不到他們正在尋找的頁面，那就是一個巨大的使用者體驗問題。
如果您正在管理一家電子商務商店，那麼糟糕的導航也會對您的底線和收入產生負面影響。
在這篇文章中，我將介紹從A到Z的網站導航。這意味著，您將學習最佳實踐、不同型別的導航，以及您應該如何為您的網站建立完美的導航。
什麼是網站導航？
網站導航是在Internet上導航頁面、應用程式和網站的過程。其背後的技術稱為超文字或超媒體。
超文字或媒體是基於文字的網頁，它使用超連結將它們連線到網際網路上的其他頁面。超連結是將您的網路瀏覽器引導至URL的連結。
URL指示瀏覽器應該從伺服器訪問哪個檔案，它會下載並呈現資料，以便使用者可以看到它。
內部連結指向同一域上的不同頁面。外部連結指向另一個域上的不同頁面，一個完全獨立的網站和伺服器。
網站導航使用帶有內部連結的選單，使訪問者可以輕鬆找到他們正在尋找的頁面。良好的導航是使用者友好網站的基本要素。
什麼是網站導航選單？
網站導航選單是一組連結，通常指向內部頁面，被組織成一個選單。大多數網站，包括我們自己的網站，在其網站的最頂部都有一個選單。
閃電博頂部選單
這部分在網頁設計和開發中被稱為網站的“header”。這些選單中連結到的一些最常見的頁面是：
- 產品/服務
- 部落格
- 品牌
- 聯絡我們
當然，選單也可以包含指向其他頁面的連結。
什麼是網站的導航結構？
網站的導航結構描述了您網站上不同頁面的組織方式和相互連線方式。
例如，某些頁面和內容只能通過訪問特定頁面來訪問。 設計師和網頁開發人員在製作新網站時經常會規劃導航結構。
網站導航結構
在此示例中，關於、計劃、聯絡和部落格頁面從主選單連結到。要訪問任務和團隊頁面，您需要先訪問“關於 ”頁面。
為什麼導航在網站上很重要？
在這篇文章的介紹中，您瞭解到50%的網際網路使用者無法正確使用標準選單。想象一下，很少有人會在完全沒有導航的情況下找到正確的內容。
通過正確的導航和選單方法，您可以將百分比降低到50%以下。這將降低您的跳出率，增加您在網站上的平均時間，並帶來更多的流量、潛在客戶和客戶。
網路導航的型別
網站導航主要分為三種型別。他們是：
正確組合後，它們可以幫助您的訪問者瀏覽您的網站並毫無問題地找到他們的目的地。讓我們仔細看看每一個。
1.全域性網站導航
使用全域性網站導航，選單和連結在網站的所有頁面上都是相同的。許多現代選單都是這樣設計的，包括我們在閃電博網站的選單。
閃電博全域性標題選單
在螢幕截圖中，您可以看到我們簡單易懂的標題選單。它在我們所有的頁面上都是一樣的，並指向我們一些最重要的頁面和內容。
我們的頁尾選單也是全域性性的，突出了我們網站的重要部分和一些特色內容。
頁尾選單
全域性選單是大多數開箱即用的CMS解決方案的標準。
每個WordPress主題都允許您為導航選單提供不同型別和區域。如果您需要更多，您可以使用選單外掛來獲得更多可用選項。
2.分層網站導航
分層導航意味著選單會根據每個頁面的上下文而變化。
大多數報紙和純粹基於內容的網站都具有分層導航功能。例如，如果您訪問報紙的首頁，通常會在標題選單中看到指向熱門新聞類別的連結。
NYT的分層導航示例
如果選單是全域性的，則單擊不同類別後它會保持不變。但是因為它是分層的，它會顯示新的連結，這些連結會導致我們訪問的類別頁面的子類別。
分層導航示例
在紐約時報的科學 頁面上，您根本看不到頂級選單。相反，您會看到指向科學研究和文章的不同子部分的連結。
此更改是此選單與您在大多數較小站點上找到的常規全域性選單的區別所在。
3. 頁面網站導航
與分層導航和全域性導航相比，頁面網站導航是指包含在內容本身中的內部連結。通常，使用者會在層次結構的同一級別或更深的級別獲得選項，或者提供導航到其他相關頁面的連結。
一個很好的例子是雜誌網站，它經常使用連結來幫助讀者探索某篇文章的更深層次的背景。如果他們提到他們過去報道過的事件，他們將連結到該文章，而不是深入解釋它。
頁面上鍊接的相關內容示例
但它不僅僅是為雜誌和新聞網站保留的。電子商務商店嚴重依賴這種型別的導航選單來展示同一類別的產品。
電子商務中的頁面導航示例
一般來說，內部連結也是SEO的一個重要方面，更具體地說是WordPress SEO，因此它現在是任何管理網站的人的標準做法。
網站導航示例
讓我們深入研究一些例子，而不是喋喋不休地談論理論。我將介紹一個新聞網站和WordPress主題二〇二〇。
新聞網站：紐約時報
紐約時報主頁選單
乍一看，《紐約時報》可能主要使用其類別的單一全域性標題選單。
但這不是它結束的地方。紐約時報在其數百個類別頁面和數百萬篇文章中使用所有型別的導航。
使用的導航型別：
- 分層導航
- 全域性導航
- 頁面導航
讓我們看看每個頁面的不同標題導航。
主頁
在其網站的標題部分，它包括兩個選單，一個位於徽標上方的可擴充套件全域性選單和一個位於標題下方的分層選單。本質上，它就像一個標題和子標題選單設定。
紐約時報主頁 – header選單
如果您展開標題漢堡選單，它會變成左側的側邊欄，其中大多數現代解析度都有很大的邊距。
它不會模糊/使用覆蓋來隱藏網站上的任何內容。
主頁（手機）
讓我們檢查移動裝置上的相同標題部分。大多數網際網路使用者通過智慧手機訪問新聞網站，因此移動體驗可能比桌面體驗更重要。
紐約時報主頁 – 移動
新聞類別子標題選單不是手機主頁的一部分。相反，您只有可用的可擴充套件選項。
展開後變成全屏選單，完全覆蓋首頁所有內容。
擴充套件選單 – 紐約時報主頁（移動）
它包括臺式計算機主選單中的每個選項，並且連結按類別整齊地組織。
類別頁面
在類別頁面的標題漢堡選單下方，您會看到一個指向更多類別子集的連結。
紐約時報科學頁面 – 主選單
它使只對更廣泛主題中的特定領域感興趣的人更容易找到可能更符合他們興趣的文章。
類別頁面（移動端）
在移動裝置上，這些類別頁面包含與桌面版本相同的標題漢堡選單和結構。二級標題選單根本沒有隱藏，使導航和內容發現更容易。
紐約時報科學頁面 – 主選單（移動）
另一個原因可能是許多移動體驗是通過搜尋或社交媒體開始的，而不是直接訪問紐約時報的主頁。
單篇
對於單個文章，浮動標題指示您當前所在的部分，但它僅具有可擴充套件的全域性選單（以及搜尋框）。
紐約時報文章——標題選單
單篇文章（手機）
在移動裝置上，保持乾淨的導航，因為唯一的選單是標題漢堡選單。
NYT文章 – 標題選單（移動）
頁尾
NYT頁尾選單在主頁、類別頁面和單篇文章中是相同的。
紐約時報文章——頁尾選單
頁尾（移動端）
紐約時報文章 – 頁尾選單（移動端）
在移動裝置上，頁尾選單僅顯示五個選單項，一旦單擊，所有選單項都會展開為子部分。
例如，如果您單擊藝術部分，您將能夠瀏覽這些子部分：
NYT文章 – 擴充套件頁尾選單（移動端）
由於該網站使用JavaScript在您向下滾動時動態載入更多內容，因此頁尾似乎根本不存在。
這是一個巧妙的技巧，可以幫助您在網站上花費時間並讓讀者閱讀更多文章，但它會使網站更難導航。
內容佈局
有些人可能會爭辯說，線上報紙和部落格使用的主要導航工具不僅僅是選單。正是報紙版面本身為紐約時報和其他類似網站提供了導航支柱。
紐約時報主頁
所有突出顯示的元素都是可點選的，並指向紐約時報網站內的不同內部頁面。
內容佈局是他們在主頁和類別頁面中實施的網站導航的另一個關鍵元素。
WordPress主題二〇二〇
另一個預設的WordPress主題，我們將深入瞭解導航發生了什麼變化。
我將檢查開發人員決定如何使用這個最新的WordPress例項處理選單和內部連結是否有任何不同。
Header選單
就像任何標準的WordPress主題一樣，新的官方版本在標題部分有一個簡潔的選單。您可以選擇不同的顯示位置，這就是桌面水平選單選項的外觀：
二〇二〇主題中的標題選單示例
另一方面，桌面擴充套件選單選項將增加在右上角的對齊欄中擴充套件選單連結的可能性。
二〇二〇主題中的擴充套件標題選單示例
主要內容區域用深灰色著色，將使用者的注意力吸引到連結上的選單上。
頁尾
二〇二〇主題中的頁尾選單示例
在頁尾中，沒有用於內部導航的連結，除了一個簡單的“到頂部”連結，可將您帶回頁面頂部。
什麼是好的網站導航？
良好的網站導航始終在設計時考慮到使用者。它使用清晰、易於理解的語言以及指向最重要頁面的連結。
它利用充足的空白、顏色變化或其他設計技術將自己與主要內容清楚地分開。此外，它更易於在所有裝置（移動裝置和桌面裝置）上閱讀和使用。
以使用者為中心的導航也意味著它是上下文相關的。它考慮了使用者的體驗和期望。這可能是線上報紙仍然無法擺脫“擁擠”設計的一個原因。
在閱讀報紙的背景下，這就是他們的使用者和潛在客戶所期望的，其中包括他們非常廣泛的類別和子類別選單。
在下一節中，我將介紹如何為您的網站建立良好導航的基礎知識。
改進網站導航的8條原則
即使您是一個完整的初學者，您也可以按照以下提示為您的網站確定導航。
1.規劃你的頁面結構和導航
在您開始為您的網站編寫內容之前，請計劃好您的頁面結構和導航的外觀。
規劃是為訪問者提供滿意導航的過程的重要組成部分。您可以使用站點地圖建立器來幫助您快速建立您想要的網站體驗的模型。
一個好的站點地圖工具的例子是GlooMaps。
GlooMaps
您可以根據需要免費建立任意數量的文件。每個人都有一個唯一的 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站點連結。所以不要讓你的網站結構變得太亂！
2022年網站導航選單趨勢
儘管近年來更廣泛的網頁設計趨勢包括3D設計元素和將量身定製的照片融入創意設計之類的東西，但選單並沒有令人興奮的一年。
但這並不意味著一切都沒有改變。以下是我們對過去幾年中一些最重要的選單趨勢的快速瞭解。
全屏移動選單中的可擴充套件類別
優步——移動選單
優步和其他具有改進的現代設計的大公司已經更新了他們的選單，使其更實用。
這些企業面臨的一個問題是，他們擁有如此多不同的產品和類別，以至於不可能明智地將它們包含在一個選單中。
這會導致清晰、分類的可擴充套件移動選單，而不僅僅是無窮無盡的連結列表。
浮動標題選單
也許過去幾年選單的普遍趨勢是懸浮標題選單。
懸浮標題選單是一種選單，當您向下滾動頁面時，它會固定在Web瀏覽器視窗的頂部。通常它是標題部分的一部分，其中包括一個小徽標，可能還有一個搜尋欄。
很難反駁它，因為不斷訪問選單會使內部導航變得更加容易。這種型別的選單包含在許多WordPress主題中，並且趨勢沒有停止的跡象。
桌面上的疊加下拉選單
關於網站導航的一些最基本的建議是遠離下拉選單。而且是有原因的。
但這並不意味著它們天生就很糟糕。下拉選單很難以在計算機螢幕上有意義的方式實現。
通過在主要內容上疊加顏色，他們可以將 100% 的使用者注意力集中在選單上。與在懸停時顯示更多連結相比，您還有更好的可擴充套件類別選項。
這些因素結合在一起，使其成為2019年的增長趨勢。事實上，許多創新的網站和模板都包括桌面上的疊加下拉選單。
小結
這篇文章應該讓您清楚地瞭解什麼是網站導航及其一些關鍵點。
網站導航應始終關注簡單、清晰，而不是強烈的色彩和創意設計。由於您網站的導航和選單需要同時考慮桌面使用者和移動使用者，因此事情會變得更加棘手，聘請網路開發人員可能是一個不錯的選擇。
始終嘗試遵循網站選單設計最佳實踐，以確保您的訪問者和搜尋引擎可以輕鬆瀏覽您的內容。
可用性和清晰度將繼續成為未來的優先事項。因此，如果您能夠掌握使用者的語言並建立對他們有意義的結構，您將能夠使您的選單適應未來。
評論留言