寫在前面

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

你是否有這種困惑？

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

感覺(jué)似乎使用 Radio 單選按鈕、Checkbox 復(fù)選框和 Switch 切換開關(guān)這三個(gè)組件好像都是可以的。下面文中會(huì)對(duì)于這三個(gè)組件的基本特點(diǎn)、使用準(zhǔn)則，以及常見場(chǎng)景等的探討來(lái)告知設(shè)計(jì)師們?cè)撊绾稳プ龀稣_的選擇。

要搞清楚這些組件的使用問(wèn)題，我們需要來(lái)了解一下這些組件的由來(lái)與用法場(chǎng)景。

一、什么是選擇控件

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

1. 選擇控件的由來(lái)與用法

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

2. 選擇控件的差異

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

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

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

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

1. Radio 單選按鈕

① 了解單選按鈕按鈕的由來(lái)

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

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

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

② 單選按鈕的特點(diǎn)

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

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

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

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

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

④ 案例場(chǎng)景分析

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

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

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

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

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

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

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

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

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

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

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

6）提供默認(rèn)選項(xiàng)，保持視覺(jué)分量相同

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

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

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

8）所有的選項(xiàng)要對(duì)齊

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

9）選項(xiàng)小于等于 5 個(gè)，可使用單選按鈕

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

10）選項(xiàng)只有且必須一個(gè)時(shí)，使用單選按鈕

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

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

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

2. Checkbox 復(fù)選框

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

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

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

② 復(fù)選框的特點(diǎn)

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

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

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

④ 案例分析

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

如果使用單選或開關(guān)，會(huì)發(fā)現(xiàn)視覺(jué)干擾特別嚴(yán)重，一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個(gè)選項(xiàng)的開啟關(guān)閉狀態(tài)。如果排版受限制，可以將復(fù)選框放到標(biāo)簽的右側(cè)對(duì)齊。

2）復(fù)選框的標(biāo)簽文本要措辭主動(dòng)

使用復(fù)選框，要保證選項(xiàng)后標(biāo)簽文本的措辭積極主動(dòng)，而不是否定的。這將幫助用戶理解如果打開復(fù)選框會(huì)發(fā)生什么。

3) 提前告知用戶，提示消息可減少?gòu)?fù)選框錯(cuò)誤選擇概率

如果用戶必須從列表中選擇一些選項(xiàng)，您應(yīng)該在用戶開始執(zhí)行之前告知用戶，通過(guò)顯示提示類似"您應(yīng)該至少選擇 X 個(gè)選項(xiàng)"的消息，來(lái)減少用戶復(fù)選框錯(cuò)誤選擇的機(jī)率。

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

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

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

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

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

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

在表單中，同個(gè)問(wèn)題中提供多個(gè)選項(xiàng)時(shí)，使用復(fù)選框。勾選能直接表明"要"或"不要"。

7）有且只有一個(gè)明顯選項(xiàng)時(shí)，用復(fù)選框

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

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

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

3. Switch 開關(guān)

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

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

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

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

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

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

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

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

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

④ 案例場(chǎng)景分析

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

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

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

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

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

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

4）避免大面積使用開關(guān)，可使用它控制局部細(xì)節(jié)或者次要設(shè)置

開關(guān)在視覺(jué)感知上和按鈕有些接近，所以盡可能避免在表單中大量使用開關(guān)來(lái)控制局部層級(jí)內(nèi)容，推薦使用復(fù)選框來(lái)替代開關(guān)作為局部?jī)?nèi)容控制。

5）作為高層級(jí)內(nèi)容控制或信息設(shè)置

開關(guān)作為總控制來(lái)顯示更高層級(jí)內(nèi)容，避免 web 表單中過(guò)多使用開關(guān)按鈕，會(huì)和其他的基本組件造成視覺(jué)干擾。少量使用既凸顯其重要性，又能提升用戶瀏覽表單的效率。

6）避免寫"開啟/關(guān)閉"帶動(dòng)詞含義的字在組件上

如果要將說(shuō)明文本放在按鈕里面，它們會(huì)讓人搞不懂是表示當(dāng)前狀態(tài)還是表示切換后的狀態(tài)，此時(shí)如果圖形本身狀態(tài)辨認(rèn)度較低，就會(huì)使這個(gè)問(wèn)題尤為嚴(yán)重。所以，在設(shè)計(jì)開關(guān)時(shí)，一定要分別用艷麗和暗淡的顏色來(lái)表示開和關(guān)狀態(tài)。

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

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

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

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

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

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

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

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

寫在最后

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

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

設(shè)計(jì)規(guī)范只是設(shè)計(jì)執(zhí)行中一個(gè)基本準(zhǔn)則和使用標(biāo)準(zhǔn)，遵循的同時(shí)既要根據(jù)各產(chǎn)品中不同的設(shè)計(jì)細(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í)。

作者：iFlytek STC UXD