編者按：這篇文章來(lái)自資深設(shè)計(jì)師 Jeremiah Lam，他所撰寫的這篇文章將UI中的下拉菜單的一些常見的注意事項(xiàng)都梳理總結(jié)了出來(lái)，做 UI 設(shè)計(jì)的同學(xué)可以收藏一下 ~

當(dāng)用戶需要在UI界面中選擇不同功能、選項(xiàng)、條目的時(shí)候，需要依賴諸如復(fù)選框、開關(guān)、按鈕、下拉菜單等 UI 控件。這些 UI 控件有著不同的優(yōu)缺點(diǎn)，需要根據(jù)使用場(chǎng)景和用戶需求來(lái)靈活使用，同時(shí)，這些控件的設(shè)計(jì)也有很多注意事項(xiàng)。

[[334280]]

今天這篇文章著重聊聊下拉菜單的設(shè)計(jì)注意事項(xiàng)，文章會(huì)加入大量的用例和最佳實(shí)踐來(lái)為你進(jìn)行說(shuō)明。而在設(shè)計(jì)的規(guī)則和技巧上，有很多上來(lái)自于體驗(yàn)設(shè)計(jì)領(lǐng)域內(nèi)最著名的 NN Group 和 Baymard Institute 的文章。

下拉菜單的基本剖析

標(biāo)簽：告知用戶所要選擇的內(nèi)容

• 字段圖標(biāo)(可選)：用來(lái)說(shuō)明相應(yīng)的字段特征的圖標(biāo)
• 搜索欄目(可選)：用來(lái)幫助用戶輕松找到所需選項(xiàng)，前提條件上下拉菜單中字段超過(guò)20個(gè)
• 復(fù)選框(可選)：讓用戶可用同時(shí)選中多個(gè)選項(xiàng)

下拉菜單的類型

根據(jù)所需輸入的內(nèi)容的性質(zhì)，下拉菜單的外觀可能會(huì)有所變動(dòng)，方便處理不同類型的信息。設(shè)計(jì)下拉菜單的時(shí)候，需要保持足夠的靈活性，提高可用性，兼顧不同的輸入類型，這一點(diǎn)很重要。

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

基于不同的交互狀態(tài)，下拉菜單的 UI 界面有多個(gè)不同的狀態(tài)。每個(gè)狀態(tài)在視覺(jué)上都比較相似，但是在設(shè)計(jì)的時(shí)候，要讓用戶能夠清晰地區(qū)分開來(lái)。下拉菜單通常有 默認(rèn)、激活、懸停、禁用、聚焦和出錯(cuò)這幾種狀態(tài)。

下面是設(shè)計(jì)下拉菜單的時(shí)候，一些重要的設(shè)計(jì)準(zhǔn)則和最佳實(shí)踐。

1、避免下拉菜單有太多選項(xiàng)

下拉菜單選項(xiàng)多，是下拉菜單的一大特點(diǎn)，但是如果選項(xiàng)太多，可能會(huì)對(duì)體驗(yàn)產(chǎn)生負(fù)面的影響，比如選項(xiàng)超過(guò)15個(gè)的時(shí)候，用戶極有可能會(huì)覺(jué)得不知所措。

此外，選項(xiàng)過(guò)多還會(huì)出現(xiàn)滾動(dòng)瀏覽的問(wèn)題。用戶只有將光標(biāo)置于下拉框當(dāng)中才能正常瀏覽，而如果不小心光標(biāo)挪到下拉框之外，則可能讓整個(gè)頁(yè)面滾動(dòng)，這是一件非常令人討厭的事情。

但是避免不了要怎么辦呢?超長(zhǎng)的下拉框是最常見的一種情況，當(dāng)你需要填寫/選擇自己所在的國(guó)家和地區(qū)的時(shí)候，超長(zhǎng)的列表簡(jiǎn)直讓人崩潰。

這個(gè)時(shí)候有2種解決方案：

• 使用自動(dòng)填寫來(lái)幫助用戶補(bǔ)完信息
• 將搜索功能集成在輸入框當(dāng)中

2、選項(xiàng)太少時(shí)就別采用下拉菜單

如果選項(xiàng)太少，但是依然使用下拉框就有點(diǎn)浪費(fèi)了。你可以使用普通的按鈕或者選擇器控件來(lái)搞定這個(gè)功能，這可能比下拉菜單來(lái)的更加直觀和易用，因?yàn)橄啾戎拢吕蜻€會(huì)隱藏信息。

所以，沒(méi)有太多選項(xiàng)的時(shí)候，就盡量不要使用下拉菜單。

3、讓不可用選項(xiàng)以灰色顯示

首先要說(shuō)的是，某個(gè)選項(xiàng)存在但是不可選(被禁用)和不提供這一選項(xiàng)，是兩個(gè)截然不同的情況。如果直接不顯示，就意味著邏輯和界面一致性失衡了。所以，最好讓不可用的、被禁用的選項(xiàng)保留，但是以灰色顯示，且不可選。

4、按照邏輯來(lái)排列選項(xiàng)

列舉出的選項(xiàng)應(yīng)該符合一定的規(guī)律，方便用戶定位和篩選。最常見的情況，是按照字母順序或者數(shù)字順序來(lái)排列，這樣用戶有清晰的預(yù)期和搜索定位的依據(jù)。

5、如果輸入更快就不要用下拉菜單

在有的情形下，輸入可能是比在下拉菜單中選擇來(lái)的更快的。一種比較典型的情況，是輸入信用卡的有效期，輸入「月份/年」這樣的信息，比在兩個(gè)下拉菜單中挨個(gè)選擇，來(lái)的快。

盡管用戶輸入內(nèi)容需要程序進(jìn)行驗(yàn)證和匹配，但是從可用性的角度上來(lái)說(shuō)，直接輸入依然是更好的選擇，因?yàn)樗鼫p少了操作和認(rèn)知負(fù)擔(dān)。

6、避免濫用功能和交互

當(dāng)某些數(shù)據(jù)和信息是可以自動(dòng)匹配的時(shí)候，就沒(méi)有必要反復(fù)找用戶去確認(rèn)了。這種情況最典型的，就是系統(tǒng)可以根據(jù)信用卡號(hào)來(lái)匹配相應(yīng)的卡的類型，這就不需要用戶使用下拉菜單去挨個(gè)選擇了。

7、盡可能減少操作數(shù)

你可以通過(guò)自定義下拉框的設(shè)計(jì)，來(lái)減少操作的數(shù)量。一個(gè)經(jīng)典的案例，是選擇日期的下拉菜單的設(shè)計(jì)。如果是普通的下拉菜單，你可能需要三個(gè)，但是使用自定義的下拉菜單，就會(huì)方便很多。

8、使用盡可能簡(jiǎn)明的標(biāo)簽文本

用戶主要是通過(guò)下拉菜單中的標(biāo)簽文本信息來(lái)進(jìn)行篩選的，因此你需要在有限的空間中，讓信息盡可能清晰，用識(shí)別率更高的大小寫結(jié)合的拼寫方式，表達(dá)方式上清晰，直指目標(biāo)。下面是3條撰寫標(biāo)簽文本的準(zhǔn)則：

• 盡可能用動(dòng)詞來(lái)描述指向性明確的操作
• 對(duì)于鏈接，請(qǐng)使用名詞來(lái)幫助用戶定位到頁(yè)面
• 在一行內(nèi)寫完標(biāo)簽內(nèi)容，不要啰嗦

結(jié)合一定的邏輯來(lái)進(jìn)行排序，然后將最常用的、最重要的選項(xiàng)放在頂部。當(dāng)然，更具的排列方式，可以結(jié)合一些用戶調(diào)研來(lái)進(jìn)行細(xì)化。

結(jié)語(yǔ)

正確的下拉菜單，用戶體驗(yàn)是非常棒的，它們可以幫助用戶縮小篩選信息的范疇，在有限的屏幕范疇內(nèi)，最大程度利用空間，提高用戶的選擇效率。什么時(shí)候用下拉菜單，怎么用下拉菜單，最好都弄清楚，這樣才能最大程度地發(fā)揮設(shè)計(jì)的價(jià)值。