← Back to list

在現代的使用者體驗設計中,應該使用下拉選單嗎?

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

Jiangyii · 2025-10-28 02:52 · 0 claps · 3.0 min read
#ui-ux-design #dropdownlist #user-experience
Open on Medium ↗
Wiki topics: UX · UI/UX Design

在現代的使用者體驗設計中,應該使用下拉選單嗎?

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

真正的摩擦來自於我們依賴在使用者要求他們做的事情。

以下將介紹幾點下拉式選單的設計原則:

  1. 隱藏的選擇和認知負荷
  2. 精度和交互成本
  3. 更明智的選擇
  4. 效率性

隱藏的選擇與認知負荷

要與下拉式選單進行交互,人們必須記住可能存在的選項,按一下以顯示它們,掃描隱藏列表,然後做出精確的選擇。

這是一個多步驟的過程,而且在認知上比看起來的要求更高。

人機互動的研究一致表明,識別比回憶更容易。

當選項可見時,使用者可以用最少的努力識別他們需要什麼。

當選項被隱藏時(如下拉菜單中),使用者必須依靠記憶。

這個額外的步驟會引起猶豫並減慢任務的完成速度。

精度和互動成本:

使用下拉式選單的物理動作會增加進一步的摩擦。

根據菲茨定律,捕獲目標的時間取決於目標的距離和大小。

下拉清單通常會顯示小而緊密的目標,這需要仔細的精確操作,尤其是在觸控螢幕上。

過長的清單只會讓情況變得更糟。它們會把使用者困在無止盡的滾動中,讓像選擇國家這樣簡單的事情變成一種耗時的體驗。

實地研究和可用性測試表明,與單選按鈕分段控制項或自動完成搜尋等替代方案相比,下拉式選單會增加錯誤率和決策時間。

眾所周知,雅各布·尼爾森 (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