起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識使用單選按鈕和下拉菜單的7個規則
單選按鈕和下拉菜單是兩個非常重要的輸入控件，當用戶輸入時，他們都可以互換使用。但它們在不同的場景中的使用有不同的效果，本文主要講述關于它們使用的7個規則。
無論你是正在使用移動app還是網頁，表單是用戶界面非常重要的一個組成部分。用戶通過表單系統輸入其信息，解釋滿足用戶請求的信息。
來源：www.formassembly.com
有些項目是可以使用表單，包括輸入控件、輸入驗證、錯誤處理和用戶反饋。
單選按鈕和下拉菜單是兩個非常重要的輸入控件，當用戶輸入時，他們都可以互換使用。但就這些控件的可用性而言，在某些場景中使用單選按鈕和下拉菜單，可以讓用戶更容易的選擇給定的輸入。
下面是基于可用性研究的幾條規定，這些規定會在設計表單時，幫助你決定哪一個控件更合適。
一、使用單選按鈕
1. 當你想強調選項時
可能有多種情況下你想強調選項：
- 沒有明確的默認或推薦選項。
- 希望用戶閱讀所有選項。
- 用戶不熟悉這些選項，他可以預測他們的機會很少或沒有機會。
當選項需要強調時
在案例中，因為默認選項沒有提供關于其他選項的線索，所以使用下拉菜單看起來不是很好。
2. 當少于5個選項時
較小的選項可以并排放置，以便：
- 用戶可以快速并輕松地掃描選項。
- 提供快速響應，而不是打開下拉菜單并從多個選項中進行選擇。
更少的選項
如果用戶要從2個到4個選項中進行選擇，最好使用單選按鈕，如示例所示。
3. 當選項的比較需要很明確時
可比較的選項可以并排放置，因為：
- 用戶可以一目了然且輕松地對其進行比較。
- 從下拉菜單中比較和確定選項需要時間。
- 用戶每次想要查看所選選項時都必須打開菜單對選項進行比較。
選項的比較是必需的
上面是關于用戶做出一個嚴謹的決定的訂閱計劃的選擇。
4. 當選項能見度和快速響應優先時
選項清晰的能見度和快速響應對用戶來說更易理解。
- 對于較長表單，掃描選項并標記所需選項變得更加簡單快捷。
- 每次點擊下拉列表選擇某選項需要很長時間。
長表單——?Survey Monkey Questionnaire
從給定的例子中可以明顯看出：當所有可選擇的選項對用戶可見時，長表單能提供良好的用戶體驗。
二、使用下拉菜單
1. 當默認選項是推薦選項時
僅查看推薦的選項讓用戶能更容易做出選擇，因為：
- 顯示所有選項將吸引用戶的注意力。
- 不鼓勵用戶更改默認選項。
默認推薦選項
例如：不用顯示所有選項，因為用戶有較小的機會會更改默認選項。
2. 當有大量相似選項可用時
有大量相似選項時，推薦用下拉菜單顯示，因為：
- 用戶可以輕松進行預知。
- 這時不需要看到并排放置的選擇。
大量相似選項
3. 當超過7個選項
大量的選項并不適合并排顯示，因為：
- 如果一堆選項并排放置，會是得用戶界面變得混亂，讓用戶在查看時會很混亂。
- 掃描大量單選項需要時間。
超過7個選項
此外，對于長下拉列表，提供一個文本框是一個很好的做法，用戶可以在其中鍵入選項名稱，列表僅顯示過濾選項，這使得選擇更容易和更快。
輸入選項來過濾列表
三、結論
為了增強表單的用戶體驗，提供正確的控件對接受用戶的輸入是非常重要的。因為表單會有很長的選項，所以如果用戶需要額外點擊來補充其信息，這個過程就會很無聊。
在設計表單時，這一組規則會幫助你在單選按鈕和下拉菜單之間做出正確的決定。
原文作者：Saadia Minhas（UX設計的熱衷者）
原文地址：https://blog.prototypr.io/7-rules-of-using-radio-buttons-vs-drop-down-menus-fddf50d312d1
本文由 @SKYUI 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
對對對對對對多多多多
非常感謝po主分享，但有2個問題請教：
1. radio button和 drop down list 都可以有default值，這兩者的default有啥區別嗎？
2. 按照我的經驗，radio button一般必須要有default值，dropdown list一般沒有default，這個理解正確嗎？
謝謝！
今天設計時就遇到了這個問題，看了后有所了解。感謝！