以下內(nèi)容由摹客團(tuán)隊(duì)翻譯整理，僅供學(xué)習(xí)交流，摹客設(shè)計(jì)+協(xié)作一站式云平臺，從產(chǎn)品、設(shè)計(jì)到開發(fā)，摹客來解決。
單選按鈕和復(fù)選框長期以來一直都是容易導(dǎo)致用戶困惑的組件。這兩個(gè)組件通常用于相同的情景下，但看起來又完全不同。設(shè)計(jì)人員和開發(fā)人員一般比較清楚兩者的區(qū)別，因?yàn)樗麄冊诠ぷ髦袝?huì)接觸到。那么，普通用戶知道嗎?
事實(shí)上，用戶也需要知道這兩個(gè)組件的區(qū)別（ps：間接說明了這兩個(gè)組件并不直觀）。它們的外觀本身并不能反映它們在功能上的細(xì)微差別。視覺線索上只有圓點(diǎn)和復(fù)選框的區(qū)別；除了選項(xiàng)之外，其他對用戶毫無意義。因此，單選按鈕和復(fù)選框同時(shí)存在違反了用戶體驗(yàn)中的一致性原則。
設(shè)計(jì)師和開發(fā)人員從來沒有質(zhì)疑過它們的共存，因?yàn)橐恢币詠矶际沁@樣的。然而，如果它們的共存引起了用戶的困惑并違反了用戶體驗(yàn)原則，那么就需要進(jìn)行邏輯分析和重新考慮了。違反用戶體驗(yàn)一致性原則
用戶體驗(yàn)的一致性原則規(guī)定：具有相似功能和相同用法的組件應(yīng)該具有統(tǒng)一的外觀。單選按鈕和復(fù)選框具有類似的功能，并在相同的上下文中使用，但它們的外觀并沒有統(tǒng)一之處。

單選按鈕和復(fù)選框

單選按鈕表示相互排斥的選項(xiàng)，而復(fù)選框表示相互包含的選項(xiàng)。這兩種組件通常都用于從列表中選擇選項(xiàng)的場景。然而，它們是兩種不同的視覺提示，單選按鈕的是一個(gè)圓里面有一個(gè)點(diǎn)，而復(fù)選框是一個(gè)正方形里面有一個(gè)勾選標(biāo)記。
可能有人會(huì)覺得它們功能不同，所以它們看起來應(yīng)該是不同的。但準(zhǔn)確地說，它們只是功能略有不同，而用法是相同的，這不足以證明外觀不一致是合理的。同樣功能的組件設(shè)計(jì)不同的外觀會(huì)產(chǎn)生不一致性，讓用戶感到困惑。互斥/包容不是用戶關(guān)心的問題
如果你問一個(gè)普通用戶什么是互斥或包含選項(xiàng)，他們可能無法回答你。因?yàn)樗麄冊谑褂脮r(shí)并不會(huì)考慮互斥性或包容性，只有設(shè)計(jì)師和開發(fā)人員設(shè)計(jì)頁面才會(huì)考慮這些。
用戶只需閱讀標(biāo)簽提示并選擇想要的選項(xiàng)。他們關(guān)注的是提示上的內(nèi)容，而不是組件功能。因此，互斥性和包容性應(yīng)該在標(biāo)簽提示中體現(xiàn)，而不是組件外觀。設(shè)計(jì)人員和開發(fā)人員正在把他們的思維方式強(qiáng)加給用戶。用戶如何知道是單選還是多選？
組件上提供的標(biāo)簽提示通常能告知用戶可以進(jìn)行多選還是單選。當(dāng)用戶可以選擇多個(gè)選項(xiàng)時(shí)，標(biāo)簽單詞后綴是復(fù)數(shù)形式。當(dāng)用戶只能選擇一個(gè)選項(xiàng)時(shí)，標(biāo)簽單詞后綴是單數(shù)形式。在標(biāo)簽提示中提及互斥或包含的標(biāo)簽時(shí)，請確保使用正確的名詞形式。用戶很容易遺忘這些標(biāo)簽提示，但它們傳遞了最重要的信息。

標(biāo)簽單復(fù)數(shù)

與復(fù)選標(biāo)記和圓點(diǎn)相比，標(biāo)簽的名詞形式更能清楚地說明相斥/包容的關(guān)系。一個(gè)勾選標(biāo)記或一個(gè)圓點(diǎn)并不能表示互斥還是包容關(guān)系，只有設(shè)計(jì)師、開發(fā)人員和精通技術(shù)的用戶才熟悉這個(gè)約定。普通用戶看到相同的上下文環(huán)境中使用了不同組件，他們就會(huì)想知道這些視覺差異意味著什么。這種差異雖然不足以阻礙用戶進(jìn)行交互，但肯定會(huì)轉(zhuǎn)移他們的注意力。

組件對比

使用Check Circles代替
如果用戶需要一個(gè)組件用于在列表中選擇選項(xiàng)，與其使用單選按鈕和復(fù)選框，不如直接使用Check Circles。它結(jié)合了單選按鈕的外部形狀和復(fù)選框的復(fù)選標(biāo)記提示，如下圖所示。

Check Circle示例

之所以使用復(fù)選標(biāo)記，是因?yàn)樗葓A點(diǎn)更具選擇提示性，通常它被認(rèn)為是“肯定”或“是”的象征。而圓點(diǎn)是一個(gè)微弱的視覺線索，它可以包含任何含義。
而圓形輪廓有助于區(qū)別于復(fù)選框。它還有一個(gè)額外的好處就是更吸引人，更容易被識別。
把Check Circles用于列表選項(xiàng)選擇，用戶就不會(huì)被單選按鈕和復(fù)選框之間的差異分散注意力了。他們可以更多地關(guān)注選項(xiàng)標(biāo)簽，選擇最適合自己的選項(xiàng)。用戶是否只能選擇一個(gè)或多個(gè)選項(xiàng)并不重要。他們將根據(jù)選項(xiàng)標(biāo)簽的指示進(jìn)行選擇，而不是組件的類型。舊的設(shè)計(jì)實(shí)踐在不斷發(fā)展
單選按鈕和復(fù)選框已經(jīng)共存很久了。然而，由于對用戶體驗(yàn)漸漸有了更好的理解，過去許多舊的設(shè)計(jì)實(shí)踐也在不斷發(fā)展演變。例如，清除表單的重置按鈕、必填字段上的紅色星號和密碼確認(rèn)字段現(xiàn)在幾乎都消失了。單選按鈕和復(fù)選框可能很快也會(huì)這樣做，因?yàn)楹蜕钪械囊恍┦虑橐粯?#xff0c;界面設(shè)計(jì)也在不斷發(fā)展和變化。原文作者：Anthony原文地址：https://uxmovement.com/forms/why-radio-buttons-and-checkboxes-cant-co-exist/學(xué)習(xí)工具，但不受限于某種工具。摹客，為企業(yè)團(tuán)隊(duì)提供原型設(shè)計(jì)和全流程的設(shè)計(jì)協(xié)作。

總結(jié)

以上是生活随笔為你收集整理的单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。