@圍脖上的嘟嘟王子?：今天來探討工作中遇到的一個問題：單選、復(fù)選、開關(guān)。先說一下前提，淘寶的確認(rèn)訂單頁面，積分抵扣是用開關(guān)做選擇的，而唯品用的是復(fù)選框，同樣都是選擇，復(fù)選框和開關(guān)到底哪個更合適？和同事討論了半天也沒得出一個明確的原則。因此想寫篇文章總結(jié)一下單選、復(fù)選、開關(guān)應(yīng)該如何使用。

作者的五分鐘讀書筆記連載系列：

1. 《取其精華！設(shè)計師讀書筆記連載系列之《設(shè)計師要懂心理學(xué)》》
2. 《取其精華！設(shè)計師讀書筆記連載系列之《簡約至上》
3. 《取其精華！設(shè)計師讀書筆記連載系列之《DON’T MAKE ME THINK》

編者注：交互設(shè)計行業(yè)由于國內(nèi)相關(guān)專業(yè)少，發(fā)的干貨知識人氣一直不高，比如下面這幾篇，聊的全是交互中的知識點，建議學(xué)交互的人閱讀收藏：

1. 消滅空狀態(tài)：《幫你消滅「空狀態(tài)界面」的5個常用方法》
2. 優(yōu)化交互流程：《3個方法幫你優(yōu)化交互設(shè)計流程的“閉環(huán)”問題》
3. 可用性測試：《零基礎(chǔ)也能學(xué)！超詳細(xì)的可用性測試方法經(jīng)驗總結(jié)》

先來解釋一下單選、復(fù)選、開關(guān)這三個詞的定義：

單選，通常都在在圈圈中顯示圓點或者打鉤、在同一個列表中只能選擇一個選項，點擊熱區(qū)為整個列表項。

復(fù)選，通常都是在方框中打鉤選擇，或者沒有方框僅用打鉤選擇、在同一個列表中可以選擇多個選項，點擊熱區(qū)為整個列表項。

開關(guān)，擬物化開關(guān)的扁平化設(shè)計，常用于功能的開啟和關(guān)閉，同一個列表中可以出現(xiàn)多個開關(guān)。開啟通常指開啟及操作，即某個選項開啟后，會有后續(xù)操作或者動作；關(guān)閉通常指關(guān)閉某項功能，以及關(guān)閉功能下的選項。

例如iOS系統(tǒng)設(shè)置中開啟與關(guān)閉WiFi（如下圖）

在詞條定義方面我們可以看出單選其實是爭議不大的，一般最常用的三種狀態(tài)如下：

1、只能選擇一個選項、且必須所有選項保持可見時，在本頁面使用，下圖為唯品會結(jié)算頁面單選支付方式。

2、只能選擇一個選項、且內(nèi)容不需要保持本頁面可見時，在下級頁面進(jìn)行選擇時使用。下圖為淘寶確認(rèn)訂單頁面開啟花唄分期后，在分期詳情頁面進(jìn)行單選。

3、只能選擇一個選項、且內(nèi)容不需要保持本頁面可見時，使用下拉菜單進(jìn)行選擇時，下圖為京東白條頁面下拉菜單選擇優(yōu)惠券。

而復(fù)選和開關(guān)是比較有爭議的，我們回到文章開頭的問題：淘寶的確認(rèn)訂單頁面，積分抵扣是用開關(guān)做選擇的，而唯品用的是復(fù)選框，同樣都是選擇，復(fù)選框和開關(guān)到底哪個更合適？我們來重點探討一下：

對比唯品會的結(jié)算頁和淘寶的確認(rèn)訂單頁面，唯品會無論是在Android系統(tǒng)還是iOS系統(tǒng)，都使用了復(fù)選框并將優(yōu)惠的金額獨立顯示在列表項右側(cè)；而且復(fù)選框點擊區(qū)域更大，更適合唯品幣、唯品卡這種誘導(dǎo)用戶享優(yōu)惠且比較隨意的選項。

而淘寶在Android上使用了復(fù)選框，且復(fù)選框的位置在列表右側(cè)，優(yōu)惠金額和其他文字融合在一起，不夠獨立突出，也就是讓“用戶看到此優(yōu)惠可選”和“優(yōu)惠了多少錢”相比，淘寶選擇了先讓”用戶看到此優(yōu)惠可選“；但在iOS系統(tǒng)上，淘寶使用了開關(guān)，優(yōu)點是icon比較大，開啟后視覺反饋更強(qiáng)，缺點是和復(fù)選框相比點擊區(qū)域比較小，用戶操作需要更慎重更精準(zhǔn)。但為什么要在兩個系統(tǒng)中做出不同的設(shè)計？iOS系統(tǒng)和Android系統(tǒng)都頻繁使用開關(guān)，Material Design中也把開關(guān)作為了基礎(chǔ)元件，并不存在差異化設(shè)計的需求，是為了做a/b test嗎？如果有淘寶的UED偶然看到這個問題，可以來解答一下。

但是單從詞條定義上來說，唯品幣、唯品卡和天貓積分、天貓點券一樣，都是選擇了之后不會有后續(xù)操作的選項，而且復(fù)選框和開關(guān)相比，復(fù)選框點擊區(qū)域更大、更容易點擊，在這里使用復(fù)選框是更合理的選擇。

因此我的結(jié)論是：

1. 唯品會可以堅持使用復(fù)選框，而且復(fù)選框放在左側(cè)，更容易突出右側(cè)的優(yōu)惠金額，但選中后的視覺反饋可以作出加強(qiáng)。
2. 淘寶上我更贊同天貓積分、點券等沒有后續(xù)操作的選項使用復(fù)選框，而花唄分期是開啟后有后續(xù)操作且需要慎重選擇的選項，使用開關(guān)會更合適，在設(shè)計上可以區(qū)分對待。但如果考慮到設(shè)計的統(tǒng)一性，其他選項也可以使用開關(guān)。

設(shè)計沒有對錯，只有合不合適。復(fù)選和開關(guān)都能達(dá)到相同的效果，但不同APP的選擇卻不同，我們要弄清楚他們?yōu)槭裁匆@么設(shè)計，知道不同設(shè)計的優(yōu)劣，才能在我們自己的設(shè)計中更好的運用，而不是盲目模仿大公司的設(shè)計。

最后給京東一點建議（如下圖）

左側(cè)這張圖片是京東白條現(xiàn)在選擇優(yōu)惠的設(shè)計，當(dāng)用戶進(jìn)入購物的心流狀態(tài)時，很容易忽略白條優(yōu)惠，因為它設(shè)計的實在太不明顯了。京東白條目前還是推廣階段，是希望更多的用戶因為優(yōu)惠而嘗試使用京東白條的，因此在這個階段，建議使用更明顯的優(yōu)惠方式開關(guān)，開啟后默認(rèn)選擇一個優(yōu)惠，且用戶可以下拉選擇其他優(yōu)惠。這樣的設(shè)計在視覺上更加吸引用戶，優(yōu)惠的反饋更強(qiáng)。

總結(jié)：

只能選擇一個選項、且必須所有選項保持可見時，才使用單選框，不然可以使用下拉菜單或下級頁面

在同一個列表有多項選擇，且選擇后不會有后續(xù)操作、建議使用復(fù)選框。但在某些場景下（例如購物），選中后需要給出用戶更加明顯反饋。

功能的開啟與關(guān)閉、某個選項開啟后，會有后續(xù)操作或者動作、建議使用開關(guān)，如果不是需要用戶慎重選擇的選項，開關(guān)的點擊熱區(qū)可以設(shè)計的更大一些，方便用戶操作，當(dāng)然需要考慮視覺反饋和設(shè)計的一致性。

評論中有童鞋說淘寶的設(shè)計也許根本沒有想那么多，這樣的設(shè)計是偶然的結(jié)果，分析偶然更像是一種意淫。但無論是淘寶、京東、唯品會的設(shè)計，尤其是結(jié)算頁這么重要的頁面設(shè)計，一定是他們的UED團(tuán)隊經(jīng)過深思熟慮，多種方案優(yōu)中選優(yōu)的結(jié)果，每一個icon、字體的大小、列表的間距都經(jīng)過了數(shù)次迭代。我不覺得是偶然的結(jié)果，至少我們團(tuán)隊每做一個需求都是提供幾個方案，每個方案都是細(xì)節(jié)上稍有不同，從中選取一個。如果設(shè)計都是偶然的結(jié)果，那就不存在設(shè)計理論了，UED團(tuán)隊也就沒有多少存在的意義了，淘寶和京東我都不可能有用戶數(shù)據(jù)，但我喜歡大膽的去分析他們的動機(jī)，大膽的去按照自己的想法去優(yōu)化，也許我的分析有一些正好是正確的呢，這是我個人的成長方式。

我還在成長期，很多觀點都是自己的大膽分析，皆不具有規(guī)范性參考、每個人的觀點都不同，用辯證的眼光去看，取其精華去其糟粕。

感謝大家關(guān)注我的公眾號「交互筆記」，不定期更新，你們的關(guān)注是我持續(xù)寫作的動力。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com