單選按鈕和下拉菜單是兩個非常重要的輸入控件，當(dāng)用戶輸入時，他們都可以互換使用。但它們在不同的場景中的使用有不同的效果，本文主要講述關(guān)于它們使用的7個規(guī)則。

無論你是正在使用移動app還是網(wǎng)頁，表單是用戶界面非常重要的一個組成部分。用戶通過表單系統(tǒng)輸入其信息，解釋滿足用戶請求的信息。

來源：www.formassembly.com

有些項目是可以使用表單，包括輸入控件、輸入驗證、錯誤處理和用戶反饋。

單選按鈕和下拉菜單是兩個非常重要的輸入控件，當(dāng)用戶輸入時，他們都可以互換使用。但就這些控件的可用性而言，在某些場景中使用單選按鈕和下拉菜單，可以讓用戶更容易的選擇給定的輸入。

下面是基于可用性研究的幾條規(guī)定，這些規(guī)定會在設(shè)計表單時，幫助你決定哪一個控件更合適。

一、使用單選按鈕

1. 當(dāng)你想強(qiáng)調(diào)選項時

可能有多種情況下你想強(qiáng)調(diào)選項：

1. 沒有明確的默認(rèn)或推薦選項。
2. 希望用戶閱讀所有選項。
3. 用戶不熟悉這些選項，他可以預(yù)測他們的機(jī)會很少或沒有機(jī)會。

當(dāng)選項需要強(qiáng)調(diào)時

在案例中，因為默認(rèn)選項沒有提供關(guān)于其他選項的線索，所以使用下拉菜單看起來不是很好。

2. 當(dāng)少于5個選項時

較小的選項可以并排放置，以便：

• 用戶可以快速并輕松地掃描選項。
• 提供快速響應(yīng)，而不是打開下拉菜單并從多個選項中進(jìn)行選擇。

更少的選項

如果用戶要從2個到4個選項中進(jìn)行選擇，最好使用單選按鈕，如示例所示。

3. 當(dāng)選項的比較需要很明確時

可比較的選項可以并排放置，因為：

• 用戶可以一目了然且輕松地對其進(jìn)行比較。
• 從下拉菜單中比較和確定選項需要時間。
• 用戶每次想要查看所選選項時都必須打開菜單對選項進(jìn)行比較。

選項的比較是必需的

上面是關(guān)于用戶做出一個嚴(yán)謹(jǐn)?shù)臎Q定的訂閱計劃的選擇。

4. 當(dāng)選項能見度和快速響應(yīng)優(yōu)先時

選項清晰的能見度和快速響應(yīng)對用戶來說更易理解。

• 對于較長表單，掃描選項并標(biāo)記所需選項變得更加簡單快捷。
• 每次點擊下拉列表選擇某選項需要很長時間。

長表單——?Survey Monkey Questionnaire

從給定的例子中可以明顯看出：當(dāng)所有可選擇的選項對用戶可見時，長表單能提供良好的用戶體驗。

二、使用下拉菜單

1. 當(dāng)默認(rèn)選項是推薦選項時

僅查看推薦的選項讓用戶能更容易做出選擇，因為：

• 顯示所有選項將吸引用戶的注意力。
• 不鼓勵用戶更改默認(rèn)選項。

默認(rèn)推薦選項

例如：不用顯示所有選項，因為用戶有較小的機(jī)會會更改默認(rèn)選項。

2. 當(dāng)有大量相似選項可用時

有大量相似選項時，推薦用下拉菜單顯示，因為：

• 用戶可以輕松進(jìn)行預(yù)知。
• 這時不需要看到并排放置的選擇。

大量相似選項

3. 當(dāng)超過7個選項

大量的選項并不適合并排顯示，因為：

• 如果一堆選項并排放置，會是得用戶界面變得混亂，讓用戶在查看時會很混亂。
• 掃描大量單選項需要時間。

超過7個選項

此外，對于長下拉列表，提供一個文本框是一個很好的做法，用戶可以在其中鍵入選項名稱，列表僅顯示過濾選項，這使得選擇更容易和更快。

輸入選項來過濾列表

三、結(jié)論

為了增強(qiáng)表單的用戶體驗，提供正確的控件對接受用戶的輸入是非常重要的。因為表單會有很長的選項，所以如果用戶需要額外點擊來補(bǔ)充其信息，這個過程就會很無聊。

在設(shè)計表單時，這一組規(guī)則會幫助你在單選按鈕和下拉菜單之間做出正確的決定。

原文作者：Saadia Minhas（UX設(shè)計的熱衷者）

原文地址：https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1

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

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