下拉菜單是UI設計，網頁設計中的基礎控件，也是平時大家做設計時會用到的常用組件，所以有必要對它進行全面深入的了解。本文非常全面的介紹了下拉菜單的設計法則，相信讀完會對下拉菜單設計有一個全新的認識，一起來學習吧。

下拉菜單在UI設計領域經常飽受批評，但這也不是沒有理由的。設計得不好，它們變成了繁瑣和Low的代名詞。不過這不是這篇文章要討論的，我們將要討論的是，在必要時應該如何正確的使用它們。

同時我需要申明的是，下拉菜單有兩種主要類型：一種用于導航菜單，另一種用于表單。在這篇文章中，我們只聊表單中的下拉菜單設計。

設計全面圖解

下拉菜單的設計圖解和文本輸入框很接近，只是內容多一些。（1.欄目內容 2.容器 3.下拉箭頭 4.占位符或提示文本 5.滾動條 6.下拉菜單 7.菜單項 8.分割線 9.選中項 10.提示）

△ 下拉菜單設計圖解

下拉菜單的類型及變化

人們對標準下拉菜單已經有了普遍的了解，但你仍需要在工作中留意幾個特別的類型和變化。這里包含的下拉菜單是針對表單的情況，并不是導航欄里使用的下拉菜單。

1. 標準下拉菜單

標準下拉菜單是針對我們所理解的「下拉」這個動詞。在激活狀態，當你點擊貌似文本輸入欄的地方時，它會打開一個菜單。

△ 標準下拉菜單

2. 下拉菜單配自動提示

我超喜歡這個功能。當我第一次注意到自動提示是在谷歌的搜索欄上，可我不記得第一個實現這個功能的是什么網站了。當你在一長串列表中選擇需要的選項時（比如國家名），這個功能變得格外實用。

△ 下拉菜單配自動提示

3. 下拉菜單配自動完成和自動提示功能

自動提示和自動完成功能被放在一起并不驚訝。自動提示是在輸入欄里顯示選項讓用戶從中選擇。自動完成是提前顯示一個完整的單詞或短語。

△?下拉菜單配自動完成和自動提示功能

如果你沒有在文本輸入欄開始打字的話，自動完成區域通常被隱藏起來。

4. 下拉菜單配多選

大多數情況下，下拉菜單是單選按鈕的延伸。這里的下拉菜單配多選則是復選框的延伸：用戶可以在同一個輸入區域選擇多個列表選項。（彩云注：前段時間正好有朋友問我，在設計B端后臺時，是否可以這樣設計，其實是可以的。）

△?下拉菜單配多選

如果可以的話，盡量避開這種類型。我曾在一個無比冗長的類別列表上不得已使用了它。講真，下拉菜單配自動完成和自動提示的組合才是最理想的。

5. 下拉菜單配分組

當長型下拉菜單的設計不是特別理想時，你可以把列表分組，這樣搜索起來更加簡單。

△?下拉菜單配分門別類

6. 固定滑動菜單

雖然不是嚴格意義上的下拉菜單，但是也可以考慮把多選菜單納入選擇范圍中。和下拉菜單不同的是，固定滑動菜單展開后會有一個可以滑動的小窗口。

△?固定滑動菜單

它們在電腦頁面上尚可使用，但在手機屏幕上就有點別扭了。到時候會成為一個「在滑動欄里的滑動菜單」

個人來說，我只使用過一次，也很少看到這個類型被廣泛使用過。

7. 日期選擇器

日期選擇器的類型最好只用在安排會議和活動日程上。當人們需要安排吃休息餐的時候，能一眼看出星期幾的日歷是最好不過的了。可同樣的設計被用在填寫護照截止日期時就會相當煩人。我比較偏向于那種既能輸入數字又能選擇日期的設計 - 最好確認一下輸入欄里的年月日之間加上了斜線，不然會讓人很糾結。

△?日期選擇

8. 我的「拉仇恨秘訣」：

讓用戶填寫信用卡或護照截止日期時用下拉菜單，他們會「特別」關注那天是星期幾。詢問用戶生日日期時使用下拉菜單。為了讓你被「恨得」更深一點，確定他們只能通過調整月份來更換每年的時間。「恨之入骨」級：這種設計在填寫養老院申請時最有效。（譯者注：在這一段中，希望大家能體會到作者對那些設計的深深諷刺）

下拉菜單風格

不同于下拉菜單的類型（ types），下拉菜單的風格（styles）涉及的是它實際上長什么樣而不是它如何工作的。我把幾個常見的風格列舉如下。

1. 標準風格（附屬）

之所以稱之為「標準」是因為這是最長見的。

△?標準風格（附屬）

2. 標準風格（非附屬）

我越來越多地見到這種分離菜單的風格。其實很容易理解 - 這樣菜單可以根據屏幕尺寸的變化來決定是處于輸入欄的上方還是下方。

△?標準風格（非附屬）

3. 圓形邊框

圓形邊框更適合游戲型的頁面設定。

△?圓形邊框

4. 搭配圖標

在輸入欄的開頭放一個圖標會更有「設計感」。當有人抱怨表格看起來很單調的時候（好吧，老大。。。這個表格有20個輸入欄，你還能讓人家怎么樣？）我就加了個圖標。老大然后，就沒有然后了。

△?搭配圖標

偷懶小竅門：如果有人抱怨長型表格看起來很單調，那你就加個圖標。這個久經考驗的真實辦法不用費吹灰之力，而你的上司或甲方爸爸還一定會覺得自己撿到寶了。

5. 搭配圖片

我通常會避免在下拉菜單里加圖片 - 僅僅是因為后期更新和維護會非常痛苦。尤其是如果列表經常變換的話，后果苦不堪言。不過當你需要展示各個列表的不同之處時，這個風格會很實用。

△?搭配圖片

而且我認為在一個有限的下拉列表空間里很難看清楚圖片（參照上圖），所以這種設計有點吃力不討好。除非你把圖片設計得非常大。

6. Material Design的填充下拉菜單

我表白一下自己是谷歌材料設計語言的粉絲，包括他們的下拉菜單。

「單線區（ ‘line only’ field）」已不再在谷歌的材料設計語言里使用了,但你仍能看見它潛伏在網絡上。。

△?Material Design的線性下拉菜單（line dropdown）

「單線區」被填充下拉菜單（filled dropdown）所替代，據說是因為用戶測試反映更好些。雖然沒之前的那個好看，但確實使用起來更方便 - 這才是最關鍵，各位！

△?Material design的填充下拉菜單（filled dropdown）

7. Material Design的描邊框下拉菜單

和他們的描邊框文本輸入欄一樣，材料設計語言的描邊框下拉菜單（outlined dropdowns）也非常炫酷。他們的菜單欄和下面的實際選擇欄分離，這解決了很多可用性的問題。

標簽文本被激活后變小移至上方的。我還想指出的是（這個經常被我忽略掉）：你有沒有發現下拉菜單的第一行列表是空白的。這樣的設計可以讓用戶重新設置下拉菜單，比如說他們想之后返回這項或留白列表。

△?Material design的描邊框下拉菜單

下拉菜單狀態

不管用戶用什么樣的輸入方式操作，輸入欄應給予及時的反饋。這里我們來看看不同反饋狀態下的下拉菜單。

1. 默認狀態

默認狀態是用戶在操作前下拉菜單的樣子。

2. 禁用狀態

禁用狀態下的區域對用戶可見，但不能使用。

3. 懸停狀態

如果用戶的鼠標在一個下拉菜單上懸停，這個下拉菜單應該暗示它的可點擊性。

敲黑板：手觸屏幕上不能有懸停狀態，如果你設計的是手機或平板軟件就可以省省了。

4. 強調狀態

強調狀態是指當用戶在使用「制表鍵」（這里指用戶使用鍵盤「tab/制表鍵」操縱頁面然后按「enter/回車鍵」輸入信息的情況），指定了下拉菜單之后，但在選中特定列表選項之前。我們一般會看到選中的區域帶有「藍色光環」。

不過有些網站把強調狀態和焦點狀態合并在一起，即使用戶沒有按回車鍵，下拉列表也會直接打開。我有點糾結哪個方式更好。理論上合并狀態能夠理解，可是在我沒有明確指示的情況下，下拉列表就自動打開的這點讓我很困惑。不知各位怎么看？

5. 焦點狀態

焦點狀態指的是項目的互動狀態。當你點擊了下拉菜單的話，列表就會隨之打來并展示選項。

我看到過的很多下拉菜單都會把箭頭指向同一方向，無論是活躍狀態還是焦點狀態，我比較傾向于調換箭頭的方向。我把它們看成是折疊面板（accordion）。你還可以用動圖展示箭頭轉換的方向。

當用戶的鼠標在打開的下拉列表選項時，最好顯示每個具體的懸停選項。

6. 完成輸入

如果用戶已經完成了選擇，輸入欄應該彈回活躍狀態。并且顯示已選擇的內容。

7. 失敗反饋

自由文本輸入很容易出錯。不過下拉菜單的選項很容易預測，針對它的失敗反饋應該只有一種：沒有完成選項 - 當用戶點擊「提交」鍵時會收到失敗反饋。

占位符語言

按常理，我會把占位符的語言和自由文本區域的保持一致。不能確定？下面是幾個可以參考的選擇：

1. 把占位符留空

當其他文本區域沒有占位符時，一般把占位符留空是最容易的選擇。

2. 在占位符中使用通用提示

經典提示像「請選擇」等等。

3. 在占位符中使用推薦性措辭

在通用提示「請選擇」后面加上你想讓他們進行操作的推薦性措辭，這樣會讓你的下拉菜單看起來整體上更統一。

4. 占位符上搭配選項

當你在下拉菜單中放上一個預備選項時，應確保用戶已經留意到它了 - 不然他們會提交一些并不符合原意的選項。

那么到底該選哪一個呢？如果有懷疑，就保持整體上的統一。比如你的文本區域都有占位符，那就統一使用占位符。

何時使用下拉菜單

這里特別想讓我用下拉菜單選擇出生年份的所有網站問一句：你們的良心不會痛嗎？不需要提醒我那快速增長的歲數，尤其是看到不斷往下滑動的年月日列表。

1. 如果你的選項少于5個

如果你的選項少于5個，可以單選按鈕。這樣就不用多余地點擊列表上所有選項了。超過5項選擇則會很費空間。

提醒：有人說規則上應該是6個，而不是5個，我讓你自己決定吧。

2. 如果打字輸入比選擇更容易的話

如果你打字輸入花的時間比從下拉列表中選擇花的少的話，那結果還用問嗎？拿出生年月來說，直接打字輸入日期比使用三個下拉菜單來得容易多了。

有時程序員會不同意，這是因為編寫一個下拉菜單比自由文本區域來得容易。后者需要設置各種可輸入和不可輸入的規則。我也輸了很多場和他們的較量，不過我會繼續堅持到底的。

3. 如果你的兩個選項是「開」和「關」（又或者「是」和「否」）

只有兩個選項的下拉菜單其實很煩人,特別是只需要回答「是」和「否」的情況。這時候切換按鈕（toggle）可以非常漂亮地解決這些問題。

4. 如果選項是數字

如果你的選項是數字，那么你有幾種選擇。

首先，再一次，讓他們打字輸入。步驟條（steppers）也同樣有效，可是我只建議在預期步驟不會多于5步的情況下使用。不然，用戶會可憐巴巴地坐在那兒點到100。

第二種是使用滑塊（slider）選擇數值。滑塊在選擇大數值的數字或估測數值時相當有幫助。

5. 如果選項很多

如果在下拉菜單中有很多選項（其實你應該盡量避免），讓用戶’搜索‘他們的選項。最常見的情況是關于國家選項的下拉菜單, 他們涉及廣但也容易回答。之前也提過，這種設計和自動完成功能是完美搭配。

6. 那么什么情況下應該用下拉菜單呢？

個人來說，一個輸入欄如果達到如下兩個條件就可以考慮使用下拉菜單：

• 多于6個選項
• 當用戶不能馬上知曉選項答案的情況。比如，你的用戶上傳了一個視頻，主辦方需要知道附加到視頻的許可證類型。一般用戶可能并不清楚平臺上可用的所有選項，這時下拉菜單就變得很有必要了。

原生下拉菜單

我們在時間和預算緊張的時候，又或者我們設計的是最簡可行產品的時候，我們會試圖使用原生或默認的選擇。其實設計定制的輸入欄就像蛋糕上裝飾用的糖霜，我們有時候沒法選擇制作那份甜甜的糖衣點綴。那樣的情況，你需要清楚面對的是什么。

當需要衡量在不同設備上的可用性時，原生下拉菜單也會更保險一些。

我們大規模的可行性檢測和基準測試顯示：有82%的電子商務網站在他們的結賬流程上使用了定制設計的下拉菜單，這其中31%定制設計的下拉菜單有嚴重的可用性問題。（來自Christian Holst的敘述）

1. 默認設計

網上有一個關于原生下拉菜單的例子，你可以去這里看看。

△ 原生手機下拉菜單 https://html.com/attributes/option-selected/

△?原生PC端下拉菜單 https://html.com/attributes/option-selected/

就像你從這些例子中看到的，在不同的平臺或瀏覽器上他們都有些細微差別。他們并不好看，但他們非常實用。

2. 套用外殼

我曾經把這個稱為「半定制」，不過最近讀到的一篇文章稱這個模式為外殼 - 聽起來更加正式。于是從今以后我公開宣布稱它為外殼。

「但是是什么外殼」你會問。外殼就是一塊看起來像定制設計的組件，但當你點擊進去后發現它使用的是原生下拉菜單的式樣。為了縮減開發成本，又想設計和品牌看起來統一，這是最簡單的辦法。這種辦法也同時可以避免定制設計的區域所帶來的用戶體驗問題。

可用性檢查

• 下拉菜單（包括標簽）的點擊范圍是否超過44像素？（我們把標簽包含在內是因為當你點擊標簽時，下拉列表應該打開）。
• 所有的色彩是否符合AAA標準？
• 下拉菜單是否有強調狀態？
• 確保下拉菜單在列表項目上有效。
• 如果你使用的是定制下拉菜單，確保它能在瀏覽器視口過低的情況下能打開或關閉。

更多UI表單設計方法：

歡迎關注譯者的微信公眾號：「彩云譯設計」