編者按：下拉菜單是 UI/UX 設(shè)計(jì)中最常見的 UI 控件之一，它的應(yīng)用牽涉到很多情況和注意事項(xiàng)，有時(shí)候不注意很容易搞出各種小問題。Saadia Minhas 的這篇文章詳細(xì)分享了 10 個(gè)最佳實(shí)踐，可以參考這些最佳實(shí)踐來設(shè)計(jì)下拉菜單，確保功能和體驗(yàn)都足夠靠譜。

下拉菜單是標(biāo)準(zhǔn) UI 組件當(dāng)中非常常用的一個(gè)，它以一種簡(jiǎn)潔直觀的方式向用戶呈現(xiàn)被隱藏的選項(xiàng)列表內(nèi)容。

然而，如果設(shè)計(jì)不當(dāng)，下拉菜單同樣可能會(huì)讓用戶感到困惑。今天的文章將會(huì)分享一些下拉菜單的最佳實(shí)踐，幫助你更好創(chuàng)建下拉菜單，增強(qiáng)產(chǎn)品的可用性。

1. 不要使用長(zhǎng)菜單

使用包含太多選項(xiàng)的下拉菜單，通常會(huì)導(dǎo)致糟糕的用戶體驗(yàn)。

• 它增加了用戶處理和比較一長(zhǎng)串選項(xiàng)的認(rèn)知負(fù)荷，這會(huì)導(dǎo)致用戶會(huì)在一個(gè)簡(jiǎn)單的選擇上花費(fèi)更多時(shí)間。
• 用戶需要滾動(dòng)列表才能看全所有選項(xiàng)，這在小屏幕上可能會(huì)更令人惱火。
• 當(dāng)用戶滾動(dòng)列表以找到所需選項(xiàng)時(shí)，需要更多的加載時(shí)間來快速加載所有選項(xiàng)。

如果你確實(shí)需要一個(gè)長(zhǎng)的下拉菜單怎么辦？

在這種情況下，有一些最佳實(shí)踐可以幫助你管理長(zhǎng)下拉菜單。

• 使用類別和分組：這可以幫助用戶快速導(dǎo)航到相關(guān)類別，而不必滾動(dòng)瀏覽整個(gè)列表。
• 提供搜索功能：這允許用戶輸入文本并快速找到所需的結(jié)果。
• 限制選項(xiàng)數(shù)量：重新評(píng)估所有選項(xiàng)是否必要。通過刪除不太重要的選項(xiàng)來限制數(shù)量。
• 使用替代 UI 控件：考慮替代 UI 控件，例如列表框或一組復(fù)選框，它們可能更加用戶友好。

2.當(dāng)僅包含 2 個(gè)選項(xiàng)時(shí)不要用下拉菜單

通常不建議使用僅有 2 個(gè)選項(xiàng)的下拉菜單，因?yàn)檫@會(huì)給用戶增加不必要的交互復(fù)雜性。

• 下拉菜單至少需要 2 次點(diǎn)擊。第一次點(diǎn)擊打開菜單，第二次點(diǎn)擊選擇一個(gè)選項(xiàng)。對(duì)于兩個(gè)選項(xiàng)，與其他方法相比，這個(gè)過程效率低下。
• 在下拉菜單中僅僅隱藏 2 個(gè)選項(xiàng)可能會(huì)讓用戶感到沮喪。

在菜單只有 2 個(gè)選項(xiàng)的情況下，選擇哪個(gè)解決方案？

• 在這種情況下，最好使用其他控件。單選按鈕或切換開關(guān)允許用戶單擊或點(diǎn)擊選擇一個(gè)選項(xiàng)。此外，選項(xiàng)在 UI 上始終可見。

3. 禁用當(dāng)前無效的選項(xiàng)

這種方法引導(dǎo)用戶只關(guān)注可用且有效的選擇，從而提高效率。

• 它可以防止選中當(dāng)前被禁用或無效的選項(xiàng)，從而減少出錯(cuò)的機(jī)會(huì)。
• 保持選項(xiàng)可見但禁用可提供一致的體驗(yàn)，確保用戶可以看到所有可能性。

如何才能更好地實(shí)現(xiàn)這一目標(biāo)？

• 以不同方式顯示禁用的選項(xiàng)很重要。你可以將其變灰或降低其不透明度。這清楚地表明它們是不可選擇的。
• 你可以通過工具提示或內(nèi)嵌消息，提供額外的背景信息或解釋，解釋這些選項(xiàng)被禁用的原因。這將讓用戶知道何時(shí)以及如何啟用該選項(xiàng)。

4. 不要有明確答案的地方使用下拉菜單

當(dāng)用戶有更方便選項(xiàng)的時(shí)候，沒有必要提供下拉菜單。

• 有時(shí)有更好的選擇，將這些默認(rèn)選項(xiàng)放在下拉列表中，會(huì)降低效率。
• 在這種情況下，要求用戶滾動(dòng)瀏覽長(zhǎng)列表可能會(huì)減慢該過程。

那該怎么辦呢？

• 允許用戶直接手動(dòng)輸入，可以顯著加快這一過程。
• 你可以提供自動(dòng)建議和默認(rèn)選項(xiàng)，來指導(dǎo)用戶了解相關(guān)選項(xiàng)。
• 從長(zhǎng)列表中掃視力再選擇的需要很多額外的認(rèn)知負(fù)荷。對(duì)于已經(jīng)知道自己要找什么的用戶來說，直接輸入通常更直觀、更快捷。

5. 不要使用超過 2 級(jí)的下拉菜單

多級(jí)下拉菜單可能會(huì)讓用戶感到不知所措和困惑。

• 瀏覽多級(jí)菜單的選項(xiàng)會(huì)增加界面的復(fù)雜性。
• 對(duì)于復(fù)雜的層級(jí)，用戶必須記住他們?cè)诓藛螌哟沃械奈恢貌⒏櫼郧暗倪x擇。
• 深度級(jí)別可能會(huì)存在交互問題，例如意外將鼠標(biāo)懸停在錯(cuò)誤的項(xiàng)目上，導(dǎo)致菜單意外關(guān)閉或移動(dòng)。這在觸摸設(shè)備上尤其令人沮喪，因?yàn)樵谟|摸設(shè)備上，精確控制更加困難。

那么，解決方案是什么？

• 將菜單限制為兩級(jí)有助于保證簡(jiǎn)單性和易用性。
• 如果你想為選項(xiàng)添加更多級(jí)別，請(qǐng)考慮使用其他控件，例如超級(jí)菜單、選項(xiàng)卡或結(jié)構(gòu)良好的導(dǎo)航頁(yè)面。

6. 進(jìn)行清晰的視覺設(shè)計(jì)

明確指出下拉菜單的位置

• 使用箭頭和菜單的標(biāo)簽的組合。這將幫助用戶了解下拉菜單的存在。

微軟使用箭頭圖標(biāo)來表示下拉菜單中的選項(xiàng)名稱

使用一致的風(fēng)格

• 在整個(gè)應(yīng)用程序中對(duì)下拉菜單使用一致的樣式。它使用戶更容易識(shí)別，以及與控件交互。
• 由于下拉菜單與界面重疊，因此請(qǐng)?jiān)谝曈X上與背景形成鮮明對(duì)比。

提供適當(dāng)?shù)膽彝：瓦x擇狀態(tài)

• 當(dāng)用戶在菜單中懸?；蜻x擇選項(xiàng)時(shí)，提供清晰的視覺反饋。
• 可以使用背景顏色或復(fù)選標(biāo)記來顯示所選的選項(xiàng)。

將鼠標(biāo)懸停在下拉菜單中選擇效果

確保動(dòng)畫流暢：

• 確保下拉菜單使用標(biāo)準(zhǔn)動(dòng)畫順利打開和關(guān)閉，幫助用戶了解菜單的當(dāng)前狀態(tài)。

使用圖標(biāo)輔助理解

• 使用圖標(biāo)和文本使得選項(xiàng)在視覺上直觀且更易于理解。
• 視覺線索可以幫助用戶快速識(shí)別操作、類別和功能，這種方法非常有效。
• 使用標(biāo)準(zhǔn)圖標(biāo)來表示選項(xiàng)的功能。
• 進(jìn)行可用性測(cè)試以確保用戶理解圖標(biāo)的含義。

不要在下拉菜單中使用工具提示選項(xiàng)

• 在下拉菜單中選項(xiàng)使用工具提示，需要根據(jù)特定場(chǎng)景來優(yōu)化。
• 當(dāng)選項(xiàng)需要進(jìn)一步解釋時(shí)，工具提示會(huì)很有幫助。
• 最重要的是，要謹(jǐn)慎使用它們，不要使設(shè)計(jì)復(fù)雜化。在下拉菜單中過度使用工具提示，可能會(huì)令人厭煩。

7.考慮移動(dòng)設(shè)備的使用場(chǎng)景

在移動(dòng)設(shè)備上，由于屏幕尺寸較小且基于觸摸的交互，下拉菜單的設(shè)計(jì)更具挑戰(zhàn)性。

• 使用響應(yīng)式下拉菜單，可以根據(jù)設(shè)備類型自行調(diào)整。
• 對(duì)于較長(zhǎng)的列表，請(qǐng)考慮使用專用的選擇界面，用戶可以在其中滾動(dòng)瀏覽選項(xiàng)并進(jìn)行選擇。
• 確保下拉菜單及其選項(xiàng)具有足夠大的點(diǎn)擊區(qū)域。選項(xiàng)太小或間距太近會(huì)導(dǎo)致用戶感到難受，并且容易出錯(cuò)。
• 最好使用原生控件，因?yàn)樗鼈冡槍?duì)觸摸交互進(jìn)行了優(yōu)化。這些組件對(duì)用戶來說很熟悉，并且比自定義下拉菜單提供更好的用戶體驗(yàn)。
• 避免在移動(dòng)設(shè)備上使用多級(jí)下拉菜單。單級(jí)菜單更易于導(dǎo)航且不易混淆。

Linkedin 使用響應(yīng)式下拉菜單來適應(yīng)桌面和移動(dòng)設(shè)備

8. 按邏輯順序組織選項(xiàng)

如果選項(xiàng)可以按照類型進(jìn)行邏輯分組，盡量將它們分組展示。

• 為了使選項(xiàng)群組更加明顯，你可以在下拉菜單中使用視覺分隔符或標(biāo)題來分隔不同的類別。
• 如果選項(xiàng)的重要性相同或沒有明顯的規(guī)律，可以按字母順序排列。這種方法可以讓用戶預(yù)測(cè)選項(xiàng)會(huì)出現(xiàn)在哪里。
• 如果下拉菜單包含日期、時(shí)間或其他順序選項(xiàng)，請(qǐng)按順序排列。
• 同樣，如果菜單顯示數(shù)字或范圍，請(qǐng)按升序或降序排列。

Google 使用邏輯順序在下拉菜單中顯示選項(xiàng)

9.提供搜索功能

帶有搜索功能的下拉菜單增強(qiáng)了可用性，尤其是在處理許多選項(xiàng)時(shí)。

• 它使用戶更容易找到所需的選項(xiàng)，而無需滾動(dòng)整個(gè)列表。
• 輸入所需的名稱并過濾列表可減少找到選項(xiàng)所需的時(shí)間和精力。
• 如果搜索查詢與任何選項(xiàng)都不匹配，則顯示一條清晰的消息，告知用戶他們需要嘗試其他搜索詞。
• 確保搜索框和下拉菜單在移動(dòng)設(shè)備上能正常使用。搜索框應(yīng)易于點(diǎn)擊，篩選選項(xiàng)應(yīng)易于在小屏幕上滾動(dòng)瀏覽。

通過搜索可以過濾較長(zhǎng)的下拉列表

10. 提供默認(rèn)選擇的選項(xiàng)

• 如果有常用或推薦的選項(xiàng)，請(qǐng)考慮將其設(shè)置為默認(rèn)選項(xiàng)。這可以簡(jiǎn)化用戶的交互，特別是當(dāng)他們應(yīng)該接受默認(rèn)選項(xiàng)時(shí)。
• 如果不存在明確的默認(rèn)值，或者你想強(qiáng)制用戶做出有意識(shí)的選擇，請(qǐng)從中性選項(xiàng)開始，例如「無」或「選擇」。

Linkedin 在下拉框中顯示「選擇」作為默認(rèn)輸入

下拉框內(nèi)的默認(rèn)選項(xiàng)

結(jié)語

精心設(shè)計(jì)的下拉菜單可以大大提高產(chǎn)品的可用性。通過已有的最佳實(shí)踐，你可以創(chuàng)建直觀而高效的下拉菜單。