雷鋒網(wǎng)按：本文由掘金翻譯計(jì)劃譯者邵輝Vista譯自《Why drop-down lists are bad for the user experience》校對(duì)者：L9m, circlelove。本文首發(fā)稀土掘金，未經(jīng)允許，禁止轉(zhuǎn)載。

一個(gè)完全不合理的行業(yè)標(biāo)準(zhǔn)

隨著在用戶界面和可用性方面的研究，尤其在用戶輸入表單上，我越來(lái)越意識(shí)到一個(gè)事實(shí)那就是下拉列表的用戶體驗(yàn)幾乎總是不好的。

下拉列表經(jīng)常用于有多個(gè)選項(xiàng)，只允許用戶選擇一個(gè)的時(shí)候。它和單選按鈕的效用相同。使用它而不使用單選按鈕的理由，是因?yàn)樗加酶俚目臻g，但是我已經(jīng)陳述過(guò)了我們不再需要節(jié)省網(wǎng)頁(yè)上的垂直方向上的空間。

下拉列表有一個(gè)很大的問(wèn)題，那就是用戶不能直接看到所有選項(xiàng)，而是需要點(diǎn)擊查看所有的選項(xiàng)，然后瀏覽一遍，然后才能做出一個(gè)選擇。當(dāng)用戶在大多數(shù)輸入表單上使用鍵盤(pán)時(shí)，下拉列表的體驗(yàn)是特別不好的。

下面是一些替代下拉列表的可選方案

1、用多個(gè)單選按鈕替換下拉列表

這些選項(xiàng)應(yīng)該直接出現(xiàn)在視野中，而不是在用戶點(diǎn)擊后才顯示。這樣用戶就能直接看到有哪些選項(xiàng)，然后做出知情的決策。一定要確認(rèn)單選按鈕做得簡(jiǎn)單明了，并且只能選擇一個(gè)。

2、兩個(gè)選項(xiàng)應(yīng)作為一個(gè)開(kāi)關(guān)按鈕

如果只有兩個(gè)選項(xiàng)，應(yīng)該把下拉菜單替換成一個(gè)開(kāi)關(guān)，并且最普遍的那個(gè)選項(xiàng)應(yīng)該被預(yù)選上，一個(gè)很好的例子就是在一個(gè)注冊(cè)表單里選擇性別，如果用一個(gè)下拉菜單，每個(gè)用戶都需要做兩次點(diǎn)擊——選擇這個(gè)菜單然后選擇這個(gè)選項(xiàng)，用開(kāi)關(guān)的話，女性（全部人口的 51%）被預(yù)選上，那么只有 9% 的人需要做1次點(diǎn)擊，這是一個(gè)巨大的差別，這里就有一個(gè)很糟糕的例子，來(lái)自 Yahoo.com：

3、許多選項(xiàng)應(yīng)作為一個(gè)自動(dòng)完成控件

一個(gè)被廣泛接受的觀點(diǎn)就是下拉列表里最多的選項(xiàng)數(shù)應(yīng)該在15個(gè)左右（有人說(shuō)是12，也有說(shuō)是16），如果超過(guò)了一個(gè)范圍，很容易產(chǎn)生迷惑性，對(duì)用戶來(lái)說(shuō)是一個(gè)很艱難的抉擇，瀏覽一個(gè)那么長(zhǎng)的選項(xiàng)列表，那么多的選項(xiàng)放在用戶手里。我們應(yīng)該努力盡可能地去除很多選項(xiàng)，因?yàn)槲覀円呀?jīng)在后臺(tái)做了很多工作，這樣用戶要想的越少，越好。

一個(gè)很好的例子就是國(guó)家選擇器，到現(xiàn)在為止，當(dāng)你選擇你的國(guó)家時(shí)，使用下拉列表仍是一個(gè)絕對(duì)的標(biāo)準(zhǔn)。ludacris，Smashing Mag一年前就這個(gè)問(wèn)題寫(xiě)過(guò)一篇很好的文章，叫做《重新設(shè)計(jì)國(guó)家選擇器》，當(dāng)有很多可能的選項(xiàng)時(shí)，使用自動(dòng)完成控件，讓系統(tǒng)去完成這樣的工作，而不是用戶。

所以，有沒(méi)有哪些位置用一個(gè)下拉列表才是最佳的選擇呢？是的，當(dāng)然有，在任意一種你有多個(gè)選項(xiàng)的情況下，你都可以在你的表單里使用多個(gè)單選按鈕，用戶根本就不知道他們當(dāng)前選的是哪一個(gè)的，但是這種情況發(fā)生得很少，如果這種事情真的發(fā)生了，那么重新思考一下，利用多樣的控件來(lái)讓用戶使用起來(lái)更簡(jiǎn)單才是明智的，作為一個(gè)很好的表單應(yīng)該怎么設(shè)計(jì)的例子，瀏覽一下Typeform，他們做的每一件事情都是對(duì)的。

最后幾句，我想說(shuō)幾句雖然有些偏離主題但是需要說(shuō)的：如果這個(gè)字段是可選的，那它就不應(yīng)該出現(xiàn)在表單里，移除所有不必要的注冊(cè)流程和對(duì)用戶來(lái)說(shuō)不必要的東西。這就通常意味著你需要在必選的模塊那加一個(gè)（如果在某些情況下，你仍然需要可選的輸入框，標(biāo)出它們是可選的）。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。