你在公交車上搜尋手機，拼命想找到上週看到的打折配套睡衣套裝，買下它，然後去商店取貨，以免在奶奶的節日晚餐上空手而歸。
但是，你正在尋找的零售網站上令人困惑的移動選單、微小的連結和缺乏搜尋欄的問題，可能會讓你**悔不當初，轉而求助於亞馬遜。
如果您能想象到您的購物者在使用您的網站時會有上述體驗，那麼您就該開始工作了。
在競爭激烈的網路世界中，任何讓使用者難以檢視網站並與之互動的行為都可能導致跳出、銷售損失，甚至可能降低搜尋引擎排名。
防止使用者體驗不佳的第一道防線就是網站的導航選單。它通常是客戶與您的品牌和網站的第一個互動點，也是幫助他們快速找到想要的內容和產品的最佳工具。如果您像大多數小企業一樣希望轉化客戶，這就是您想要的。
在本篇文章中，我們將向您介紹導航選單這一關鍵的網站元素、它為何如此重要、如何完美地製作您的導航選單，以及如何對其進行監控，確保其效能始終符合您的標準。
導航選單簡介
導航選單從一個專門區域顯示所有網頁的有序列表。通常情況下，它們會以標題或邊欄的形式出現，這樣網站訪客就能清楚地看到並訪問它們。
選單不僅能讓使用者更輕鬆地瀏覽網站，還能幫助他們理解網站內容。例如，通過檢視選單，使用者可以更好地瞭解網頁之間的關係。
例如，以下是我們目前閃電博網站上使用的選單：
設計完美導航選單的16個技巧
既然你已經知道導航選單有多重要，那就讓我們來看看設計導航選單的 16 個實用技巧吧。
1. 可讀性決定一切
提高網站導航選單的可讀性對於確保訪客能夠快速找到所需內容、增強使用者體驗（UX）至關重要，這一點稍後會詳細介紹。
以下是一些確保選單可讀性的可行建議：
- 選擇可讀字型：使用可讀的字型，這些字型應針對數字內容進行優化，字型大小應足夠大，以便在各種裝置上輕鬆閱讀。避免使用裝飾性過強或複雜的字型。
- 部署視覺提示：考慮在文字標籤旁新增圖示，使選單項更易於理解。
- 保持簡潔明瞭：避免使用行話或過於有創意的術語，堅持使用使用者希望在選單中看到的常用詞。
- 合理組織：將類似的專案歸入類別或子選單，使用直觀的層次結構引導使用者瀏覽選單項。
- 視覺上與眾不同：選單文字和背景使用對比色，以確保可讀性。考慮使用分隔符或空白來在視覺上區分各組選單項。並採用一種設計功能，突出顯示活動頁面或使用者懸停的選單項。
2. 優化使用者體驗
增強使用者體驗（UX）可提高客戶滿意度，最終使您為網站流量投入的資金獲得健康的投資回報（ROI）。
事實上，投資改善網站使用者體驗元素可將關鍵績效指標（KPI）提高 83%。
簡而言之，在網站導航等地方努力優化使用者體驗是一項明智、吸引人、賺錢的舉措。
要優化使用者體驗，一個很好的目標就是保持選單簡潔。你不希望使用者在複雜的系統中掙扎–整潔、乾淨的設計可以讓訪客輕鬆瀏覽你的網站。
專業提示：一般來說，點選三次或更少，使用者就能在網站上找到他們想去的地方。這就是為什麼像彪馬的這個網站一樣，有很多內容區域的網站通常會選擇巨型選單的原因：
大型電子商務商店經常使用這些巨型選單，因為它們可以從一個空間訪問所有頁面。
3. 堅持使用簡單的設計
為了給訪客留下深刻印象，您可能會在選單中加入大量特效。但是，請考慮將這些華而不實的功能留給網頁設計的其他元素。
這是因為，無論訪客是誰，使用什麼裝置，你都要確保導航載入速度快、易於閱讀和使用。閃爍或移動的文字以及厚重的圖形或照片都會影響瀏覽體驗。
綜上所述，使用相關的、有用的、整體簡單的圖示（如方向箭頭）來引導使用者瀏覽您的欄目也是可行的。請運用您的最佳判斷力！
4. 迎合受眾
通常情況下，經驗豐富的網站使用者以及熟悉您品牌的使用者可以輕鬆瀏覽複雜的選單。但是，不經常使用網站的使用者和不熟悉網站的使用者自然會感到吃力。
因此，請根據您對現有使用者和目標使用者的瞭解來設計導航。
考慮到這一點，你可以選擇更有可能吸引市場的配色方案、字型和結構。這可以讓你的導航更加實用。
例如，新聞網站不太可能像小型麵包店那樣注重設計的簡潔性、影象和品牌：
5. 保持一致
當涉及到導航選單時，不應該有任何意外。重要的是，選單的格式和設計要符合訪客的期望，並在整個網站中保持一致。
例如，Give Me Glow 網站使用的方向箭頭非常清晰、一致且傳統。它們總是出現在可以擴充套件為下拉選單的選單項旁邊：
6. 適當組織內容
如果你有很多不同的分類，導航選單是組織產品頁面的理想場所。此外，它還能讓使用者以合理的方式檢視內容。
例如，零售網站可能會在主導航中按類別對產品進行分組：
一旦確定了內容的主要類別，就可以圍繞這些類別建立導航選單。在合理的情況下，選擇相關的標題或圖片來適當描述頁面也很有用。
7. 建立清晰的層次結構
在選單中設定層次結構，可以將內容分割成小塊。這樣使用者更容易消化。因此，儘量將相關資訊歸類在一起。
對於某些網站來說，根據最受訪問者歡迎或最重要的內容來組織資訊可能會很有用。然後，你可以在選單中突出這些標題。在向使用者展示他們感興趣的頁面的同時，也要引導他們瀏覽那些最能實現你的商業目標的頁面，努力實現兩者之間的平衡。
8. 更復雜的網站不需要更復雜的選單
即使網站擁有大量的頁面和網路，也不必擁有層層疊疊的導航。
考慮一下是否所有 頁面都需要通過選單來訪問。如果選單中只顯示前兩層或三層頁面，而更深的頁面可以通過搜尋、頁面連結或頁尾選單等其他方式訪問，會怎麼樣呢？
例如，英國政府網站（GOV.UK）儘管規模龐大，但其選單僅限於兩個主要部分，更深層次的導航可通過單獨頁面上的連結訪問：
在為選單新增大量層級之前，先測試一下簡化為幾個層級是否足夠。這樣做通常會提高使用者的清晰度。
9. 考慮移動體驗
近 100%的消費者至少通過移動裝置購買過一次商品，其中三分之一的消費者通過移動裝置購買的商品佔其總購買量的 40%。
毋庸置疑，通過響應式選單優化移動網站對當今的小企業主來說至關重要。
如何做到這一點？有幾個關鍵策略：
- 使用漢堡選單：用小巧的漢堡包圖示取代傳統導航（見下圖右上角的三行）。它既節省空間，又能得到使用者的廣泛認可。如果你眯起眼睛，它看起來就像一個疊起來的漢堡，不是嗎？
- 針對觸控進行優化：確保選單項足夠大，便於點選，並保持間距，避免意外點選。每個可點選區域至少要有 48×48 畫素。
- 優先顯示關鍵專案：在移動裝置上只顯示最重要的選單選項。對不太重要的專案使用下拉選單或子選單。
- 實施粘性導航：使選單具有粘性，這樣使用者無需返回頂部滾動即可訪問選單，從而保持選單的可訪問性。
- 加入搜尋欄：新增一個搜尋欄，幫助使用者快速找到他們要找的內容，尤其是當導航選項有限或隱藏時，比如在移動裝置上經常出現的情況。
10. 使用熟悉的Web約定
你希望網站如何執行？這些期望受網站慣例的指導–網站建設者經常使用的慣例已經成為“標準”。
例如，這些慣例之一就是點選網站的徽標返回主頁。因此，如果您的徽標指向註冊或產品頁面，這可能會讓您的訪客感到困惑，並將他們打發走。
使用不熟悉的慣例設計選單會要求使用者學習新的做法，這可能會造成不便、惱人和跳轉。
在設計選單時，請考慮眾所周知的網路慣例（下拉選單通常的行為方式、搜尋欄通常的外觀等），以便使用者能夠直觀地瀏覽網站的所有頁面。
11. 使用描述性標籤
在可能的情況下，導航標籤應側重於內容的主題，而不僅僅是格式。
例如：
- 格式：文章、白皮書、網路研討會等。
- 主題：烘焙、烹飪、烹飪書等。
這一點很重要，因為人們訪問網站通常不是為了搜尋一般型別的內容；他們是在尋找具體的答案或資訊，而描述性的、以主題為重點的標籤可以幫助他們找到這些答案或資訊。
案例研究可能是這一規則的例外，因為尋求真實案例的訪問者非常瞭解這種內容格式。
12. 針對搜尋引擎進行優化
為了給網站帶來更多有機流量，您可以通過關鍵詞研究發現的流行短語來優化導航標籤。然後，在選單中加入這些關鍵詞。這樣，你的網站在搜尋引擎中的排名可能會更靠前。
此外，在構建網站和導航時，您還可以嘗試更多策略來提高搜尋引擎優化（SEO）。進一步瞭解您需要知道的資訊： 如何建立搜尋引擎優化友好型網站結構》。
13. 優先考慮殘疾人的可訪問性
網站的可訪問性衡量的是網站在多大程度上滿足了殘障人士的需求，包括視覺、聽覺、行動和認知方面的差異。這些人約佔世界人口的 15%，超過 10 億人！
以下是一些提示，可幫助您朝著正確的方向前進：
- 提供周到的導航：合理安排選單，使用一致的佈局，並新增跳過內容連結以便快速訪問。
- 內容清晰：使用簡單的語言、簡短的句子和直接的佈局，以適應更廣泛的認知能力。
- 允許鍵盤導航：確保使用者只需使用鍵盤即可瀏覽網站，以滿足無法使用滑鼠的使用者的需求。
- 提高可讀性：使用高對比度的顏色和可縮放的字型，併為多媒體內容提供音量控制。
- 使用文字替代：為圖片提供alt文字，為視訊提供字幕，為音訊內容提供轉錄文字，以便有視覺或聽覺障礙的使用者獲取資訊。
- 避免閃爍內容：避免每秒閃爍超過三次的內容，從而降低引發癲癇發作的風險。
瞭解有關網站可訪問性的更多資訊、其重要性以及如何檢查和升級您的網站，請參閱《如何設計一個可訪問的網站（完整指南）》。
14. 考慮人類心理
導航選單有多種型別和形狀可供選擇。橫向選單可能是最常見的，它以行列的形式列出主要頁面。這是有道理的–它們符合我們閱讀網頁的方式！
F 型閱讀模式是讀者掃描內容塊的最常見方式之一。
它是這樣的
- 讀者首先水平掃描頁面頂部，也就是選單所在的位置，形成“F”型的上行。
- 然後向下移動，掃描另一個水平部分，形成“F”的第二行。
- 最後，他們的視線沿著內容左側的垂直路徑向下，完成“F”形–這就是放置最重要和/或最長下拉選單的明智位置。
15. 新增麵包屑
不是每個人都會從同一個點進入你的網站。無論使用者是如何進入網站的，麵包屑都能讓他們看到自己在網站結構中的位置。這樣，他們就能更容易地確定自己的方向，知道下一步要去哪裡，並最終導航到他們有可能實現轉化的區域。
16. 頁面較長？使用固定選單
位於長頁面底部的使用者往往需要向上滾動才能訪問頁面頂部的主選單。對於像你這樣的小企業來說，這是一個競爭激烈的世界–不要給購物者帶來更多不必要的導航摩擦，把他們嚇跑到你的競爭對手那裡去！
固定選單，又稱粘性選單，即使在滾動時也能保持在頁面頂部可見，可以解決這個問題，並提供更完美的體驗（尤其是在較小的螢幕上！）。
小型企業導航選單的優秀範例
既然你已經知道如何為自己的網站設計完美的選單，那就讓我們來看看一些小企業的成功範例吧。
Mostly Serious明智地打破常規
Mostly Serious 是一家創意公司，其網站創意十足。當你第一次登陸網站時，你會注意到一個漢堡包圖示，它為頁面頂部的有趣動畫騰出了空間，並將焦點放在了動畫上：
點選圖示後，會開啟一個大而清晰的垂直側邊欄選單，只顯示主要標題：
不過，如果你開始滾動頁面頂部的動畫，就會看到一個粘性水平選單出現。這種更傳統的佈局既保持了可訪問性，又注意不影響閱讀頁面的體驗。
這個網站的選單很有創意，對於那些想打破常規又不想打破太多規則的品牌來說，它是一個很好的例子。
Claude家居優先考慮可訪問性
Claude Home 的移動網站和導航（圖中為 iPhone）與他們銷售的室內裝飾產品一樣優雅。
不過，我們真正想強調的是他們選擇使用 accessiBe。
accessiBe 是一家網路無障礙公司，其人工智慧驅動的功能可讓殘障人士訪問網站。由於很難確定如何設計移動網站和選單才能讓每個人都能瀏覽，因此我們很欣賞 Claude Home 將現有的工具引入其中，讓使用者可以做各種事情，如增強視覺效果、調整對比度、針對螢幕閱讀器進行優化等等。
Golde深知少即是多
Golde 是一個超級食品品牌，其選單與產品成分一樣簡單，因此功能強大。
選單一目瞭然，並按照他們希望顧客參與的順序排列。選單中只有一個專案–“購物”–具有下拉功能，可以深入網站。這是一種“行動號召”，能立即將訪問者引向產品頁面，讓他們在那裡完成購買。
Mented關注移動端友好體驗
化妝品品牌 Mented 在其移動裝置選單上（如圖在 iPhone 上）做到了面面俱到。
與桌面版相比，該網站的移動版採用了精簡的選單，其特色正是他們希望購物者關注的內容。它易於檢視和使用，鼓勵訪客直接進入網站。
點選網站徽標左側的漢堡包圖示，會彈出選單的其他部分，以及一個非常明顯的搜尋欄。這樣，訪問者就可以非常容易地快速瀏覽到他們正在尋找的產品，從而很有可能提高業務的轉化率。
為什麼是時候重新審視你的選單設計了？
如果您還沒有仔細檢查過網站導航的狀況，我們將幫助您瞭解為什麼是時候了，並深入探討其對小型企業的諸多益處。
促進搜尋引擎優化
條理清晰的導航不僅是為了使用者，也是為了搜尋引擎！
一個貼有標籤、結構嚴謹的主選單可以幫助搜尋引擎快速瞭解網站的內容，以及網站對使用者的可瀏覽性。這就是現代、智慧的導航設計如何提高網站排名、知名度和有機流量的。
鼓勵留住顧客
當使用者可以輕鬆瀏覽您的網站並毫不費力地實現目標時，他們就更有可能延長瀏覽時間、再次訪問，甚至向他人推薦您的品牌。
隨著獲取使用者的成本急劇上升，留住使用者對企業的成功越來越重要。因此，出色的導航對小型企業的業績起著舉足輕重的作用。
簡化最重要的使用者體驗
如上所述，使用者體驗是小型企業取得成功的最重要因素之一。
出色的導航是使用者體驗的核心。
如果導航直觀，就能減少挫敗感，消除障礙，保持高參與度，甚至能讓那些渴望被視為錢包以外的東西的購物者感到愉悅。
對網站導航體驗進行優化和簡化，可以強化品牌，使其成為以使用者為中心的企業，從而創造滿意度、信任度甚至長期忠誠度。
讓使用者充滿信心
清晰的路徑和直觀的選單能讓使用者感到舒適，並掌控網站。這將極大地鼓勵使用者進一步探索：讓訪客在網站上停留更長時間，提高搜尋引擎優化排名，並增加成交的可能性。
強化企業形象和信譽
您的選單設計可能是潛在客戶對您品牌的第一印象，因此也是第一印象的關鍵部分。簡潔、實用的導航佈局體現了對細節的關注，讓使用者對您的企業形象產生清晰、積極的印象。
此外，易於導航的設計還表明，您有意識、有辦法優先考慮所有購物者的使用者體驗。這是一種微妙而有力的方式，可以建立您的信譽，培養使用者對您的產品和企業整體質量的信任。
促進包容性
考慮到可訪問性的有意導航設計可確保每個人都能有效地瀏覽您的網站。這就好比水漲船高。對無障礙性的承諾可以擴大受眾範圍，展示您的品牌價值。
如何衡量導航選單的成功程度
網站導航起著至關重要的作用，但您如何知道它是否發揮了最佳效能？
小企業主可以使用多種方法、工具和報告來跟蹤和改進網站選單的成功。
關注你的Core Web Vitals
Core Web Vitals 是谷歌衡量網站效能的一些指標。它們評估網站的使用者友好性，包括導航選單，重點關注速度、響應速度和視覺穩定性。
有幾種方法可以訪問和跟蹤您的重要指標，從而確保您在可用性方面做到最好：
- 線上工具：Pingdom、GTmetrix，可能還有最簡單的：Google PageSpeed Insights 都可以幫助你訪問核心網頁生命週期報告。
- Chrome 瀏覽器使用者體驗報告：該報告可通過 Google Search Console 獲取，提供來自訪客的真實資料，為了解使用者如何與網站互動提供有價值的見解，並突出需要改進的地方。
- Chrome 瀏覽器Web Vitals擴充套件：如果您使用的是 Chrome 瀏覽器，Web Vitals 擴充套件可以讓您輕鬆評估您訪問的任何網站的核心 Web Vitals。沒錯，包括你的網站！
A/B測試導航選項
A/B 測試是一種強大的方法，可以通過真實的效能資料來完善網站的幾乎所有元素。
首先，選擇一個元素進行測試，比如導航中的一個標籤，或者你的導航結構。
然後，建立兩個版本（A 和 B），中間只改變一個變數。同時向規模和構成相似的受眾展示這兩個版本。測試結束後，比較結果，找出表現更好的版本並加以實施。
進行歸因報告
歸因報告有時也稱為線索歸因報告，它揭示了網站上的互動是如何直接促成訪客轉化為線索的。通過這些報告，品牌可以準確瞭解哪些內容、選單項和其他功能最有效，從而做出以資料為導向的決策，優化導航和其他網站元素。
多個營銷平臺都提供歸因報告版本，包括 Wicked Reports、HubSpot 和LeadGenius。
檢視 GA4 中的報告
Google Analytics 4 (GA4) 中的獲取報告可提供有關網站流量來源的寶貴見解。此外，“路徑探索”報告還能直觀地顯示使用者訪問網站的其餘過程。
這些報告可以共同講述潛在客戶如何與您的網站（包括導航元素）進行互動，從而讓您發現提升使用者體驗的機會。
小結
導航選單是任何網站的必要組成部分，因此必須確保導航選單方便使用者使用且有效。否則，您的內容可能會很難找到，也很難理解。
希望當你遵循我們今天的一些（或全部）提示時，你能更輕鬆地設計出完美的導航選單。
評論留言