下拉菜單是一種標準 UI 控件，它提供了一種干凈直觀的方式來向用戶呈現選項列表。

然而，如果設計不當，它們可能會讓用戶感到困惑。本文將討論一些幫助您創建下拉菜單以增強產品可用性的最佳實踐。

目錄：

• 1.不要使用過長的菜單
• 2.不要使用下拉菜單來提供兩個選項
• 3. 禁用暫時無效的選項
• 4. 不要在選項過于明顯的地方使用下拉菜單
• 5. 不要使用超過 2 級的下拉菜單
• 6. 做出清晰的視覺設計
• 7.考慮移動設備
• 8. 按邏輯順序組織選項
• 9.提供搜索功能
• 10. 進行默認選擇
• 結束

1.不要使用過長的菜單

使用帶有太多選項的下拉菜單通常會導致糟糕的用戶體驗。

• 它增加了用戶處理和比較一長串選項的認知負擔。用戶會花更多的時間在簡單的選擇上。
• 用戶將需要滾動列表才能看到所有選項。這在小屏幕上可能會更煩人。
• 當用戶滾動列表以找到所需的選項時，需要更多的加載時間來快速加載所有選項。

圖片

如果需要長下拉菜單怎么辦？

在這種情況下，某些最佳實踐可以幫助您管理長下拉菜單。

• 使用類別/組：這可以幫助用戶快速導航到相關類別，而不是滾動整個列表。
• 提供搜索功能：允許用戶輸入文本并快速找到所需的結果。
• 限制選項數量：重新評估所有選項是否都是必要的。通過刪除不太重要的選項來限制數量。
• 使用替代 UI 控件：考慮替代 UI 控件，例如列表框或一組復選框，這可能對用戶更友好。

2.不要使用下拉菜單來提供兩個選項

一般不建議僅為兩個選項使用下拉菜單，因為這會給用戶增加不必要的復雜性。

• 下拉菜單至少需要兩次點擊或輕點。第一次點擊打開菜單，第二次點擊選擇選項。對于兩個選項來說，這個過程與其他方法相比效率很低。
• 在下拉菜單中隱藏兩個選項可能會讓用戶感到沮喪。

提供兩個選擇選項的解決方案是什么？

在這種情況下，最好使用其他控件。單選按鈕或切換開關允許用戶通過單擊或輕點來選擇選項。而且，這些選項在用戶界面上始終可見。

3. 禁用暫時無效的選項

這種方法引導用戶只關注可用且有效的選擇，從而提高效率。

• 它可以防止選擇當前不適用或不可用的內容，從而減少出錯的可能性。
• 保持選項可見但禁用，可提供一致的體驗，確保用戶可以看到所有的可能性。

如何更好地實現這一目標？

• 以不同方式顯示禁用選項非常重要。可以將其涂成灰色或降低其不透明度。這樣就能清楚地表明它們是不可選的。
• 可以通過工具提示或內嵌信息提供額外的上下文或解釋，說明禁用選項的原因。這將讓用戶知道何時以及如何啟用該選項。

圖片

4. 不要在選項過于明顯的地方使用下拉菜單

每次用戶需要從可用選項中進行選擇時，都提供下拉菜單并不是必要的。

• 有時，選項是簡單而熟悉的，在下拉列表中提供這些選項會降低效率。
• 在這種情況下，要求用戶滾動瀏覽長長的列表可能會減慢處理速度。

圖片

該怎么辦呢？

• 允許用戶輸入可以顯著加快該過程。
• 你可以提供自動建議，以指導用戶的相關選項。
• 它減少了從一長串列表中進行掃描和選擇的認知努力。對于已經知道自己要找什么的用戶來說，這種方法往往更直觀、更快捷。

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

多級下拉菜單會讓用戶不知所措，產生混淆。

• 瀏覽多個級別的選項會增加復雜性。
• 對于每個下一個級別，用戶必須記住他們在菜單層次結構中的位置并跟蹤以前的選擇。
• 深層可能會導致交互問題，例如意外地將鼠標懸停在錯誤的項目上并導致菜單意外關閉或移動。這在觸摸設備上尤其令人沮喪，因為在觸摸設備上精確控制更加困難。

圖片

解決辦法是什么？

• 將菜單限制為兩級有助于確保簡單性和易用性。
• 如果你想為某個選項增加更多層次，可以考慮采用其他控制方式，如巨型菜單、標簽或結構合理的導航頁面。

6. 做出清晰的視覺設計

明確指出有下拉菜單的地方

• 在菜單標簽/標題中使用箭頭。這將有助于用戶了解下拉菜單的存在。

使用一致的風格

• 在整個應用程序中使用一致的下拉菜單樣式。它使用戶更容易識別控件并與其交互。
• 由于下拉菜單與界面重疊，因此請與背景形成鮮明的對比。

提供正確的懸停和選擇狀態

• 當用戶將鼠標懸停在菜單中或選擇菜單中的選項時，提供清晰的視覺反饋。
• 可使用背景色或復選標記來顯示所選選項。

圖片

確保動畫流暢

• 確保下拉菜單使用標準動畫順利打開和關閉，幫助用戶了解菜單的當前狀態。

使用圖標支持選項

• 使用圖標和文字可使選項直觀易懂。
• 當選項所代表的操作、類別或項目可以通過視覺線索快速識別時，這種方法就會更加有效。
• 使用標準圖標來表示選項。
• 進行可用性測試，確保用戶理解圖標的含義。

圖片

下拉菜單中的選項不要使用工具提示

• 為下拉菜單中的選項使用工具提示取決于某些情況。
• 當選項需要進一步解釋時，工具提示會很有幫助。
• 但是，應謹慎使用它們，不要使設計復雜化。在下拉菜單中過度使用工具提示可能會很煩人。

7.考慮移動設備

在移動設備上，由于屏幕尺寸較小且基于觸摸的交互，下拉菜單的設計可能更具挑戰性。

• 使用響應式下拉菜單，可以根據設備類型進行自我調整。
• 對于較長的列表，可考慮使用專門的選擇屏幕，讓用戶可以滾動瀏覽選項并做出選擇。
• 確保下拉菜單及其選項具有足夠大的點擊區域。較小或間隔很近的選項會導致用戶沮喪和錯誤。
• 最好使用本地控件，因為它們針對觸摸交互進行了優化。這些組件是用戶所熟悉的，能提供比自定義下拉菜單更好的用戶體驗。
• 避免在移動設備上使用多級下拉菜單。單級菜單更易于導航且不易混淆。

圖片

8. 按邏輯順序組織選項

如果選項可以按類別或類型進行邏輯分組，請考慮將它們組織成組。

• 為了使分組更加明顯，您可以在下拉列表中使用視覺分隔符或標題來分隔不同的類別。
• 如果選項的重要性相同或沒有明顯的模式，則按字母順序排列。這種方法可以讓用戶預測某個選項會出現在哪里。
• 如果下拉菜單包括日期、時間或其他順序選項，請按順序排列。
• 同樣，如果菜單顯示數字或范圍，請按升序或降序排列它們。

圖片

Google 使用邏輯順序在下拉菜單中顯示選項

9.提供搜索功能

具有搜索功能的下拉菜單增強了可用性，尤其是在處理許多選項時。

• 它使用戶可以更輕松地找到所需的選項，而無需滾動整個列表。
• 鍵入所需的名稱并過濾列表可以減少查找選項所需的時間和精力。
• 如果搜索查詢與任何選項都不匹配，則應顯示一條明確的信息，告知用戶需要嘗試不同的搜索詞。
• 確保搜索框和下拉菜單在移動設備上運行良好。搜索框應易于點擊，過濾后的選項應易于在小屏幕上滾動瀏覽。

圖片

10. 進行默認選擇

如果有常見或推薦的選項，請考慮將其設置為默認選擇。這可以簡化用戶的交互，特別是當他們應該接受默認值時。

如果不存在明確的默認值，或者您想強迫用戶做出有意識的選擇，請從“無”或“選擇”等中性選項開始。

圖片

Linkedin 將“選擇”顯示為下拉框中的默認輸入

圖片

下拉框中的默認輸入

結束

精心設計的下拉菜單可以大大提高產品的可用性。只要遵循給出的最佳實踐，就能創建直觀、高效的下拉菜單。

翻譯自原文：https://uxplanet.org/10-best-practices-for-designing-drop-down-menu-b8f8705c9641