在現代的使用者體驗設計中,應該使用下拉選單嗎?
下拉式選單是最廣泛使用的介面模式之一。它們之所以受歡迎是有原因的:擁有簡潔結構、易於辨識、實現。但作為一名設計師,我發現它們往往最終可能成為一種損害可用性的捷徑。
在現代的使用者體驗設計中,應該使用下拉選單嗎?

下拉式選單是最廣泛使用的介面模式之一。它們之所以受歡迎是有原因的:擁有簡潔結構、易於辨識、實現。但作為一名設計師,我發現它們往往最終可能成為一種損害可用性的捷徑。
真正的摩擦來自於我們依賴在使用者要求他們做的事情。
以下將介紹幾點下拉式選單的設計原則:
- 隱藏的選擇和認知負荷
- 精度和交互成本
- 更明智的選擇
- 效率性
隱藏的選擇與認知負荷
要與下拉式選單進行交互,人們必須記住可能存在的選項,按一下以顯示它們,掃描隱藏列表,然後做出精確的選擇。
這是一個多步驟的過程,而且在認知上比看起來的要求更高。
人機互動的研究一致表明,識別比回憶更容易。
當選項可見時,使用者可以用最少的努力識別他們需要什麼。
當選項被隱藏時(如下拉菜單中),使用者必須依靠記憶。
這個額外的步驟會引起猶豫並減慢任務的完成速度。
精度和互動成本:
使用下拉式選單的物理動作會增加進一步的摩擦。
根據菲茨定律,捕獲目標的時間取決於目標的距離和大小。
下拉清單通常會顯示小而緊密的目標,這需要仔細的精確操作,尤其是在觸控螢幕上。
過長的清單只會讓情況變得更糟。它們會把使用者困在無止盡的滾動中,讓像選擇國家這樣簡單的事情變成一種耗時的體驗。
實地研究和可用性測試表明,與單選按鈕、分段控制項或自動完成搜尋等替代方案相比,下拉式選單會增加錯誤率和決策時間。
眾所周知,雅各布·尼爾森 (Jakob Nielsen) 在早期的網路可用性指南中,建議不要使用下拉式選單輸入數據,這一原則在當代設計研究中仍然得到呼應。
更明智的選擇:
也許解決方案不是完全放棄下拉式選單,而是謹慎而有意識地使用它們。
當只有幾個選項時,直接展示它們幾乎總是更好的。
使用者辨識選擇的速度比回憶選擇的速度要快,而預先看到所有內容可以讓決策變得更容易:
- 對於較大的集合,預測搜尋或自動完成可以顯著降低找到所需內容需要的工作量。
- 當有類別可用時,將選項分組比將所有內容轉存到一個長而連續的清單中要有效得多。
但在某些情況下,下拉式選單是有意義的。
它們節省空間,適合中等數量的選項,其中沒有單一選擇占主要資訊層級,並且替代方案都是易於辨識的。
它們絕不應該成為預設值。而在使用下拉元件之前,我們需要考慮任務、使用頻率和互動環境。
效率性:
這裡提及的不僅是效率,還有整體體驗的質感。
充滿下拉式選單的介面讓人感覺速度較慢、不太直接,而且不太尊重使用者的時間。
當每個操作都需要點擊、等待和掃描時,使用者會認為產品的操作效率低。
相較之下,當常見任務浮現、可預測且無摩擦時,產品會讓人感覺周到且反應靈敏。
下拉式選單很容易實現,但使用起來通常成本較高。
將它們視為顯而易見的解決方案會忽略數十年的可用性研究,並將效率的負擔轉移到使用者身上。
而好的設計要求剛好相反:
每個決定都不應以我們的便利性或視覺簡約性來評估,而應以它是否能幫助使用者快速、自信地實現他們的目標來評估。
歸根究底,設計就是尊重:尊重使用者的時間、注意力和意圖。
因此,下拉式選單是一種工具,而不是規則。我們應該深思熟慮地使用它們,而不是反射性地使用它們,因為在現代使用者體驗中,每一次互動都顯的很重要。
資料來源: https://www.designsystemscollective.com/do-dropdown-menus-still-belong-in-modern-ux-8894c5b87192
메타데이터
- post_id
- e30c756ce919
- slug
- 在現代的使用者體驗設計中-應該使用下拉選單嗎-e30c756ce919
- url
- https://medium.com/@jiangyii1996/%E5%9C%A8%E7%8F%BE%E4%BB%A3%E7%9A%84%E4%BD%BF%E7%94%A8%E8%80%85%E9%AB%94%E9%A9%97%E8%A8%AD%E8%A8%88%E4%B8%AD-%E6%87%89%E8%A9%B2%E4%BD%BF%E7%94%A8%E4%B8%8B%E6%8B%89%E9%81%B8%E5%96%AE%E5%97%8E-e30c756ce919
- canonical_url
- https://medium.com/@jiangyii1996/%E5%9C%A8%E7%8F%BE%E4%BB%A3%E7%9A%84%E4%BD%BF%E7%94%A8%E8%80%85%E9%AB%94%E9%A9%97%E8%A8%AD%E8%A8%88%E4%B8%AD-%E6%87%89%E8%A9%B2%E4%BD%BF%E7%94%A8%E4%B8%8B%E6%8B%89%E9%81%B8%E5%96%AE%E5%97%8E-e30c756ce919
- author_url
- https://medium.com/@jiangyii1996
- status
- ok
- fetched_at
- 2026-07-26 04:48:36