保持簡單。菜單不是進(jìn)行巧妙文字游戲的地方；確保鏈接標(biāo)簽具有強(qiáng)烈的信息氣息。這意味著保持標(biāo)簽名稱簡單明了和描述性，以便用戶在點(diǎn)擊時(shí)立即知道他們會(huì)找到什么。文案越清晰，用戶就越快找到他們需要的東西。

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

使點(diǎn)擊變得可訪問。為了讓有精細(xì)運(yùn)動(dòng)控制障礙的用戶可以訪問菜單，請(qǐng)遵循 Google 的Material Design指南，并將可點(diǎn)擊元素的大小設(shè)置為至少 48 x 48 像素。

網(wǎng)站菜單設(shè)計(jì)技巧

即使移動(dòng)趨勢(shì)日益增長，客戶可能需要功能齊全的網(wǎng)站的原因仍然很多。例如，他們可能需要在網(wǎng)上提供比移動(dòng)網(wǎng)站可行的更多信息?；蛘咚麄兊难芯靠赡鼙砻魉麄兊挠脩糁皇歉嗟匾蕾嚺_(tái)式機(jī)。

網(wǎng)站菜單應(yīng)該易于瀏覽，提供清晰的交互，當(dāng)然還有響應(yīng)性。它還應(yīng)盡可能與移動(dòng)網(wǎng)站保持一致，以便為回訪者提供直觀的體驗(yàn)。

菜單應(yīng)該在點(diǎn)擊時(shí)打開，而不是懸停。您需要做出的最基本的決定之一是用戶將如何訪問站點(diǎn)的菜單。將指針懸停在菜單上是否足以觸發(fā)菜單的外觀，還是用戶需要單擊它？

懸停方法很流行，但點(diǎn)擊打開是確保菜單在所有設(shè)備上可靠、直觀地工作的最佳方式。單擊方法使網(wǎng)站能夠在傳統(tǒng)的計(jì)算機(jī)顯示器和類似的觸摸屏上更一致地工作，并避免懸停方法出現(xiàn)的許多問題，包括：

a) 狹窄的懸?？臻g。懸?？臻g是鼠標(biāo)在保持菜單打開的同時(shí)進(jìn)行導(dǎo)航的路徑。如果它太窄，菜單可能會(huì)在用戶到達(dá)他們想要的鏈接之前消失。

b) 意外打開。如果用戶在前往頁面上的另一個(gè)位置的途中嘗試瀏覽懸停菜單，則很容易無意中打開懸停菜單。設(shè)置一個(gè)短暫的延遲可以解決這個(gè)問題，但當(dāng)用戶確實(shí)想要打開菜單時(shí)可能會(huì)導(dǎo)致不適。

c) 觸摸屏上的用戶體驗(yàn)不一致。懸停菜單在觸摸屏上不起作用。他們需要一個(gè)代碼來檢測(cè)觸摸屏并切換到點(diǎn)擊打開；隨著筆記本電腦和平板電腦之間的界限越來越模糊，這些變通辦法可能會(huì)過時(shí)。

d) 關(guān)于什么是可點(diǎn)擊的問題。使用懸停菜單，用戶在嘗試單擊之前并不總是知道父鏈接是否可單擊。這與直覺相反。

e) 可訪問性。懸停菜單可能會(huì)給使用屏幕閱讀器或通過鍵盤導(dǎo)航的用戶帶來問題。

選擇正確的布局：下拉菜單與超級(jí)菜單。如果網(wǎng)站使用傳統(tǒng)的菜單布局（位于頁面頂部的水平菜單欄），您可以考慮兩種類型的子菜單：標(biāo)準(zhǔn)的單欄下拉菜單或多欄超級(jí)菜單。

如果父類別包含的鏈接少于八個(gè)，請(qǐng)考慮使用下拉菜單。如果下拉菜單足夠長，需要垂直滾動(dòng)，您應(yīng)該考慮以不同的方式組織信息——也許作為一個(gè)大菜單或通過細(xì)化父類別。

超級(jí)菜單是一種嵌套菜單，通常使用可以擴(kuò)展瀏覽器寬度的寬布局。如果子菜單包含許多可以按列分組的不同鏈接，您應(yīng)該使用這種類型的菜單。通常，您會(huì)在大型電子商務(wù)網(wǎng)站上看到這樣的菜單。

設(shè)計(jì)大型菜單時(shí)，請(qǐng)考慮以下事項(xiàng)：

a) 添加圖像或圖標(biāo)，使信息更易于瀏覽。

b) 添加標(biāo)題以對(duì)相關(guān)頁面進(jìn)行分組。

c) 如果類別名稱不言自明，請(qǐng)?zhí)砑诱f明。

大型菜單在移動(dòng)設(shè)備上可能難以閱讀和導(dǎo)航，但有時(shí)在更大屏幕上用戶體驗(yàn)的改進(jìn)使得為移動(dòng)設(shè)備重新配置信息而做額外的工作是值得的。

添加清晰的懸停狀態(tài)。使用點(diǎn)擊打開菜單，包括所有可點(diǎn)擊元素的清晰懸停狀態(tài)，會(huì)使戶確信鏈接處于活動(dòng)狀態(tài)。您可以使可點(diǎn)擊區(qū)域的背景稍微變暗以指示懸停狀態(tài)。只要確保懸停區(qū)域與可點(diǎn)擊區(qū)域匹配。如果測(cè)試表明用戶需要更多指導(dǎo)或上下文，請(qǐng)考慮添加更多描述性標(biāo)簽名稱或工具提示，只要它不會(huì)阻止任何重要的內(nèi)容。

單擊以關(guān)閉子菜單。當(dāng)用戶點(diǎn)擊別處或打開另一個(gè)子菜單時(shí)，通過關(guān)閉菜單來保持直觀。這就是下拉輸入字段在表單中的工作方式，因此大多數(shù)用戶會(huì)覺得這很熟悉。

在桌面上啟用鍵盤導(dǎo)航。并非每個(gè)人都使用鼠標(biāo)進(jìn)行導(dǎo)航，因此菜單應(yīng)允許用戶使用鍵盤進(jìn)行導(dǎo)航。這意味著所有鏈接都應(yīng)該具有不同的焦點(diǎn)狀態(tài)，以便用戶可以一目了然地看到它們的位置。通常，深色框可以很好地指示聚焦?fàn)顟B(tài)。

移動(dòng)屏幕的設(shè)計(jì)技巧

如果您尚未設(shè)計(jì)移動(dòng)優(yōu)先，則需要優(yōu)化手持設(shè)備的菜單。傳統(tǒng)的菜單布局在非常小的屏幕上很少能很好地操作——如果你只是縮小桌面菜單欄，沒有人能夠閱讀它。

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

添加菜單觸發(fā)器。由于移動(dòng)菜單的全部或部分可能被隱藏，用戶需要一種方法來找到它。在菜單欄或易于觸及的浮動(dòng)按鈕中添加漢堡圖標(biāo)是一種流行的解決方案，許多用戶都會(huì)認(rèn)可。然而，漢堡菜單并不是唯一的選擇。例如，如果您正在為年長的用戶設(shè)計(jì)，則最好使用帶有“菜單”一詞的框。或者，如果您想讓網(wǎng)站的功能更加突出，您可能希望將它們顯示在頂部或底部的選項(xiàng)卡式菜單中。

將菜單放在側(cè)邊欄中。您可以通過多種不同的方式設(shè)計(jì)移動(dòng)菜單。您可以使用全寬布局，適用于任何情況；底部抽屜，最好只有幾個(gè)鏈接；或圓形菜單。一個(gè)不錯(cuò)的選擇是使用帶有深色半透明背景的側(cè)邊欄來遮擋頁面內(nèi)容，從而消除干擾，并允許用戶輕松點(diǎn)擊它以將其關(guān)閉。還可以考慮使用從左滑動(dòng)的動(dòng)畫來避免不和諧的體驗(yàn)。對(duì)于側(cè)邊欄和底部抽屜菜單，請(qǐng)確保菜單可垂直滾動(dòng)，以便在較小的屏幕或橫向模式下不會(huì)有任何內(nèi)容被遮擋。

允許用戶輕松關(guān)閉菜單。用戶可以直觀地點(diǎn)擊菜單來關(guān)閉它，但也可以考慮添加一個(gè)關(guān)閉按鈕。您可以將漢堡圖標(biāo)變成 X 或在菜單的右上角添加一個(gè)。

對(duì)單個(gè)子菜單使用擴(kuò)展部分。如果菜單只有一級(jí)子菜單，請(qǐng)考慮使用擴(kuò)展部分。您可以將它們展開到父項(xiàng)下方，并使用不同的背景顏色來清晰顯示。您還可以允許用戶同時(shí)展開多個(gè)子菜單?？紤]使用父項(xiàng)右側(cè)的下角或三角形圖標(biāo)來指示子菜單可用。

用重疊菜單替換大型菜單和多個(gè)子菜單。如果您需要展開多個(gè)子菜單或重新配置大型菜單，請(qǐng)選擇重疊方法：不要在父菜單下方或旁邊展開子菜單，而是讓子菜單替換父菜單。使用這種方法，您必須在除第一級(jí)之外的所有面板上都包含一個(gè)“返回”鏈接。對(duì)于頂級(jí)菜單，請(qǐng)考慮為父項(xiàng)使用直角圖標(biāo)或右箭頭。

預(yù)打開子菜單。在小屏幕上，如果用戶點(diǎn)擊打開主菜單并且他們當(dāng)前所在的頁面在子菜單中，請(qǐng)考慮自動(dòng)打開子菜單，以便用戶了解它們相對(duì)于其余菜單項(xiàng)的位置。

總結(jié)

導(dǎo)航是客戶體驗(yàn)的重要組成部分。用戶不想進(jìn)行尋寶游戲，也不想花更多的時(shí)間瀏覽菜單。如果他們無法輕松找到他們需要的東西，他們可能會(huì)放棄網(wǎng)站或界面，將他們的注意點(diǎn)轉(zhuǎn)移到其他地方。

精心設(shè)計(jì)的多級(jí)菜單是具有復(fù)雜信息架構(gòu)網(wǎng)站的關(guān)鍵組成部分。希望這些方法在各種用例中為您提供良好的幫助。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)