導(dǎo)讀：下拉菜單是UI設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)中的基礎(chǔ)控件，也是平時(shí)大家做設(shè)計(jì)時(shí)會(huì)用到的常用組件，所以有必要對(duì)它進(jìn)行全面深入的了解。本文非常全面的介紹了下拉菜單的設(shè)計(jì)法則，相信讀完會(huì)對(duì)下拉菜單設(shè)計(jì)有一個(gè)全新的認(rèn)識(shí)，一起來學(xué)習(xí)吧。

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

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

文章將會(huì)聊到如下內(nèi)容：

1. 設(shè)計(jì)全面圖解
2. 下拉菜單的類型及變化
3. 下拉菜單風(fēng)格
4. 下拉菜單狀態(tài)
5. 提示語句
6. 何時(shí)使用下拉菜單
7. 原生下拉菜單
8. 可用性檢查
9. 結(jié)語

01 設(shè)計(jì)全面圖解

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

下拉菜單設(shè)計(jì)圖解

02 下拉菜單的類型及變化

人們對(duì)標(biāo)準(zhǔn)下拉菜單已經(jīng)有了普遍的了解，但你仍需要在工作中留意幾個(gè)特別的類型和變化。這里包含的下拉菜單是針對(duì)表單的情況，并不是導(dǎo)航欄里使用的下拉菜單。

標(biāo)準(zhǔn)下拉菜單

標(biāo)準(zhǔn)下拉菜單是針對(duì)我們所理解的“下拉”這個(gè)動(dòng)詞。在激活狀態(tài)，當(dāng)你點(diǎn)擊貌似文本輸入欄的地方時(shí)，它會(huì)打開一個(gè)菜單。

標(biāo)準(zhǔn)下拉菜單

下拉菜單配自動(dòng)提示

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

下拉菜單配自動(dòng)提示

下拉菜單配自動(dòng)完成和自動(dòng)提示功能

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

下拉菜單配自動(dòng)完成和自動(dòng)提示功能

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

下拉菜單配多選

大多數(shù)情況下，下拉菜單是單選按鈕的延伸。這里的下拉菜單配多選則是復(fù)選框的延伸：用戶可以在同一個(gè)輸入?yún)^(qū)域選擇多個(gè)列表選項(xiàng)。（彩云注：前段時(shí)間正好有朋友問我，在設(shè)計(jì)B端后臺(tái)時(shí)，是否可以這樣設(shè)計(jì)，其實(shí)是可以的。）

下拉菜單配多選

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

下拉菜單配分組

當(dāng)長(zhǎng)型下拉菜單的設(shè)計(jì)不是特別理想時(shí)，你可以把列表分組，這樣搜索起來更加簡(jiǎn)單。

下拉菜單配分門別類

固定滑動(dòng)菜單

雖然不是嚴(yán)格意義上的下拉菜單，但是也可以考慮把多選菜單納入選擇范圍中。和下拉菜單不同的是，固定滑動(dòng)菜單展開后會(huì)有一個(gè)可以滑動(dòng)的小窗口。

固定滑動(dòng)菜單

它們?cè)陔娔X頁面上尚可使用，但在手機(jī)屏幕上就有點(diǎn)別扭了。到時(shí)候會(huì)成為一個(gè)“在滑動(dòng)欄里的滑動(dòng)菜單”

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

日期選擇器

日期選擇器的類型最好只用在安排會(huì)議和活動(dòng)日程上。當(dāng)人們需要安排吃休息餐的時(shí)候，能一眼看出星期幾的日歷是最好不過的了?？赏瑯拥脑O(shè)計(jì)被用在填寫護(hù)照截止日期時(shí)就會(huì)相當(dāng)煩人。我比較偏向于那種既能輸入數(shù)字又能選擇日期的設(shè)計(jì) – 最好確認(rèn)一下輸入欄里的年月日之間加上了斜線，不然會(huì)讓人很糾結(jié)。

日期選擇

我的“拉仇恨秘訣”：

讓用戶填寫信用卡或護(hù)照截止日期時(shí)用下拉菜單，他們會(huì)“特別”關(guān)注那天是星期幾。詢問用戶生日日期時(shí)使用下拉菜單。為了讓你被“恨得”更深一點(diǎn)，確定他們只能通過調(diào)整月份來更換每年的時(shí)間?！昂拗牍恰奔?jí)：這種設(shè)計(jì)在填寫?zhàn)B老院申請(qǐng)時(shí)最有效。（譯者注：在這一段中，希望大家能體會(huì)到作者對(duì)那些設(shè)計(jì)的深深諷刺）

03 下拉菜單風(fēng)格

不同于下拉菜單的類型（ types），下拉菜單的風(fēng)格（styles）涉及的是它實(shí)際上長(zhǎng)什么樣而不是它如何工作的。我把幾個(gè)常見的風(fēng)格列舉如下。

標(biāo)準(zhǔn)風(fēng)格（附屬）

之所以稱之為“標(biāo)準(zhǔn)”是因?yàn)檫@是最長(zhǎng)見的。

標(biāo)準(zhǔn)風(fēng)格（附屬）

標(biāo)準(zhǔn)風(fēng)格（非附屬）

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

標(biāo)準(zhǔn)風(fēng)格（非附屬）

圓形邊框

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

圓形邊框

搭配圖標(biāo)

在輸入欄的開頭放一個(gè)圖標(biāo)會(huì)更有“設(shè)計(jì)感”。當(dāng)有人抱怨表格看起來很單調(diào)的時(shí)候（好吧，老大。。。這個(gè)表格有20個(gè)輸入欄，你還能讓人家怎么樣？）我就加了個(gè)圖標(biāo)。老大然后，就沒有然后了。

搭配圖標(biāo)

偷懶小竅門：如果有人抱怨長(zhǎng)型表格看起來很單調(diào)，那你就加個(gè)圖標(biāo)。這個(gè)久經(jīng)考驗(yàn)的真實(shí)辦法不用費(fèi)吹灰之力，而你的上司或甲方爸爸還一定會(huì)覺得自己撿到寶了。

搭配圖片

我通常會(huì)避免在下拉菜單里加圖片 – 僅僅是因?yàn)楹笃诟潞途S護(hù)會(huì)非常痛苦。尤其是如果列表經(jīng)常變換的話，后果苦不堪言。不過當(dāng)你需要展示各個(gè)列表的不同之處時(shí)，這個(gè)風(fēng)格會(huì)很實(shí)用。

搭配圖片

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

Material Design的填充下拉菜單

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

“單線區(qū)（ ‘line only’ field）”已不再在谷歌的材料設(shè)計(jì)語言里使用了,但你仍能看見它潛伏在網(wǎng)絡(luò)上。。

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

“單線區(qū)“被填充下拉菜單（filled dropdown）所替代，據(jù)說是因?yàn)橛脩魷y(cè)試反映更好些。雖然沒之前的那個(gè)好看，但確實(shí)使用起來更方便 – 這才是最關(guān)鍵，各位！

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

Material Design的描邊框下拉菜單

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

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

Material design的描邊框下拉菜單

04 下拉菜單狀態(tài)

不管用戶用什么樣的輸入方式操作，輸入欄應(yīng)給予及時(shí)的反饋。這里我們來看看不同反饋狀態(tài)下的下拉菜單。

默認(rèn)狀態(tài)

默認(rèn)狀態(tài)是用戶在操作前下拉菜單的樣子。

禁用狀態(tài)

禁用狀態(tài)下的區(qū)域?qū)τ脩艨梢姡荒苁褂谩?/p>

懸停狀態(tài)

如果用戶的鼠標(biāo)在一個(gè)下拉菜單上懸停，這個(gè)下拉菜單應(yīng)該暗示它的可點(diǎn)擊性。

敲黑板：手觸屏幕上不能有懸停狀態(tài)，如果你設(shè)計(jì)的是手機(jī)或平板軟件就可以省省了。

強(qiáng)調(diào)狀態(tài)

強(qiáng)調(diào)狀態(tài)是指當(dāng)用戶在使用“制表鍵”（這里指用戶使用鍵盤“tab/制表鍵”操縱頁面然后按“enter/回車鍵”輸入信息的情況），指定了下拉菜單之后，但在選中特定列表選項(xiàng)之前。我們一般會(huì)看到選中的區(qū)域帶有“藍(lán)色光環(huán)”。

不過有些網(wǎng)站把強(qiáng)調(diào)狀態(tài)和焦點(diǎn)狀態(tài)合并在一起，即使用戶沒有按回車鍵，下拉列表也會(huì)直接打開。我有點(diǎn)糾結(jié)哪個(gè)方式更好。理論上合并狀態(tài)能夠理解，可是在我沒有明確指示的情況下，下拉列表就自動(dòng)打開的這點(diǎn)讓我很困惑。不知各位怎么看？

焦點(diǎn)狀態(tài)

焦點(diǎn)狀態(tài)指的是項(xiàng)目的互動(dòng)狀態(tài)。當(dāng)你點(diǎn)擊了下拉菜單的話，列表就會(huì)隨之打來并展示選項(xiàng)。

我看到過的很多下拉菜單都會(huì)把箭頭指向同一方向，無論是活躍狀態(tài)還是焦點(diǎn)狀態(tài)，我比較傾向于調(diào)換箭頭的方向。我把它們看成是折疊面板（accordion）。你還可以用動(dòng)圖展示箭頭轉(zhuǎn)換的方向。

當(dāng)用戶的鼠標(biāo)在打開的下拉列表選項(xiàng)時(shí)，最好顯示每個(gè)具體的懸停選項(xiàng)。

完成輸入

如果用戶已經(jīng)完成了選擇，輸入欄應(yīng)該彈回活躍狀態(tài)。并且顯示已選擇的內(nèi)容。

失敗反饋

自由文本輸入很容易出錯(cuò)。不過下拉菜單的選項(xiàng)很容易預(yù)測(cè)，針對(duì)它的失敗反饋應(yīng)該只有一種：沒有完成選項(xiàng) – 當(dāng)用戶點(diǎn)擊“提交”鍵時(shí)會(huì)收到失敗反饋。

05 占位符語言

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

把占位符留空

當(dāng)其他文本區(qū)域沒有占位符時(shí)，一般把占位符留空是最容易的選擇。

在占位符中使用通用提示

經(jīng)典提示像“請(qǐng)選擇”等等。

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

在通用提示“請(qǐng)選擇”后面加上你想讓他們進(jìn)行操作的推薦性措辭，這樣會(huì)讓你的下拉菜單看起來整體上更統(tǒng)一。

占位符上搭配選項(xiàng)

當(dāng)你在下拉菜單中放上一個(gè)預(yù)備選項(xiàng)時(shí)，應(yīng)確保用戶已經(jīng)留意到它了 – 不然他們會(huì)提交一些并不符合原意的選項(xiàng)。

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

06 何時(shí)使用下拉菜單

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

如果你的選項(xiàng)少于5個(gè)

如果你的選項(xiàng)少于5個(gè)，可以單選按鈕。這樣就不用多余地點(diǎn)擊列表上所有選項(xiàng)了。超過5項(xiàng)選擇則會(huì)很費(fèi)空間。

提醒：有人說規(guī)則上應(yīng)該是6個(gè)，而不是5個(gè)，我讓你自己決定吧。

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

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

有時(shí)程序員會(huì)不同意，這是因?yàn)榫帉懸粋€(gè)下拉菜單比自由文本區(qū)域來得容易。后者需要設(shè)置各種可輸入和不可輸入的規(guī)則。我也輸了很多場(chǎng)和他們的較量，不過我會(huì)繼續(xù)堅(jiān)持到底的。

如果你的兩個(gè)選項(xiàng)是“開”和“關(guān)”（又或者“是”和“否”）

只有兩個(gè)選項(xiàng)的下拉菜單其實(shí)很煩人,特別是只需要回答“是”和“否”的情況。這時(shí)候切換按鈕（toggle）可以非常漂亮地解決這些問題。

如果選項(xiàng)是數(shù)字

如果你的選項(xiàng)是數(shù)字，那么你有幾種選擇。

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

第二種是使用滑塊（slider）選擇數(shù)值。滑塊在選擇大數(shù)值的數(shù)字或估測(cè)數(shù)值時(shí)相當(dāng)有幫助。

如果選項(xiàng)很多

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

那么什么情況下應(yīng)該用下拉菜單呢？

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

1. 多于6個(gè)選項(xiàng)
2. 當(dāng)用戶不能馬上知曉選項(xiàng)答案的情況。比如，你的用戶上傳了一個(gè)視頻，主辦方需要知道附加到視頻的許可證類型。一般用戶可能并不清楚平臺(tái)上可用的所有選項(xiàng)，這時(shí)下拉菜單就變得很有必要了。

07 原生下拉菜單

我們?cè)跁r(shí)間和預(yù)算緊張的時(shí)候，又或者我們?cè)O(shè)計(jì)的是最簡(jiǎn)可行產(chǎn)品的時(shí)候，我們會(huì)試圖使用原生或默認(rèn)的選擇。其實(shí)設(shè)計(jì)定制的輸入欄就像蛋糕上裝飾用的糖霜，我們有時(shí)候沒法選擇制作那份甜甜的糖衣點(diǎn)綴。那樣的情況，你需要清楚面對(duì)的是什么。

當(dāng)需要衡量在不同設(shè)備上的可用性時(shí)，原生下拉菜單也會(huì)更保險(xiǎn)一些。

我們大規(guī)模的可行性檢測(cè)和基準(zhǔn)測(cè)試顯示：有82%的電子商務(wù)網(wǎng)站在他們的結(jié)賬流程上使用了定制設(shè)計(jì)的下拉菜單，這其中31%定制設(shè)計(jì)的下拉菜單有嚴(yán)重的可用性問題。（來自Christian Holst的敘述）

默認(rèn)設(shè)計(jì)

網(wǎng)上有一個(gè)關(guān)于原生下拉菜單的例子，你可以去這里看看。

原生手機(jī)下拉菜單 https://html.com/attributes/option-selected/

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

就像你從這些例子中看到的，在不同的平臺(tái)或?yàn)g覽器上他們都有些細(xì)微差別。他們并不好看，但他們非常實(shí)用。

套用外殼

我曾經(jīng)把這個(gè)稱為“半定制”，不過最近讀到的一篇文章稱這個(gè)模式為外殼 – 聽起來更加正式。于是從今以后我公開宣布稱它為外殼。

‘但是是什么外殼’ – 你會(huì)問。外殼就是一塊看起來像定制設(shè)計(jì)的組件，但當(dāng)你點(diǎn)擊進(jìn)去后發(fā)現(xiàn)它使用的是原生下拉菜單的式樣。為了縮減開發(fā)成本，又想設(shè)計(jì)和品牌看起來統(tǒng)一，這是最簡(jiǎn)單的辦法。這種辦法也同時(shí)可以避免定制設(shè)計(jì)的區(qū)域所帶來的用戶體驗(yàn)問題。

08 可用性檢查

1）下拉菜單（包括標(biāo)簽）的點(diǎn)擊范圍是否超過44像素？（我們把標(biāo)簽包含在內(nèi)是因?yàn)楫?dāng)你點(diǎn)擊標(biāo)簽時(shí)，下拉列表應(yīng)該打開）。

2）所有的色彩是否符合AAA標(biāo)準(zhǔn)？

3）下拉菜單是否有強(qiáng)調(diào)狀態(tài)？

4）確保下拉菜單在列表項(xiàng)目上有效。

5）如果你使用的是定制下拉菜單，確保它能在瀏覽器視口過低的情況下能打開或關(guān)閉。

原文：https://uxdesign.cc/ui-cheat-sheet-dropdown-field-a30025c0f432

作者：Tess Gadd

譯者：吳曲；公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議