本文將依據(jù)下拉菜單的屬性，通過(guò)舉例來(lái)討論下拉菜單的使用場(chǎng)景，希望在設(shè)計(jì)上對(duì)大家有所幫助。

正確地設(shè)計(jì)下拉菜單，可以幫助用戶縮小選擇范圍，減少屏幕其他元素的干擾，以及防止用戶輸入錯(cuò)誤的信息。但是，在某些情況下，下拉菜單的錯(cuò)誤使用將給用戶體驗(yàn)帶來(lái)嚴(yán)重的負(fù)面影響。在什么情況下使用下拉菜單至關(guān)重要。

本文將依據(jù)下拉菜單的屬性，通過(guò)舉例來(lái)討論下拉菜單的使用場(chǎng)景，希望在設(shè)計(jì)上對(duì)大家有所幫助。

01 避免過(guò)長(zhǎng)的下拉列表

在表單使用下拉菜單看起來(lái)很簡(jiǎn)單，它們不會(huì)占用界面空間，適配所有瀏覽器，用戶對(duì)于此類組件足夠熟悉。

但是，當(dāng)下拉菜單里有超過(guò)15個(gè)選項(xiàng)時(shí)，用戶會(huì)變得不知所措，選擇起來(lái)非常費(fèi)勁——用戶需要從20多個(gè)未分類的選項(xiàng)中找到想要的內(nèi)容，想想都令人頭大。

此外還存在滾動(dòng)的問(wèn)題，用戶必須把光標(biāo)保持在下拉列表中，不然很容易滾動(dòng)整個(gè)頁(yè)面，造成誤操作。

國(guó)家選擇器應(yīng)該是最經(jīng)典的長(zhǎng)列表下拉菜單了，常常有超過(guò)100多個(gè)選項(xiàng)。雖然列表中的選項(xiàng)一般情況下會(huì)按字母順序排列，但是將熱門國(guó)家/地區(qū)放在列表頂部的做法依舊不能滿足用戶需求。更好的做法是，增加自動(dòng)填充功能或搜索功能，因?yàn)橛脩糁浪鼈兿胍x擇的內(nèi)容是什么。（比如系統(tǒng)可以根據(jù)地理位置或場(chǎng)景自動(dòng)填充國(guó)家，或用戶自主搜索國(guó)家）

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

而選項(xiàng)過(guò)少，使用下拉菜單組件也將是一個(gè)糟糕的決定。隱藏了本可以直接展示的信息內(nèi)容，反而給用戶的流程造成阻礙，降低了用戶完成任務(wù)的效率。比較好的方式是使用單選組件，可以讓用戶快速瀏覽選項(xiàng)內(nèi)容，提升用戶的操作效率。

03 置灰不可選項(xiàng)，而非刪除

當(dāng)某個(gè)選項(xiàng)被禁用或不可用時(shí)，應(yīng)將其顯示為灰色，而不是直接刪除。因?yàn)檫@些不可用選項(xiàng)被禁用的情況有多種（如可能是在當(dāng)前場(chǎng)景下是不可用的，在其他場(chǎng)景是可用的）?？梢钥紤]使用給不可用選項(xiàng)增加提示，說(shuō)明其被禁用原因以及如何使其為可用狀態(tài)。

04 鍵盤輸入可能更快

在某些情況下，鍵入可能比下拉選擇速度更快。典型的案例就是信用卡日期。鍵入mm/yy絕對(duì)快得多，而不是從兩個(gè)下拉菜單（月和年）中滾動(dòng)。

盡管使用自由格式的輸入字段需要某種形式的數(shù)據(jù)驗(yàn)證，但從可用性的角度來(lái)看，它仍然是最好的選擇——因?yàn)樗梢詼p少用戶的負(fù)擔(dān)。

05 避免過(guò)度使用

當(dāng)某些數(shù)據(jù)或信息可以自動(dòng)填入時(shí)，無(wú)需要求用戶進(jìn)行手動(dòng)輸入。這樣的示例之一就是在結(jié)帳過(guò)程中使用的“卡類型”功能。根據(jù)信用卡號(hào)的前幾個(gè)數(shù)字，可以確定卡的類型，此時(shí)要求用戶自己選擇卡的類型會(huì)額外增加用戶的操作。

06 減少操作

可以根據(jù)所需信息自定義下拉菜單的交互方式，以減少操作步驟。一個(gè)經(jīng)典的例子是“日期選擇”功能，如果使用普通的列表菜單，則需要3個(gè)下拉菜單（月，日和年），這對(duì)于用戶來(lái)說(shuō)很繁瑣。

更好的選擇是自定義菜單組件，以允許用戶僅使用一個(gè)下拉菜單選擇輸入。

07 使用簡(jiǎn)潔明了的標(biāo)簽

用戶根據(jù)菜單標(biāo)簽內(nèi)容選擇選項(xiàng)，因此準(zhǔn)確提供信息非常重要。通常，最好使用簡(jiǎn)潔的標(biāo)簽，以清楚表明選擇的目的。以下是一些標(biāo)簽的準(zhǔn)則：

1. 對(duì)于動(dòng)作菜單項(xiàng)，請(qǐng)使用動(dòng)詞來(lái)描述將要發(fā)生的動(dòng)作
2. 對(duì)于鏈接，請(qǐng)使用名詞來(lái)標(biāo)識(shí)用戶跳轉(zhuǎn)到的頁(yè)面
3. 排除菜單項(xiàng)中的冠詞；使用“刪除頁(yè)面”，而不是“刪除這個(gè)頁(yè)面”
4. 將菜單項(xiàng)保持在一行文本中

通過(guò)按邏輯順序?qū)α斜磉M(jìn)行排序來(lái)組織菜單項(xiàng)也很重要-如果可以，通常將最常選擇的選項(xiàng)放在下拉列表頂部。然后通過(guò)用戶調(diào)研，不斷進(jìn)行測(cè)試和完善，以重新評(píng)估結(jié)果。

原文：7 tips for dropdown menu design

作者：Jeremiah Lam

編譯作者：微交互Lab；公號(hào)“微交互Lab”，定期分享設(shè)計(jì)好文

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

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。