編輯導語：如何針對具體場景選擇合适的元件，是web表單設計中的常見問題。那麼，你知道開關、單選、複選框等元件的适用場景該如何選擇嗎？本篇文章裡，作者就該問題做了詳細解答，一起來看一下吧。
在web表單設計中，我們會經常遇到在開關、單選、複選框三個元件的選擇使用上糾結，特别是隻有兩種狀态下，比如開啟/關閉、啟用/關閉、顯示/隐藏、同意/不同意、預設/自定義……
我們發現使用Switch開關、Radio單選和Checkbox複選這三個元件好像也都是可以的，這時應該選擇哪個元件更合适呢？
本文主要探讨這三個元件的基本特點，以及在web表單設計中，這三個元件使用上有什麼差別，以及常見的場景如何去選擇。
文章概覽
一、Switch 開關•它就像是滅霸的響指
1. 簡要了解開關
開關作為仿照實體開關的映射，提供了兩種最為簡單、直接的對立選項，比如開/關、啟動/禁用等。它就像生活中控制燈泡的開關，點選燈泡立即亮起。是以它的意符也必須明确，不然使用者都不知道，即将要啟動/關閉什麼。
2.開關元件的特點
- 對象标簽名稱須傳達清晰，能夠讓使用者能夠明确感覺操作後的動作開啟或關閉什麼；
- 主體标簽資訊和按鈕是分離的，兩個視覺焦點；
- 一般點選後會立即回報；
- 沒有hovering效果，有動作效果，更适合手指操作；
- 非W3C組織官方html标記，極端情況不支援 Javascript。
3. 蘋果公司對開關元件的設計規範
蘋果的「Human Interface Guidelines」有着這麼一份對于開關元件的使用規範定義，我們不妨可以借鑒。
1) 避免使用開關控制局部細節或者次要的設定。開關的視覺權重比較高，是以用它控制内容較多更為合适，比如可以将它作為總開關打開或關閉一組設定。
2) 通常不要用開關替代複選框。如果我們的規範中定義了複選框，則盡可能保持一緻的使用規範。
4. 開關使用場景舉例
通過上述對開關元件特點，結合蘋果元件的規範，我們基本可以梳理出以下幾條主要主要使用場景：
1）開關的标簽意符需傳達清晰
和單選、複選框不一樣的是，因為開關主體的資訊和按鈕是分離的。使用者在點選開關按鈕前，必須清晰告知使用者點選後會發生什麼，甚至有時我們需要通過增加副标題來加以說明。
2）一般隻為立即生效的場景使用開關按鈕
在表單填寫時，往往最終會有「送出」按鈕作為結束态，開關作為表單字段的填寫，使用者點選後并不能夠立即生效，而是需要再次點選「送出」按鈕。
3）有風險，需着重提醒使用者
開關的視覺權重較高，在複雜的表單資訊中，它能夠很快吸引到使用者的注意力，并能夠給使用者以視覺提醒。
4）避免大面積使用開關，使用它控制局部細節或者次要設定
開關在視覺感覺上它和按鈕上有些接近，是以盡可能避免在表單中大量使用開關來控制局部層級内容，這時推薦使用複選框來替代開關作為局部。
5）把它作為高層級内容控制或資訊設定
把它用來作為總控制來顯示更高層級内容，避免web表單中大面積的使用開關按鈕，會和其他的基本元件造成視覺幹擾。這樣可以既凸顯其重要性，又能提升使用者浏覽表單的效率。
5. 小結
開關按鈕就像是滅霸的戒指，視覺突出且反應快。使用者浏覽表單、填寫内容組之間，一般不需要很強的視覺差異。如果填寫的表單資訊之間對比差異過大，開關往往給使用者造成過大的視覺幹擾，反而阻礙使用者浏覽表單的效率。
二、Checkbox 複選框• 它是一個機器小能手
1. 簡要了解複選框
讓使用者在兩個布爾值之間進行選擇，勾選後和未勾選表示“是/否、要/不要、開啟/關閉…” 等問題。以下内容主要讨論單個複選框的使用情況。
2.複選框的特點
1）為了便于使用者快速了解，一般複選框的标簽内容是一句話，不會用逗号去作隔開。
2）作為單選狀态時，操作對象和标簽主體内容視覺焦點是不分開的，選擇後就知道它被選中了。
3）可直接表示标簽内容的開啟、關閉。
3. 場景舉例分析
1) 使用者基本清楚會發生什麼，使用複選框
如果使用開關或者單選框，我們會發現視覺幹擾特别嚴重，一般表單内容不需要特别去強調每一個字段的開啟狀态。當然如果排版限制，我們也是可以将複選框放到标簽的右側（放右側複選框需對齊）。
2）表單中的複選框生效，需要配合送出按鈕
一般情況下，表單填寫中，複選框不會像開關點選後立即生效，它需要配合送出按鈕生效。是以使用者在送出前可檢視他們填寫的表單，更有助于在資訊防錯。
（Ps. 在設定頁，複選框可單獨作為設定且立即生效。）複選框的主體标簽資訊和複選按鈕在一起，特别是對于批量填寫或設定一批字段，使用複選框效率更高。
3）用複選框來控制表單局部細節
如上述，如果控制對象的功能是表單的一個局部，或資訊内容不是很多，使用者也清楚知道選擇後會是什麼，這時候複選框更适合。
這時我們不需要過重地給使用者強調什麼，用複選框會比使用開關讓整個表單的結構内容更清晰。
4. 小結
複選框就像是一個機器小能手，它的應用拓展性比開關更強，它既可以作為層級内容使用，又可以作為設定項，點選後并立即生效。
在表單中，作為局部、或者細節内容控制，使用複選框更合适。它也不會像單選按鈕閱讀有資訊阻斷的問題，不會像開關有強視覺幹擾，它會讓我們的視覺焦點更集中表單資訊上。
三、Radio 單選按鈕• 白天不懂夜的黑
1. 簡要了解單選按鈕
單選按鈕最早的設計模型，來源于收音機切換頻道的按鍵，當我們按下其中一個，其他的按鈕就會被彈出，按下的那個按鈕就成為了選中的狀态。單選按鈕可謂是泾渭分明，有你不能有我。
2. 單選按鈕的特點
單選按鈕的優點是，将所有資訊條件暴露給到使用者，它不像開關在使用上帶有去猜測、探索的必要。
1）每個選擇都非常直覺，如果希望使用者閱讀完所有選項，用它再好不過了。
2）拓展性更強，相較于開關、複選框的布爾值，單選能承載兩個或兩個以上選擇。
3）必須提供預設值，且預設值可以承載内容。
1）需要讓使用者明确知道兩者的差別，甚至需要強調兩個選項的不同
如果采用複選框，使用者需要在兩個差距較大的選項中去作思考。
2）開啟/關閉的單選狀态，使用複選框
複選框對于絕大多數使用者都是非常清楚，使用複選框在空間、視覺焦點更是更集中的，是以如果隻針對開啟/關閉的狀态，推薦使用複選框
3）每個選項都關聯内容時，使用單選按鈕
我們知道，如果預設選項設計的好，會讓很多人保持選擇預設選項。
下圖這個案例，如果采用複選框或者開關，使用者就不得不去探索思考開啟後是什麼，還要擔心了解開啟/關閉後帶來的影響，而對于絕大多數使用者來說，這邊的報名設定系統預設内容無需改動。需注意給使用者提供的預設選擇，一定要是安全、友善的選項。
4）較長需隐藏拆分的内容情況，使用單選按鈕
在表單設計中，如果遇到的内容需要重新組織或者拆分時，選擇使用單選按鈕。這樣不僅能夠做到表單資訊簡潔，也能夠提高使用者的浏覽效率。
5）垂直排列單選，資訊閱讀更佳
如果字段名稱較長，需要添加副标題加以說明，這時單選按鈕承載的資訊較多，使用垂直排列讓使用者有一緻的起始閱讀線，眼球轉動幅度最小，資訊擷取體驗更佳。如果标簽文字較少，也可以橫排不至于占用太多的垂直空間。
單選按鈕就是白天和黑夜，互不幹擾的條件，希望使用者閱讀完這兩個選項，使用單選按鈕再好不過了，考慮到單選按鈕提供的預設選項，提供的要是絕大多數使用者需要的，且是安全友善的，如果單選按鈕标簽文字過多，在排版時垂直排列拓展性更強，閱讀體驗更佳。
四、全文總結
1）開關更像是一個滅霸的戒指閃閃發光，不過在表單結構、各種控件内容較多，需要頁面清晰、避免過多的視覺突出，是以盡量避免讓無數個戒指閃亮中表單中。
2）複選框它更像是一個機器小能手，适用和拓展性極強，即可以單獨作為設定，不用配合其他送出按鈕，也可以作為表單填寫的一部分。當我們猶豫使用哪個元件時，選擇它一般不會錯。
3）單選按鈕就像是白天和黑夜，完全不見彼此。單選條件承載的資訊也較多，如果希望使用者對比感覺到兩者資訊的不同，那麼使用單選按鈕。
4）最後理論永遠隻是指導實踐的一部分，上述内容可能隻是在使用者認知和易用性之間，找到一個相對平衡的點，具體的使用場景情況，還是要具體問題具體分析。
參考文獻
Nielsen Norman Group
Human Interface Guidelines
http://www.woshipm.com/pd/374314.html
http://www.woshipm.com/ucd/1267601.html
本文由 @小高雜談 原創釋出于人人都是産品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協定