正確使用下拉菜單設(shè)計(jì)是非常重要的。它可以有效幫助用戶縮小選擇范圍，轉(zhuǎn)換屏幕空間并防止錯(cuò)誤的數(shù)據(jù)輸入。但是，在某些情況下，下拉菜單的意義其實(shí)并不大，反而會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。

關(guān)鍵的是知道何時(shí)使用下拉菜單或其他接口元素。例如單選按鈕，打開的文本字段等，過度使用或?yàn)E用它們可能會(huì)造成可用性問題的出現(xiàn)。

在本文中，我將針對(duì)下拉菜單的性質(zhì)，并根據(jù)具體使用情況舉例來探討怎么樣正確使用下拉菜單來優(yōu)化設(shè)計(jì)。

避免列表過長

下拉菜單在界面上不會(huì)占用太多空間，能夠完美適配所有瀏覽器類型，并且用戶對(duì)它們也足夠了解，能夠很快就上手使用。

但當(dāng)選項(xiàng)超過 15 種時(shí)，用戶可能就會(huì)不知所措。

設(shè)想一下：當(dāng)用戶看到 20 多個(gè)未分類的選項(xiàng)時(shí)，會(huì)不會(huì)心生迷惑甚至望而生畏？就算用戶想要在眾多選項(xiàng)中好好找到自己想要的條目，還是會(huì)出現(xiàn)滾動(dòng)問題，用戶必須將鼠標(biāo)保持在下拉框中，否則，他們的頁面就會(huì)被下拉滾走。

長下拉列表最經(jīng)典的示例是國家選擇器，一般有 100 多個(gè)選項(xiàng)。通常情況下是按字母順序?qū)ζ溥M(jìn)行排序。一種優(yōu)化方式是：將常用/流行的國家/地區(qū)放在頂部。

另外一種更優(yōu)選擇是：使用具有自動(dòng)完成功能的文本字段，因?yàn)橛脩粢呀?jīng)知道他們想要找的是什么了。

△ Custom Search Input by Jonathan Reinink

避免選項(xiàng)過少

如果選項(xiàng)太少，那使用下拉菜單就是一個(gè)糟糕的選擇。因?yàn)樗ㄟ^隱藏可能的選項(xiàng)，給用戶的視覺瀏覽動(dòng)線造成了不必要的阻礙。

解決辦法是使用單選按鈕，該按鈕可以讓用戶對(duì)可用選項(xiàng)一目了然。

將不可用選項(xiàng)置灰

當(dāng)某個(gè)選項(xiàng)被禁用或不可用時(shí)，應(yīng)將其顯示為灰色，而不是將其刪除。

如果刪除了禁用項(xiàng)，界面將失去空間一致性，會(huì)增加用戶使用難度——他們可能因?yàn)檎也坏奖粍h除的禁用項(xiàng)而感到疑惑。所以，與其刪除已禁用的選項(xiàng)，不如將它們變灰以指示其「已禁用」或「不可用」?fàn)顟B(tài)。也可以考慮顯示提示，以指示該選項(xiàng)被禁用的原因以及如何讓其成為可用狀態(tài)。

能輸入不下拉

在某些情況下，輸入實(shí)際上可能比使用下拉菜單更快。

一種典型的情況是輸入信用卡有效期。鍵入 mm/yy 絕對(duì)快得多，而不是從兩個(gè)下拉菜單（月和年）中滾動(dòng)。

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

避免過度使用

當(dāng)某些數(shù)據(jù)或信息可以自動(dòng)導(dǎo)出時(shí)，無需不斷詢問用戶的輸入。

這樣的示例之一就是在結(jié)帳過程中使用的「卡類型」字段。根據(jù)信用卡號(hào)的前幾個(gè)數(shù)字，可以確定卡的類型，因此要求用戶自己選擇卡的類型就會(huì)增加額外的麻煩。

減少操作

根據(jù)所需信息自定義下拉菜單的菜單數(shù)量，以減少用戶操作。

一個(gè)經(jīng)典的例子是「日期選擇」字段，如果使用普通的列表菜單，則需要 3 個(gè)下拉菜單（月，日和年），這對(duì)于用戶來說很煩人。

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

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

用戶根據(jù)他們的標(biāo)簽選擇菜單選項(xiàng)，因此提供準(zhǔn)確的信息非常重要。

通常，最好編寫簡(jiǎn)潔的標(biāo)簽，以清楚表明選擇的目的。

以下是寫好標(biāo)簽的一些準(zhǔn)則：

1. 對(duì)于動(dòng)作菜單項(xiàng)，請(qǐng)使用動(dòng)詞來描述將要發(fā)生的動(dòng)作。
2. 對(duì)于鏈接，請(qǐng)使用名詞來標(biāo)識(shí)用戶將定向到的頁面。
3. 排除菜單項(xiàng)中多余的描述性助詞；例如「刪除頁面」，而不是「刪除這個(gè)頁面」。
4. 將菜單項(xiàng)保持在一行文本中。

通過按邏輯順序?qū)α斜磉M(jìn)行排序來組織菜單項(xiàng)也很重要。

通過用戶研究，將選擇最多的選項(xiàng)排列在頂部，然后隨時(shí)間進(jìn)行測(cè)試和完善以重新評(píng)估結(jié)果。

更多菜單設(shè)計(jì)介紹：

歡迎關(guān)注譯者的微信公眾號(hào)：「海外設(shè)計(jì)參考」