感謝導(dǎo)語(yǔ)：如何針對(duì)具體場(chǎng)景選擇合適得組件，是web表單設(shè)計(jì)中得常見(jiàn)問(wèn)題。那么，你知道開(kāi)關(guān)、單選、復(fù)選框等組件得適用場(chǎng)景該如何選擇么？本篇文章里，就該問(wèn)題做了詳細(xì)解答，一起來(lái)看一下吧。
在web表單設(shè)計(jì)中，我們會(huì)經(jīng)常遇到在開(kāi)關(guān)、單選、復(fù)選框三個(gè)組件得選擇使用上糾結(jié)，特別是只有兩種狀態(tài)下，比如開(kāi)啟/關(guān)閉、啟用/關(guān)閉、顯示/隱藏、同意/不同意、默認(rèn)/自定義……
我們發(fā)現(xiàn)使用Switch開(kāi)關(guān)、Radio單選和Checkbox復(fù)選這三個(gè)組件好像也都是可以得，這時(shí)應(yīng)該選擇哪個(gè)組件更合適呢？
感謝主要探討這三個(gè)組件得基本特點(diǎn)，以?及在web表單設(shè)計(jì)中，這三個(gè)組件使用上有什么區(qū)別，以及常見(jiàn)得場(chǎng)景如何去選擇。
文章概覽一、Switch 開(kāi)關(guān)?它就像是滅霸得響指1. 簡(jiǎn)要了解開(kāi)關(guān)開(kāi)關(guān)作為仿照物理開(kāi)關(guān)得映射，提供了兩種最為簡(jiǎn)單、直接得對(duì)立選項(xiàng)，比如開(kāi)/關(guān)、啟動(dòng)/禁用等。它就像生活中控制燈泡得開(kāi)關(guān)，燈泡立即亮起。所以它得意符也必須明確，不然用戶都不知道，即將要啟動(dòng)/關(guān)閉什么。
2.開(kāi)關(guān)組件得特點(diǎn)- 對(duì)象標(biāo)簽名稱須傳達(dá)清晰，能夠讓用戶能夠明確感知操作后得動(dòng)作開(kāi)啟或關(guān)閉什么；主體標(biāo)簽信息和按鈕是分離得，兩個(gè)視覺(jué)焦點(diǎn)；一般后會(huì)立即反饋；沒(méi)有hovering效果，有動(dòng)作效果，更適合手指操作；非W3C組織自家html標(biāo)記，品質(zhì)不錯(cuò)情況不支持 Javascript。
蘋(píng)果得「Human Interface Guidelines」有著這么一份對(duì)于開(kāi)關(guān)組件得使用規(guī)范定義，我們不妨可以借鑒。
1) 避免使用開(kāi)關(guān)控制局部細(xì)節(jié)或者次要得設(shè)置。開(kāi)關(guān)得視覺(jué)權(quán)重比較高，所以用它控制內(nèi)容較多更為合適，比如可以將它作為總開(kāi)關(guān)打開(kāi)或關(guān)閉一組設(shè)置。
2) 通常不要用開(kāi)關(guān)替代復(fù)選框。如果我們得規(guī)范中定義了復(fù)選框，則盡可能保持一致得使用規(guī)范。
4. 開(kāi)關(guān)使用場(chǎng)景舉例通過(guò)上述對(duì)開(kāi)關(guān)組件特點(diǎn)，結(jié)合蘋(píng)果組件得規(guī)范，我們基本可以梳理出以下幾條主要主要使用場(chǎng)景：
1）開(kāi)關(guān)得標(biāo)簽意符需傳達(dá)清晰
和單選、復(fù)選框不一樣得是，因?yàn)殚_(kāi)關(guān)主體得信息和按鈕是分離得。用戶在開(kāi)關(guān)按鈕前，必須清晰告知用戶后會(huì)發(fā)生什么，甚至有時(shí)我們需要通過(guò)增加副標(biāo)題來(lái)加以說(shuō)明。
2）一般只為立即生效得場(chǎng)景使用開(kāi)關(guān)按鈕
在表單填寫(xiě)時(shí)，往往最終會(huì)有「提交」按鈕作為結(jié)束態(tài)，開(kāi)關(guān)作為表單字段得填寫(xiě)，用戶后并不能夠立即生效，而是需要再次「提交」按鈕。
3）有風(fēng)險(xiǎn)，需著重提醒用戶
開(kāi)關(guān)得視覺(jué)權(quán)重較高，在復(fù)雜得表單信息中，它能夠很快吸引到用戶得注意力，并能夠給用戶以視覺(jué)提醒。
4）避免大面積使用開(kāi)關(guān)，使用它控制局部細(xì)節(jié)或者次要設(shè)置
開(kāi)關(guān)在視覺(jué)感知上它和按鈕上有些接近，所以盡可能避免在表單中大量使用開(kāi)關(guān)來(lái)控制局部層級(jí)內(nèi)容，這時(shí)推薦使用復(fù)選框來(lái)替代開(kāi)關(guān)作為局部。
5）把它作為高層級(jí)內(nèi)容控制或信息設(shè)置
把它用來(lái)作為總控制來(lái)顯示更高層級(jí)內(nèi)容，避免web表單中大面積得使用開(kāi)關(guān)按鈕，會(huì)和其他得基本組件造成視覺(jué)干擾。這樣可以既凸顯其重要性，又能提升用戶瀏覽表單得效率。
5. 小結(jié)開(kāi)關(guān)按鈕就像是滅霸得戒指，視覺(jué)突出且反應(yīng)快。用戶瀏覽表單、填寫(xiě)內(nèi)容組之間，一般不需要很強(qiáng)得視覺(jué)差異。如果填寫(xiě)得表單信息之間對(duì)比差異過(guò)大，開(kāi)關(guān)往往給用戶造成過(guò)大得視覺(jué)干擾，反而阻礙用戶瀏覽表單得效率。
二、Checkbox 復(fù)選框? 它是一個(gè)機(jī)器小能手1. 簡(jiǎn)要了解復(fù)選框讓用戶在兩個(gè)布爾值之間進(jìn)行選擇，勾選后和未勾選表示“是/否、要/不要、開(kāi)啟/關(guān)閉…” 等問(wèn)題。以下內(nèi)容主要討論單個(gè)復(fù)選框得使用情況。
2.復(fù)選框得特點(diǎn)1）為了便于用戶快速理解，一般復(fù)選框得標(biāo)簽內(nèi)容是一句話，不會(huì)用逗號(hào)去作隔開(kāi)。
2）作為單選狀態(tài)時(shí)，操作對(duì)象和標(biāo)簽主體內(nèi)容視覺(jué)焦點(diǎn)是不分開(kāi)得，選擇后就知道它被選中了。
3）可直接表示標(biāo)簽內(nèi)容得開(kāi)啟、關(guān)閉。
3. 場(chǎng)景舉例分析1) 用戶基本清楚會(huì)發(fā)生什么，使用復(fù)選框
如果使用開(kāi)關(guān)或者單選框，我們會(huì)發(fā)現(xiàn)視覺(jué)干擾特別嚴(yán)重，一般表單內(nèi)容不需要特別去強(qiáng)調(diào)每一個(gè)字段得開(kāi)啟狀態(tài)。當(dāng)然如果排版限制，我們也是可以將復(fù)選框放到標(biāo)簽得右側(cè)（放右側(cè)復(fù)選框需對(duì)齊）。
2）表單中得復(fù)選框生效，需要配合提交按鈕
一般情況下，表單填寫(xiě)中，復(fù)選框不會(huì)像開(kāi)關(guān)后立即生效，它需要配合提交按鈕生效。所以用戶在提交前可查看他們填寫(xiě)得表單，更有助于在信息防錯(cuò)。
（Ps. 在設(shè)置頁(yè)，復(fù)選框可單獨(dú)作為設(shè)置且立即生效。）復(fù)選框得主體標(biāo)簽信息和復(fù)選按鈕在一起，特別是對(duì)于批量填寫(xiě)或設(shè)置一批字段，使用復(fù)選框效率更高。
3）用復(fù)選框來(lái)控制表單局部細(xì)節(jié)
如上述，如果控制對(duì)象得功能是表單得一個(gè)局部，或信息內(nèi)容不是很多，用戶也清楚知道選擇后會(huì)是什么，這時(shí)候復(fù)選框更適合。
這時(shí)我們不需要過(guò)重地給用戶強(qiáng)調(diào)什么，用復(fù)選框會(huì)比使用開(kāi)關(guān)讓整個(gè)表單得結(jié)構(gòu)內(nèi)容更清晰。
4. 小結(jié)復(fù)選框就像是一個(gè)機(jī)器小能手，它得應(yīng)用拓展性比開(kāi)關(guān)更強(qiáng)，它既可以作為層級(jí)內(nèi)容使用，又可以作為設(shè)置項(xiàng)，后并立即生效。
在表單中，作為局部、或者細(xì)節(jié)內(nèi)容控制，使用復(fù)選框更合適。它也不會(huì)像單選按鈕閱讀有信息阻斷得問(wèn)題，不會(huì)像開(kāi)關(guān)有強(qiáng)視覺(jué)干擾，它會(huì)讓我們得視覺(jué)焦點(diǎn)更集中表單信息上。
三、Radio 單選按鈕? 白天不懂夜得黑1. 簡(jiǎn)要了解單選按鈕單選按鈕最早得設(shè)計(jì)模型，于收音機(jī)切換頻道得按鍵，當(dāng)我們按下其中一個(gè)，其他得按鈕就會(huì)被彈出，按下得那個(gè)按鈕就成為了選中得狀態(tài)。單選按鈕可謂是涇渭分明，有你不能有我。
2. 單選按鈕得特點(diǎn)單選按鈕得優(yōu)點(diǎn)是，將所有信息條件暴露給到用戶，它不像開(kāi)關(guān)在使用上帶有去猜測(cè)、探索得必要。
1）每個(gè)選擇都非常直觀，如果希望用戶閱讀完所有選項(xiàng)，用它再好不過(guò)了。
2）拓展性更強(qiáng)，相較于開(kāi)關(guān)、復(fù)選框得布爾值，單選能承載兩個(gè)或兩個(gè)以上選擇。
3）必須提供默認(rèn)值，且默認(rèn)值可以承載內(nèi)容。
3. 場(chǎng)景舉例分析1）需要讓用戶明確知道兩者得區(qū)別，甚至需要強(qiáng)調(diào)兩個(gè)選項(xiàng)得不同
如果采用復(fù)選框，用戶需要在兩個(gè)差距較大得選項(xiàng)中去作思考。
2）開(kāi)啟/關(guān)閉得單選狀態(tài)，使用復(fù)選框
復(fù)選框?qū)τ诮^大多數(shù)用戶都是非常清楚，使用復(fù)選框在空間、視覺(jué)焦點(diǎn)更是更集中得，所以如果只針對(duì)開(kāi)啟/關(guān)閉得狀態(tài)，推薦使用復(fù)選框
3）每個(gè)選項(xiàng)都關(guān)聯(lián)內(nèi)容時(shí)，使用單選按鈕
我們知道，如果默認(rèn)選項(xiàng)設(shè)計(jì)得好，會(huì)讓很多人保持選擇默認(rèn)選項(xiàng)。
下圖這個(gè)案例，如果采用復(fù)選框或者開(kāi)關(guān)，用戶就不得不去探索思考開(kāi)啟后是什么，還要擔(dān)心理解開(kāi)啟/關(guān)閉后帶來(lái)得影響，而對(duì)于絕大多數(shù)用戶來(lái)說(shuō)，這邊得報(bào)名設(shè)置系統(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）垂直排列單選，信息閱讀更佳
如果字段名稱較長(zhǎng)，需要添加副標(biāo)題加以說(shuō)明，這時(shí)單選按鈕承載得信息較多，使用垂直排列讓用戶有一致得起始閱讀線，眼球轉(zhuǎn)動(dòng)幅度最小，信息獲取體驗(yàn)更佳。如果標(biāo)簽文字較少，也可以橫排不至于占用太多得垂直空間。
4. 小結(jié)單選按鈕就是白天和黑夜，互不干擾得條件，希望用戶閱讀完這兩個(gè)選項(xiàng)，使用單選按鈕再好不過(guò)了，考慮到單選按鈕提供得默認(rèn)選項(xiàng)，提供得要是絕大多數(shù)用戶需要得，且是安全方便得，如果單選按鈕標(biāo)簽文字過(guò)多，在排版時(shí)垂直排列拓展性更強(qiáng)，閱讀體驗(yàn)更佳。
四、全文總結(jié)1）開(kāi)關(guān)更像是一個(gè)滅霸得戒指閃閃發(fā)光，不過(guò)在表單結(jié)構(gòu)、各種控件內(nèi)容較多，需要頁(yè)面清晰、避免過(guò)多得視覺(jué)突出，所以盡量避免讓無(wú)數(shù)個(gè)戒指閃亮中表單中。
2）復(fù)選框它更像是一個(gè)機(jī)器小能手，適用和拓展性極強(qiáng)，即可以單獨(dú)作為設(shè)置，不用配合其他提交按鈕，也可以作為表單填寫(xiě)得一部分。當(dāng)我們猶豫使用哪個(gè)組件時(shí)，選擇它一般不會(huì)錯(cuò)。
3）單選按鈕就像是白天和黑夜，完全不見(jiàn)彼此。單選條件承載得信息也較多，如果希望用戶對(duì)比感知到兩者信息得不同，那么使用單選按鈕。
4）最后理論永遠(yuǎn)只是指導(dǎo)實(shí)踐得一部分，上述內(nèi)容可能只是在用戶認(rèn)知和易用性之間，找到一個(gè)相對(duì)平衡得點(diǎn)，具體得使用場(chǎng)景情況，還是要具體問(wèn)題具體分析。
參考文獻(xiàn)
Nielsen Norman Group
Human Interface Guidelines
特別woshipm/pd/374314.html
特別woshipm/ucd/1267601.html
感謝由 等小高雜談 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝。
題圖來(lái)自Unsplash，基于CC0協(xié)議
