無論是網頁設計，還是移動app設計，都經常用到單選按鈕和核取方塊這兩個元件。這兩個元件看似意義明確，很好區分，但在實際設計中www.cppcns.com卻很容易用錯，帶來不好的使用者體驗。
本文中我通過列舉幾個典型的錯誤用法，幫助設計師在進行ui/ux設計時，更加規範地使用單選按鈕和核取方塊這兩個元件。
使用程式設計客棧原型工具：mockplus
單選按鈕和核取方塊的區別
什麼時候使用單選按鈕?
有兩個或兩個以上的互斥選項，使用者必須且只能從中選擇乙個。換句話說，如果你選擇了其中乙個沒有被選中的選項，那麼原本被選中的選項就自動被取消。
什麼時候使用核取方塊?
有一系列選項，使用者可以從中選擇選擇乙個或多個，甚至不選也可以。換句話說，每乙個選項是互不影響的。
看了定義，你是否覺得這兩個元件使用起來很容易呢?但在設計例項中，以下幾個錯誤用法是頻頻出現的：
錯誤一：用錯物件
乙個提供午餐外賣服務的app， 在讓使用者選擇送餐時間時，使用了核取方塊元件。這既違背了設計初衷(希望使用者從中選擇乙個時間段)，又給使用者帶來了困擾，是不是我同時勾選前兩個時間段，就代表在這整個大的區間內送餐都是可以的呢?
錯誤二：選項文字中使用否定詞
以上的幾個例子是比較誇張的，但的確反映了一些ui/ux設計中存在的問題。如果我們在核取方塊選項中使用否定句式，使用者必須瀏覽完所有的選項，才能確保自己不喜歡的事情不會發生。
有乙個例外的情況，當瀏覽器中彈出「不要再提示該資訊」時，類似的選項中可以使用否定詞。
錯誤三：選項的排列不遵循邏輯順序
圖中的選項沒有遵循一定的邏輯順序。按照訂閱時間長短，應該是：年訂閱
以上三個是單選按鈕和核取方塊在ui/ux設計中常見的錯誤，除了避免這些錯誤之外，設計師在使用這兩個元件時，最好能遵循以下四點建議：
1. 能使用單選按鈕時，盡量不使sdbff用下拉列表。在所有選項都被清晰地列舉出時，使用者更容易進行比較，做出正確的選擇。
2. 使用單選按鈕時，一定要提供乙個已經選中的預設選項。
3. 單選按鈕和核取方塊都不用於sdbff觸發任何動作。
4. 選項句式不宜過長，最好能讓使用者迅速抓住關鍵資訊。
單選按鈕和核取方塊整合
最近的專案中用到了好幾次單選按鈕和核取方塊，原來做專案也需要的，現在想把這類經常用的方法整合下，寫在乙個物件裡，以後用直接傳參呼叫就可以了，內容全部是js，減少工程的負擔吧，目前還在修改中，望多多指教。定義toolclass物件，裡面定義引數param1,param2,這個兩個引數是頁面中的需要處理...
自定義單選按鈕 核取方塊
一直以來都對單選按鈕 radio 核取方塊 checkbox 的預設樣式感到頭疼，不夠美觀！恰好學習css3 學到了乙個選擇器 checked，學著做了乙個簡單的樣式自定義。主要的思想在於 設定自帶的樣式的透明度為0，然後使用絕對定位混淆視聽 先來說說單選按鈕 如下 css 1 style type...
為什麼單選按鈕和核取方塊不能共存？
事實上，使用者也需要知道這兩個元件的區別 ps 間接說明了這兩個元件並不直觀 它們的外觀本身並不能反映它們在功能上的細微差別。視覺線索上只有圓點和核取方塊的區別 除了選項之外，其他對使用者毫無意義。因此，單選按鈕和核取方塊同時存在違反了使用者體驗中的一致性原則。設計師和開發人員從來沒有質疑過它們的共...