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

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

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

適合使用下拉菜單的場景

導(dǎo)航菜單

下拉菜單適用于陳列所有需要展示的子頁面，相當(dāng)于子導(dǎo)航菜單，將用戶帶到一個(gè)新的位置。

內(nèi)容分類

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

表單項(xiàng)

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

下拉菜單選項(xiàng)的類型影響下拉菜單的使用

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

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

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

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

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

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

避免列表過長

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

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

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

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

避免選項(xiàng)過少

選項(xiàng)太少時(shí)使用下拉菜單，反而給用帶來繁瑣的操作。因?yàn)橄吕藛坞[藏選項(xiàng)，用戶必須操作不必要的動(dòng)作才能看到選項(xiàng)。

灰掉任何不可用的選項(xiàng)而不是刪除它們

某個(gè)選項(xiàng)被禁用或不可用時(shí)，應(yīng)將其設(shè)置為灰色。將選項(xiàng)設(shè)置灰色指示其「已禁用」或「不可用」?fàn)顟B(tài)。

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

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

某些情況下，輸入更快。

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

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

組合下拉菜單，減少操作

當(dāng)選擇項(xiàng)由多個(gè)字段組成時(shí)，將幾個(gè)下拉菜單組合，可以有效減少用戶操作。

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

果用普通下拉菜單則需要用到*-6個(gè)。而把這些選項(xiàng)組合成一個(gè)下拉菜單，就方便很多了。

下拉菜單打開時(shí)，保持菜單標(biāo)簽或描述。

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

編寫簡潔標(biāo)簽的準(zhǔn)則：

↘ 動(dòng)作菜單項(xiàng)請使用動(dòng)詞來描述將要發(fā)生的動(dòng)作。

↘ 鏈接使用名詞來標(biāo)識用戶將定向到的頁面。

↘ 排除菜單項(xiàng)中多余的描述性助詞；例如「刪除頁面」，而不是「刪除這個(gè)頁面」。

↘ 將菜單項(xiàng)保持在一行文本中。

↘ 組織菜單項(xiàng)的列表排序有邏輯順序。

↘ 將選擇最多的選項(xiàng)排列在頂部，迭代更新最熱選項(xiàng)。