2021-12-6 鶴鶴
導(dǎo)航和可查找性是用戶體驗設(shè)計的核心方面。如果用戶無法找到他們需要的東西，他們就會感到沮喪并可能決定去別處尋找。在信息架構(gòu)特別復(fù)雜的網(wǎng)站上，多級菜單是提高導(dǎo)航和可查找性的有效方式，從而提供有效的網(wǎng)絡(luò)體驗，促進產(chǎn)品信任和促進轉(zhuǎn)化。
由于產(chǎn)品和使用它們的設(shè)備千差萬別，因此沒有一刀切的解決方案。但是，有一些經(jīng)驗法則可以幫助您構(gòu)建多級菜單，從而增強在不同屏幕尺寸上的導(dǎo)航和可查找性。
不同尺寸屏幕的設(shè)計技巧
一個好的多級菜單應(yīng)該通過以清晰、直觀的方式呈現(xiàn)信息，讓用戶快速找到他們需要的信息。在我們進入特定于尺寸的指南之前，讓我們看看一些適用于所有菜單的做法。
使用不超過兩級的子菜單。任何多于兩級的子菜單都可能使用戶感到困惑。保持導(dǎo)航相對平坦可以提高用戶的可查找性，并減少記住他們所在位置所需的認知負擔(dān)。如果站點的頁面結(jié)構(gòu)很深，請考慮在密切相關(guān)的頁面頂部添加本地導(dǎo)航菜單。例如，設(shè)計復(fù)雜業(yè)務(wù)支持產(chǎn)品的 Zoho 在每個產(chǎn)品頁面的頂部放置了一個特定于產(chǎn)品的本地菜單，就在主菜單的下方。雖然頂部的主菜單列舉了 Zoho 的核心產(chǎn)品，但本地菜單提供了對包含更詳細信息的頁面的訪問，例如用例和定價。
用圖標(biāo)標(biāo)記子菜單。通過始終明確何時有可用的子菜單來管理用戶的期望。熟悉的選項包括一個小的下角圖標(biāo)或三角形圖標(biāo)。此外，請考慮在子菜單打開時翻轉(zhuǎn)指針圖標(biāo)。
直觀地組織信息。確保信息的層次結(jié)構(gòu)與用戶的心智模型一致。例如，在電子商務(wù)網(wǎng)站上，考慮購物者是否更有可能期望按品牌或商品類型組織商品。如果用戶單擊“鞋子”類別，他們是否希望子菜單顯示運動鞋、涼鞋和靴子的選項？或者他們是否希望看到一個子菜單列出商店出售的每個品牌的鞋子？
確保用戶始終知道他們在哪里。始終突出顯示主菜單上與用戶所在頁面相對應(yīng)的鏈接。如果當(dāng)前頁面在子菜單中，則在主菜單上也突出顯示子菜單鏈接。
保持簡單。菜單不是進行巧妙文字游戲的地方；確保鏈接標(biāo)簽具有強烈的信息氣息。這意味著保持標(biāo)簽名稱簡單明了和描述性，以便用戶在點擊時立即知道他們會找到什么。文案越清晰，用戶就越快找到他們需要的東西。
優(yōu)先考慮可讀性。使用簡單的無襯線字體并確保項目周圍有足夠的間距以避免混亂。確保背景足夠不透明以遮擋菜單后面的任何內(nèi)容。但不要忽視網(wǎng)站的整體品牌。雖然可讀性是第一位的，但要確保菜單的樣式與網(wǎng)站的其他外觀和感覺相得益彰。
使點擊變得可訪問。為了讓有精細運動控制障礙的用戶可以訪問菜單，請遵循 Google 的Material Design指南，并將可點擊元素的大小設(shè)置為至少 48 x 48 像素。
網(wǎng)站菜單設(shè)計技巧
即使移動趨勢日益增長，客戶可能需要功能齊全的網(wǎng)站的原因仍然很多。例如，他們可能需要在網(wǎng)上提供比移動網(wǎng)站可行的更多信息?；蛘咚麄兊难芯靠赡鼙砻魉麄兊挠脩糁皇歉嗟匾蕾嚺_式機。
網(wǎng)站菜單應(yīng)該易于瀏覽，提供清晰的交互，當(dāng)然還有響應(yīng)性。它還應(yīng)盡可能與移動網(wǎng)站保持一致，以便為回訪者提供直觀的體驗。
菜單應(yīng)該在點擊時打開，而不是懸停。您需要做出的最基本的決定之一是用戶將如何訪問站點的菜單。將指針懸停在菜單上是否足以觸發(fā)菜單的外觀，還是用戶需要單擊它？
懸停方法很流行，但點擊打開是確保菜單在所有設(shè)備上可靠、直觀地工作的最佳方式。單擊方法使網(wǎng)站能夠在傳統(tǒng)的計算機顯示器和類似的觸摸屏上更一致地工作，并避免懸停方法出現(xiàn)的許多問題，包括：
a) 狹窄的懸?？臻g。懸?？臻g是鼠標(biāo)在保持菜單打開的同時進行導(dǎo)航的路徑。如果它太窄，菜單可能會在用戶到達他們想要的鏈接之前消失。
b) 意外打開。如果用戶在前往頁面上的另一個位置的途中嘗試瀏覽懸停菜單，則很容易無意中打開懸停菜單。設(shè)置一個短暫的延遲可以解決這個問題，但當(dāng)用戶確實想要打開菜單時可能會導(dǎo)致不適。
c) 觸摸屏上的用戶體驗不一致。懸停菜單在觸摸屏上不起作用。他們需要一個代碼來檢測觸摸屏并切換到點擊打開；隨著筆記本電腦和平板電腦之間的界限越來越模糊，這些變通辦法可能會過時。
d) 關(guān)于什么是可點擊的問題。使用懸停菜單，用戶在嘗試單擊之前并不總是知道父鏈接是否可單擊。這與直覺相反。
e) 可訪問性。懸停菜單可能會給使用屏幕閱讀器或通過鍵盤導(dǎo)航的用戶帶來問題。
選擇正確的布局：下拉菜單與超級菜單。如果網(wǎng)站使用傳統(tǒng)的菜單布局（位于頁面頂部的水平菜單欄），您可以考慮兩種類型的子菜單：標(biāo)準(zhǔn)的單欄下拉菜單或多欄超級菜單。
如果父類別包含的鏈接少于八個，請考慮使用下拉菜單。如果下拉菜單足夠長，需要垂直滾動，您應(yīng)該考慮以不同的方式組織信息——也許作為一個大菜單或通過細化父類別。
超級菜單是一種嵌套菜單，通常使用可以擴展瀏覽器寬度的寬布局。如果子菜單包含許多可以按列分組的不同鏈接，您應(yīng)該使用這種類型的菜單。通常，您會在大型電子商務(wù)網(wǎng)站上看到這樣的菜單。
設(shè)計大型菜單時，請考慮以下事項：
a) 添加圖像或圖標(biāo)，使信息更易于瀏覽。
b) 添加標(biāo)題以對相關(guān)頁面進行分組。
c) 如果類別名稱不言自明，請?zhí)砑诱f明。
大型菜單在移動設(shè)備上可能難以閱讀和導(dǎo)航，但有時在更大屏幕上用戶體驗的改進使得為移動設(shè)備重新配置信息而做額外的工作是值得的。
添加清晰的懸停狀態(tài)。使用點擊打開菜單，包括所有可點擊元素的清晰懸停狀態(tài)，會使戶確信鏈接處于活動狀態(tài)。您可以使可點擊區(qū)域的背景稍微變暗以指示懸停狀態(tài)。只要確保懸停區(qū)域與可點擊區(qū)域匹配。如果測試表明用戶需要更多指導(dǎo)或上下文，請考慮添加更多描述性標(biāo)簽名稱或工具提示，只要它不會阻止任何重要的內(nèi)容。
單擊以關(guān)閉子菜單。當(dāng)用戶點擊別處或打開另一個子菜單時，通過關(guān)閉菜單來保持直觀。這就是下拉輸入字段在表單中的工作方式，因此大多數(shù)用戶會覺得這很熟悉。
在桌面上啟用鍵盤導(dǎo)航。并非每個人都使用鼠標(biāo)進行導(dǎo)航，因此菜單應(yīng)允許用戶使用鍵盤進行導(dǎo)航。這意味著所有鏈接都應(yīng)該具有不同的焦點狀態(tài)，以便用戶可以一目了然地看到它們的位置。通常，深色框可以很好地指示聚焦?fàn)顟B(tài)。
移動屏幕的設(shè)計技巧
如果您尚未設(shè)計移動優(yōu)先，則需要優(yōu)化手持設(shè)備的菜單。傳統(tǒng)的菜單布局在非常小的屏幕上很少能很好地操作——如果你只是縮小桌面菜單欄，沒有人能夠閱讀它。
簡化主菜單。由于智能手機屏幕很小，您在桌面菜單中找到的大部分信息最初都必須隱藏。主菜單欄必須非常簡單，但最好顯示最重要的鏈接以提高可查找性。您可以將菜單欄固定在屏幕底部或頂部。
添加菜單觸發(fā)器。由于移動菜單的全部或部分可能被隱藏，用戶需要一種方法來找到它。在菜單欄或易于觸及的浮動按鈕中添加漢堡圖標(biāo)是一種流行的解決方案，許多用戶都會認可。然而，漢堡菜單并不是唯一的選擇。例如，如果您正在為年長的用戶設(shè)計，則最好使用帶有“菜單”一詞的框?；蛘?，如果您想讓網(wǎng)站的功能更加突出，您可能希望將它們顯示在頂部或底部的選項卡式菜單中。
將菜單放在側(cè)邊欄中。您可以通過多種不同的方式設(shè)計移動菜單。您可以使用全寬布局，適用于任何情況；底部抽屜，最好只有幾個鏈接；或圓形菜單。一個不錯的選擇是使用帶有深色半透明背景的側(cè)邊欄來遮擋頁面內(nèi)容，從而消除干擾，并允許用戶輕松點擊它以將其關(guān)閉。還可以考慮使用從左滑動的動畫來避免不和諧的體驗。對于側(cè)邊欄和底部抽屜菜單，請確保菜單可垂直滾動，以便在較小的屏幕或橫向模式下不會有任何內(nèi)容被遮擋。
允許用戶輕松關(guān)閉菜單。用戶可以直觀地點擊菜單來關(guān)閉它，但也可以考慮添加一個關(guān)閉按鈕。您可以將漢堡圖標(biāo)變成 X 或在菜單的右上角添加一個。
對單個子菜單使用擴展部分。如果菜單只有一級子菜單，請考慮使用擴展部分。您可以將它們展開到父項下方，并使用不同的背景顏色來清晰顯示。您還可以允許用戶同時展開多個子菜單?？紤]使用父項右側(cè)的下角或三角形圖標(biāo)來指示子菜單可用。
用重疊菜單替換大型菜單和多個子菜單。如果您需要展開多個子菜單或重新配置大型菜單，請選擇重疊方法：不要在父菜單下方或旁邊展開子菜單，而是讓子菜單替換父菜單。使用這種方法，您必須在除第一級之外的所有面板上都包含一個“返回”鏈接。對于頂級菜單，請考慮為父項使用直角圖標(biāo)或右箭頭。
預(yù)打開子菜單。在小屏幕上，如果用戶點擊打開主菜單并且他們當(dāng)前所在的頁面在子菜單中，請考慮自動打開子菜單，以便用戶了解它們相對于其余菜單項的位置。
總結(jié)
導(dǎo)航是客戶體驗的重要組成部分。用戶不想進行尋寶游戲，也不想花更多的時間瀏覽菜單。如果他們無法輕松找到他們需要的東西，他們可能會放棄網(wǎng)站或界面，將他們的注意點轉(zhuǎn)移到其他地方。
精心設(shè)計的多級菜單是具有復(fù)雜信息架構(gòu)網(wǎng)站的關(guān)鍵組成部分。希望這些方法在各種用例中為您提供良好的幫助。
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.lapeinture.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.lapeinture.cn