下拉菜單是一種標(biāo)準(zhǔn) UI 控件，它提供了一種干凈直觀的方式來向用戶呈現(xiàn)選項列表。

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

目錄：

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

1.不要使用過長的菜單

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

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

圖片

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

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

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

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

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

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

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

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

3. 禁用暫時無效的選項

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

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

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

• 以不同方式顯示禁用選項非常重要?？梢詫⑵渫砍苫疑蚪档推洳煌该鞫?。這樣就能清楚地表明它們是不可選的。
• 可以通過工具提示或內(nèi)嵌信息提供額外的上下文或解釋，說明禁用選項的原因。這將讓用戶知道何時以及如何啟用該選項。

圖片

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

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

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

圖片

該怎么辦呢？

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

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

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

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

圖片

解決辦法是什么？

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

6. 做出清晰的視覺設(shè)計

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

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

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

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

提供正確的懸停和選擇狀態(tài)

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

圖片

確保動畫流暢

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

使用圖標(biāo)支持選項

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

圖片

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

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

7.考慮移動設(shè)備

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

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

圖片

8. 按邏輯順序組織選項

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

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

圖片

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

9.提供搜索功能

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

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

圖片

10. 進行默認(rèn)選擇

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

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

圖片

Linkedin 將“選擇”顯示為下拉框中的默認(rèn)輸入

圖片

下拉框中的默認(rèn)輸入

結(jié)束

精心設(shè)計的下拉菜單可以大大提高產(chǎn)品的可用性。只要遵循給出的最佳實踐，就能創(chuàng)建直觀、高效的下拉菜單。

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