多級菜單設計最佳實踐

導航和可查找性是用戶體驗設計的核心方面。 如果用戶無法到達他們想去的地方或找不到他們需要的東西，他們會變得沮喪並可能決定尋找其他地方。 在信息架構特別複雜的網站上，多級菜單是提高導航和可查找性的有效方式，從而提供高效的網絡體驗，促進產品信任並促進轉化。

由於產品和使用它們的設備差異很大，因此沒有一種萬能的解決方案可以產生完美的多級菜單。 但是，有一些經驗法則可以幫助您構建多級菜單，以增強任​​何屏幕尺寸的導航和可查找性。

任何尺寸屏幕的設計技巧

一個好的多級菜單應該通過以清晰、直觀的方式呈現信息，讓用戶快速到達他們需要去的地方。 在我們進入特定尺寸的指南之前，讓我們看一下適用於所有菜單的一些做法。

使用不超過兩級的子菜單。 任何超過兩個級別的子菜單都可能使用戶感到困惑和不知所措。 保持導航相對平坦可以提高用戶的可查找性，並減少記住他們所在位置的認知負擔。 如果站點的頁面結構很深，請考慮在密切相關的頁面頂部添加本地導航菜單。 例如，設計複雜業務支持產品的 Zoho，在每個產品頁面的頂部，就在主菜單的下方，放置了一個產品特定的本地菜單。 雖然頂部的主菜單列舉了 Zoho 的核心產品，但本地菜單提供了對包含更多詳細信息（例如用例和定價）的頁面的訪問。

用圖標標記子菜單。 通過始終明確何時有可用的子菜單來管理用戶的期望。 熟悉的選擇包括一個小的向下角圖標或一個三角形圖標。 此外，請考慮在子菜單打開時翻轉指針圖標。

直觀地組織信息。 確保信息的層次結構與用戶的心理模型一致。 例如，在電子商務網站上，考慮購物者是否更有可能期望商品按品牌或商品類型進行組織。 如果用戶點擊“鞋子”類別，他們會期望子菜單顯示運動鞋、涼鞋和靴子的選項嗎？ 或者他們會期望看到一個子菜單列出商店銷售的每個品牌的鞋子嗎？ 查看您的用戶研究和競爭對手研究將澄清這一點。

確保用戶始終知道他們在哪裡。 始終突出顯示與用戶所在頁面相對應的主菜單上的鏈接。 如果當前頁面在子菜單中，請在主菜單上突出顯示子菜單鏈接和父項。 例如，如果有人使用政府網站更新駕照，從主菜單上的“居民”鏈接導航到子菜單上的“駕駛員服務”鏈接，然後導航到帶有更新表格的頁面，“居民”和“司機服務”鏈接將保持突出顯示。

保持副本簡單。 菜單不是聰明的文字遊戲的地方； 確保鏈接標籤具有強烈的信息氣味。 這意味著保持標籤名稱簡單明了且具有描述性，以便用戶在點擊時立即知道他們會找到什麼。 副本越清晰，用戶就會越快找到他們需要的東西。

優先考慮可讀性。 使用簡單的無襯線字體並確保項目周圍有足夠的間距以避免混亂。 確保背景足夠不透明，可以遮擋菜單後面的任何內容。 但不要忽視網站的整體品牌。 雖然可讀性是第一位的，但請確保菜單的樣式與網站的其他外觀和感覺相得益彰。

使點擊和點擊變得容易。 為了讓有精細運動控制障礙的用戶可以訪問該菜單，請遵循 Google 的 Material Design 指南，並將可點擊元素的大小設置為至少 48 x 48 像素。

台式機設計技巧

即使隨著移動趨勢的增長，客戶可能需要功能齊全的桌面網站仍然有很多原因。 例如，他們可能需要提供比移動網站（如大學或金融機構的網站）更可行的在線信息。 或者他們的研究可能表明他們的用戶只是更多地依賴台式機。

桌面菜單應該易於掃描，提供清晰的交互，當然，響應式。 它還應盡可能與移動網站保持一致，以使回訪者的體驗更加直觀。

菜單應在單擊時打開，而不是懸停。 您需要做出的最基本決定之一是用戶如何訪問網站的菜單。 只需將指針懸停在父項（類別名稱）上就足以觸髮菜單的出現，還是用戶需要單擊它？

懸停方法很流行，但點擊打開是確保菜單在所有設備上可靠且直觀地工作的最佳方式。 點擊方法使網站能夠在傳統的計算機顯示器和類似觸摸屏上更一致地工作，並避免了懸停方法出現的許多挫敗感，包括：

• 狹窄的懸停隧道。 懸停隧道是鼠標在保持菜單打開的同時必須進行導航的路徑。 如果它太窄，菜單可能會在用戶到達他們想要的鏈接之前消失。
• 意外打開。 如果用戶在前往頁面上另一個位置的途中嘗試瀏覽懸停菜單，則很容易無意中打開懸停菜單。 設置一個短暫的延遲可以解決這個問題，但是當用戶確實想要打開菜單時可能會導致挫敗感。
• 觸摸屏上的用戶體驗不一致。 懸停菜單在觸摸屏上不起作用。 他們需要代碼修復來檢測觸摸屏並切換到點擊打開； 隨著筆記本電腦和平板電腦之間的界限越來越模糊，這些變通辦法可能會過時。
• 關於什麼是可點擊的問題。 使用懸停菜單，用戶在嘗試點擊之前並不總是知道父鏈接是否可點擊。 這與直覺相反。
• 可訪問性。 懸停菜單會給使用屏幕閱讀器或通過鍵盤導航的用戶帶來問題。

選擇正確的佈局：下拉菜單與超級菜單。 如果桌面站點使用傳統的菜單佈局（位於頁面頂部的水平菜單欄），您可以考慮兩種類型的子菜單：標準的單列下拉菜單或多列巨型菜單。

如果父類別包含的鏈接少於八個，請考慮使用下拉菜單。 如果下拉菜單足夠長以至於需要垂直滾動，您應該考慮以不同的方式組織信息——可能是作為一個大型菜單或通過細化父類別。

超級菜單是一種嵌套菜單，通常使用可以擴展瀏覽器寬度的寬佈局。 如果子菜單包含許多可以按列分組的不同鏈接，您應該使用這種類型的菜單。 通常，您會在大型電子商務網站上看到這樣的菜單。

設計大型菜單時，請考慮以下幾點：

• 添加圖像或圖標以使信息更易於掃描。
• 將標題添加到分組相關頁面。
• 如果類別名稱不言自明，請添加說明。

大型菜單在移動設備上可能難以閱讀和導航，但有時在更大屏幕上的 UX 改進使得為移動設備重新配置信息做額外的工作是值得的。

添加清晰的懸停狀態。 即使使用單擊打開菜單，包括所有可單擊元素的清晰懸停狀態，也可以使交互令人滿意，並使用戶確信鏈接處於活動狀態。 您可以使可點擊區域的背景稍微變暗以指示懸停狀態。 只要確保懸停區域與可點擊區域匹配。 如果測試表明用戶需要更多指導或上下文，請考慮添加更多描述性標籤名稱或工具提示，只要它不會阻止任何重要內容。

單擊以關閉子菜單。 當用戶單擊其他地方或打開另一個子菜單時，通過關閉菜單來保持直觀。 這就是下拉輸入字段在表單中的工作方式，因此大多數用戶會覺得這很熟悉。

在桌面上啟用鍵盤導航。 不是每個人都使用鼠標導航，因此菜單應允許用戶僅使用鍵盤進行導航。 這意味著所有鏈接都應具有不同的焦點狀態，以便用戶一眼就能看到它們所在的位置。 通常，較暗的框架可以很好地指示聚焦狀態。

手機屏幕的設計技巧

如果您尚未設計移動優先，則需要優化手持設備的菜單。 傳統的菜單佈局在非常小的屏幕上很少能很好地工作——如果你只是縮小桌面菜單欄，沒有人能夠閱讀它。 這些指南將幫助您成功過渡到小屏幕。

簡化主菜單。 由於智能手機屏幕非常小，您在桌面菜單中找到的大部分信息最初都必須隱藏。 主菜單欄必須非常簡單，但最好顯示最重要的鏈接以提高可查找性。 您可以將菜單欄貼在屏幕的底部或頂部。

添加菜單觸發器。 由於移動菜單的全部或部分可能被隱藏，用戶需要找到它的方法。 在菜單欄或易於訪問的浮動按鈕中添加漢堡圖標是一種流行的解決方案，許多用戶都會認識到這一點。 然而，漢堡菜單並不是唯一的選擇。 例如，如果您正在為老用戶設計，最好使用帶有“菜單”一詞的框。 或者，如果您想讓網站的功能更加突出，您可能希望將它們顯示在頂部或底部的選項卡式菜單中。

將菜單放在側邊欄中。 您可以通過多種不同的方式設計移動菜單。 您可以使用適用於任何情況的全角佈局； 底部抽屜，當只有幾個鏈接時最好； 或圓形角落菜單，對於沒有子菜單的小菜單來說，這是一個具有未來感的選項。 一個不錯的選擇是使用帶有深色、半透明背景的側邊欄來遮擋頁面內容，從而消除乾擾，並允許用戶輕鬆點擊它來關閉它。 還可以考慮使用從左滑動的動畫來避免不和諧的體驗。 對於側邊欄和底部抽屜菜單，請確保菜單可以垂直滾動，這樣在較小的屏幕或橫向模式下不會被截斷。

允許用戶輕鬆關閉菜單。 用戶可以直觀地點擊菜單來關閉它，但也可以考慮添加一個 X 按鈕。 您可以將漢堡圖標變成 X 或在菜單的右上角添加一個。

對單個子菜單使用擴展部分。 如果菜單只有一級子菜單，請考慮使用擴展部分。 您可以將它們展開到父項下方，並使用不同的背景顏色以清楚起見。 您還可以允許用戶同時展開多個子菜單。 考慮在父項右側使用向下角或三角形圖標來指示子菜單可用。

用重疊菜單替換大型菜單和多個子菜單。 如果您需要擴展多個子菜單或重新配置大型菜單，請選擇重疊方法：不要在父菜單下方或旁邊展開子菜單，而是讓子菜單替換父菜單。 使用這種方法，您必須在除第一級之外的所有面板上包含“返回”鏈接。 對於頂級菜單，請考慮對父項使用直角圖標或右箭頭。

預打開子菜單。 在桌面上，突出顯示當前頁面及其父頁面很有幫助。 在小屏幕上，考慮更進一步。 如果用戶點擊打開主菜單並且他們當前所在的頁面位於子菜單中，請考慮也自動打開子菜單，以便用戶了解它們相對於其餘菜單項的位置。

保持清晰一致

導航是客戶體驗的重要組成部分。 用戶不想進行尋寶遊戲或花費更多時間瀏覽菜單。 如果他們不能輕易找到他們需要的東西，他們可能會通過支持電話佔用您客戶的資源，或者更糟糕的是，將他們的業務轉移到其他地方。

精心設計的多級菜單是任何具有復雜信息架構的網站的關鍵組成部分。 雖然這些指南不應取代用戶研究和測試，但它們將在各種用例中為您提供良好的服務。

進一步閱讀 Toptal 博客：

• 信息架構綜合指南
• 響應式設計：最佳實踐和注意事項
• 移動信息架構原則（附信息圖）