我們UI設(shè)計師在界面設(shè)計的時候經(jīng)常會使用到單選按鈕、復(fù)選框、開關(guān)這些選擇控件，它們是設(shè)計中經(jīng)常會使用到的讓用戶進(jìn)行選擇的控件。盡管它們在用戶界面中是常用的組件，但設(shè)計師、產(chǎn)品經(jīng)理在為他們的任務(wù)選擇合適的組件時，仍然會有很多現(xiàn)實(shí)的麻煩，而我們則需要更認(rèn)真地探究其中的細(xì)節(jié)。
良好的掌握每個組件的使用場景，可以更加積極的幫助用戶體驗產(chǎn)品。本文通過結(jié)合實(shí)際案例與思考，與各位分享這類選擇控件在web端的使用邏輯與細(xì)節(jié)差異，希望能對設(shè)計工作帶來一定的指導(dǎo)意義。
當(dāng)我們需要用戶在兩個選項中選擇一個選項時，在這種情況下可以使用三種控件：單個復(fù)選框、兩個單選按鈕或者開關(guān)，那么我們應(yīng)該如何做出抉擇呢？
感覺似乎使用Radio單選按鈕、Checkbox復(fù)選框和Switch切換開關(guān)這三個組件好像都是可以的。下面文中會對于這三個組件的基本特點(diǎn)、使用準(zhǔn)則，以及常見場景等的探討來告知設(shè)計師們該如何去做出正確的選擇。
要搞清楚這些組件的使用問題，我們需要來了解一下這些組件的由來與用法場景。
選擇控件（Selection Control）：是一種供用戶選擇不同選項的，常用于表單、設(shè)置頁等。它一般分為三類：單選按鈕（Radio）、復(fù)選框（Checkbox） 和開關(guān)（Switch）。
不論是單選按鈕、復(fù)選框還是開關(guān)，他們都能在現(xiàn)實(shí)世界中找到事例。這些組件是將現(xiàn)實(shí)生活中的事物映射反應(yīng)到界面設(shè)計中，使得用戶可以更加簡單高效地理解他們本身所代表的交互含義，通過官方定義的“建議”用來指導(dǎo)標(biāo)準(zhǔn)化使用。
單選按鈕、復(fù)選框、開關(guān)組件它們都具有不同的時效性。
單選按鈕/復(fù)選框本質(zhì)上只是變輸入為選擇的快捷方式，當(dāng)需要用戶輸入的內(nèi)容只有幾種固定的格式時，可以通過變輸入為選擇，這樣不僅節(jié)約時間，也能避免輸入出錯，但這需要提托頁面中的其他觸發(fā)組件來保存和執(zhí)行這樣的操作。開關(guān)這類組件被點(diǎn)擊后會立刻執(zhí)行，并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。
如何才能正確的選擇合適的控件，這就需要從了解每一個組件開始。
單選按鈕（Radio）最早的設(shè)計模型來源于老式收音機(jī)上用于頻率和預(yù)設(shè)電臺之間切換的物理按鍵。當(dāng)其中一個按鍵被按下時，所有其他的按鍵都會被彈出，被按下的那個按鍵就成為了唯一一個處于“按下”狀態(tài)的選中按鈕。
單選按鈕將這一物理特征進(jìn)行了隱喻設(shè)計，是一種涇渭分明的表現(xiàn)。
但是感覺這樣的說法可能有些不嚴(yán)謹(jǐn)。從物理世界演化到UI后，這個組件有了交互上的變化，UI設(shè)計中的單選按鈕功能只是錄入內(nèi)容，并不立即執(zhí)行，而收音機(jī)的物理按鍵卻能立即觸發(fā)（換臺）操作，所以單選按鈕的使用是在不斷的演變中發(fā)展變化著，未來也許還有新的改變。
UI概念是由Xerox PARC的研究首次引入的，它是一家研發(fā)公司，應(yīng)用業(yè)務(wù)涉及到常用的計算機(jī)技術(shù)，包括：以太網(wǎng)、圖形用戶界面、編程、鼠標(biāo)等。Xerox Star 8010工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。
單選按鈕是將所有信息條件暴露給用戶，它不像開關(guān)在使用上帶有猜測、探索的必要。
1）
標(biāo)識性：單選按鈕通常以圓形圖標(biāo)的形式呈現(xiàn)，旁邊附有文字說明，用于表示選項的內(nèi)容。這種設(shè)計使得單選按鈕易于用戶識別和操作。
2）
互斥性：僅允許用戶在一組選項中選擇其中一項。
3）
直觀性：每個單項選擇都非常直觀，它會公開所有可用選項，用戶能夠一眼看到所有可用的選項并做出選擇。如果希望用戶明確閱讀完所有選項，則最好使用單選按鈕。
4）
拓展性：單選按鈕的拓展性更強(qiáng)，相對于復(fù)選框、開關(guān)的布爾值，單選按鈕能承載兩個或兩個以上的選項。
5）
默認(rèn)值：單選會提供默認(rèn)值選項，且默認(rèn)值可以承載具體內(nèi)容。
單選按鈕是主要用于兩個或更多選項列表的選擇器，列表中的所有選項是相互排斥的，用戶必須清楚準(zhǔn)確地選擇一個選項。
1）當(dāng)用戶點(diǎn)擊一個未選擇的單選選項時，它將取消選擇先前選擇的任何其他選項。
2）要為用戶提供默認(rèn)選項，確保它對于用戶來講是最安全或者最可能的選項。
3）選擇較少的情況下使用單選按鈕組件更好，但選項一旦較多，例如七八個的時候就不太適合一一展開，這會占用很多空間，因此將選項收起來放在下拉選單里會比較合適。
4）清楚表明單選按鈕各個狀態(tài)，才能使用戶更明確使用，達(dá)到設(shè)計目的。
1）讓用戶明確知道單選、復(fù)選的區(qū)別，強(qiáng)調(diào)各個選項的不同
不同的選項內(nèi)容，如果采用復(fù)選框，用戶需要在兩個差距較大的選項中去思考，延長考慮時間，使得用戶更為焦躁。
2）開啟/關(guān)閉的單選狀態(tài)，建議使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，復(fù)選框?qū)τ谠诳臻g、視覺焦點(diǎn)上使用更為集中，如果只針對開啟/關(guān)閉的單選狀態(tài)，則不建議選擇單選按鈕，推薦使用復(fù)選框。
3）每個選項都關(guān)聯(lián)內(nèi)容時，使用單選按鈕
如果默認(rèn)選項內(nèi)容設(shè)計的好，會讓更多人保持選擇默認(rèn)選項。
在表單設(shè)計中一個不錯的默認(rèn)選項，會讓很多人保持選擇默認(rèn)選項，提升表單操作效率。下圖案例如果采用復(fù)選框或者開關(guān)控件，用戶就不得不去思考開啟后是什么，還要擔(dān)心理解開啟/關(guān)閉后帶來的影響，但對于絕大多數(shù)用戶來說，系統(tǒng)默認(rèn)內(nèi)容無需改動，給用戶提供的默認(rèn)選擇，一般是安全、方便的選項。
4）較長需隱藏拆分的內(nèi)容情況，使用單選按鈕
在界面設(shè)計中，如果遇到的內(nèi)容需要重新組織或者拆分時，選擇使用單選按鈕組件。不僅能夠做到信息簡潔，也能夠提高用戶的瀏覽效率。
如果選項文字名稱較長，需要添加說明，這時單選組件承載的信息較多，同時使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向，眼球動線移動幅度較小，信息獲取體驗更佳。如果選項文字較少，也可橫排不占用太多的垂直空間。
單選按鈕總是默認(rèn)選中一個選項，不應(yīng)該展示沒有默認(rèn)選擇的單選組件。這個規(guī)則的唯一例外情況是在使用單選按鈕進(jìn)行用戶問卷選擇時，使用單選按鈕在所有選項列表中要有相同的視覺分量，使用戶從列表中選擇任何選項的可能性是相等的。默認(rèn)被選中的單選框設(shè)計可以為用戶提供明確的建議。默認(rèn)的選項可以引導(dǎo)用戶做出最佳選擇，并增強(qiáng)他們繼續(xù)完成任務(wù)的信心。
單選按鈕、復(fù)選框是UI設(shè)計中最小的交互式元素之一，因此它們需要有一個易于訪問的點(diǎn)擊區(qū)域。單選組件交互操作時需要讓用戶不僅通過單擊或點(diǎn)擊該小控件，還可以單擊標(biāo)簽相關(guān)聯(lián)的文本來選擇一個選項，確保用戶可以單擊單選控件或標(biāo)簽文本上的任意一個選項時都易于操作。
單選按鈕不應(yīng)該有什么子選項，單選按鈕的設(shè)計初衷是讓用戶在多個選項中選擇一個，而不是在一個選項內(nèi)部進(jìn)行進(jìn)一步的選擇。單選按鈕通常與RadioGroup一起使用，用于將多個單選按鈕組合為一組，確保同一組內(nèi)的單選按鈕只能有一個被選中。錯誤的排列會讓用戶感到困擾，所有的選項要對齊放置在同一層級。
當(dāng)選項小于5個，應(yīng)考慮使用單選按鈕，
用戶可以不需要任何點(diǎn)擊或輸入操作即可馬上瀏覽所有選項并直接點(diǎn)擊選擇出來。
當(dāng)選項只能選擇一個，且必須選擇1個時，應(yīng)使用單選按鈕。
如果無法保證全面，需提供“其他”選項，比如在婚姻狀態(tài)里，除已婚、未婚外，如果你不知道還有別的什么狀態(tài)，最好提供“其他”選項作為補(bǔ)充，否則諸如離異、喪偶等情況會無法使用該系統(tǒng)。
復(fù)選框的物理原型來自于紙張上的多選題，例如餐廳的菜單，選多選少互不影響，并且用戶傾向于用?這個符號來勾選，這個符號從古代商號記流水賬核查到現(xiàn)在教師批閱作業(yè)的“對勾”，無一不表示著“正確、認(rèn)可”。它代表的是一種選擇，而現(xiàn)實(shí)中的多選題，往往是非時效性的，勾選之后不會立即生效。
復(fù)選框既可以是單個選項，也可以是可供選擇的一組選項。當(dāng)用戶可以選擇任意數(shù)量的選項，包括零個、一個或幾個時可使用復(fù)選框組件。集合中的每個復(fù)選框都獨(dú)立于其他所有復(fù)選框，因此選中一個復(fù)選框不會對其他復(fù)選框產(chǎn)生任何影響。而復(fù)選框讓用戶在兩個選項之間進(jìn)行選擇，勾選后和未勾選表示則可表示“是/否、要/不要、開啟/關(guān)閉…” 等結(jié)果，準(zhǔn)確的使用復(fù)選框也需要認(rèn)清復(fù)選框的各種狀態(tài)，才能更好的表示選項意義。
1）直觀性：每個復(fù)選框通常由一個方框和一個標(biāo)簽組成，標(biāo)簽用于描述選項內(nèi)容，用戶可以通過點(diǎn)擊方框來切換其選中狀態(tài)。
2）非互斥性：復(fù)選框通常用戶表示一組非互斥的選項，即選擇一個不會影響其他選項狀態(tài)。
3）多選性：復(fù)選框允許用戶從一組選項中選擇一個或多個，與單選按鈕不同，復(fù)選框的選中狀態(tài)是獨(dú)立的，選項之間相互獨(dú)立且相關(guān)，用戶可以同時選中多個復(fù)選框。
4）公開性：復(fù)選框可公開所有可用選項，用戶一眼能夠看到所有可用的選項并做出選擇。
5）靈活性：復(fù)選框可以用于多種場景，如在線調(diào)研、注冊表單等，能夠提高用戶體驗和效率。
1）為了方便用戶快速理解，復(fù)選框的選項內(nèi)容一般是一句話，不用逗號隔開。
2）父級復(fù)選框允許快速便捷選擇或取消選擇所有項目。
3）復(fù)選框表示狀態(tài)，用戶可以延遲提交的交互操作。
4）復(fù)選框作為單選狀態(tài)時，操作對象和選項主體內(nèi)容視覺焦點(diǎn)是不分開的，選擇后就知道被選中了（比如登錄頁面中的用戶需知）。
5）復(fù)選框也可直接表示選項內(nèi)容的開啟、關(guān)閉。
1) 使用復(fù)選框代表用戶清楚會發(fā)生什么
如果使用單選或開關(guān)，會發(fā)現(xiàn)視覺干擾特別嚴(yán)重，一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個選項的開啟關(guān)閉狀態(tài)。如果排版受限制，可以將復(fù)選框放到標(biāo)簽的右側(cè)對齊。
2）復(fù)選框的標(biāo)簽文本要措辭主動
使用復(fù)選框，要保證選項后標(biāo)簽文本的措辭積極主動，而不是否定的。這將幫助用戶理解如果打開復(fù)選框會發(fā)生什么。
3) 提前告知用戶，提示消息可減少復(fù)選框錯誤選擇概率
如果用戶必須從列表中選擇一些選項，您應(yīng)該在用戶開始執(zhí)行之前告知用戶，通過顯示提示類似“您應(yīng)該至少選擇X個選項”的消息，來減少用戶復(fù)選框錯誤選擇的機(jī)率。
一般情況下，復(fù)選框不會像開關(guān)一樣點(diǎn)擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確，更有助于信息防錯。如果在設(shè)置頁面，復(fù)選框也可單獨(dú)作為設(shè)置且立即生效。
復(fù)選組件的選項信息和復(fù)選框在一起，特別是對于批量填寫或設(shè)置多個字段，使用復(fù)選框效率更高。
5）用復(fù)選框控制表單局部細(xì)節(jié)
如果控制對象的功能是表單頁面的一個局部或信息內(nèi)容不多，用戶也清楚了解選擇后是什么，這種時候復(fù)選框更適合。我們不需要過重的給用戶強(qiáng)調(diào)是什么，用復(fù)選框比使用開關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。
在表單中，同個問題中提供多個選項時，使用復(fù)選框。勾選能直接表明“要”或“不要”。
只有“選擇”或”取消選擇”一個顯而易見的選項時，更適合使用復(fù)選框。
8）存在父子嵌套關(guān)系的分組，多選項能清晰表達(dá)中間選擇狀態(tài)。
未全選中中間狀態(tài)表示在列表中選擇了多個子選項（但不是全部），這時，開關(guān)按鈕不能表示部分選項被選中的狀態(tài)，單選按鈕亦不能表示嵌套關(guān)系。
開關(guān)組件是現(xiàn)實(shí)生活中仿照物理開關(guān)按鈕在界面設(shè)計中的映射，提供了兩種最簡單、直接的對立選項，比如開/關(guān)、啟動/禁用等。它就像生活中控制燈泡的開關(guān)，當(dāng)我們?nèi)ゲ僮鏖_關(guān)時，燈泡會點(diǎn)亮或者熄滅，會對事物立即產(chǎn)生影響。它的意符必須明確，不然用戶不知道即將要啟動或者關(guān)閉什么
。
在界面設(shè)計中，開關(guān)也同樣具備即時觸發(fā)的特性，如打開Wi-Fi、開啟暗黑模式等，
由于開關(guān)具備很明顯的在用戶心中扎根的隱喻心智，相較于復(fù)選組件而言，操作前后的狀態(tài)更明顯，感知更強(qiáng)烈。
開關(guān)組件提示用戶在兩個互斥選項中進(jìn)行選擇，并且總是有一個默認(rèn)值。當(dāng)用戶必須回答是或否問題和二進(jìn)制操作，如啟用或禁用特定設(shè)置時，它是最合適的組件。開關(guān)組件也屬于雙態(tài)按鈕，是指有開和關(guān)兩個兩種狀態(tài)，是在兩個狀態(tài)之間切換。
在使用開關(guān)組件時要注意需要提供足夠的視覺反饋，告知用戶什么狀態(tài)下是開著的。
1）直觀性：開關(guān)切換組件的設(shè)計通常很直觀，開關(guān)主體選項信息和開關(guān)組件是分離的，兩個視覺焦點(diǎn)，用戶可以通過滑動滑塊來改變狀態(tài)，而不需要閱讀額外的說明和標(biāo)簽。
2）二元性：開關(guān)切換組件表示兩種相反且互斥的狀態(tài)，通常多用在表示“開啟/關(guān)閉”，主要在選項中來回切換，這種二元性使得它非常適合于需要明確狀態(tài)切換的場景。
3）及時性：當(dāng)用戶操作開關(guān)時，相關(guān)的功能和設(shè)置會立即給予用戶反饋，無需額外的確認(rèn)步驟。
4）易用性：開關(guān)組件簡單易懂，即使技術(shù)不太熟悉的用戶也能快速學(xué)會如何使用。
5）可訪問性：現(xiàn)在的開關(guān)設(shè)計考慮到可訪問性，確保所有用戶，包括有視覺或運(yùn)動障礙的人，都能方便地使用。
1）當(dāng)用戶點(diǎn)擊一個開關(guān)時，其對應(yīng)的動作立即生效。
2）由于開關(guān)顯示實(shí)際狀態(tài)，所以有時狀態(tài)變化會有延遲。在這種情況下，可使用"處理中"的狀態(tài)動畫，減少用戶焦慮。
3）開關(guān)組件沒有hover效果，有動作效果，用手指的切換更容易，這個組件非常適合應(yīng)用于移動設(shè)備。
4)避免使用開關(guān)控制局部細(xì)節(jié)或者次要的設(shè)置，開關(guān)的視覺權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。
5) 通常不要用開關(guān)替代復(fù)選框，如果在規(guī)范中定義了復(fù)選框，則盡可能保持一致的使用規(guī)范。
6）對象名稱要傳達(dá)清晰，讓用戶能夠明確感知操作后的動作開啟或關(guān)閉什么。
7）撥動開關(guān)的滑塊后如果狀態(tài)切換失敗，要馬上彈回來。
8）開關(guān)的規(guī)范做法是滑塊在左為“關(guān)”狀態(tài)，在右邊為“開”。
9）由于開關(guān)會立即執(zhí)行，所以若是危險的操作需要用戶再次確認(rèn)。
1）開關(guān)的文本內(nèi)容意思需傳達(dá)清晰開關(guān)主體的信息和按鈕是分離的，和單選、復(fù)選框不一樣。
用戶在點(diǎn)擊開關(guān)按鈕前，必須清晰告知用戶點(diǎn)擊后會發(fā)生什么，有時需要通過增加副標(biāo)題文字內(nèi)容來加以說明。
在表單填寫時，往往最終會有「提交」按鈕作為結(jié)束態(tài)，開關(guān)作為表單字段的填寫，用戶點(diǎn)擊后并不能夠立即生效，而是需要再次點(diǎn)擊「提交」按鈕，這樣處理會讓開關(guān)的特點(diǎn)所滯后。所以開關(guān)組件應(yīng)該提供即時生效的結(jié)果，它們不應(yīng)該要求用戶單擊保存或者提交按鈕來應(yīng)用新狀態(tài)。
開關(guān)的視覺權(quán)重較高，在復(fù)雜的表單信息中，它能夠快速吸引用戶注意力，給用戶以視覺提醒。
4）避免大面積使用開關(guān)，可使用它控制局部細(xì)節(jié)或者次要設(shè)置
開關(guān)在視覺感知上和按鈕有些接近，所以盡可能避免在表單中大量使用開關(guān)來控制局部層級內(nèi)容，推薦使用復(fù)選框來替代開關(guān)作為局部內(nèi)容控制。
5）作為高層級內(nèi)容控制或信息設(shè)置
開關(guān)作為總控制來顯示更高層級內(nèi)容，避免web表單中過多使用開關(guān)按鈕，會和其他的基本組件造成視覺干擾。少量使用既凸顯其重要性，又能提升用戶瀏覽表單的效率。
6）避免寫“開啟/關(guān)閉”帶動詞含義的字在組件上
如果要將說明文本放在按鈕里面，它們會讓人搞不懂是表示當(dāng)前狀態(tài)還是表示切換后的狀態(tài)，此時如果圖形本身狀態(tài)辨認(rèn)度較低，就會使這個問題尤為嚴(yán)重。所以，在設(shè)計開關(guān)時，一定要分別用艷麗和暗淡的顏色來表示開和關(guān)狀態(tài)。
用戶有可能不知道當(dāng)前點(diǎn)擊狀態(tài)到底是開啟還是關(guān)閉。我們可以使用文案輔助來清晰地傳達(dá)意圖和反饋。如以下場景，在文案中添加【開啟】二字結(jié)合開關(guān)按鈕使用，能有效減少用戶對于按鈕與文案之間關(guān)系的思考。請勿使用文案是“關(guān)閉”作為開啟的語序，增加理解成本。
1）選擇控件的已選狀態(tài)應(yīng)該要比未選狀態(tài)更加醒目。
2）我們把選擇控件所代表的內(nèi)容稱為標(biāo)簽，標(biāo)簽文本都應(yīng)該簡潔易懂，
避免使用否定詞匯，否則用戶還需要繞彎理解。開關(guān)標(biāo)簽被誤解尤為常見，如“請勿打開”、“補(bǔ)光燈關(guān)閉“、“延時關(guān)閉”這些都是不好的，它們都有否定詞。
3）把控件圖標(biāo)+文字一起作為可點(diǎn)擊區(qū)域，會使用戶操作更方便。
1）單選組件承載的信息量較多，如果希望用戶對比感知到兩者信息的明顯不同，那么推薦使用單選組件。
2） 復(fù)選框組件適用和拓展性極強(qiáng)，即可以單獨(dú)作為設(shè)置使用，也不用配合其他提交按鈕作為表單填寫的一部分。
3）開關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數(shù)個開關(guān)組件在表單中使用。
理論只是指導(dǎo)實(shí)踐的一部分，上述內(nèi)容方法可能只在用戶認(rèn)知和易用性之間，找到一個相對平衡點(diǎn)，在未來的設(shè)計中具體的使用場景情況，還是要具體問題具體分析。
文中主要概括總結(jié)了單選按鈕、復(fù)選框、開關(guān)的使用規(guī)范及案例。設(shè)計規(guī)范只是基于產(chǎn)品本身建立的一個標(biāo)準(zhǔn)，為了保持后續(xù)視覺統(tǒng)一而提供規(guī)范化的參考。
在實(shí)際的工作設(shè)計中，設(shè)計規(guī)范主要起到指導(dǎo)作用，每個產(chǎn)品需要根據(jù)各自的屬性特點(diǎn)和使用場景進(jìn)行靈活調(diào)整，讓組件規(guī)范個性化匹配自身產(chǎn)品的特點(diǎn)。
設(shè)計規(guī)范只是設(shè)計執(zhí)行中一個基本準(zhǔn)則和使用標(biāo)準(zhǔn)，遵循的同時既要根據(jù)各產(chǎn)品中不同的設(shè)計細(xì)節(jié)，查缺補(bǔ)漏、迭代優(yōu)化，將產(chǎn)品亮點(diǎn)與規(guī)范達(dá)到一種平衡，在標(biāo)準(zhǔn)的基礎(chǔ)上突出自身產(chǎn)品特點(diǎn)，讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處，望大家交流指正，一起探討學(xué)習(xí)。
作者：七色熒火
鏈接：https://www.zcool.com.cn/article/ZMTYzNTM4NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
