幾何

正確地設計下拉菜單,可以幫助用戶縮小選擇范圍,減少屏幕其他元素的干擾,以及防止用戶輸入錯誤的信息。但是,在某些情況下,下拉菜單的錯誤使用將給用戶體驗帶來嚴重的負面影響。在什么情況下使用下拉菜單至關重要。

本文將依據下拉菜單的屬性,通過舉例來討論下拉菜單的使用場景,希望在設計上對大家有所幫助。

 

01?避免過長的下拉列表

在表單使用下拉菜單看起來很簡單,它們不會占用界面空間,適配所有瀏覽器,用戶對于此類組件足夠熟悉。但是,當下拉菜單里有超過15個選項時,用戶會變得不知所措,選擇起來非常費勁。

用戶需要從20多個未分類的選項中找到想要的內容,想想都令人頭大。此外還存在滾動的問題,用戶必須把光標保持在下拉列表中,不然很容易滾動整個頁面,造成誤操作。

國家選擇器應該是最經典的長列表下拉菜單了,常常有超過100多個選項。雖然列表中的選項一般情況下會按字母順序排列,但是將熱門國家/地區放在列表頂部的做法依舊不能滿足用戶需求。更好的做法是,增加自動填充功能或搜索功能,因為用戶知道它們想要選擇的內容是什么。(比如系統可以根據地理位置或場景自動填充國家,或用戶自主搜索國家)

02?避免選項過少

而選項過少,使用下拉菜單組件也將是一個糟糕的決定。隱藏了本可以直接展示的信息內容,反而給用戶的流程造成阻礙,降低了用戶完成任務的效率。比較好的方式是使用單選組件,可以讓用戶快速瀏覽選項內容,提升用戶的操作效率。

02?避免選項過少

而選項過少,使用下拉菜單組件也將是一個糟糕的決定。隱藏了本可以直接展示的信息內容,反而給用戶的流程造成阻礙,降低了用戶完成任務的效率。比較好的方式是使用單選組件,可以讓用戶快速瀏覽選項內容,提升用戶的操作效率。

03?置灰不可選項,而非刪除

當某個選項被禁用或不可用時,應將其顯示為灰色,而不是直接刪除。因為這些不可用選項被禁用的情況有多種(如可能是在當前場景下是不可用的,在其他場景是可用的)??梢钥紤]使用給不可用選項增加提示,說明其被禁用原因以及如何使其為可用狀態。

04?鍵盤輸入可能更快

在某些情況下,鍵入可能比下拉選擇速度更快。典型的案例就是信用卡日期。鍵入mm/yy絕對快得多,而不是從兩個下拉菜單(月和年)中滾動。

盡管使用自由格式的輸入字段需要某種形式的數據驗證,但從可用性的角度來看,它仍然是最好的選擇——因為它可以減少用戶的負擔。

05?避免過度使用

當某些數據或信息可以自動填入時,無需要求用戶進行手動輸入。這樣的示例之一就是在結帳過程中使用的“卡類型”功能。根據信用卡號的前幾個數字,可以確定卡的類型,此時要求用戶自己選擇卡的類型會額外增加用戶的操作。

06?減少操作

可以根據所需信息自定義下拉菜單的交互方式,以減少操作步驟。一個經典的例子是“日期選擇”功能,如果使用普通的列表菜單,則需要3個下拉菜單(月,日和年),這對于用戶來說很繁瑣。

更好的選擇是自定義菜單組件,以允許用戶僅使用一個下拉菜單選擇輸入。

07?使用簡潔明了的標簽

用戶根據菜單標簽內容選擇選項,因此準確提供信息非常重要。通常,最好使用簡潔的標簽,以清楚表明選擇的目的。以下是一些標簽的準則:

  • 對于動作菜單項,請使用動詞來描述將要發生的動作
  • 對于鏈接,請使用名詞來標識用戶跳轉到的頁面
  • 排除菜單項中的冠詞;使用“刪除頁面”,而不是“刪除這個頁面”
  • 將菜單項保持在一行文本中

通過按邏輯順序對列表進行排序來組織菜單項也很重要-如果可以,通常將最常選擇的選項放在下拉列表頂部。然后通過用戶調研,不斷進行測試和完善,以重新評估結果。

 

原文地址:7 tips for dropdown menu design

譯文地址:微交互Lab(公眾號)

作者:Jeremiah Lam

譯者:焱碩

 

轉載請注明:學UI網 » 下拉菜單設計的7個技巧

登錄收藏
 
你可能喜歡的:
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
異常場景怎么處理?異常場景怎么處理?
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
?
京东方a股票