以下內容由摹客團隊翻譯整理，僅供學習交流，摹客設計+協作一站式雲平台，從產品、設計到開發，摹客來解決。
單選按鈕和核取方塊長期以來一直都是容易導致使用者困惑的元件。這兩個元件通常用於相同的情景下，但看起來又完全不同。設計人員和開發人員一般比較清楚兩者的區別，因為他們在工作中會接觸到。那麼，普通使用者知道嗎?
事實上，使用者也需要知道這兩個元件的區別（ps：間接說明了這兩個元件並不直觀）。它們的外觀本身並不能反映它們在功能上的細微差別。視覺線索上只有圓點和核取方塊的區別；除了選項之外，其他對使用者毫無意義。因此，單選按鈕和核取方塊同時存在違反了使用者體驗中的一致性原則。
設計師和開發人員從來沒有質疑過它們的共存，因為一直以來都是這樣的。然而，如果它們的共存引起了使用者的困惑並違反了使用者體驗原則，那麼就需要進行邏輯分析和重新考慮了。違反使用者體驗一致性原則
使用者體驗的一致性原則規定：具有相似功能和相同用法的元件應該具有統一的外觀。單選按鈕和核取方塊具有類似的功能，並在相同的上下文中使用，但它們的外觀並沒有統一之處。
單選按鈕和核取方塊
單選按鈕表示相互排斥的選項，而核取方塊表示相互包含的選項。這兩種元件通常都用於從列表中選擇選項的場景。然而，它們是兩種不同的視覺提示，單選按鈕的是乙個圓裡面有乙個點，而核取方塊是乙個正方形裡面有乙個勾選標記。
可能有人會覺得它們功能不同，所以它們看起來應該是不同的。但準確地說，它們只是功能略有不同，而用法是相同的，這不足以證明外觀不一致是合理的。同樣功能的元件設計不同的外觀會產生不一致性，讓使用者感到困惑。互斥/包容不是使用者關心的問題
如果你問乙個普通使用者什麼是互斥或包含選項，他們可能無法回答你。因為他們在使用時並不會考慮互斥性或包容性，只有設計師和開發人員設計頁面才會考慮這些。
使用者只需閱讀標籤提示並選擇想要的選項。他們關注的是提示上的內容，而不是元件功能。因此，互斥性和包容性應該在標籤提示中體現，而不是元件外觀。設計人員和開發人員正在把他們的思維方式強加給使用者。使用者如何知道是單選還是多選？
元件上提供的標籤提示通常能告知使用者可以進行多選還是單選。當使用者可以選擇多個選項時，標籤單詞字尾是複數形式。當使用者只能選擇乙個選項時，標籤單詞字尾是單數形式。在標籤提示中提及互斥或包含的標籤時，請確保使用正確的名詞形式。使用者很容易遺忘這些標籤提示，但它們傳遞了最重要的資訊。
標籤單複數
與複選標記和圓點相比，標籤的名詞形式更能清楚地說明相斥/包容的關係。乙個勾選標記或乙個圓點並不能表示互斥還是包容關係，只有設計師、開發人員和精通技術的使用者才熟悉這個約定。普通使用者看到相同的上下文環境中使用了不同元件，他們就會想知道這些視覺差異意味著什麼。這種差異雖然不足以阻礙使用者進行互動，但肯定會轉移他們的注意力。
元件對比
使用check circles代替
如果使用者需要乙個元件用於在列表中選擇選項，與其使用單選按鈕和核取方塊，不如直接使用check circles。它結合了單選按鈕的外部形狀和核取方塊的複選標記提示，如下圖所示。
check circle示例
學習工具，但不受限於某種工具。摹客，為企業團隊提供原型設計和全流程的設計協作。
為什麼單選按鈕和核取方塊不能共存？
事實上，使用者也需要知道這兩個元件的區別 ps 間接說明了這兩個元件並不直觀 它們的外觀本身並不能反映它們在功能上的細微差別。視覺線索上只有圓點和核取方塊的區別 除了選項之外，其他對使用者毫無意義。因此，單選按鈕和核取方塊同時存在違反了使用者體驗中的一致性原則。設計師和開發人員從來沒有質疑過它們的共...
單選按鈕和核取方塊整合
最近的專案中用到了好幾次單選按鈕和核取方塊，原來做專案也需要的，現在想把這類經常用的方法整合下，寫在乙個物件裡，以後用直接傳參呼叫就可以了，內容全部是js，減少工程的負擔吧，目前還在修改中，望多多指教。定義toolclass物件，裡面定義引數param1,param2,這個兩個引數是頁面中的需要處理...
自定義單選按鈕 核取方塊
一直以來都對單選按鈕 radio 核取方塊 checkbox 的預設樣式感到頭疼，不夠美觀！恰好學習css3 學到了乙個選擇器 checked，學著做了乙個簡單的樣式自定義。主要的思想在於 設定自帶的樣式的透明度為0，然後使用絕對定位混淆視聽 先來說說單選按鈕 如下 css 1 style type...