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