題： 導航 交互設計

下拉菜單在網頁設計中顯然占有一席之地。然而，他們的過度使用和誤用造成了許多可用性問題和混亂。設計師們為了各種不同的目的而使用下拉，包括:

• 命令菜單，它根據所選選項啟動一個操作

當用戶單擊“發布” 圖標時，Microsoft Word使用下拉菜單顯示發布命令。

• 導航菜單，它將用戶帶到一個新的位置

阿里云使用下拉菜單為每個頂級類別提供子類別鏈接列表

• 表單填充，讓用戶選擇一個選項進入表單字段

Element下拉組件

• 屬性選擇，允許用戶從可能值的菜單中選擇一個值

Adobe Color CC允許用戶從顏色規則列表中選擇調色板

雖然最初的術語“下拉框”和“下拉菜單”可以互換使用，但隨著時間的推移，兩者之間出現了功能上的區別。現在，下拉菜單主要包括下拉菜單的前兩種用法(導航和命令列表)，而下拉框通常是表單填充和屬性選擇的選擇方法。

下拉框通常與下拉菜單不同:它們旁邊有一個下拉箭頭，用于選擇屬性或輸入表單數據。這個控件傾向于一個字段標簽或一個標題，這個標題在下拉框中占據第一項的位置，以便在進行選擇之前可以看到它。盡管MacOS和Windows有不同的下拉式實現，但在這兩種情況下，命令菜單都不同于屬性選擇菜單。事實上，Macintosh人機界面指導原則明確建議不要使用下拉菜單來執行命令。

下拉式設計指南

下拉菜單確實有其優點。首先，它們節省了屏幕空間。因為它們是一個標準的小部件（即使是不愉快的小部件），用戶也知道如何處理它們。而且，當使用表單和屬性選擇時，下拉框會阻止用戶輸入錯誤的數據，因為它們只顯示合法的選擇。

盡管有這些優點，但如果設計者較少使用下拉菜單，web可用性就會增加。為此，以下是一些關于下拉的設計準則:

1、避免交互式菜單，其中當用戶在同一頁面的另一菜單中選擇某些內容時，菜單中的選項會改變。當選擇來來去去的時候，用戶會感到非常困惑，當它依賴于一個不同的小部件中的選擇時，通常很難看到想要的選項。

iTunes：視圖菜單包含不同的選項，具體取決于在庫側面菜單中是選擇了相冊（左）還是歌曲（右）

2、灰掉任何不可用的選項而不是刪除它們：任何無法選擇的項目都應保留在視圖中。對于額外的用戶體驗，如果用戶在一個灰色的選項上停留超過一秒，可以考慮顯示一個簡短的氣球幫助信息，解釋為什么這個選項是禁用的，以及如何使它激活。

如果刪除了禁用的項，界面就失去了空間一致性，變得更難學習。

Snagit：“漸變” 和“容差” 選項呈灰色顯示，表示在選擇“無填充” 選項時無法選擇它們

3、需要滾動的非常長的下拉菜單使得用戶無法一眼看到他們的所有選擇。也需要小心的轉向鼠標，這樣它就不會離開下拉。（這是轉向定律的一個例子，它指出用戶通過隧道引導一個指向設備的時間取決于隧道的長度和寬度:隧道越長越窄，占用的時間就越多用戶將指針從一端移動到另一端，轉向定律來源于Fitts定律）

在可能的情況下，抵制住誘惑。如果你有很多項目，可以考慮其他的方式來展示它們——比如傳統鏈接的HTML列表或者超級菜單，它們是二維的而不是線性的，并且提供更簡單的鼠標管理，并且更快的平均時間到達里面的項目。

百度的模糊匹配

4、在打字時要避免下拉框。典型的情況包括國家或國家的名單，例如郵寄地址。比起從滾動下拉菜單中選擇一個狀態，用戶簡單地輸入“NY”要快得多。對帶有受限選項的字段進行自由格式輸入確實需要在后端進行數據驗證，但從可用性的角度來看，這往往是最好的方法。（這是我們的電子商務可用性準則之一，因為我們在簽入表單時使用狀態下拉列表觀察到了許多錯誤。）

Ant Design 在查找控件時輸入關鍵字會比下拉選擇快得多

5、避免使用下拉框，以獲取對用戶非常熟悉的數據，比如他們的出生日期、月份或年份。這些信息通常都是硬連接到用戶的手指上的，而且要在長菜單中找到這些選項是很繁瑣的，打破了之前的指導方針，并且給用戶創造了更多的工作。

輸入年月日會更容易

6、當下拉菜單打開時，保持菜單標簽或描述。菜單標題通過提醒用戶他們選擇的內容來提供范圍和方向。在打開菜單時，當標簽被隱藏或刪除時，用戶必須回憶他們在采取行動之前需要選擇的內容。計劃中斷，隨時可能中斷用戶的任務。

在下拉菜單打開時，隱藏了標簽 用戶需要重新調用該標簽才能了解下拉列表中選項的上下文

7、在桌面的下拉菜單中保留全局導航選項。隱藏你的網站的頂級類別可能對用戶在任何網站上的成功是有害的。

8、支持鍵盤輸入以在下拉菜單內進行導航。下拉菜單（菜單和框）應該不僅支持鼠標輸入，而且支持按鍵。在下拉菜單中，訪問鍵應使用戶能夠在不使用鼠標的情況下快速選擇可見選項。在下拉框中，用戶應該能夠鍵入一個字母并快速導航到以該字母開頭的選項。

總結

下拉框和菜單被過度使用會顯得笨拙，但是可以用于顯示選項或命令列表。

您的關注是我最大的動力，關注一下吧～