編輯導(dǎo)讀：在很多設(shè)計中，選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產(chǎn)品在實際應(yīng)用中往往也不夠規(guī)范，使產(chǎn)品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景，與你分享。

一、前言

不久前在進行一個Web端HRM系統(tǒng)的需求設(shè)計，場景是對于從企業(yè)離職的員工，HR可以根據(jù)員工能力和表現(xiàn)選擇是否將其設(shè)置為優(yōu)秀離職人才，對于優(yōu)秀離職人才將進行定期關(guān)懷，以便后續(xù)重新返聘的可能。在設(shè)計過程中，對于設(shè)置優(yōu)秀離職人才這個交互，感覺使用單選框、多選框、開關(guān)都能達到目的，究竟哪一種組件才是最合理的選擇呢？

這個問題讓我回想起之前在很多設(shè)計中對于這幾種選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產(chǎn)品在實際應(yīng)用中往往也不夠規(guī)范，使產(chǎn)品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景：

二、單選框（Radio）和多選框（Checkbox）

1. 來源

1）單選框

單選框一般被認(rèn)為來源于收音機(Radio)上的物理按鈕，當(dāng)一個按鈕被按下時，另一個按鈕將會被彈起，使得永遠只有一個按鈕處于被按下的狀態(tài)。

這種說法可能也不夠嚴(yán)謹(jǐn)，因為收音機上的按鈕在被按下后，不僅呈現(xiàn)出了“按下”的狀態(tài)，同時也會立馬觸發(fā)收音機的廣播，即立即生效。實際上絕大多數(shù)UI界面中無論單選框還是多選框一般都是僅作為錄入，觸發(fā)生效往往需要配合“提交”操作來進行。

2）多選框

多選框來源于生活中常見的各種多項選擇場景，如飯店菜單、考試多選題等。多選框一般也是作為內(nèi)容錄入的組件，一般在進行選擇后同樣需要配合后續(xù)的“提交”動作，就像選擇菜品后下單，選擇答案后交卷，這種“選擇類”場景多用在表單或者表格中。

多選框還有另一種“設(shè)置類”場景，這種場景下多選框用于啟用某種模式、應(yīng)用某項設(shè)置，與開關(guān)（Switch）非常類似，這也使得多選框在實際產(chǎn)品中的應(yīng)用要比單選框復(fù)雜得多，后文將詳細(xì)闡述多選框與開關(guān)的使用區(qū)別。

2. 簡單定義及外觀樣式

1）單選框

可以概括為從最少兩個或兩個以上的互斥關(guān)系選項之中選擇一項的組件，外觀樣式通常由“圓形外框+文字標(biāo)簽”組成，選中時圓形外框樣式發(fā)生改變表明選中狀態(tài)。

2）多選框

可以概括為從多個并列關(guān)系的選項中選擇多個的組件，多選框最少可以一個都不選。外觀樣式通常由“圓形或方形外框+文字標(biāo)簽”組成，選中時一般在外框中出現(xiàn)√表明選中狀態(tài)。與單選框相比多選框還有一種特殊的“半選中狀態(tài)”（half-selected）,一般出現(xiàn)在表格（Table）或者樹選擇（Tree select）中。

3. 交互細(xì)節(jié)

1）觸發(fā)區(qū)域

單選框和多選框本身外框尺寸都比較小，因此需要將觸發(fā)區(qū)域增大至整個標(biāo)簽范圍，方便用戶點擊

2）排版

單選框和多選框在B端各類表單中應(yīng)用較多，在頁面空間允許的范圍內(nèi)，最好將選項縱向?qū)R排列，方便用戶直觀比較，需要橫向排布時，選項間應(yīng)該設(shè)置清晰明顯的間隔。

3）單選框的容錯機制

單選框在選擇過后一定要有一個選中項，因此就不能恢復(fù)至“空狀態(tài)”。在比較典型的社交場景中，一些涉及隱私的信息比如婚姻狀態(tài)選擇，可以給用戶提供諸如“保密”“不展示”之類的選項，防止用戶在選擇之后無法回退。

4. 單選框、多選框和下拉選擇（Select）的使用辨析

對比單選框、多選框和下拉選擇的外觀樣式不難發(fā)現(xiàn)，它們之間最重要的區(qū)別在于信息傳達效率和包容度的不同。

1）單選框和多選框的特點

單選框和多選框的所有選項信息都是直接暴露出來，如果選項過多將占用較多界面空間并且影響用戶的閱讀效率和界面整體規(guī)整度，信息包容度低但信息傳達直觀高效；

2）下拉選擇的特點

下拉選擇則是收在下拉菜單里，只有選擇值是用戶一眼能看到的，信息包容度高，節(jié)省空間，與其他輸入類組件并用時能保持整體界面的規(guī)整度，但每次都得點開再進行選擇也犧牲了一定的信息傳達效率和操作便利性。

3）適用單選框和多選框的場景

因此，單選框和多選框更適用于選項數(shù)量較少（一般不超過5個），有一定界面編排空間，且用戶需要直觀看到不同選項內(nèi)容并進行比較選擇的場景，如選擇會員購買方案。

4）適用下拉選擇的場景

相反，下拉選擇更適用于選項數(shù)量較多，表單配置復(fù)雜、包含各類不同樣式組件或界面空間不足，且用戶對于被隱藏的選項內(nèi)容有一定預(yù)期的場景，比如選擇省份。同時下拉器擴展性更高，下拉菜單可以進行多種類型的變體設(shè)計，滿足不同業(yè)務(wù)場景的需求。

三、開關(guān)（Switch）

1. 來源

開關(guān)（Switch）這個組件就是模仿現(xiàn)實生活中的開關(guān)而設(shè)計的，現(xiàn)實生活中燈的開關(guān)一按，燈馬上就亮了，因此開關(guān)有一個最大的特征：即時性。這在Ant Design設(shè)計系統(tǒng)的全局規(guī)則中也給出了注釋：“當(dāng)用戶切換「開關(guān)」按鈕將直接觸發(fā)狀態(tài)改變“，因此不同于單選框和多選框這種錄入型組件，開關(guān)同時兼?zhèn)滗浫牒陀|發(fā)兩種屬性。

2. 簡單定義及樣式

開關(guān)是一種特殊的選擇組件，只能從“開啟/關(guān)閉”兩種狀態(tài)選擇其一，并且選擇的結(jié)果會立即生效，通常點擊后頁面或者開關(guān)本身會有加載效果，或者點擊后給出反饋，告知用戶操作已生效。

3. 開關(guān)和多選框的使用辨析

上面提到復(fù)選框也經(jīng)常作為開啟某種模式或者應(yīng)用某類設(shè)置使用，在這種場景下它與開關(guān)的邏輯十分相似，讓人容易混淆。對于這兩種組件的使用區(qū)別當(dāng)前已有很多討論，說法各異，這里根據(jù)我自己的探究和經(jīng)驗，從以下幾點闡述下自己的看法：

1）開關(guān)的即時性

開關(guān)的即時性決定了當(dāng)開關(guān)與需要提交的表單一起出現(xiàn)時會存在矛盾，因此在表單中進行狀態(tài)選擇時，盡量選擇單選框、多選框，避免使用開關(guān)。

2）開關(guān)更適合控制一組設(shè)置嗎

蘋果官方人機界面指南中指出“開關(guān)比復(fù)選框具有更多的視覺權(quán)重，因此當(dāng)它控制的功能比復(fù)選框通常更多時，它看起來更好。例如，您可以使用開關(guān)讓人們打開或關(guān)閉一組設(shè)置”，然而在復(fù)選框的設(shè)計指南中又舉了用復(fù)選框控制一組設(shè)置的例子。

再來看一個飛書的例子，飛書管理后臺中使用了開關(guān)來控制一組設(shè)置的開啟，而在飛書客戶端的設(shè)置里用的都是復(fù)選框。

對于這個問題，個人認(rèn)為蘋果官方人機指南所說的因為開關(guān)比復(fù)選框具有更多視覺權(quán)重，所以更適合用來控制一組設(shè)置的說法并不準(zhǔn)確，復(fù)選框本身也具有明顯的選中和非選中狀態(tài)，盡管開關(guān)組件自身大小以及在視覺效果上可進行設(shè)計的空間都更大，但是好像并不足以成為決定性的因素。

同時因為開關(guān)的即時性，如果是在需要提交的表單或者模態(tài)彈窗中用開關(guān)控制一組設(shè)置，反而是多選框更合適。

3）從組件的來源分析

從組件的來源及發(fā)展歷史來看，勾選的交互是基于PC鍵鼠操作設(shè)計的，單選框和多選框組件本身尺寸較小，因而觸發(fā)區(qū)域會擴大至整體標(biāo)簽區(qū)域，方便鼠標(biāo)點擊；而開關(guān)是誕生于移動設(shè)備觸控交互的組件，在移動端界面本身配置就比較簡化，這時候配合開關(guān)自身相對較大的觸發(fā)區(qū)域，用手指點擊起來非常方便順暢。

而在PC端，因為屏幕尺寸更大，同時很多B端系統(tǒng)配置項多、界面布局相較移動端要復(fù)雜很多，這時候要把鼠標(biāo)移至開關(guān)熱區(qū)去點擊，反而沒有勾選框來得方便，這種操作體驗在一個縱列中有多個連續(xù)的開關(guān)時尤為明顯。

4）我的觀點

依據(jù)開關(guān)的即時生效特性，開關(guān)更適合用在不需要提交操作的頁面中，用來控制功能或設(shè)置的開啟/關(guān)閉，在需要提交操作的表單或者彈窗中，建議使用多選框。

開關(guān)和勾選框都可以用來控制一組設(shè)置的開啟/關(guān)閉，使用開關(guān)進行控制時，最好將它控制的下屬組件都設(shè)置為立即生效，這取決于設(shè)置本身對于系統(tǒng)的影響，如果設(shè)置對于系統(tǒng)重要功能影響較大，則建議改用多選框去控制，讓用戶多一步“提交”操作進行確認(rèn)，提升容錯性。

四、總結(jié)

回到開頭設(shè)置優(yōu)秀離職人才場景中的組件問題，這個需求流程涉及到的不只是在離職人員的編輯彈窗中操作，還涉及到在離職人員表格中的狀態(tài)展示和設(shè)置優(yōu)秀人才的單獨操作。首先彈窗中的編輯操作是需要提交的，用開關(guān)比較矛盾；單選框和多選框在彈窗中都可以適用，但考慮還需要在離職人員表格中的狀態(tài)展示和單獨編輯，為了保持整體的交互一致性，最后選用了單選框。

總的來說，這幾種選擇錄入類組件在B端系統(tǒng)中應(yīng)用非常廣泛，可能正是因為太司空見慣了，所以容易忽略它們細(xì)節(jié)上的特性和區(qū)別。盡管有時候這些組件的使用問題并不會對用戶體驗產(chǎn)生決定性的影響，但對細(xì)節(jié)的探究正是設(shè)計師嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度和工匠精神的體現(xiàn)，只有秉持著這種對細(xì)節(jié)的打磨和追求才能不斷提升產(chǎn)品的用戶體驗。

另外雖然文中做了一些各個組件的特性和適用總結(jié)，但可能在不同產(chǎn)品和系統(tǒng)中情況會更加復(fù)雜，需要設(shè)計師根據(jù)實際情況靈活處理。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)