寫在前面

我們 UI 設(shè)計師在界面設(shè)計的時候經(jīng)常會使用到單選按鈕、復(fù)選框、開關(guān)這些選擇控件，它們是設(shè)計中經(jīng)常會使用到的讓用戶進行選擇的控件。盡管它們在用戶界面中是常用的組件，但設(shè)計師、產(chǎn)品經(jīng)理在為他們的任務(wù)選擇合適的組件時，仍然會有很多現(xiàn)實的麻煩，而我們則需要更認真地探究其中的細節(jié)。良好的掌握每個組件的使用場景，可以更加積極的幫助用戶體驗產(chǎn)品。本文通過結(jié)合實際案例與思考，與各位分享這類選擇控件在 web 端的使用邏輯與細節(jié)差異，希望能對設(shè)計工作帶來一定的指導(dǎo)意義。

你是否有這種困惑？

當(dāng)我們需要用戶在兩個選項中選擇一個選項時，在這種情況下可以使用三種控件：單個復(fù)選框、兩個單選按鈕或者開關(guān)，那么我們應(yīng)該如何做出抉擇呢？

感覺似乎使用 Radio 單選按鈕、Checkbox 復(fù)選框和 Switch 切換開關(guān)這三個組件好像都是可以的。下面文中會對于這三個組件的基本特點、使用準(zhǔn)則，以及常見場景等的探討來告知設(shè)計師們該如何去做出正確的選擇。

要搞清楚這些組件的使用問題，我們需要來了解一下這些組件的由來與用法場景。

一、什么是選擇控件

選擇控件（Selection Control）：是一種供用戶選擇不同選項的，常用于表單、設(shè)置頁等。它一般分為三類：單選按鈕（Radio）、復(fù)選框（Checkbox） 和開關(guān)（Switch）。

1. 選擇控件的由來與用法

不論是單選按鈕、復(fù)選框還是開關(guān)，他們都能在現(xiàn)實世界中找到事例。這些組件是將現(xiàn)實生活中的事物映射反應(yīng)到界面設(shè)計中，使得用戶可以更加簡單高效地理解他們本身所代表的交互含義，通過官方定義的"建議"用來指導(dǎo)標(biāo)準(zhǔn)化使用。

2. 選擇控件的差異

單選按鈕、復(fù)選框、開關(guān)組件它們都具有不同的時效性。

單選按鈕/復(fù)選框本質(zhì)上只是變輸入為選擇的快捷方式，當(dāng)需要用戶輸入的內(nèi)容只有幾種固定的格式時，可以通過變輸入為選擇，這樣不僅節(jié)約時間，也能避免輸入出錯，但這需要提托頁面中的其他觸發(fā)組件來保存和執(zhí)行這樣的操作。開關(guān)這類組件被點擊后會立刻執(zhí)行，并觸發(fā)界面或系統(tǒng)中可明顯被用戶感知到的某些變化。

二、如何正確使用選擇控件

如何才能正確的選擇合適的控件，這就需要從了解每一個組件開始。

1. Radio 單選按鈕

① 了解單選按鈕按鈕的由來

單選按鈕（Radio）最早的設(shè)計模型來源于老式收音機上用于頻率和預(yù)設(shè)電臺之間切換的物理按鍵。當(dāng)其中一個按鍵被按下時，所有其他的按鍵都會被彈出，被按下的那個按鍵就成為了唯一一個處于"按下"狀態(tài)的選中按鈕。單選按鈕將這一物理特征進行了隱喻設(shè)計，是一種涇渭分明的表現(xiàn)。

但是感覺這樣的說法可能有些不嚴謹。從物理世界演化到 UI 后，這個組件有了交互上的變化，UI 設(shè)計中的單選按鈕功能只是錄入內(nèi)容，并不立即執(zhí)行，而收音機的物理按鍵卻能立即觸發(fā)（換臺）操作，所以單選按鈕的使用是在不斷的演變中發(fā)展變化著，未來也許還有新的改變。

UI 概念是由 Xerox PARC 的研究首次引入的，它是一家研發(fā)公司，應(yīng)用業(yè)務(wù)涉及到常用的計算機技術(shù)，包括：以太網(wǎng)、圖形用戶界面、編程、鼠標(biāo)等。Xerox Star 8010 工作站是第一款在圖形用戶界面中帶有單選按鈕的設(shè)備。

② 單選按鈕的特點

單選按鈕是將所有信息條件暴露給用戶，它不像開關(guān)在使用上帶有猜測、探索的必要。

1. 標(biāo)識性：單選按鈕通常以圓形圖標(biāo)的形式呈現(xiàn)，旁邊附有文字說明，用于表示選項的內(nèi)容。這種設(shè)計使得單選按鈕易于用戶識別和操作。
2. 互斥性：僅允許用戶在一組選項中選擇其中一項。
3. 直觀性：每個單項選擇都非常直觀，它會公開所有可用選項，用戶能夠一眼看到所有可用的選項并做出選擇。如果希望用戶明確閱讀完所有選項，則最好使用單選按鈕。
4. 拓展性：單選按鈕的拓展性更強，相對于復(fù)選框、開關(guān)的布爾值，單選按鈕能承載兩個或兩個以上的選項。
5. 默認值：單選會提供默認值選項，且默認值可以承載具體內(nèi)容。

③ 單選組件的用法準(zhǔn)則

單選按鈕是主要用于兩個或更多選項列表的選擇器，列表中的所有選項是相互排斥的，用戶必須清楚準(zhǔn)確地選擇一個選項。

1. 當(dāng)用戶點擊一個未選擇的單選選項時，它將取消選擇先前選擇的任何其他選項。
2. 要為用戶提供默認選項，確保它對于用戶來講是最安全或者最可能的選項。
3. 選擇較少的情況下使用單選按鈕組件更好，但選項一旦較多，例如七八個的時候就不太適合一一展開，這會占用很多空間，因此將選項收起來放在下拉選單里會比較合適。
4. 清楚表明單選按鈕各個狀態(tài)，才能使用戶更明確使用，達到設(shè)計目的。

④ 案例場景分析

1）讓用戶明確知道單選、復(fù)選的區(qū)別，強調(diào)各個選項的不同

不同的選項內(nèi)容，如果采用復(fù)選框，用戶需要在兩個差距較大的選項中去思考，延長考慮時間，使得用戶更為焦躁。

2）開啟/關(guān)閉的單選狀態(tài)，建議使用復(fù)選框

復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，復(fù)選框?qū)τ谠诳臻g、視覺焦點上使用更為集中，如果只針對開啟/關(guān)閉的單選狀態(tài)，則不建議選擇單選按鈕，推薦使用復(fù)選框。

3）每個選項都關(guān)聯(lián)內(nèi)容時，使用單選按鈕

如果默認選項內(nèi)容設(shè)計的好，會讓更多人保持選擇默認選項。

在表單設(shè)計中一個不錯的默認選項，會讓很多人保持選擇默認選項，提升表單操作效率。下圖案例如果采用復(fù)選框或者開關(guān)控件，用戶就不得不去思考開啟后是什么，還要擔(dān)心理解開啟/關(guān)閉后帶來的影響，但對于絕大多數(shù)用戶來說，系統(tǒng)默認內(nèi)容無需改動，給用戶提供的默認選擇，一般是安全、方便的選項。

4）較長需隱藏拆分的內(nèi)容情況，使用單選按鈕

在界面設(shè)計中，如果遇到的內(nèi)容需要重新組織或者拆分時，選擇使用單選按鈕組件。不僅能夠做到信息簡潔，也能夠提高用戶的瀏覽效率。

5）垂直排列單選，信息閱讀更佳

如果選項文字名稱較長，需要添加說明，這時單選組件承載的信息較多，同時使用垂直排列的方式能讓用戶有一致的閱讀瀏覽方向，眼球動線移動幅度較小，信息獲取體驗更佳。如果選項文字較少，也可橫排不占用太多的垂直空間。

6）提供默認選項，保持視覺分量相同

單選按鈕總是默認選中一個選項，不應(yīng)該展示沒有默認選擇的單選組件。這個規(guī)則的唯一例外情況是在使用單選按鈕進行用戶問卷選擇時，使用單選按鈕在所有選項列表中要有相同的視覺分量，使用戶從列表中選擇任何選項的可能性是相等的。默認被選中的單選框設(shè)計可以為用戶提供明確的建議。默認的選項可以引導(dǎo)用戶做出最佳選擇，并增強他們繼續(xù)完成任務(wù)的信心。

7）明確的可交互區(qū)域，讓用戶易于操作

單選按鈕、復(fù)選框是 UI 設(shè)計中最小的交互式元素之一，因此它們需要有一個易于訪問的點擊區(qū)域。單選組件交互操作時需要讓用戶不僅通過單擊或點擊該小控件，還可以單擊標(biāo)簽相關(guān)聯(lián)的文本來選擇一個選項，確保用戶可以單擊單選控件或標(biāo)簽文本上的任意一個選項時都易于操作。

8）所有的選項要對齊

單選按鈕不應(yīng)該有什么子選項，單選按鈕的設(shè)計初衷是讓用戶在多個選項中選擇一個，而不是在一個選項內(nèi)部進行進一步的選擇。單選按鈕通常與 RadioGroup 一起使用，用于將多個單選按鈕組合為一組，確保同一組內(nèi)的單選按鈕只能有一個被選中。錯誤的排列會讓用戶感到困擾，所有的選項要對齊放置在同一層級。

9）選項小于等于 5 個，可使用單選按鈕

當(dāng)選項小于 5 個，應(yīng)考慮使用單選按鈕，用戶可以不需要任何點擊或輸入操作即可馬上瀏覽所有選項并直接點擊選擇出來。

10）選項只有且必須一個時，使用單選按鈕

當(dāng)選項只能選擇一個，且必須選擇 1 個時，應(yīng)使用單選按鈕。

11）單選項確保選項既全面又互斥

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

2. Checkbox 復(fù)選框

① 了解復(fù)選框組件

復(fù)選框的物理原型來自于紙張上的多選題，例如餐廳的菜單，選多選少互不影響，并且用戶傾向于用?這個符號來勾選，這個符號從古代商號記流水賬核查到現(xiàn)在教師批閱作業(yè)的"對勾"，無一不表示著"正確、認可"。它代表的是一種選擇，而現(xiàn)實中的多選題，往往是非時效性的，勾選之后不會立即生效。

復(fù)選框既可以是單個選項，也可以是可供選擇的一組選項。當(dāng)用戶可以選擇任意數(shù)量的選項，包括零個、一個或幾個時可使用復(fù)選框組件。集合中的每個復(fù)選框都獨立于其他所有復(fù)選框，因此選中一個復(fù)選框不會對其他復(fù)選框產(chǎn)生任何影響。而復(fù)選框讓用戶在兩個選項之間進行選擇，勾選后和未勾選表示則可表示"是/否、要/不要、開啟/關(guān)閉…" 等結(jié)果，準(zhǔn)確的使用復(fù)選框也需要認清復(fù)選框的各種狀態(tài)，才能更好的表示選項意義。

② 復(fù)選框的特點

1. 直觀性：每個復(fù)選框通常由一個方框和一個標(biāo)簽組成，標(biāo)簽用于描述選項內(nèi)容，用戶可以通過點擊方框來切換其選中狀態(tài)。
2. 非互斥性：復(fù)選框通常用戶表示一組非互斥的選項，即選擇一個不會影響其他選項狀態(tài)。
3. 多選性：復(fù)選框允許用戶從一組選項中選擇一個或多個，與單選按鈕不同，復(fù)選框的選中狀態(tài)是獨立的，選項之間相互獨立且相關(guān)，用戶可以同時選中多個復(fù)選框。
4. 公開性：復(fù)選框可公開所有可用選項，用戶一眼能夠看到所有可用的選項并做出選擇。
5. 靈活性：復(fù)選框可以用于多種場景，如在線調(diào)研、注冊表單等，能夠提高用戶體驗和效率。

③ 復(fù)選框的用法準(zhǔn)則

1. 為了方便用戶快速理解，復(fù)選框的選項內(nèi)容一般是一句話，不用逗號隔開。
2. 父級復(fù)選框允許快速便捷選擇或取消選擇所有項目。
3. 復(fù)選框表示狀態(tài)，用戶可以延遲提交的交互操作。
4. 復(fù)選框作為單選狀態(tài)時，操作對象和選項主體內(nèi)容視覺焦點是不分開的，選擇后就知道被選中了（比如登錄頁面中的用戶需知）。
5. 復(fù)選框也可直接表示選項內(nèi)容的開啟、關(guān)閉。

④ 案例分析

1) 使用復(fù)選框代表用戶清楚會發(fā)生什么

如果使用單選或開關(guān)，會發(fā)現(xiàn)視覺干擾特別嚴重，一般表單內(nèi)容不需要特別去強調(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ù)選框錯誤選擇的機率。

4）復(fù)選框生效需配合提交按鈕

一般情況下，復(fù)選框不會像開關(guān)一樣點擊后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看選擇的內(nèi)容是否正確，更有助于信息防錯。如果在設(shè)置頁面，復(fù)選框也可單獨作為設(shè)置且立即生效。

復(fù)選組件的選項信息和復(fù)選框在一起，特別是對于批量填寫或設(shè)置多個字段，使用復(fù)選框效率更高。

5）用復(fù)選框控制表單局部細節(jié)

如果控制對象的功能是表單頁面的一個局部或信息內(nèi)容不多，用戶也清楚了解選擇后是什么，這種時候復(fù)選框更適合。我們不需要過重的給用戶強調(diào)是什么，用復(fù)選框比使用開關(guān)能使得表單結(jié)構(gòu)內(nèi)容更清晰。

6）多選項使用復(fù)選框

在表單中，同個問題中提供多個選項時，使用復(fù)選框。勾選能直接表明"要"或"不要"。

7）有且只有一個明顯選項時，用復(fù)選框

只有"選擇"或"取消選擇"一個顯而易見的選項時，更適合使用復(fù)選框。

8）存在父子嵌套關(guān)系的分組，多選項能清晰表達中間選擇狀態(tài)。

未全選中中間狀態(tài)表示在列表中選擇了多個子選項（但不是全部），這時，開關(guān)按鈕不能表示部分選項被選中的狀態(tài)，單選按鈕亦不能表示嵌套關(guān)系。

3. Switch 開關(guān)

① 了解開關(guān)組件

開關(guān)組件是現(xiàn)實生活中仿照物理開關(guān)按鈕在界面設(shè)計中的映射，提供了兩種最簡單、直接的對立選項，比如開/關(guān)、啟動/禁用等。它就像生活中控制燈泡的開關(guān)，當(dāng)我們?nèi)ゲ僮鏖_關(guān)時，燈泡會點亮或者熄滅，會對事物立即產(chǎn)生影響。它的意符必須明確，不然用戶不知道即將要啟動或者關(guān)閉什么。

在界面設(shè)計中，開關(guān)也同樣具備即時觸發(fā)的特性，如打開 Wi-Fi、開啟暗黑模式等，由于開關(guān)具備很明顯的在用戶心中扎根的隱喻心智，相較于復(fù)選組件而言，操作前后的狀態(tài)更明顯，感知更強烈。

開關(guān)組件提示用戶在兩個互斥選項中進行選擇，并且總是有一個默認值。當(dāng)用戶必須回答是或否問題和二進制操作，如啟用或禁用特定設(shè)置時，它是最合適的組件。開關(guān)組件也屬于雙態(tài)按鈕，是指有開和關(guān)兩個兩種狀態(tài)，是在兩個狀態(tài)之間切換。

在使用開關(guān)組件時要注意需要提供足夠的視覺反饋，告知用戶什么狀態(tài)下是開著的。

② 開關(guān)組件的特點

1. 直觀性：開關(guān)切換組件的設(shè)計通常很直觀，開關(guān)主體選項信息和開關(guān)組件是分離的，兩個視覺焦點，用戶可以通過滑動滑塊來改變狀態(tài)，而不需要閱讀額外的說明和標(biāo)簽。
2. 二元性：開關(guān)切換組件表示兩種相反且互斥的狀態(tài)，通常多用在表示"開啟/關(guān)閉"，主要在選項中來回切換，這種二元性使得它非常適合于需要明確狀態(tài)切換的場景。
3. 及時性：當(dāng)用戶操作開關(guān)時，相關(guān)的功能和設(shè)置會立即給予用戶反饋，無需額外的確認步驟。
4. 易用性：開關(guān)組件簡單易懂，即使技術(shù)不太熟悉的用戶也能快速學(xué)會如何使用。
5. 可訪問性：現(xiàn)在的開關(guān)設(shè)計考慮到可訪問性，確保所有用戶，包括有視覺或運動障礙的人，都能方便地使用。

③ 開關(guān)組件的用法準(zhǔn)則

1. 當(dāng)用戶點擊一個開關(guān)時，其對應(yīng)的動作立即生效。
2. 由于開關(guān)顯示實際狀態(tài)，所以有時狀態(tài)變化會有延遲。在這種情況下，可使用"處理中"的狀態(tài)動畫，減少用戶焦慮。
3. 開關(guān)組件沒有 hover 效果，有動作效果，用手指的切換更容易，這個組件非常適合應(yīng)用于移動設(shè)備。
4. 避免使用開關(guān)控制局部細節(jié)或者次要的設(shè)置，開關(guān)的視覺權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開關(guān)打開或關(guān)閉一組設(shè)置。
5. 通常不要用開關(guān)替代復(fù)選框，如果在規(guī)范中定義了復(fù)選框，則盡可能保持一致的使用規(guī)范。
6. 對象名稱要傳達清晰，讓用戶能夠明確感知操作后的動作開啟或關(guān)閉什么。
7. 撥動開關(guān)的滑塊后如果狀態(tài)切換失敗，要馬上彈回來。8）開關(guān)的規(guī)范做法是滑塊在左為"關(guān)"狀態(tài)，在右邊為"開"。9）由于開關(guān)會立即執(zhí)行，所以若是危險的操作需要用戶再次確認。

④ 案例場景分析

1）開關(guān)的文本內(nèi)容意思需傳達清晰

開關(guān)主體的信息和按鈕是分離的，和單選、復(fù)選框不一樣。
用戶在點擊開關(guān)按鈕前，必須清晰告知用戶點擊后會發(fā)生什么，有時需要通過增加副標(biāo)題文字內(nèi)容來加以說明。

2）立即生效的場景一般使用開關(guān)組件

在表單填寫時，往往最終會有「提交」按鈕作為結(jié)束態(tài)，開關(guān)作為表單字段的填寫，用戶點擊后并不能夠立即生效，而是需要再次點擊「提交」按鈕，這樣處理會讓開關(guān)的特點所滯后。所以開關(guān)組件應(yīng)該提供即時生效的結(jié)果，它們不應(yīng)該要求用戶單擊保存或者提交按鈕來應(yīng)用新狀態(tài)。

3）著重提醒用戶有風(fēng)險

開關(guān)的視覺權(quán)重較高，在復(fù)雜的表單信息中，它能夠快速吸引用戶注意力，給用戶以視覺提醒。

4）避免大面積使用開關(guān)，可使用它控制局部細節(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)辨認度較低，就會使這個問題尤為嚴重。所以，在設(shè)計開關(guān)時，一定要分別用艷麗和暗淡的顏色來表示開和關(guān)狀態(tài)。

7）語序和狀態(tài)要一致

用戶有可能不知道當(dāng)前點擊狀態(tài)到底是開啟還是關(guān)閉。我們可以使用文案輔助來清晰地傳達意圖和反饋。如以下場景，在文案中添加「開啟」二字結(jié)合開關(guān)按鈕使用，能有效減少用戶對于按鈕與文案之間關(guān)系的思考。請勿使用文案是"關(guān)閉"作為開啟的語序，增加理解成本。

三、選擇控件的總結(jié)思考

單選按鈕、復(fù)選框、開關(guān)組件在正確使用時需特別注意哪些？

1. 選擇控件的已選狀態(tài)應(yīng)該要比未選狀態(tài)更加醒目。
2. 我們把選擇控件所代表的內(nèi)容稱為標(biāo)簽，標(biāo)簽文本都應(yīng)該簡潔易懂，避免使用否定詞匯，否則用戶還需要繞彎理解。開關(guān)標(biāo)簽被誤解尤為常見，如"請勿打開"、"補光燈關(guān)閉"、"延時關(guān)閉"這些都是不好的，它們都有否定詞。
3. 把控件圖標(biāo)+文字一起作為可點擊區(qū)域，會使用戶操作更方便。

明確清楚單選按鈕、復(fù)選框、開關(guān)各組件的使用方法，才能設(shè)計出更加好用易用的產(chǎn)品。

1. 單選組件承載的信息量較多，如果希望用戶對比感知到兩者信息的明顯不同，那么推薦使用單選組件。
2. 復(fù)選框組件適用和拓展性極強，即可以單獨作為設(shè)置使用，也不用配合其他提交按鈕作為表單填寫的一部分。
3. 開關(guān)在表單結(jié)構(gòu)、各種控件內(nèi)容較多時，需要頁面清晰、避免過多的視覺突出，所以盡量避免讓無數(shù)個開關(guān)組件在表單中使用。

理論只是指導(dǎo)實踐的一部分，上述內(nèi)容方法可能只在用戶認知和易用性之間，找到一個相對平衡點，在未來的設(shè)計中具體的使用場景情況，還是要具體問題具體分析。

寫在最后

文中主要概括總結(jié)了單選按鈕、復(fù)選框、開關(guān)的使用規(guī)范及案例。設(shè)計規(guī)范只是基于產(chǎn)品本身建立的一個標(biāo)準(zhǔn)，為了保持后續(xù)視覺統(tǒng)一而提供規(guī)范化的參考。

在實際的工作設(shè)計中，設(shè)計規(guī)范主要起到指導(dǎo)作用，每個產(chǎn)品需要根據(jù)各自的屬性特點和使用場景進行靈活調(diào)整，讓組件規(guī)范個性化匹配自身產(chǎn)品的特點。

設(shè)計規(guī)范只是設(shè)計執(zhí)行中一個基本準(zhǔn)則和使用標(biāo)準(zhǔn)，遵循的同時既要根據(jù)各產(chǎn)品中不同的設(shè)計細節(jié)，查缺補漏、迭代優(yōu)化，將產(chǎn)品亮點與規(guī)范達到一種平衡，在標(biāo)準(zhǔn)的基礎(chǔ)上突出自身產(chǎn)品特點，讓其更具有優(yōu)秀的代表性。以上總結(jié)如果不妥之處，望大家交流指正，一起探討學(xué)習(xí)。

作者：iFlytek STC UXD