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

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

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

適合使用下拉菜單的場(chǎng)景

導(dǎo)航菜單

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

內(nèi)容分類(lèi)

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

表單項(xiàng)

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

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

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

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

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

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

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

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

避免列表過(guò)長(zhǎng)

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

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

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

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

避免選項(xiàng)過(guò)少

選項(xiàng)太少時(shí)使用下拉菜單，反而給用帶來(lái)繁瑣的操作。因?yàn)橄吕藛坞[藏選項(xiàng)，用戶(hù)必須操作不必要的動(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)證，但在這一場(chǎng)景下，直接輸入仍然是最好的選擇。

組合下拉菜單，減少操作

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

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

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

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

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

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

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

↘ 鏈接使用名詞來(lái)標(biāo)識(shí)用戶(hù)將定向到的頁(yè)面。

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

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

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

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