單選按鈕和下拉菜單是兩個(gè)非常重要的輸入控件，當(dāng)用戶輸入時(shí)，他們都可以互換使用。但它們在不同的場景中的使用有不同的效果，本文主要講述關(guān)于它們使用的7個(gè)規(guī)則。
無論你是正在使用移動app還是網(wǎng)頁，表單是用戶界面非常重要的一個(gè)組成部分。用戶通過表單系統(tǒng)輸入其信息，解釋滿足用戶請求的信息。
來源：www.formassembly.com
有些項(xiàng)目是可以使用表單，包括輸入控件、輸入驗(yàn)證、錯(cuò)誤處理和用戶反饋。
單選按鈕和下拉菜單是兩個(gè)非常重要的輸入控件，當(dāng)用戶輸入時(shí)，他們都可以互換使用。但就這些控件的可用性而言，在某些場景中使用單選按鈕和下拉菜單，可以讓用戶更容易的選擇給定的輸入。
下面是基于可用性研究的幾條規(guī)定，這些規(guī)定會在設(shè)計(jì)表單時(shí)，幫助你決定哪一個(gè)控件更合適。
一、使用單選按鈕1.當(dāng)你想強(qiáng)調(diào)選項(xiàng)時(shí)
可能有多種情況下你想強(qiáng)調(diào)選項(xiàng)：
沒有明確的默認(rèn)或推薦選項(xiàng)。希望用戶閱讀所有選項(xiàng)。用戶不熟悉這些選項(xiàng)，他可以預(yù)測他們的機(jī)會很少或沒有機(jī)會。
當(dāng)選項(xiàng)需要強(qiáng)調(diào)時(shí)
在案例中，因?yàn)槟J(rèn)選項(xiàng)沒有提供關(guān)于其他選項(xiàng)的線索，所以使用下拉菜單看起來不是很好。
2.當(dāng)少于5個(gè)選項(xiàng)時(shí)
較小的選項(xiàng)可以并排放置，以便：
用戶可以快速并輕松地掃描選項(xiàng)。提供快速響應(yīng)，而不是打開下拉菜單并從多個(gè)選項(xiàng)中進(jìn)行選擇。
更少的選項(xiàng)
如果用戶要從2個(gè)到4個(gè)選項(xiàng)中進(jìn)行選擇，最好使用單選按鈕，如示例所示。
3.當(dāng)選項(xiàng)的比較需要很明確時(shí)
可比較的選項(xiàng)可以并排放置，因?yàn)椋?br>用戶可以一目了然且輕松地對其進(jìn)行比較。從下拉菜單中比較和確定選項(xiàng)需要時(shí)間。用戶每次想要查看所選選項(xiàng)時(shí)都必須打開菜單對選項(xiàng)進(jìn)行比較。
選項(xiàng)的比較是必需的
上面是關(guān)于用戶做出一個(gè)嚴(yán)謹(jǐn)?shù)臎Q定的訂閱計(jì)劃的選擇。
4.當(dāng)選項(xiàng)能見度和快速響應(yīng)優(yōu)先時(shí)
選項(xiàng)清晰的能見度和快速響應(yīng)對用戶來說更易理解。
對于較長表單，掃描選項(xiàng)并標(biāo)記所需選項(xiàng)變得更加簡單快捷。每次點(diǎn)擊下拉列表選擇某選項(xiàng)需要很長時(shí)間。
長表單——?surveymonkeyquestionnaire
從給定的例子中可以明顯看出：當(dāng)所有可選擇的選項(xiàng)對用戶可見時(shí)，長表單能提供良好的用戶體驗(yàn)。
二、使用下拉菜單1.當(dāng)默認(rèn)選項(xiàng)是推薦選項(xiàng)時(shí)
僅查看推薦的選項(xiàng)讓用戶能更容易做出選擇，因?yàn)椋?br>顯示所有選項(xiàng)將吸引用戶的注意力。不鼓勵(lì)用戶更改默認(rèn)選項(xiàng)。
默認(rèn)推薦選項(xiàng)
例如：不用顯示所有選項(xiàng)，因?yàn)橛脩粲休^小的機(jī)會會更改默認(rèn)選項(xiàng)。
2.當(dāng)有大量相似選項(xiàng)可用時(shí)
有大量相似選項(xiàng)時(shí)，推薦用下拉菜單顯示，因?yàn)椋?br>用戶可以輕松進(jìn)行預(yù)知。這時(shí)不需要看到并排放置的選擇。
大量相似選項(xiàng)
3.當(dāng)超過7個(gè)選項(xiàng)
大量的選項(xiàng)并不適合并排顯示，因?yàn)椋?br>如果一堆選項(xiàng)并排放置，會是得用戶界面變得混亂，讓用戶在查看時(shí)會很混亂。掃描大量單選項(xiàng)需要時(shí)間。
超過7個(gè)選項(xiàng)
此外，對于長下拉列表，提供一個(gè)文本框是一個(gè)很好的做法，用戶可以在其中鍵入選項(xiàng)名稱，列表僅顯示過濾選項(xiàng)，這使得選擇更容易和更快。
輸入選項(xiàng)來過濾列表
三、結(jié)論
為了增強(qiáng)表單的用戶體驗(yàn)，提供正確的控件對接受用戶的輸入是非常重要的。因?yàn)楸韱螘泻荛L的選項(xiàng)，所以如果用戶需要額外點(diǎn)擊來補(bǔ)充其信息，這個(gè)過程就會很無聊。
在設(shè)計(jì)表單時(shí)，這一組規(guī)則會幫助你在單選按鈕和下拉菜單之間做出正確的決定。
原文作者：saadiaminhas（ux設(shè)計(jì)的熱衷者）
本文由@skyui翻譯發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自unsplash，基于cc0協(xié)議