前幾天又重新拜讀了尼爾森（Jakob Nielsen）關(guān)于單選與復(fù)選的文章《Checkbox vs. Radio Buttons》，雖說經(jīng)典，但 2004 年的文章距離現(xiàn)在已有 18 年，有些原則在今天已經(jīng)不夠用了，有些甚至還可以拿出來探討幾番，倒是可以以此為引子和大家聊聊單選與復(fù)選。

文章里分享了一個(gè)小案例，在網(wǎng)頁(yè)注冊(cè)頁(yè)面上，遇到了以下選擇頁(yè)：

尼爾森指出在這個(gè)案例里，錯(cuò)誤地使用了復(fù)選組件，因?yàn)檫@兩個(gè)選項(xiàng)是完全互斥的；另一個(gè)問題是展示了兩個(gè)又臭又長(zhǎng)的問題，應(yīng)該使用一個(gè)簡(jiǎn)短的提問：“是的，請(qǐng)向我發(fā)送有關(guān)產(chǎn)品的信息?！?/p>

按照文章中的理解，我們可以將方案改成上圖所示。文中指出，雖然很諷刺，但是單個(gè)問題用復(fù)選框是正確的。

在我看來這個(gè)例子在今天的互聯(lián)網(wǎng)環(huán)境里顯得太簡(jiǎn)單了。如果今天的產(chǎn)品需求是：讓用戶設(shè)置是否接收消息推送，且消息推送還分為評(píng)論、點(diǎn)贊、私信、系統(tǒng)通知...等等呢？用戶對(duì)于評(píng)論、點(diǎn)贊、私信、和系統(tǒng)通知都可以選擇接受或不接受，且選項(xiàng)間并不互斥。那么它會(huì)是什么樣的呢？

相信大多數(shù)人的第一印象就如上圖所示，雖然邏輯上很對(duì)，但是不是會(huì)感覺怪怪的，哪里都不對(duì)卻又不知道從何說起？本期我們就來好好聊一聊單選與復(fù)選。

拓展閱讀：

講講怎么設(shè)計(jì)

1. 樣式

單選按鈕（Radiobox）的設(shè)計(jì)來源于老式汽車收音機(jī)的物理按鈕設(shè)計(jì)，老司機(jī)們用它來選擇廣播站點(diǎn)，當(dāng)司機(jī)選擇一個(gè)特定站點(diǎn)時(shí)，其他的按鈕都會(huì)被彈出，只能按下一個(gè)按鈕。

圖片來源：Tumblr

所以它的樣式也是收音機(jī)按鈕的擬物化設(shè)計(jì)，在網(wǎng)頁(yè)/桌面端中，單選的設(shè)計(jì)通常為「〇 + 選項(xiàng)」，如下圖所示：

而網(wǎng)頁(yè)/桌面端的多選（checkbox）則是以「口 + 選項(xiàng) 」的方式出現(xiàn)，如下圖所示。

移動(dòng)端的列表和標(biāo)簽都常用到單選，當(dāng)它是列表時(shí)，多見于以右側(cè)的打勾狀態(tài)表示選中，當(dāng)它是標(biāo)簽時(shí)，多以染上主題色表示選中，如下圖所示：

有趣的是，桌面/網(wǎng)頁(yè)端表示單選的「〇 + 選項(xiàng)」在移動(dòng)端通常會(huì)被用做多選，不信的話，現(xiàn)在拿起手機(jī)微信，發(fā)起個(gè)群收款看看？或者打開淘寶購(gòu)物車，批量購(gòu)買幾個(gè)商品看看？再打開網(wǎng)頁(yè)版淘寶，同樣批量購(gòu)買幾件商品看看？

為什么會(huì)出現(xiàn)網(wǎng)頁(yè)/桌面端的單選樣式在移動(dòng)端竟為多選的現(xiàn)象，目前為止沒有人做過討論，我也只能以我淺淺的移動(dòng)端經(jīng)驗(yàn)猜測(cè)一下：移動(dòng)端相比網(wǎng)頁(yè)/桌面端畫面小，一個(gè)頁(yè)面所能承載的信息量遠(yuǎn)遠(yuǎn)不如網(wǎng)頁(yè)/桌面端，從空間上講，高亮選項(xiàng)比〇+√選中更節(jié)省空間；從信噪比上講，〇 對(duì)用戶選擇沒有任何助益，完全可以省略；實(shí)在需要通過√表示選擇狀態(tài)時(shí)，放在右側(cè)也比放在左側(cè)更不影響用戶的閱讀動(dòng)線。此外從流程上講，網(wǎng)頁(yè)/桌面端一頁(yè)能解決的事移動(dòng)端需要分好幾頁(yè)，因此，移動(dòng)端單選多為選中即跳轉(zhuǎn)（實(shí)時(shí)操作），比如轉(zhuǎn)發(fā)選擇聯(lián)系人時(shí)，注冊(cè)時(shí)選擇性別時(shí)、選擇付款方式...對(duì)比而網(wǎng)頁(yè)/桌面端，單選多為列表里眾多問題中的一個(gè)，選完仍然留在該頁(yè)面，選中狀態(tài)的呈現(xiàn)比移動(dòng)端重要得多。至于圓形還是方形的選擇，根據(jù)不同移動(dòng)產(chǎn)品的設(shè)計(jì)風(fēng)格有不同的展現(xiàn)形式，沒有哪樣是絕對(duì)正確的，只能說現(xiàn)在大多數(shù)移動(dòng)端都是用圓形，但方形的設(shè)計(jì)也存在，比如，Meterial Ddesign 就提供了方形的復(fù)選設(shè)計(jì)。一般來說只要自己產(chǎn)品內(nèi)的設(shè)計(jì)語(yǔ)言是一致的，就不會(huì)有什么問題。

大多數(shù)移動(dòng)端對(duì)于標(biāo)簽（或二級(jí) tab）的單選和多選沒有做樣式上的區(qū)分，只是會(huì)在多選選中后，在標(biāo)題或下一步操作旁列出所有已選項(xiàng)信息，這么多年大家用下來也沒見太多人說看不懂，大概移動(dòng)端的試錯(cuò)成本比較低，大家也更愿意嘗試。但是如果硬要區(qū)分的話，可以選擇都用膠囊做單選，矩形做多選。此外，還可以在文案中做適當(dāng)?shù)奶崾尽?/p>

2. 基本原則

對(duì)于何時(shí)使用單選、何時(shí)使用復(fù)選，一直以來都沒有什么爭(zhēng)議，規(guī)則一直都是相同的:

1. 當(dāng)存在 2 個(gè)或多個(gè)互斥選項(xiàng)且用戶只能選擇一個(gè)選項(xiàng)時(shí)，使用單選；也就是說，選中一個(gè)單選項(xiàng)將取消選擇之前在列表中的其他選項(xiàng)；
2. 當(dāng)存在多個(gè)選項(xiàng)且用戶可以選擇任意數(shù)量的選項(xiàng)時(shí)使用復(fù)選；每個(gè)復(fù)選項(xiàng)都獨(dú)立于列表中的所有其他復(fù)選項(xiàng)，選中一個(gè)項(xiàng)并不會(huì)取消選中其他項(xiàng)；

除此之外還有一些附加的建議，比如：

文案建議使用正向的措辭

反面案例諸如上述案例中的，選擇「要（yes）“不要給我發(fā)郵件”」，和「不要（no）“給我發(fā)郵件”」，肯定了否定總是比直接否定要繞更大的彎子；

單選項(xiàng)確保選項(xiàng)既全面又互斥

如果無法保證全面，需提供“其他”選項(xiàng)，比如在婚姻狀態(tài)里，除已婚、未婚外，如果你不知道還有別的什么狀態(tài)，最好提供“其他”選項(xiàng)作為補(bǔ)充，否則諸如，離異、喪偶等情況會(huì)無法使用該系統(tǒng)；

讓用戶通過點(diǎn)擊整個(gè)選項(xiàng)來選擇而不是「〇」或「口」

無論是單選還是多選，「〇」或「口」的面積都比較小，根據(jù)菲茲定律，更大的目標(biāo)點(diǎn)擊速度越快，所以增大選項(xiàng)的熱區(qū)可以提升交互體驗(yàn)；

拓展閱讀：

選項(xiàng)之間按邏輯進(jìn)行排序

按邏輯組織排序選項(xiàng)可以減少用戶的理解成本；

這些都是沒什么爭(zhēng)議的基本原則，照做就行。

實(shí)例拓展

了解完單選與多選的通用樣式以及基本的設(shè)計(jì)原則，我們來講一些拓展場(chǎng)景。

1. 默認(rèn)選項(xiàng)

既然是個(gè)選擇題，首先捋一捋是否要給用戶默認(rèn)選項(xiàng)。對(duì)于默認(rèn)選項(xiàng)這個(gè)問題，可以從平臺(tái)傾向和用戶使用習(xí)慣上去考慮?？紤]平臺(tái)傾向很好理解，比如在支付場(chǎng)景，如果是今天我是給阿里做設(shè)計(jì)，會(huì)默認(rèn)選擇支付寶付款，如果今天我是給騰訊做設(shè)計(jì)，就會(huì)默認(rèn)選擇微信支付。如下圖所示淘寶網(wǎng)頁(yè)端付款頁(yè)面，就默認(rèn)為用戶選中了平臺(tái)推薦的付款方式。

如果我們沒有平臺(tái)傾向，比如注冊(cè)頁(yè)面填寫性別，或者新學(xué)期選課，那么我們就不需要給用戶默認(rèn)選擇了，避免因平臺(tái)引導(dǎo)性的設(shè)計(jì)導(dǎo)致數(shù)據(jù)偏差（比如，如果注冊(cè)時(shí)平臺(tái)默認(rèn)選擇男性，那么會(huì)有大部分人因懶得修改導(dǎo)致這個(gè)平臺(tái)男性偏多，后續(xù)基于性別的所有分析都會(huì)出錯(cuò)）。

當(dāng)然，沒有平臺(tái)傾向的情況下，我們可以多考慮一層用戶習(xí)慣，還是以支付為例，如果是一個(gè)無人在意的購(gòu)物平臺(tái)，不需要引導(dǎo)用戶選擇支付寶支付或者微信支付，那么我們可以通過記住用戶上次的支付方式，來簡(jiǎn)化購(gòu)買流程，幫助快速成單。如果是在移動(dòng)端，因?yàn)轫?yè)面有限，我們甚至可以做得極致一些。提供默認(rèn)選項(xiàng)的情況下，大多數(shù)會(huì)只露出推薦選項(xiàng)和修改入口，把其他選項(xiàng)藏在二級(jí)頁(yè)面。比如淘寶的移動(dòng)端支付，雖然選擇付款方式是個(gè)必選單選題，但它只在頁(yè)面里呈現(xiàn)了推薦選項(xiàng)和修改入口，其他付款方式都藏在了二級(jí)。

2. 只能用單選或多選嗎

我們聊回開頭的例題：讓用戶設(shè)置是否接收消息推送，且消息推送還分為評(píng)論、點(diǎn)贊、私信、系統(tǒng)通知。這么一通聊下來后，似乎可以得到以下優(yōu)化方案：

雖然看上去稍微好了一點(diǎn)點(diǎn)，但我一直認(rèn)為，什么樣的邏輯用什么樣的樣式設(shè)計(jì)出來的方案只能達(dá)到 60 分，具體的場(chǎng)景還得做具體的分析。比如，在這個(gè)案例里，雖然接受消息類型理論上是一個(gè)多選，選擇多選樣式?jīng)]有什么問題，但是例子里所有的多選項(xiàng)之間是互斥且無關(guān)聯(lián)的，我們也可以簡(jiǎn)單理解為是多個(gè)單一是否題，即“是否接收評(píng)論消息”、“是否接收點(diǎn)贊消息”...在一個(gè)復(fù)雜的多選題和多個(gè)簡(jiǎn)單的是否題之間，多個(gè)簡(jiǎn)單的是否題會(huì)更簡(jiǎn)單一些，在移動(dòng)端我認(rèn)為開關(guān)（switch）會(huì)比多選（checkbox）更合適一些。

從多選改成開關(guān)后，視覺上的點(diǎn)擊熱區(qū)也跟著從難以用右手交互的左邊移到了右邊。簡(jiǎn)單來說，如果此時(shí)選擇操作是該頁(yè)面的主操作，且可以拆解成不沖突的是否題時(shí)，可以考慮用開關(guān)代替多選（可以理解成一個(gè)長(zhǎng)段落填空題會(huì)比多個(gè)是否題體感上復(fù)雜度高）。

3. 到底是單選還是多選

不知道有沒有細(xì)心的朋友發(fā)現(xiàn)，移動(dòng)端有很多個(gè)理解上是單選的地方用的卻是多選的樣式，包括但不限于：登錄頁(yè)的同意協(xié)議條款、發(fā)送圖片是選擇原圖...

按理來說，這里的同意和不同意，發(fā)原圖和不發(fā)原圖，都更接近單選的邏輯，甚至可以用開關(guān)，那為什么不用呢？我們代入場(chǎng)景來思考下，登錄頁(yè)最重要的操作是什么，發(fā)送圖片的場(chǎng)景最重要的操作是什么？是登錄和發(fā)送圖片。是否發(fā)送原圖如果用開關(guān)就會(huì)因樣式過強(qiáng)搶了頁(yè)面內(nèi)主要任務(wù)，如果同時(shí)提供“同意與不同意”、“原圖和非原圖”同樣也擠占了較大的空間。此外它還不是選擇即跳轉(zhuǎn)，需要在原頁(yè)面表示清楚可點(diǎn)擊狀態(tài)和選擇狀態(tài)，這種情況下用多選可以同時(shí)滿足點(diǎn)擊預(yù)期和狀態(tài)展示，又不會(huì)擠占空間搶走用戶本應(yīng)專注于主流程的注意力。（題外話：登錄頁(yè)的同意條款有一個(gè)歷史背景，最初的登錄頁(yè)都是默認(rèn)勾選同意條款的，約 20 年初國(guó)家才規(guī)定了不許默認(rèn)給用戶勾選同意條款，所以雖然它是個(gè)必選，理應(yīng)更明顯一些，卻一直沿用了以前的設(shè)計(jì)）。

4. 疊加選擇

實(shí)際項(xiàng)目中，我們還有可能會(huì)遇到更復(fù)雜的情況，比如還是以消息系統(tǒng)為例，如果在你選中了為我推送評(píng)論消息后，產(chǎn)品還希望能給用戶提供選擇評(píng)論消息來源的能力，那么應(yīng)該怎么設(shè)計(jì)呢？

在網(wǎng)頁(yè)/移動(dòng)端遇到這樣的疊加選擇時(shí)，一般都會(huì)在題目后，再展開一個(gè)多選題，讓用戶選擇，如下圖所示：

這樣的思路直接套用在移動(dòng)端的話會(huì)如何？我們畫出來后，那種“你不能說它錯(cuò)，但就是哪哪都奇怪”的感覺又升上來了。

拆解一下哪里“怪”了。首先，選項(xiàng)里，接收來自陌生人、粉絲、好友的評(píng)論是接收評(píng)論消息的子選項(xiàng)，盡管兩種方案都有意地通過縮進(jìn)表達(dá)選項(xiàng)間的關(guān)系，但顯然因?yàn)樵O(shè)計(jì)一致，所以感受并不明顯；其次，因?yàn)槊總€(gè)大類下都有許多小類，當(dāng)用戶點(diǎn)打開的消息類型多了，將統(tǒng)領(lǐng)的標(biāo)題頂出了屏幕外，場(chǎng)景的目標(biāo)會(huì)變得模糊；最后，當(dāng)用戶選擇接收系統(tǒng)消息，卻不在子類選項(xiàng)里選擇任何類型時(shí)，那么用戶是接收系統(tǒng)消息還是不接收系統(tǒng)消息呢？這里存在一個(gè)邏輯缺陷。

遇到這種情況，我們可以采用分步驟的方式去解決，在一級(jí)頁(yè)面分消息大類：評(píng)論、點(diǎn)贊、私信、系統(tǒng)消息...在二級(jí)頁(yè)面選擇接收來源或者不接收，如下圖所示：

這樣既表達(dá)了層級(jí)關(guān)系，又讓上下文更緊密，且邏輯上也更嚴(yán)謹(jǐn)。如果這個(gè)產(chǎn)品的社交關(guān)系復(fù)雜點(diǎn)，有好友、特別關(guān)注、關(guān)注、鐵粉、粉絲、陌生人等，那么顯然我們不可能窮盡所有排列組合做單選，這時(shí)候可以在二級(jí)頁(yè)面做多選或者開關(guān)，如下圖所示：

之所以在這個(gè)例子里用了多選而不是開關(guān)，是因?yàn)檫@里的選項(xiàng)之間不互斥，不能簡(jiǎn)單理解成 A 和非 A（不是鐵粉不代表不是粉絲），如果使用開關(guān)，當(dāng)用戶關(guān)閉了鐵粉的評(píng)論推送卻打開了粉絲的評(píng)論推送，就會(huì)邏輯不自洽（開關(guān)表示明顯的拒絕，而不選擇不代表拒絕）。

?當(dāng)然用戶或許會(huì)自動(dòng)理解成“只接收非鐵粉粉絲”，但一百個(gè)讀者有一百個(gè)哈姆雷特，總有用戶有不同的理解，我們又很難講清楚哪個(gè)才是正確的。為了表達(dá)清楚產(chǎn)品功能，建議不要使用會(huì)帶來誤解的設(shè)計(jì)形式。

歡迎關(guān)注作者微信公眾號(hào)：「白話說交互」