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

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

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

1. 不要使用長菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

那該怎么辦呢？

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

5. 不要使用超過 2 級的下拉菜單

多級下拉菜單可能會讓用戶感到不知所措和困惑。

• 瀏覽多級菜單的選項(xiàng)會增加界面的復(fù)雜性。
• 對于復(fù)雜的層級，用戶必須記住他們在菜單層次中的位置并跟蹤以前的選擇。
• 深度級別可能會存在交互問題，例如意外將鼠標(biāo)懸停在錯誤的項(xiàng)目上，導(dǎo)致菜單意外關(guān)閉或移動。這在觸摸設(shè)備上尤其令人沮喪，因?yàn)樵谟|摸設(shè)備上，精確控制更加困難。

那么，解決方案是什么？

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

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

明確指出下拉菜單的位置

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

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

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

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

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

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

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

確保動畫流暢：

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

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

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

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

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

7.考慮移動設(shè)備的使用場景

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

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

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

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

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

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

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

9.提供搜索功能

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

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

通過搜索可以過濾較長的下拉列表

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

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

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

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

結(jié)語

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

作者：陳子木