下拉菜單有許多優(yōu)點：它節(jié)省屏幕空間不占地方，不需要做輸入驗證，所有平臺都支持，技術(shù)門檻低，用戶都熟悉其使用方法。。它還可以有效幫助用戶縮小選擇范圍，轉(zhuǎn)換屏幕空間并防止錯誤的數(shù)據(jù)輸入。

然而，下拉菜單又是最容易被錯誤使用的表單組件。過度使用或濫用它們可能會造成可用性問題的出現(xiàn)。?

本文將針對下拉菜單性質(zhì)，告訴大家下拉菜單的適用場景、設(shè)計技巧以及實例探討怎樣正確使用下拉菜單優(yōu)化設(shè)計。

?

適合使用下拉菜單的場景

導航菜單

下拉菜單適用于陳列所有需要展示的子頁面，相當于子導航菜單，將用戶帶到一個新的位置。

內(nèi)容分類

例如：許多資訊產(chǎn)品會選擇下拉菜單進行內(nèi)容分類和羅列標簽。這是因為資訊產(chǎn)品里通常有大量的內(nèi)容，所以排版要簡潔、清晰，而下拉菜單能將布局元素外的鏈接集合起來。

表單項

讓用戶選擇一個選項設(shè)置表單字段

下拉菜單選項的類型影響下拉菜單的使用

五個以內(nèi)選項建議使用單選框或分段選擇器，這樣能一眼看到所有選項，而不需要下拉打開選項菜單。

選項較多且指向性明確建議使用可輸入下拉菜單

如果用戶明確知道他們要什么，允許用戶輸入選項，并在輸入的同時過濾出可能的答案，這樣可以節(jié)省翻閱長列表的時間。

純數(shù)值選項讓用戶在文本輸入框中鍵入會更快

通常來說，在手機上使用數(shù)字鍵盤輸入純數(shù)值會比在菜單中選擇數(shù)值更加快一些。

?

下拉菜單設(shè)計要訣

避免列表過長

當選項超過 15 種時，用戶可能會不知所措。當用戶看到 20 多個未分類的選項時，即使用戶想在眾多選項中找到合適選項，但一定會出現(xiàn)滾動問題，用戶必須讓鼠標在下拉框中，否則頁面就會隨下拉滾動。

長下拉列表最經(jīng)典案例：

國家選擇器-有 100 多個選項。通常按字母順序排序。還有一種做法是把常用/流行的國家/地區(qū)放在頂部。

或者使用帶自動提示功能的文本框，提示用戶想要什么。

避免選項過少

選項太少時使用下拉菜單，反而給用帶來繁瑣的操作。因為下拉菜單隱藏選項，用戶必須操作不必要的動作才能看到選項。

灰掉任何不可用的選項而不是刪除它們

某個選項被禁用或不可用時，應將其設(shè)置為灰色。將選項設(shè)置灰色指示其「已禁用」或「不可用」狀態(tài)。

同時可以加入提示，指示該選項被禁用的原因、如何讓其成為可用狀態(tài)。

輸入優(yōu)先、下拉備選

某些情況下，輸入更快。

例如：輸入信用卡有效期。鍵入 mm/yy相比從兩個下拉菜單中選擇月和年要快。

雖然自由輸入需要數(shù)據(jù)驗證，但在這一場景下，直接輸入仍然是最好的選擇。

組合下拉菜單，減少操作

當選擇項由多個字段組成時，將幾個下拉菜單組合，可以有效減少用戶操作。

例如：日期選擇下拉菜單，有年、月、日甚至是小時、分、秒的選擇，如

果用普通下拉菜單則需要用到3-6個。而把這些選項組合成一個下拉菜單，就方便很多了。

下拉菜單打開時，保持菜單標簽或描述。

用戶會根據(jù)他們的標簽選擇菜單選項，因此提供準確的信息很重要。在打開菜單時標簽被隱藏或刪除，用戶必須回憶他們在采取行動之前需要選擇的內(nèi)容。隨時可能中斷用戶的任務。

?

編寫簡潔標簽的準則：

↘????? 動作菜單項請使用動詞來描述將要發(fā)生的動作。

↘????? 鏈接使用名詞來標識用戶將定向到的頁面。

↘????? 排除菜單項中多余的描述性助詞；例如「刪除頁面」，而不是「刪除這個頁面」。

↘????? 將菜單項保持在一行文本中。

↘????? 組織菜單項的列表排序有邏輯順序。

↘????? 將選擇最多的選項排列在頂部，迭代更新最熱選項。