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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那該怎么辦呢？

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

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

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

• 瀏覽多級(jí)菜單的選項(xiàng)會(huì)增加界面的復(fù)雜性。
• 對(duì)于復(fù)雜的層級(jí)，用戶(hù)必須記住他們?cè)诓藛螌哟沃械奈恢貌⒏櫼郧暗倪x擇。
• 深度級(jí)別可能會(huì)存在交互問(wèn)題，例如意外將鼠標(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)行清晰的視覺(jué)設(shè)計(jì)

明確指出下拉菜單的位置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9.提供搜索功能

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

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

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

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

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

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

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

結(jié)語(yǔ)

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

作者：陳子木