無論是網頁設計，還是移動app設計，都經常用到單選按鈕和復選框這兩個組件。這兩個組件看似意義明確，很好區分，但在實際設計中卻很容易用錯，帶來不好的用戶體驗。

本文中我通過列舉幾個典型的錯誤用法，幫助設計師在進行UI/UX設計時，更加規范地使用單選按鈕和復選框這兩個組件。

使用原型工具：Mockplus

單選按鈕和復選框的區別

什么時候使用單選按鈕?

有兩個或兩個以上的互斥選項，用戶必須且只能從中選擇一個。換句話說，如果你選擇了其中一個沒有被選中的選項，那么原本被選中的選項就自動被取消。

什么時候使用復選框?

有一系列選項，用戶可以從中選擇選擇一個或多個，甚至不選也可以。換句話說，每一個選項是互不影響的。

看了定義，你是否覺得這兩個組件使用起來很容易呢?但在設計實例中，以下幾個錯誤用法是頻頻出現的：

錯誤一：用錯對象

一個提供午餐外賣服務的app， 在讓用戶選擇送餐時間時，使用了復選框組件。這既違背了設計初衷(希望用戶從中選擇一個時間段)，又給用戶帶來了困擾，是不是我同時勾選前兩個時間段，就代表在這整個大的區間內送餐都是可以的呢?

錯誤二：選項文本中使用否定詞

以上的幾個例子是比較夸張的，但的確反映了一些UI/UX設計中存在的問題。如果我們在復選框選項中使用否定句式，用戶必須瀏覽完所有的選項，才能確保自己不喜歡的事情不會發生。

有一個例外的情況，當瀏覽器中彈出“不要再提示該信息”時，類似的選項中可以使用否定詞。

錯誤三：選項的排列不遵循邏輯順序

圖中的選項沒有遵循一定的邏輯順序。按照訂閱時間長短，應該是：月訂閱>季訂閱>年訂閱

以上三個是單選按鈕和復選框在UI/UX設計中常見的錯誤，除了避免這些錯誤之外，設計師在使用這兩個組件時，最好能遵循以下四點建議：

1. 能使用單選按鈕時，盡量不使用下拉菜單。在所有選項都被清晰地列舉出時，用戶更容易進行比較，做出正確的選擇。

2. 使用單選按鈕時，一定要提供一個已經選中的默認選項。

3. 單選按鈕和復選框都不用于觸發任何動作。

4. 選項句式不宜過長，最好能讓用戶迅速抓住關鍵信息。

以上三點錯誤和四條建議，是用好單選按鈕和復選框這兩個組件的關鍵。如需了解更多相關的設計規范以及組件的使用方法，請查看Mockplus官網的教程。